var clrz_Lb = new Class({


	options : {
		items:'.list li a',
		closeText:"Fermer",
		containerW:300,
		containerH:400,
		webservice:''
	},
	
	initialize :function(options){
		
		this.setOptions(options);
		this.centerW = (window.getHeight()/2)+window.getScrollTop();
		this.containerCenter = (window.getWidth().toInt()/2)-(this.options.containerW/2);
		
		this.divover = new Element('div', {'styles': {'cursor':'pointer','display': 'block', 'background-color': 'black','position':'absolute','top':'0px','left':'0px','z-index':1000,'width':window.getWidth(),'margin-top':this.centerW,'opacity':0 }}).inject(document.body,'top');		
		this.divover_fx = new Fx.Styles(this.divover, {duration: 600, wait: false,transition: Fx.Transitions.Quart.easeInOut});
		this.divfermer = new Element('div', {'styles': {'cursor':'pointer','display': 'block', 'color':'#ffffff','position':'absolute','z-index':1000,'top':(window.getScrollTop()+80),'left':this.containerCenter,'width':16,'height':16,'opacity':0 }}).setHTML(this.options.closeText).inject(this.divover,'after');
		this.divfermer_fx = new Fx.Styles(this.divfermer, {duration: 600, wait: false,transition: Fx.Transitions.Quart.easeInOut});
		this.divcontainer = new Element('div', {'class':'clrz_divover','styles': {'z-index':1000,'overflow':'hidden','display': 'block', 'position':'absolute','top':(window.getScrollTop()+80),'left':this.containerCenter,'width':this.options.containerW,'height':this.options.containerH,'opacity':0 }});
		this.divcontainer_fx = new Fx.Styles(this.divcontainer, {duration: 600, wait: false,transition: Fx.Transitions.Quart.easeInOut});
		this.divcontainer.inject(this.divover,'after');
		this.setup();
		this.initClosing(); 
	},
	
	setup : function(){
		
		var myclass = this;
		
		

		
		
		$$(this.options.items).each(function(el,i){
			
			
		el.addEvent('click',function(e){
		
			var myserver ='';
			if(myclass.options.webservice=='')
			myserver = this.getProperty('href');
			else
			myserver = myclass.options.webservice;
			
			new Event(e).stop();
			
			myclass.letsmoove();
			
			var args = Object.toQueryString({ajax_single: true});

			new Ajax( myserver, {update:myclass.divcontainer,method: 'post',data:args,onComplete:function()
					{
							myclass.fireEvent('onLoadComplete'); 
							myclass.loadCompleted();
						
					}
			}).request();
			
			
			
		})	
			
			
			
		});
		
		
		
	},
	loadCompleted : function() {
		
		var myclass = this;
		
		$$('.clrz_closeBtn').addEvent("click",function(e){	myclass.destruct();	});		
		
	
		
		
	},
	
	letsmoove : function(){
		var myclass = this;
		this.divover.setStyle('display','block');
		this.divfermer.setStyle('display','block');
		this.divcontainer.setStyle('display','block');
		
	this.divover_fx.set({'height':window.getScrollHeight(),'margin-top':0,'margin-left':0});	
	this.divover_fx.start({'opacity':[0,.8],'width':[0,window.getWidth().toInt()]}).chain(function()
		{
			 
			 
			 myclass.divcontainer_fx.start({'opacity':1,'left':[0,myclass.containerCenter],'margin-top':0}).chain(function(){
				 myclass.fireEvent('onMoveComplete'); 
				 myclass.divfermer_fx.start({'top':(window.getScrollTop()+80)-16,'opacity':1});
				 
				 });
		 
		 });	
		
		
		
	},
	
	
	initClosing : function(){
		
		var myclass = this;
		
		
		
		
	this.divover.addEvent("click",function(e){	myclass.destruct();	});	
	this.divfermer.addEvent("click",function(e){	myclass.destruct();		});	
	
	
		
		
	},
	
	destruct : function(){
		var myclass = this; 
		document.body.setStyle('overflow-x','hidden');
	new Fx.Styles(this.divfermer, {duration: 600, wait: false,transition: Fx.Transitions.Quart.easeInOut}).start({'opacity':0}).chain(function()
					{
						myclass.divcontainer_fx.start({'opacity':0,'left':window.getWidth().toInt()}).chain(function()
						{
							myclass.divover_fx.start({'width':0,'opacity':0,'margin-left':window.getWidth().toInt()}).chain(function(){ myclass.elreset(); });
						});
					});	
		
		
		
	},
	elreset : function(){
		document.body.setStyle('overflow-x','auto');
		this.divover.setStyle('display','none');
		this.divfermer.setStyle('display','none');
		this.divcontainer.setStyle('display','none');
		this.divcontainer.setHTML('');
	}
	
	
});
clrz_Lb.implement(new Events, new Options);