/*
                     __                      ___                           __                    
         __         /\ \__                  /\_ \                         /\ \     __            
 __  __ /\_\   _ __ \ \ ,_\  __  __     __  \//\ \       __       __      \_\ \   /\_\     ___   
/\ \/\ \\/\ \ /\`'__\\ \ \/ /\ \/\ \  /'__`\  \ \ \    /'_ `\   /'__`\    /'_` \  \/\ \   / __`\ 
\ \ \_/ |\ \ \\ \ \/  \ \ \_\ \ \_\ \/\ \L\.\_ \_\ \_ /\ \L\ \ /\ \L\.\_ /\ \L\ \  \ \ \ /\ \L\ \
 \ \___/  \ \_\\ \_\   \ \__\\ \____/\ \__/.\_\/\____\\ \____ \\ \__/.\_\\ \___,_\ _\ \ \\ \____/
  \/__/    \/_/ \/_/    \/__/ \/___/  \/__/\/_/\/____/ \/___L\ \\/__/\/_/ \/__,_ //\ \_\ \\/___/ 
                                                         /\____/                  \ \____/       
                                                         \_/__/                    \/___/        
mooVirtualImgbox
repose sur mootools 1.2 baïe christopher wait aka virtualgadjo
première mouture 03/2008
révision 04/2008 gestion des légendes en utilisant la balise title des liens
révision 04/2008 fermeture du masque avec fade out tant qu'à faire...
révision 05/2008 un poil de nettoyage
à venir : dimensionnement du masque pour pouvoir gérer des images plus grande que la fenêtre
(à venir peut-être des next/prev)

Have swing
*/
var mooVirtualImgbox = new Class({

	Implements: [Events, Options, Chain],

	options: {
		maskFadeDuration	: 400,
		resizeDuration		: 600,
		resizeTransition	: Fx.Transitions.sineInOut,
		initialWidth		: 200,
		initialHeight		: 200,
		showLegend			: true,
		legendDuration		: 400
	},

	initialize: function(options){

		this.setOptions(options);

		$$('a').each(function(el){
			if ( (el.getProperty('rel')) && (el.getProperty('rel').test(/^virtualImgbox/i)) ){
				el.addEvent('click', function(e){
					e.preventDefault();
					//tout de suite pour éviter un doubleclick malencontreux...
					this.masqueAppear();

					this.bigImg = new Asset.image(el.getProperty('href'), {
						'id': 'virtualImg',
						onload: function(){
							this.setStuff(el);
						}.bind(this)
					});

				}.bind(this));
			}
		}.bind(this));

		//fermer avec escape, tradition, tradition...
		window.document.addEvent('keydown',function(e){
			if(e.key == 'esc'){ this.closeAll(); };
		}.bind(this));
	},
	
	setStuff: function(el){
		this.bigImg.setStyle('opacity', 0);
		this.createImgDiv();
		this.bigImg.inject($('virtualImgDiv'), 'inside');
		this.imgWidth	= this.bigImg.getSize().x;
		this.imgHeight	= this.bigImg.getSize().y;
		this.finalLeft	= ( ( (window.getScroll().x + window.getSize().x) - (this.imgWidth + 20) ) / 2 ).toInt();
		this.resizeFx.start({
			'left'		: this.finalLeft,
			'width'		: this.imgWidth
		}).chain(
			function(){
				this.resizeFx.start({ 'height': this.imgHeight })
			}.bind(this)
		).chain(
			function(){
				this.imgFx = new Fx.Tween(this.bigImg, {
					duration	: 400,
					onComplete	: function(){
						if (this.options.showLegend == true){
							if (el.getProperty('title')) {
								this.legend = el.getProperty('title');
								this.createLegend();
							}
						}
					}.bind(this)
				});
				this.imgFx.start('opacity', 1);
			}.bind(this)
		);
		this.closeImg();
	},

	masqueAppear: function(){
		this.masque = new Element('div', {
			'id'		: 'virtualImgMask',
			'styles'	: {
				'position'	: 'absolute',
				'z-index'	: 260,
				'left'		: window.getScroll().x,
				'top'		: window.getScroll().y,
				'width'		: window.getSize().x,
				'height'	: window.getSize().y,
				'opacity'	: 0
			},
			'events'	: {
				'click'		: function(){
					this.closeAll();
				}.bind(this)
			}
		}).inject(document.body, 'top');

		this.maskFx = new Fx.Tween(this.masque, { duration: this.options.maskFadeDuration }).start('opacity', 0.8);
	},

	createImgDiv: function(){
		this.imgContainer = new Element('div', {
			'id'		: 'virtualImgDiv',
			'styles'	: {
				'width'			: this.options.initialWidth,
				'height'		: this.options.initialHeight,
				'position'		: 'absolute',
				'top'			: window.getScroll().y + (window.getSize().y / 20),
				'left'			: ( (window.getScroll().x + window.getSize().x) - (this.options.initialWidth + 20) ) / 2,
				'border-width'	: '10px',
				'border-style'	: 'solid',
				'z-index'		: 280
			}
		}).inject(document.body, 'inside');

		this.resizeFx = new Fx.Morph(this.imgContainer, { duration : this.options.resizeDuration });
	},

	closeImg: function(){
		this.closeLink = new Element('a', {
			'id'		: 'virtualImgCloseLink',
			'href'		: '#',
			'styles'	: {
				'display'		: 'block',
				'width'			: 40,
				'height'		: 40,
				'position'		: 'absolute',
				'top'			: -20,
				'right'			: -20,
				'z-index'		: 300
			},
			'events'	: {
				'click'			: function(e){
					new Event(e).stop();
					this.closeAll();
				}.bind(this)
			}
		}).inject(this.imgContainer, 'inside');
	},

	createLegend: function(){
		this.legendDiv = new Element('div', {
			'id'		: 'virtualBoxLegend',
			'html'		: this.legend
		}).inject(this.imgContainer, 'bottom');

		this.legendSlide	= new Fx.Slide('virtualBoxLegend', {
			duration	: this.options.legendDuration,
			onStart		: function(){
				this.imgContainer.setStyle('height', 'auto');
			}.bind(this)
		}).hide();
		this.legendSlide.slideIn();
	},

	closeAll: function(){
		if (this.masque){
			this.maskFx.start('opacity', 0);
			(function(){this.masque.dispose();}.bind(this)).delay(this.options.maskFadeDuration);
		}

		if (this.legendDiv)
		this.legendDiv.dispose();

		if (this.bigImg)
		this.bigImg.dispose();

		if (this.imgContainer)
		this.imgContainer.dispose();
	}

});