ImgFullscreen = new Class({
   	Implements : [Options,Events,Chain],
   
    options : {
		loading : {
			src :'template/images/loading.gif',
			height : 127,
			width : 287,
			opacity: 1
		},
		overlay:{
			bgImg:'template/images/bg-gris.jpg',
			bgColor:'#FFFFFF',
			opacity : 1,
		},
		fx :{
			interval : 200, 		//interval en miliseconde entre les annimation
			duration : 400,			//miliseconde
			zoom : 5 				//valeur en pourcentage	
		},
		img : {
			style : 'fullScreen', 	//not CSS STYLE
			margin : 40 			//valeur en pourcentage		
		}
	},	
	
	initialize: function(options){		
		this.setOptions(options);
		
		/*
		* Chargement de img loading et background
		*/ 
		var imgLoading = new Element('img',{ src: this.options.loading.src });
		var imgOverlay = new Element('img',{ src: this.options.overlay.bgImg });
		
		this.cache = []; //Liste des photos qui on était deja charger
		this.imgs = $$('[rel=imgFullscreen]'); 
		
		this.initOverlay();	
		this.initLoading();
		this.initImg();
		
		this.fx = {
			overlay:	new Fx.Tween(this.overlay, {property: "opacity", duration: this.options.fx.duration, link:'cancel'}).set(0),
			loading:	new Fx.Tween(this.loading, {property: "opacity", duration: this.options.fx.duration, link:'cancel'}).set(0),
			img: 		new Fx.Morph(this.img, {duration: this.options.fx.duration, link:'cancel' }).set(0)
		};

		this.initEls();
    },
	
	initOverlay:function(){
		
		this.overlay = new Element("div", {
			id: 'photoOverlay',
			styles :{
				'position':'absolute',
				'z-index':99,
				'top': 0,
				'left': 0,
				'width': '100%',
				'background': this.options.overlay.bgColor+' url('+this.options.overlay.bgImg+') center center',
				'opacity': this.options.overlay.opacity
			}
		}).inject($(document.body));
		
		this.overlay.addEvent("click", function(e) {
			this.hide();
		}.bind(this))	
	
	},
		
	initImg:function(){
		
		this.img = new Element("img", {
			styles :{
				'position':'absolute',
				'z-index':101,
				'left': 0,
				'top': 0
			}
		}).inject(this.overlay);
		
		this.img.addEvent("click", function(e) {
			this.hide();
		}.bind(this))	
	
	},
	
	initLoading:function(){
		
		this.loading = new Element("div", {
			id: 'photoLoading',
			styles :{
				'position':'absolute',
				'z-index':100,
				'left': 0,
				'top': 0,
				'width': this.options.loading.width+'px',
				'height': this.options.loading.height+'px',
				'background': 'url('+this.options.loading.src+') no-repeat center center',
				'opacity': 0
			}
		}).inject(this.overlay);
			
	},
												
	
	initEls: function(){
		
		this.imgs.each(function(el) { 
			el.setStyle('cursor','pointer');
			el.set('title','Cliquez pour afficher en plein écran');
			el.addEvent("click", function(e) {
				var source = el.get('src').substring(0,el.get('src').indexOf("?",0));
				this.load(source);
			}.bind(this))	
						
		}.bind(this))
    
    },
	
	load: function(source) {
		this.img.set('src','');
		var size = window.getSize();
		var margin = this.options.img.margin;
		source += "?h="+(size.y - ((size.y*margin)/100))+"&w="+(size.x - ((size.x*margin)/100))+"&style="+this.options.img.style;
		
		this.showOverlay();
		
		if(this.cache.indexOf(source) >= 0){
			 
			 (function(){this.showImg(source)}.bind(this)).delay(this.options.fx.duration + this.options.fx.interval); 	
		
		}else{
		
			this.showLoading.delay(this.options.fx.duration+this.options.fx.interval, this);

			var preload = new Element('img',{src: source});
			preload.addEvent('load',function(){
				this.cache.push(source); 
				(function(){ this.fx.loading.start(0) }.bind(this)).delay(this.options.fx.duration + this.options.fx.interval);
				(function(){ this.showImg(source) }.bind(this)).delay((this.options.fx.duration*2) + this.options.fx.interval);
			}.bind(this))  
					
		}		

	},
	
	showOverlay: function() {
	 
		//overlay
		this.overlay.setStyles({
			display:"block",
			top: 0,
			height: window.getScrollSize().y, 
			'background-position':"40% "+(window.getScrollTop() -30)+'px'
		});	
		
		this.fx.overlay.start(this.options.overlay.opacity);
	 
	},
	
	showLoading: function(chain) {
							 
		var size = {y:this.options.loading.height, x:this.options.loading.width};
		var sizeW = window.getSize();
		
		this.loading.setStyles({
			'top':window.getScrollTop() + (sizeW.y/2)-(size.y/2) + "px",
			'left':(sizeW.x/2)-(size.x/2) + "px"
		});	
		
		this.fx.loading.start(this.options.loading.opacity);		
	}, 
	 
	showImg: function(source) {
		this.img.setStyles({width : '',height : ''});
		 
		this.img.set('src',source);	
		
		var zoom =  this.options.fx.zoom; 
		var size = this.img.getSize();
		
		var sizeW = window.getSize();
	
		var pos = {
			top : window.getScrollTop() + (sizeW.y/2)-(size.y/2),
			left : (sizeW.x/2)-(size.x/2)
		};
		
		this.img.setStyles({
			opacity : 0,
			top : pos.top - ((size.y*(zoom/2))/100),
			left : pos.left - ((size.x*(zoom/2))/100),
			height : size.y + ((size.y*zoom)/100),	
			width : size.x + ((size.x*zoom)/100)
		});	
		
		this.fx.img.start({
			opacity : 1,
			top : pos.top,
			left : pos.left,
			height : size.y,	
			width : size.x
		});		
		
	}, 
	
	hide: function() {
		
		var zoom =  this.options.fx.zoom; 
		var size = this.img.getSize();
		var sizeW = window.getSize();
		var pos = {
			top : window.getScrollTop() + (sizeW.y/2)-(size.y/2),
			left : (sizeW.x/2)-(size.x/2),
		};
		
		this.fx.img.start({
			top : pos.top + ((size.y*(zoom/2))/100),
			left : pos.left + ((size.x*(zoom/2))/100),
			height : size.y - ((size.y*zoom)/100),	
			width : size.x - ((size.x*zoom)/100), 
			opacity : 0
		}).chain(
			function() {
		    	this.fx.overlay.start(0);
			}.bind(this)
		)

	}
	
});	   



window.addEvent('domready', function() {
	
	var imgFullscreen = new ImgFullscreen();

});