/*
mooVirtualImgbox spéciale sauter
repose sur mootools 1.2 baïe christopher wait aka virtualgadjo
*/
var mooVimgbox = new Class({

	Implements: [Events, Options, Chain],

	options: {
		maskFadeDuration	: 400,
		resizeDuration		: 600,
		imgFadeDuration     : 400,
		resizeTransition	: Fx.Transitions.sineInOut,
		initialWidth		: 200,
		initialHeight		: 200,
		showLegend			: true,
		legendDuration		: 400,
		maskOpacity         : 0.8,
		princDiv            : 'main'
	},

	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	: this.options.imgFadeDuration,
					onComplete	: function(){
						if (el.getProperty('title')) {
							this.legend = el.getProperty('title');
						}
						this.createLegend();
					}.bind(this)
				});
				this.imgFx.start('opacity', 1);
			}.bind(this)
		);
	},

	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');
		if ($(this.options.princDiv)) $('virtualImgMask').addClass($(this.options.princDiv).get('class'));
		this.maskFx = new Fx.Tween(this.masque, { duration: this.options.maskFadeDuration }).start('opacity', this.options.maskOpacity);
	},

	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'	: this.options.borderWidth,
				'border-style'	: 'solid',
				'z-index'		: 280
			}
		}).inject(document.body, 'top');

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

	closeImg: function(){
		this.closeLink = new Element('a', {
			'id'		: 'virtualImgCloseLink',
			'href'		: '#',
			'styles'	: {
				'display'       : 'block',
				'position'      : 'absolute',
				'right'         : 0,
				'top'           : 0,
				'z-index'       : 300,
				'opacity'       : 0
			},
			'events'	: {
				'click' : function(e){
					new Event(e).stop();
					this.closeAll();
				}.bind(this)
			}
		}).inject(this.legendDiv, 'top');
		this.closeLink.fade('in');
	},

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

		this.legendSlide	= new Fx.Slide('virtualBoxLegend', {
			duration	: this.options.legendDuration,
			onStart		: function(){
				this.imgContainer.setStyle('height', 'auto');
			}.bind(this),
			onComplete  : function(){
				this.closeImg();
			}.bind(this)
		}).hide();
		if ($('main')) this.legendDiv.addClass($('main').get('class'));
		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();
	}

});