/*
 *  Dialog modale stile Lightbox.
 *	Accetta un elemento "container" e si aspetta di trovare al suo iterno un
 *  elemento con classe classPrefix+Label, ed uno con clase classPrefix+Content:
 *
 *		classPrefix+Container
 *			classPrefix+Label /
 *			classPrefix+Content
 *			/
 *		/
 *
 *	E' possibile specificare label e content alterantivi, anche se non sono figli 
 * 	del container.
 *
 *	E' possibile omettere il container se si specifica sia label che content.
 *
 *	E' possibile specificare una lista di immagini che verranno visualizzate in un slideshow
 *
 */

var mmfgLightbox = new Class({
	Implements: [Events, Options],
	
	options: {
		wContainer: null,
		wLabel: null,
		wContent: null,
		wDocumentContainer: null,
		labelClose: 'Chiudi',
		images: null,
		classPrefix: 'mmfgLightbox',
		overlayOpacity: '0.7',
		clickContentToClose: true,
		onOpen: function(){},
		onClose: function(){}
	},
	
	initialize: function(options){
		this.setOptions(options);

		this.wContainer = this.options.wContainer;
		if (this.wContainer) {
			this.wContainer.store('mmfgLightbox', this);
			this.wContainer.addClass(this._prefix('Container'));
		}
		
		this.wLabel = this.options.wLabel;
		if (!this.wLabel) {
			this.wLabel = this.wContainer.getChildren(this._dotPrefix('Label'))[0];
		}
		this.wLabel.addEvent('click', this.open.bind(this));
		
		this.wContent = this.options.wContent;
		if (!this.wContent) {
			this.wContent = this.wContainer.getChildren(this._dotPrefix( 'Content'))[0];
		}
		if (this.options.clickContentToClose && this.options.images == null) {
			this.wContent.addEvent('click', this.close.bind(this));
		}

		this.wClose = new Element('div', {
			'class': this._prefix('Close'),
			'html': this.options.labelClose
		}).injectBottom(this.wContent);
		this.wClose.addEvent('click', this.close.bind(this));
		
		this.wDocumentContainer = this.options.wDocumentContainer;
		if (!this.wDocumentContainer) {
			this.wDocumentContainer = $('main');
		}
		
		this.images = this.options.images;
		if (this.images) {		
			this.images_index = 0;
			this._loaded_images = {};		
			
			this.wNext = new Element('div', {'class': this._prefix('Next')}).setStyle('visibility', 'hidden');
			this.wNext.injectBottom(this.wContent);
			this.wNext.addEvent('click', this.nextImage.bind(this));			
			new Element('div', {'class': this._prefix('Icon')}).injectBottom(this.wNext);
			
			this.wPrev = new Element('div', {'class': this._prefix('Prev')}).setStyle('visibility', 'hidden');
			this.wPrev.injectBottom(this.wContent);
			this.wPrev.addEvent('click', this.prevImage.bind(this));
			new Element('div', {'class': this._prefix('Icon')}).injectBottom(this.wPrev);
		}
	},

	open: function() {	
		try {window.scrollTo(0,0);
		} catch (e) {/**/}

		this.closing = this.closeByEsc.bind(this);
		
		document.addEvent("keydown", this.closing);

		this.wOverlay = new Element('div', {
				id: this._prefix('Overlay')
			}).injectBottom(this.wContent.parentNode);
		this.wOverlay.setStyles({'opacity' : '0.0', 'z-index': '10010'});
		this.wOverlay.addEvent('click', this.close.bind(this));
		
		this.wContent.setStyles({'display': 'block', 'opacity': '0.0',  'z-index': '10100'});
		
		if (this.images) {
			this.images_index = 0;
			this._load_images();
		}		
		else {
// 			var img = this.wContent.getElement("img");
// 			this.wContent.setStyles(img.getStyles("width", "height"));
			this._position();
		}
		
		var ofx = new Fx.Tween(this.wOverlay);
		ofx.start('opacity', ['0.0', this.options.overlayOpacity]);

		var cfx = new Fx.Tween(this.wContent, {'onComplete': function() {
			this.fireEvent('onOpen');
		}.bind(this)});
		cfx.start('opacity', ['0.0', '1.0']);
	},
	
	close: function() {
		var fx = new Fx.Tween(this.wOverlay, {
			'duration': 'short',
			'onComplete': function() {
				if ($(this._prefix('Overlay'))) {
					$(this._prefix('Overlay')).dispose();
				}
			}.bind(this)
		});
		fx.start('opacity', [this.options.overlayOpacity, '0.0']);
		
		var cfx = new Fx.Tween(this.wContent, {
			'duration': 'short',
			'onComplete': function() {
				this.wContent.setStyle('display', 'none');	
				this.fireEvent('onClose');
			}.bind(this)
		});
		cfx.start('opacity', ['1.0', '0.0']);

		document.removeEvent("keydown", this.closing);
		
	},
	
	closeByEsc: function(ev){
		if (ev.key == 'esc'){
			this.close();
		}
	},
	
	nextImage: function () {
		this.images_index++;
		this._load_images();
	},

	prevImage: function () {
		this.images_index--;
		this._load_images();
	},
	
	_load_images: function() {
		this.wContent.getChildren('img').setStyle('display', 'none');			
		if (this._loaded_images[this.images[this.images_index]]) {
	 		var img = this._loaded_images[this.images[this.images_index]];
				img.setStyle('display', 'block');

			this.wContent.setStyles(img.getStyles("width", "height"));
			this._image_navigation();
			this._position();			
		}
		else {
//			this._showLoading();
			var img = new Asset.image( this.images[this.images_index], {
				onload: function(){
					this._hideLoading();
					this._image_navigation();
					img.inject(this.wContent);
					this._loaded_images[this.images[this.images_index]] = img;
					this.wContent.setStyles(img.getStyles("width", "height"));
					this._position();
				}.bindWithEvent(this)
			});	
		}		
	},
	
	_image_navigation: function() {
		if (this.images_index < this.images.length-1) {
			this.wNext.setStyle('visibility', 'visible');
		}
		else {
			this.wNext.setStyle('visibility', 'hidden');
		}
		if (this.images_index > 0) {
			this.wPrev.setStyle('visibility', 'visible');
		}
		else {
			this.wPrev.setStyle('visibility', 'hidden');	
		}
	},
	
	_position: function() {
		var esize = this.wContent.getSize();
		var dsize = this.wDocumentContainer.getSize();
		var wsize = window.getSize();		
		var scsize = window.getScrollSize();
		var top = (wsize.y - esize.y) / 2;
		var left = (dsize.x - esize.x) / 2;		

		this.wContent.setStyles({
			'top': top > 0 ? top : 0,
			'left':  left > 0 ? left : 0
		});

		this.wOverlay.setStyles({
			'width': scsize.x,
			'height': scsize.y
		});
	},
	
	_showLoading: function() {
		this.wNext.setStyle('visibility', 'hidden');
		this.wPrev.setStyle('visibility', 'hidden');
		this.wClose.setStyle('visibility', 'hidden');
		this.wContent.addClass(this._prefix('Loading'));
		this._position();
	},	
	
	_hideLoading: function() {
		this.wContent.removeClass(this._prefix('Loading'));
		this.wClose.setStyle('visibility', 'visible');					
	},
		
	_prefix: function(string) {
		return this.options.classPrefix + string;
	},
	
	_dotPrefix: function(string) {
		return '.' + this._prefix(string);
	}
});