var DrArrayImageViewer = new Class({
	initialize: function(tabimage,index,text) {
		
	
		var IE6 = false ;

		var strChUserAgent = navigator.userAgent; 
		var intSplitStart = strChUserAgent.indexOf("(",0); 
		var intSplitEnd = strChUserAgent.indexOf(")",0); 
		var strChMid = strChUserAgent.substring(intSplitStart, intSplitEnd); 

		if(strChMid.indexOf("MSIE 6") != -1) IE6 = true;
		
		
		
		
		if(!IE6)
		{		
			this.text = text;
			
			if(this.text==undefined)
				this.text=null;
			
			this.timeeffect = 300;
		
			this.fond = new Element('div', {
				'class' : 'fondDrArrayImageViewer'
			});
			
			this.conteneur = new Element('div', {
				'class' : 'conteneurDrArrayImageViewer'
			});
			
			this.compteur = new Element('div', {
				'id' : 'compteurDrArrayImageViewer'
			});
			
			this.textdiv = new Element('div', {
				'id' : 'textDrArrayImageViewer'
			});
			
			this.textdivfond = new Element('div', {
				'id' : 'fondtextDrArrayImageViewer'
			});
			
			this.textdivtext = new Element('div', {
				'id' : 'texttextDrArrayImageViewer'
			});
			
			
			this.textdivfond.setOpacity(0.5);
			this.textdiv.adopt(this.textdivtext);
			this.textdiv.adopt(this.textdivfond);
			
			
			this.textdiv.setStyle('height',0);
			this.textdiv.setOpacity(0);
			
			
			if(this.text)
			this.textdivtext.setText(this.text);
			
			this.conteneur.adopt(this.textdiv);
			
	
			this.loader = new Asset.image(get_Url_Full('Images', 'Public') + '/DrArrayImageViewer/loader.gif');
			this.loader.setStyle('position','absolute');
			this.loader.setStyle('top',0);
			this.loader.setStyle('left',0);
			this.conteneur.setStyle('top',getWindowHeight() -8);
			this.conteneur.setStyle('left',getWindowWidth()-8);
			this.loader.setStyle('border',0);
			this.conteneur.adopt(this.loader);
			
			
			
			
			this.rightarow = new Asset.image(get_Url_Full('Images', 'Public') + '/DrArrayImageViewer/right.png');
			this.leftarow = new Asset.image(get_Url_Full('Images', 'Public') + '/DrArrayImageViewer/left.png');
			this.closeico = new Asset.image(get_Url_Full('Images', 'Public') + '/DrArrayImageViewer/close.png');
			this.compteurimg = new Asset.image(get_Url_Full('Images', 'Public') + '/DrArrayImageViewer/compteur.png');
			
			this.rightarow.setProperty('id','rightarow');
			this.leftarow.setProperty('id','leftarow');
			this.closeico.setProperty('id','closeico');
			this.compteurimg.setProperty('id','compteur');
			
			this.decor = $$(this.rightarow,this.leftarow,this.closeico,this.compteurimg);
			this.decor.setOpacity(0);
			
			this.rightarow.addEvent('click',function(){this.next();}.bind(this));	
			this.leftarow.addEvent('click',function(){this.previous();}.bind(this));	
			
			
			this.closeico.addEvent('click',function(){this.close();}.bind(this));	
			
			this.first=true;
			this.index = index;
			
			
			
			this.tabimage= new Asset.images(tabimage, {
				    onComplete: function(){		
				    	
			    	var loadefect = this.loader.effect('opacity', {duration: this.timeeffect/2, transition: Fx.Transitions.linear});
			    	loadefect.start(0);
				    				    	
					this.tabimage.setOpacity(0);				
					this.conteneur.adopt(this.tabimage);
					this.conteneur.adopt(this.compteur);
					this.initAllPosition(true);				
					this.displayImage();				
					window.addEvent('resize',function(){
						this.initAllPosition(false);
						this.contefect.start({
							'top':(getWindowHeight()/2 - this.imagesize.y/2),
							'left':(getWindowWidth()/2 - this.imagesize.x/2),
							'width' :this.imagesize.x,
							'height':this.imagesize.y
						});
					}.bind(this));
					
					document.addEvent('keyup',function(e){
													
						switch(e.keyCode){
						
						case 37:
							var fx = this.leftarow.effects({duration:50,tranition:Fx.Transitions.Expo.easeIn});							
							fx.start({'width':[50],'height':[200],'top':[this.imagesize.y/2-100]}).chain(function(fx){								
								fx.start({'width':[40],'height':[160],'top':[this.imagesize.y/2-80]});								
							}.pass(fx,this));				
							this.previous();
							break;
						case 39:
							var fx = this.rightarow.effects({duration:50,tranition:Fx.Transitions.Expo.easeIn});							
							fx.start({'width':[50],'height':[200],'top':[this.imagesize.y/2-100]}).chain(function(fx){								
								fx.start({'width':[40],'height':[160],'top':[this.imagesize.y/2-80]});								
							}.pass(fx,this));
							this.next();
							break;
						case 27:this.close();
							break;
						
						}
						
					}.bind(this));
					
		    	}.bind(this)
			});
			
			
			this.fond.setOpacity(0);
			
			//this.fond.setStyle('height',window.getScrollHeight());
			
			this.fond.injectTop($(document.body));
			this.conteneur.injectTop($(document.body));
			
			
			var annim = this.fond.effect('opacity', {duration: this.timeeffect, transition: Fx.Transitions.linear});
			annim.start(0, 0.7);
			
			annim.addEvent('onComplete',function(){
				
				this.fond.addEvent('click',function(){this.close();}.bind(this));			
				
			}.bind(this));
		
		}
		else
		{
			var popup =	new popupDrImage(tabimage[index]);	
			
			
		}
		
		
		
		
	},
	close: function(){
		
		var tout= $$(this.fond,this.conteneur);
		
		var fx =new Fx.Elements(tout,{duration:200});
		fx.start({'0':{'opacity': [0]},'1':{'opacity': [1,0]}});
		
		fx.addEvent('onComplete',function(){this.removeAll();}.bind(this));
		
	},
	removeAll:function(){
		
		this.fond.remove();
		this.conteneur.remove();
	},
	displayImage:function(){
			
		this.compteur.setText((this.index+1)+"/"+this.tabimage.length);
		
		if(this.first)
		{	
	
			var myEffects = this.tabimage[this.index].effects({duration: this.timeeffect, transition: Fx.Transitions.linear,wait:false});
			myEffects.start({'opacity': [0, 1], 'width': [0, this.imagesize.x-10],"height":[0,this.imagesize.y-10]});
			
			this.contefect.start({
				'top':(getWindowHeight()/2 - this.imagesize.y/2),
				'left':(getWindowWidth()/2 - this.imagesize.x/2),
				'width' :this.imagesize.x,
				'height':this.imagesize.y
			});
			
			this.first =false;
		}
		else{
			
			this.tabimage[this.index].injectAfter(this.conteneur.getLast());
			
			var tmptab = $$(this.tabimage,this.conteneur);
			
			//console.log(tmptab);
			
			var fx = new Fx.Elements(tmptab, {duration: this.timeeffect, transition: Fx.Transitions.linear,wait:false});
			var o = {};
			
			
			
			tmptab.each(function(el, i) {
				if(i!=this.index )
				{		
					if(el.getStyle('opacity') !=0)
					o[i] = {'opacity': [0],'top':[this.imagesize.ecartY],'left':[this.imagesize.ecartX]};
				}
				else{
					
					o[i]={'opacity': [1],'top':[-this.imagesize.ecartY,0],'left':[-this.imagesize.ecartX,0]};
				}
			}.bind(this));
			
			o[tmptab.length-1]={	'top':(getWindowHeight()/2 - this.imagesize.y/2),
					'left':(getWindowWidth()/2 - this.imagesize.x/2),
					'width' :this.imagesize.x,
					'height':this.imagesize.y
				};
			
			
			
			fx.start(o);
			
			
			
			fx.addEvent('onComplete',function(){	
				this.tabimage.setStyle('top',0);
				this.tabimage.setStyle('left',0);					
				
			}.bind(this))	;
			
	
		}
		
		return myEffects;		
		
	},
	initAllPosition:function(first)
	{
		this.imagesize = this.tabimage[this.index].getSize().size;

		
		this.imagesize.ecartY = parseInt(this.conteneur.getStyle('top')) - (getWindowHeight() - this.imagesize.y)/2;
		this.imagesize.ecartX = parseInt(this.conteneur.getStyle('left')) - (getWindowWidth() - this.imagesize.x)/2;
						
		if(first)
		{			
					
			this.conteneur.setStyle('top',getWindowHeight()/2);
			this.conteneur.setStyle('left',getWindowWidth()/2);
			
			this.textdiv.setStyle('width',this.imagesize.x);
		}
		
		var fxtext=this.textdiv.effects({duration: this.timeeffect, transition: Fx.Transitions.linear,wait:false}).start({
			
			'width':this.imagesize.x-10
			
		});
		
		
		this.contefect = this.conteneur.effects({duration: this.timeeffect, transition: Fx.Transitions.linear,wait:false});
		
		
		if (first)
		this.contefect.addEvent('onComplete',function(){
						
				this.conteneur.adopt(this.decor);
				
				this.rightarow.setStyle('top',this.imagesize.y/2 - this.rightarow.getSize().size.y/2);
				this.leftarow.setStyle('top',this.imagesize.y/2 - this.leftarow.getSize().size.y/2);				
				
				if(this.tabimage.length>1)
				{
					var fx =new Fx.Elements(this.decor,{duration:200,wait:false});
					fx.start({'0':{'opacity': [1]},'1':{'opacity': [1]},'2':{'opacity': [1]},'3':{'opacity': [1]}});
				}
				else
				{
					var fx =new Fx.Elements(this.decor,{duration:200,wait:false});
					fx.start({'2':{'opacity': [1]},'3':{'opacity': [1]}});
				}
				
				
				this.textdiv.effects({duration:200,tranition:Fx.Transitions.Expo.easeOut}).start({'height':[0,this.textdivtext.getSize().size.y],'opacity':1});
				
				this.rightarow.addEvent('mouseenter',function(){
					this.rightarow.effects({duration:100,tranition:Fx.Transitions.Expo.easeOut}).start({'width':[50],'height':[200],'top':[this.imagesize.y/2-100]});
				}.bind(this));
				this.rightarow.addEvent('mouseleave',function(){
					this.rightarow.effects({duration:100,tranition:Fx.Transitions.Expo.easeOut}).start({'width':[40],'height':[160],'top':[this.imagesize.y/2-80]});
				}.bind(this));
				
				this.leftarow.addEvent('mouseenter',function(){
					this.leftarow.effects({duration:100,tranition:Fx.Transitions.Expo.easeOut}).start({'width':[50],'height':[200],'top':[this.imagesize.y/2-100]});
				}.bind(this));
				this.leftarow.addEvent('mouseleave',function(){
					this.leftarow.effects({duration:100,tranition:Fx.Transitions.Expo.easeOut}).start({'width':[40],'height':[160],'top':[this.imagesize.y/2-80]});
				}.bind(this));
			
		
		}.bind(this));
		
		
	},
	next:function(){
		
		this.index++;
		
		if (this.index >= this.tabimage.length)
			this.index = 0;
		
		this.initAllPosition(false);
		
		this.rightarow.fireEvent('mouseenter');
		this.leftarow.fireEvent('mouseleave');
		
		this.displayImage();
		
		
	},
	previous:function(){
		
		this.index--;
		
		if (this.index < 0)
			this.index = this.tabimage.length-1;
		
		this.initAllPosition(false);
		
		this.rightarow.fireEvent('mouseleave');
		this.leftarow.fireEvent('mouseenter');
		
		this.displayImage();
		
	}

});



function getWindowHeight()
{
	 myHeight = 0;
	  if( document.documentElement && ( document.documentElement.clientHeight  ) ) {
		  //IE 6+ in 'standards compliant mode'
		    
		    myHeight = document.documentElement.clientHeight;
	  } else if( typeof( window.innerHeight ) == 'number' ) {
		  //Non-IE	  
		    myHeight = window.innerHeight;
		  
		 
	  } else if( document.body && ( document.body.clientHeight ) ) {
	    //IE 4 compatible	   
	    myHeight = document.body.clientHeight;
	  }
	  	  
	  return myHeight;
	  
	 
}

function getWindowWidth()
{
	
	 var myWidth = 0;
	 
	  if( document.documentElement && ( document.documentElement.clientWidth  ) ) {
		    //IE 6+ in 'standards compliant mode'
		    myWidth = document.documentElement.clientWidth;
		   
	  } else if( typeof( window.innerWidth ) == 'number' ) {
	    //Non-IE
	    myWidth = window.innerWidth;
	    
	  }  else if( document.body && ( document.body.clientWidth  ) ) {
	    //IE 4 compatible
	    myWidth = document.body.clientWidth;
	   
	  }
	
	  return myWidth ;
	 
}