var PopupGallery = new Class({
	Implements: [Options],
	
	options: {
		lang: 'fr',
		viewerId: 'PhotoView',
		viewerSelector: 'div.photoview',
		thumbOverlaySelector: 'a.overlay',
		thumbnailSelector: 'img.thumbnail',
		btnNextSelector: 'a.next',
		btnPreviousSelector: 'a.previous',
		thumbnailDimensions: [82, 82],
		viewerDimensions: [460, 320]
	},
	
	initialize: function(index_id, options){
		this.setOptions(options);
		var options = this.options;
		
		var document_size = document.getSize();
		
		this.index = $(index_id);
		this.viewer = $(this.options.viewerId);
		
		this.mask = this.viewer.getElement('div.mask');
		this.content = this.viewer.getElement('div.content');
		this.title = this.viewer.getElement('p.title');
		this.images = new Hash();
		
		// close button
		this.btn_close = this.viewer.getElement('img.close');
		this.btn_close.addEvent('click', this.close.bind(this));
		
		// navigation
		this.viewer.getElement(this.options.btnNextSelector).addEvent('click', this.next.bind(this));
		this.viewer.getElement(this.options.btnPreviousSelector).addEvent('click', this.previous.bind(this));
		
		var viewer_size = {x: 478, y: 344};
		
		var contentFx = new Fx.Tween(this.content, {duration: 168});
		
		// gallery (only for data storage)
		this.gallery = [];
		
		// all thumbnail emlements
		this.thumbnails = [];
		
		// adding click event to thumbnails
		this.thumbOverlay = this.index.getElements(this.options.thumbOverlaySelector);
		//alert('Hello');
		
		
		//var content = $('content');
		//this.baseRect_pos = content.getPosition();
		
		this.background = new Element('div');
		this.background.setStyles({
			position: 'absolute',
			backgroundColor: '#FFFFFF',
			opacity: 0,
			zIndex: 1,
			width: document_size.x,
			height: 0
		});
		this.background.addEvent('click', this.close.bind(this));
		
		var body = $$('body');
		body.grab(this.background);
		
		// photo index
		this.index_pos = this.index.getPosition();
		this.index_size = this.index.getSize();
		
		this.thumbOverlay.each(function(el, i){
			this.currentIndex = i;	
			
			this.thumbnails[i] = el.getElement(this.options.thumbnailSelector);
			
			this.gallery[i] = {
				src: el.get('href'),
				alt: this.thumbnails[i].get('alt'),
				id: index_id + 'Image' + (i+1),
				legend: ''
			};
			
			var legend = el.get('title');
			if (!legend){
				legend = '---';
			}
			this.gallery[i].legend = new Element('p', {html: legend});
			this.gallery[i].legend.addClass('legend');
			
			var scaleFx = new Fx.Morph(this.viewer, {
				duration: 320,
				fps: 30,
				transition: Fx.Transitions.Sine.easeOut,
				onComplete: this.view.bind(this).pass(i)
			});
			
			
			var afterFx = function(){
				this.background.setStyles({
					display: 'block',
					opacity: 0.1,
					/*top: window.getScroll().y,*/
					top: 0,
					left: 0,
					height: window.getScrollSize().y
				}).fade(0.7);
			};
				
			var fn = function(event){
				event.stop();
				this.reset();
				
				this.pos = this.thumbnails[i].getPosition();
				this.size = this.thumbnails[i].getSize();
					
				this.new_pos = [
					Math.round((document_size.x - viewer_size.x) / 2),
					Math.round((document_size.y - viewer_size.y) / 2 + window.getScroll().y)
				];
				
				this.viewer.setStyles({
					position: 'absolute',
					left: this.pos.x,
					top: this.pos.y,
					width: this.size.x - 2,
					height: this.size.y - 2,
					display: 'block',
					zIndex: 100
				});
				
				scaleFx.start({
					'opacity': [0.3, 1],
					'height': viewer_size.y,
					'width': viewer_size.x,
					'top': [this.pos.y, this.new_pos[1]],
					'left': [this.pos.x, this.new_pos[0]]
				});
				
				body.grab(this.viewer);
				
				afterFx.bind(this).delay(340);
			};
			
			el.addEvent('click', fn.bind(this));
			
		}, this);
		
		this.count = this.gallery.length;
	},
	
	close: function(){
		this.viewer.setStyle('display', 'none');
		this.background.setStyle('display', 'none');
	},
	
	reset: function(){
		this.mask.setStyle('display', 'none');
		this.content.empty().setStyle('display', 'none');
		this.title.empty();
		
		return this;
	},
	
	view: function(i){
		
		this.currentIndex = i;
		
		for(var j = 0; j < this.count; j++){
			if(j == i - 1){
				this.nextId = this.gallery[j].id;
			} else if(j == i + 1){
				this.prviousId = this.gallery[j].id;
			}
		}
		
		if(!this.images.has(this.gallery[i].id)){
			this.images.include(
				this.gallery[i].id,
				new Asset.image(this.gallery[i].src, {
					id: this.gallery[i].id,
					alt: this.gallery[i].alt,
					onload: function(){
						this.loadsImage = true;
						//content.appendText('Loading ...');
					}
				})
			);
		}
		this.mask.setStyle('display', 'block');
		
		//alert(this.gallery[i].legend.length);
		
		this.content.adopt(this.images.get(this.gallery[i].id), this.gallery[i].legend);
		
		this.content.setStyles({
			display: 'block',
			opacity: 0
		}).fade(1);
		
		var caption = '';
		if (this.gallery[i].alt){
			caption = this.gallery[i].alt + ' - ';
		}
		
		this.title.empty().appendText(caption + 'Photo ' + (i+1) + ' / ' + this.count);
	},
	
	next: function(event){
		event.stop();
		if(this.currentIndex < (this.count - 1)){
			this.currentIndex = this.currentIndex + 1
		} else {
			this.currentIndex = 0;
		}
		
		this.reset().view(this.currentIndex);
	},
	
	previous: function(event){
		event.stop();
		if(this.currentIndex > 0){
			this.currentIndex = this.currentIndex - 1
		} else {
			this.currentIndex = this.count - 1;
		}
		
		this.reset().view(this.currentIndex);
	},
	
	loadsImage: false
});