var GalleryManager = {
	
	galleries: [],
	layer: null,
	topDiv: null,
	
	init: function() {
		this.layer = $('transparent-layer');
		this.addLayerBehaviour();
		this.addResizeScrollBehaviour();
		this.setGalleryView();
		
		this.createTopDiv();
			
		$$('div.photo-gallery').each( function( gallery ) {
			gallery.inject( this.topDiv );
			this.galleries[this.galleries.length] = new Gallery( gallery )
		}.bind(this) );
	},
	
	createTopDiv: function() {
		this.topDiv = new Element('div', {
			'id': 'photo-gallery-container'
		});
		this.topDiv.inject( $('transparent-layer'), 'after' );
	},
	
	getGallery: function( number ) {
		return this.galleries[ number ];
	},
	
	setLayerHeight: function() {
		this.layer.setStyle('height', window.getScrollHeight() );
	},
	
	addLayerBehaviour: function() {
		this.layer.addEvent('mousedown', function() {
			this.galleries.each( function( gallery ) {
				gallery.close();
			})
		}.bind(this));
	},
	
	showLayer: function() {
		this.layer.setStyle('display', 'block');
		this.layer.fade(0,.7);
	},
	
	hideLayer: function() {
		this.layer.fade(.7,0);
	},
	
	addResizeScrollBehaviour: function() {
		window.addEvent("scroll", this.setGalleryView.bind(this));
		window.addEvent("resize", this.setGalleryView.bind(this));
	},
	
	setGalleryView: function() {
		this.galleries.each( function( gallery ) {
			gallery.setGalleryView();
		});
		this.setLayerHeight();
	}
}

var Gallery = new Class({
	
	_element:null,
	layer:null,
	gallery: null,
	paginator:null,
	descriptionBar: null,
	currentPosition: 0,
	itemWrapper: null,
	itemScroller: null,
	thumbScroller: null,
	items: null,
	thumbs: null,
	hasThumbs: false,
	
	initialize: function( _gallery ) {
		this._element = $(_gallery);
		this.setGalleryView();
		
		this.gallery = this._element.getElement('.photo-wrapper');
		this.items = this._element.getElements('.item img');
		this.thumbs = this._element.getElements('.thumb a');
		
		this.hasThumbs = this.thumbs.length > 0;
		
		if( this.hasThumbs )
			this._element.getElement('.thumb-scroller').setStyle('width', (this.thumbs.length)*86);
			
		this._element.getElement('.item-wrapper').setStyle('width', (this.items.length)*640);
		
		this.itemScroller = new Fx.Scroll( this._element.getElement('div.photo-wrapper') );
		
		if( this.hasThumbs )
			this.thumbScroller = new Fx.Scroll( this._element.getElement('div.thumb-wrapper') );
		
		this.addCloseButton();
		this.addPaginator();
		this.addDescriptionBar();
		
		if( this.hasThumbs ) {
			this.addThumbEvents();
			this.addNavigationButtons();
		}
		
		if( this.items.length == 1 ) {
			this.toCompact();
		}
	},
	
	setGalleryView: function() {
		this._element.setStyle('margin-top', window.getScrollTop() - 30 );
	},
	
	addCloseButton: function() {
		var closeBtn = new Element('div', {
			'class': 'close-btn',
			'events': {
				'click': function(e) {
					e = new Event( e ).stop();
					this.close();
				}.bind(this)
			}
		});
		closeBtn.inject( this.gallery, 'before' );
	},
	
	addPaginator: function() {
		this.paginator = new Element('div', {
			'class': 'paginator',
			'html': "1 van " + this.items.length
		});
		this.paginator.inject( this.gallery, 'before' );
	},
	
	addDescriptionBar: function() {
		new Element('div', {
			'class': 'description-bar'
		}).inject( this.gallery, 'before' );
		
		new Element('div', {
			'class': 'gallery-title',
			'html': this._element.getElement('.h3-wrapper h3 span').innerHTML
		}).inject( this.gallery, 'before' );
		
		new Element('div', {
			'class': 'photo-description'
		}).inject( this.gallery, 'before' );
	},
	
	updatePhotoDescription: function() {
		this._element.getElement('.photo-description').innerHTML = this.items[this.currentPosition].getAttribute('alt');
	},
	
	updatePaginator: function() {
		this.paginator.innerHTML = (this.currentPosition+1) + " van " + this.items.length;
	},
	
	open: function( activeImage ) {
		var pos = activeImage || 0;
		GalleryManager.showLayer();
		this._element.setStyle('display','block');
		this.currentPosition = pos;
		this.itemScroller.set( this.currentPosition*640,0 );
		this.updateActiveItem();
		if( this.hasThumbs )
			this.thumbScroller.toElement( this.thumbs[pos] );
	},
	
	toCompact: function() {
		this.paginator.setStyle('display','none');
		if( this.hasThumbs )
			this._element.getElement('.navigation-bar').setStyle('display', 'none');

		this._element.getElement('.wrapper').tween('height', 480 );
		this._element.getElement('.wrapper').addClass('compact');
	},
	
	close: function() {
		GalleryManager.hideLayer();		
		this._element.setStyle('display','none');
	},
	
	showNextHover: function( state ) {
		var scrollSize = this.thumbScroller.element.getSize().x;
		var scrolledWidth = this.thumbScroller.element.getScroll().x;
		var totalWidth = this.thumbScroller.element.getScrollSize().x;
		
		var stateSize = state == true ? 86 : 0;
		
		return scrollSize + scrolledWidth < (totalWidth-stateSize);
	},
	
	addNavigationButtons: function() {
		
		var currentGallery = this;
		
		var nextBtn = new Element('a', {
			'id': 'next-btn',
			'class': 'nav-btn',
			'events': {
				'mousedown': function(e) {
					e = new Event( e ).stop();
					currentGallery.toNextThumb();
			
					if( !currentGallery.showNextHover(true) ) {
						this.removeClass('hover');
						this.addClass('inactive');
					}
					else {
						this.removeClass('inactive');
					}
				},
				'mouseover': function(e) {
					if( currentGallery.showNextHover(false) ) {
						this.removeClass('inactive');
						this.addClass('hover');
					}
					else {
						this.addClass('inactive');
					}
				},
				'mouseout': function(e) {
					this.removeClass('hover');
				}
			}
		});
		
		var previousBtn = new Element('a', {
			'id': 'previous-btn',
			'class': 'nav-btn',
			'events': {
				'mousedown': function(e) {
					e = new Event( e ).stop();
					currentGallery.toPreviousThumb();
					if( currentGallery.thumbScroller.element.getScroll().x -86 == 0 ) {
						this.removeClass('hover');
						this.addClass('inactive');
					}
					else {
						this.removeClass('inactive');
					}
				},
				'mouseover': function(e) {
					if( currentGallery.thumbScroller.element.getScroll().x > 0 ) {
						this.removeClass('inactive');
						this.addClass('hover');
					}
					else {
						this.addClass('inactive');
					}
				},
				'mouseout': function(e) {
					this.removeClass('hover');
				}
			}
		});
		
		var previousPosition = this._element.getElement('.thumb-wrapper .thumb');
		var nextPosition = this._element.getElement('.thumb-wrapper .clearer');
		var thumbBar = this._element.getElement('.thumb-wrapper');
		
		nextBtn.inject( thumbBar, 'after' );
		previousBtn.inject( thumbBar, 'before' );
	},
	
	addThumbEvents: function() {
		var i = 0;
		var currentGallery = this;
		this._element.getElements('.thumb a').each( function(node) {
			node.setAttribute('pos', i );
			node.removeAttribute('href');
			node.addEvent('mousedown', function(e) {
				e = new Event( e ).stop();
				currentGallery.deactivateThumb();
				currentGallery.currentPosition = parseInt(this.getAttribute('pos'));
				currentGallery.updateActiveItem();
			});
			i++;
		});
	},
	
	toNextThumb: function() {
		this.updateThumbSlider(true);
	},
	
	toPreviousThumb: function() {
		this.updateThumbSlider(false);
	},
	
	updateActiveItem: function() {
		if( this.hasThumbs )
			this.activateThumb();
		this.itemScroller.start( this.currentPosition*640,0 );
		this.updatePaginator();
		this.updatePhotoDescription();
	},
	
	activateThumb: function() {
		this.thumbs[this.currentPosition].addClass('active');
	},
	
	deactivateThumb: function() {
		this.thumbs[this.currentPosition].removeClass('active');
	},
	
	updateThumbSlider: function(direction) {
		var pos = this.thumbScroller.element.getScroll().x;
		if( direction == false ) {
			this.thumbScroller.start(pos-86,0);
		}
		else {
			this.thumbScroller.start(pos+86,0);
		}
	}
});

window.addEvent("load", GalleryManager.init.bind(GalleryManager));

window.addEvent("load", function() {
	$$('#open-gallery').addEvent('click', function(e) {
		e = new Event(e).stop();
		GalleryManager.getGallery(0).open();
	});
	$$('#open-gallery-2').addEvent('click', function(e) {
		e = new Event(e).stop();
		GalleryManager.getGallery(1).open();
	});
});