var DrArrayImageViewer = new Class({
initialize: function(tabimage,index,text) {
this.isDisplay = true;
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);
this.first=true;
this.index = index;
if(this.text)
this.textdivtext.setText(this.text);
if(isArray(this.text))
this.textdivtext.setText(this.text[this.index]);
this.conteneur.adopt(this.textdiv);
this.loader = new Asset.image('/Public/Images/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('/Public/Images/DrArrayImageViewer/right.png');
this.leftarow = new Asset.image('/Public/Images/DrArrayImageViewer/left.png');
this.closeico = new Asset.image('/Public/Images/DrArrayImageViewer/close.png');
this.compteurimg = new Asset.image('/Public/Images/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.tabimage= new Asset.images(tabimage, {
onProgress:function(e){
},
   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();
this.isDisplay =false;
},
displayImage:function(){
this.compteur.setHTML((this.index+1)+"<hr />"+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});
this.textdiv.effects({duration:200,tranition:Fx.Transitions.Expo.easeOut}).start({'height':[this.textdivtext.getSize().size.y],'opacity':1});
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.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;
if(isArray(this.text))
this.textdivtext.setText(this.text[this.index]);
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;
if(isArray(this.text))
this.textdivtext.setText(this.text[this.index]);
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 ;
 
}

function isArray(obj) {
return obj.constructor == Array;
}