ImgFullscreen = new Class({
   	Implements : [Options,Events],
   
    options : {
		loading : {
			src :'template/images/moophoto/loading.png',
			height : 63,
			width : 200,
			opacity: 1
		},
		overlay:{
			//bgImg:'template/images/bg_form_contact.jpg',
			bgColor:'#2e2e2e',
			opacity : 1
		},
		styleImg : 'fullScreen'
		
	},	
	
	initialize: function(options){		
		this.setOptions(options);
		
		this.imgs = $$('[rel=imgFullscreen]'); 
		
		this.initOverlay();	
		this.initLoading();
		this.initImg();
		
		this.fx = {
			overlay:	new Fx.Tween(this.overlay, {property: "opacity", duration: 200,link:'cancel'}).set(0),
			loading:	new Fx.Tween(this.loading, {property: "opacity", duration: 200,link:'cancel'}).set(0),
			img: 		new Fx.Tween(this.img, {property: "opacity", duration: 200,link:'cancel' }).set(0)
		};
		
		this.initEls();
		
    },
	
	initImg:function(){
		
		this.img = new Element("img", {
			styles :{
				'position':'absolute',
				'z-index':101,
				'left': 0,
				'top': 0
			}
		}).inject($(document.body));
		
		this.img.addEvent("click", function(e) {
			this.hide();
		}.bind(this))	
	
	},
	
	initOverlay:function(){
		
		this.overlay = new Element("div", {
			id: 'photoOverlay',
			styles :{
				'position':'absolute',
				'z-index':99,
				'left': 0,
				'width': '100%',
				'background': this.options.overlay.bgColor+' url('+this.options.overlay.bgImg+') no-repeat center center',
				'opacity': this.options.overlay.opacity
			}
		}).inject($(document.body));
		
		this.overlay.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($(document.body));
			
	},
												
	
	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','');
	
		this.showOverlay();
		this.showLoading();	

		var size = window.getSize();
		source += "?h="+(size.y-100)+"&w="+(size.x-100)+"&style="+this.options.styleImg;
		
		this.preload = new Asset.image(source, {
			id: 'myImage',
			title: 'myImage',
			onload: function(el){
				this.showImg(source);
			}.bind(this)
		});
	},
	
	showOverlay: function(el) {
	 
		//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(source) {
							 
		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.set('src',source);	
		var size = this.img.getSize();
		var sizeW = window.getSize();
		
		this.img.setStyles({
			'top':window.getScrollTop() + (sizeW.y/2)-(size.y/2) + "px",
			'left':(sizeW.x/2)-(size.x/2) + "px",
			'opacity':0
		});	
		
		this.fx.img.start(1);		
	}, 
	
	hide: function() {
		this.preload.onload = $empty;
		this.fx.overlay.start(0);
		this.fx.img.start(0);	 
		this.fx.loading.start(0);	

	}
	
});	   



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

});