function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
};

function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
};

function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
};


window.addEvent('domready', function() {
simpleDiaporamaInstance = new simpleDiaporamaZoom();	
});

var simpleDiaporamaZoom = new Class({

initialize: function(options){

		this.repCible = '../../deploy';
		this.play=true;
		this.firstDiap=true;
		this.indexDiap = 0;
		this.tabImage = new Array();
		this.loaderActif = "";
		this.listeDiapos = new Object();
		this.lst = new Object();
		this.xImg = new Element('img');
		this.transitionPlay = true;
		this.viewA=getChaine();
		this.viewB=getChaine();
		this.loaderA=getChaine();
		this.loaderB=getChaine();
		this.viewActive = this.viewB;
		this.diaposZoom =  'diaporamaZ';
		this.imageHeight=0;
		this.imageWidth=0;
		this.init();
	},


 	
init: function(){
	

			////console.log("canvas1");	


var self = this;

 //////////////////mise en place des listeners///////////////////////////
$('DiapPauseZ').addEvent('mousedown', function(e) {
				e.stop();	
				this.play=false;
				this.activePause();
					}.bind(this)
					);					
$('DiapMosaiqueZ').addEvent('mousedown', function(e) {
				e.stop();	
					}.bind(this)
					);
$('DiapDiaposZ').addEvent('mousedown', function(e) {
				e.stop();	
					}.bind(this)
					);
$('DiapLoupeZ').addEvent('mousedown', function(e) {
				e.stop();	
				this.play=false;
				this.activePause();
					}.bind(this)
					);
$('DiapLectZ').addEvent('mousedown', function(e) {
				e.stop();	
				this.play=true;
				this.swapDiv();
				this.activeLect();
					}.bind(this)
					);		
		
					
$('DiapReculeZ').addEvent('mousedown', function(e) {
				e.stop();	
			this.play=false;
			
			////////console.log(indexDiap);
			if(this.indexDiap>0){
				this.indexDiap--;
				this.afficherContenuDiapos();
		}else{
				this.indexDiap = 	this.listeDiapos.length-1;
				this.afficherContenuDiapos();
		};
		
			this.activePause();
			var info= "Image "+(parseInt(this.indexDiap)+1)+"/"+this.listeDiapos.length
			$('DiapInfosZ').set("text",info);
					}.bind(this)
					);
					
$('DiapAvanceZ').addEvent('mousedown', function(e) {
				e.stop();	
			this.play=false;
			this.avanceDiapos();		
			this.activePause();
			var info= "Image "+(parseInt(this.indexDiap)+1)+"/"+this.listeDiapos.length
	 		 $('DiapInfosZ').set("text",info);
					}.bind(this)
					
					);


//loader
this.xImg.addEvent('load',function(){
//action au chargement de l'image
var H= this.height;
var L= this.width;
self.imageHeight=H;
self.imageWidth=L;
var T="";
var coef = H/L;
if (H > pageHeight() || L > pageWidth()){
//ajusteTaille(L,H)
if(H>=L){
	t="V";
	H = pageHeight()-86;
	L = H*coef;
} else 
{
	
	t="H";
	L = pageWidth()-86;
	H = L*coef;
////////console.log("--"+L+"-/"+H+"--"+coef);
};
////////console.log(t);
}else{
	leftM = (pageWidth()-L)/2;
	topM = (pageHeight()-H)/2;
	$(self.loaderActif).setStyle("left",leftM);
	$(self.loaderActif).setStyle("top",topM);
}; //fin if image plus grande que la zone d'affichage
if(self.loaderActif == self.loaderA){

/*$("loaderA").setProperty("src",this.src);
$("loaderA").setProperty("height",H);


	$(self.loaderActif).setStyle("opacity", 0);
	$("viewA").setStyle("z-index",1);
	$("viewB").setStyle("z-index",0);
	self.changer2();	
	*/
	
	
}else{
	//$("margePhotoB").setStyle("width",L+20);
	//$("margePhotoB").setStyle("height",H+20);
	$(self.loaderB).setProperty("src",this.src);
	$(self.loaderB).setProperty("height",H);
	$(self.loaderActif).setStyle("opacity", 0);
	$(self.viewB).setStyle("z-index",1);
	$(self.viewA).setStyle("z-index",0);
	self.changer2();		

};
});

//////////////////////////////--initialisation--///////////////////////////
this.activeLect();
this.creer_structure(this.diapoZoom);
this.indexDiap = 0;
/////////////////////////////---------------------////////////////////////////
 	},
 	


swapDiv: function() {
	//	//////console.log(this.play);
	if(this.play){
		this.avanceDiapos();
		var info= "Image "+(parseInt(this.indexDiap)+1)+"/"+this.listeDiapos.length
	  $('DiapInfosZ').set("text",info);
	};
},

 	
precharger_image: function(url)
{
var 	$imageSrc = url
if(this.repCible  !=""){
$imageSrc = $imageSrc.replace("./",this.repCible+"/");
}else{
$imageSrc= "."+url;
};
$imageSrc = $imageSrc.replace("_i","_hd");
$(this.xImg).setProperty("src",$imageSrc);
},
 	
creer_structure: function(p){
 // JSON request with data
	   //self is this
        var self = this;
	//ou
	//
    var jsonReq = new Request.JSON({
      url: '../php/simpleDiaporama.php',
      method: 'post',
      data: {
        json: 'yes'
      },  
      onComplete: function(r){
     self.diaporamaPanel = $(p);
     self.suite(r);
      }
      
      //ou
      /* onComplete: function(r){
    this.diaporamaPanel = $(p);
	this.suite(r);
      }.bind(this)
*/
      
      
    });
    
	jsonReq.send();
	
},

suite: function(r){
this.listeDiapos=r.image;
this.lst = this.clone(r);
var info= "Image "+(parseInt(this.indexDiap)+1)+"/"+this.listeDiapos.length
$('DiapInfosZ').set("text",info);
$('diapoZoom').setStyle('display','none');
$('diapoZoom').setStyle('width',pageWidth());
$('diapoZoom').setStyle('height',pageHeight());
$('diaporamaZ').setStyle('width',pageWidth());
$('diaporamaZ').setStyle('height',pageHeight());
$('commandesDiaposZ').setStyle("width", pageWidth());
$('fondZ').setStyle("width", pageWidth());
$('fondZ').setStyle("height", pageHeight());
 $('fondZ').setStyle("opacity", "0.7");



//this.showZ();


	   	   	   	   	   	    // diaporamaPanel.innerHTML =	'<div id="viewB" style="position:absolute; z-index:1" ><img id="loaderB" style="position:absolute" /><div id="modeleB" style="position:absolute"></div></div><div id="viewA" style="position:absolute; border:0px solid #FF0000 ; opacity:1;z-index:0" ><img id="loaderA" style="position:absolute"/><div id="modeleA" style="position:absolute"></div></div>';
	   
//this.diaporamaPanel.style.overflow = "hidden";

	   	   	   	   

},
hideZ:function(){
		//$('diapoZoom').setStyle('width',0);
		$('diapoZoom').setStyle('display','none');
},
clone:function(obj){
    if(obj == null || typeof(obj) != 'object')
        return obj;

    var temp = new obj.constructor(); // changed (twice)
    for(var key in obj)
        temp[key] = this.clone(obj[key]);

    return temp;
},
//changement de diapos	
showZ:function(id,typeMedia){

	if(typeMedia=="youTube"){
		$('commandesDiaposZ').setStyle("display","none");
		var idYT ="http://www.youtube.com/embed/"+id;
	$(this.diaposZoom).innerHTML = '<div id="video" style="position:absolute; z-index:0;" ><table   style="height:'+(pageHeight()-26)+'px; width:'+pageWidth()+'px;    text-align: center; vertical-align:middle;"><tr><td> <table align="center"   style="height:420px; width:670px;   background-color:#FFFFFF; text-align: center; vertical-align:middle;"><tr><td><iframe  id="youTubeVid"   frameborder="0" border="1" cellspacing="0"  style="marginwidth="0" marginheight="0" scrolling="no"   width="640" height="390" src="'+idYT+'"></iframe></td></tr></table></td></tr></table></div>';
	//console.log(typeMedia);	
	 this.viewB = "video";
	 this.loaderB = "youTubeVid";
	 this.loaderActif = "youTubeVid";
	$(this.viewB).addEvent('mousedown', this.hideZ);
	$('diapoZoom').setStyle('display','block');
	}else{
		$('commandesDiaposZ').setStyle("display","block");
		$(this.diaposZoom).innerHTML = '<div  id="'+this.viewA+'" style="position:absolute; visibility:hidden; z-index:1"  ><table   style="height:'+(pageHeight()-26)+'px; width:'+pageWidth()+'px;    text-align: center; vertical-align:middle;"><tr><td> <table align="center"   id="margePhotoA" style="height:420px; width:670px;   background-color:#FFFFFF; text-align: center; vertical-align:middle;"><tr><td><img id="'+this.loaderA+'"  /></td></tr></table></td></tr></table></div><div  id="'+this.viewB+'" style="position:absolute; z-index:0;"  ><table   style="height:'+(pageHeight()-26)+'px; width:'+pageWidth()+'px;    text-align: center; vertical-align:middle;"><tr><td> <table id="margePhotoB" align="center"   style="height:0px; width:0px;  padding-top:8px; padding-bottom:20px;background-color:#FFFFFF; text-align: center; vertical-align:middle;"><tr><td><img id="'+this.loaderB+'"  /></td></tr></table></td></tr></table></div>';
		
		//$(this.diaposZoom).innerHTML = '<div id="'+this.viewA+'" style="position:absolute; visibility:hidden; z-index:1" ><table style="height:'+(pageHeight()-26)+'px; width:'+pageWidth()+'px;text-align: center;"><tr><td><img id="'+this.loaderA+'" style="opacity:0" /></td></tr></table></div><div id="'+this.viewB+'" style="position:absolute; z-index:0;backgroundColor:#FF0000" ><table   style="height:'+(pageHeight()-26)+'px; width:'+pageWidth()+'px;    text-align: center; vertical-align:middle;"><tr><td><img id="'+this.loaderB+'"  /></td></tr></table></div>';
		  
	   	this.viewActive = this.viewB;
	   	this.loaderActif =this.loaderB;
	   	$(this.viewB).setStyle("opacity",0);
		$(this.viewB).addEvent('mousedown', this.hideZ);
		$('diapoZoom').setStyle('display','block');
	if(id){

		////console.log("idRec"+this.idRec)
		//si this.idRec != null;
		//recherche la diapos par rapport à son index sur le tableau et l'affiche
		//sinon joue automatiquement
		for(i=0;i<this.lst.id.length;i++){
		if(this.lst.id[i] == id){
			this.play=false;
			this.indexDiap  = i;
		this.afficherContenuDiapos();
			break;
		}
		}



		}else{
		this.afficherContenuDiapos();
		}//fin if this.idRec
	
	};
	
	//$('diapoZoom').setStyle('width',pageWidth());
},
afficheFondDiapos:function(){
   	$(this.viewB).setStyle("opacity",1);
	var myEffect10 = new Fx.Morph("margePhotoB", {
		  //  duration:listeDiapos[indexDiap].dureeApparition*1000,
		  duration:500,
		    onComplete: function(){
this.afficheFondDiapos2();

			}.bind(this),
		    transition: Fx.Transitions.Sine.easeOut
		});
		 
		myEffect10.start({
		    'height': [0,this.imageHeight+20]

		});
},
afficheFondDiapos2:function(){
	var myEffect11 = new Fx.Morph("margePhotoB", {
		  //  duration:listeDiapos[indexDiap].dureeApparition*1000,
		  duration:500,
		    onComplete: function(){
this.afficheDiapos();

			}.bind(this),
		    transition: Fx.Transitions.Sine.easeOut
		});
		 
		myEffect11.start({
		    'width': [this.imageWidth+20]
		});
},
afficheDiapos:function(){
	var myEffect = new Fx.Morph(this.loaderActif, {
		  //  duration:listeDiapos[indexDiap].dureeApparition*1000,
		  duration:1000,
		    onComplete: function(){
		var info= "Image "+(parseInt(this.indexDiap)+1)+"/"+this.listeDiapos.length
			  $('DiapInfosZ').set("text",info);	

			if(this.play){
					////////console.log(this.play+this.swapDiv);
					//second parametre de delay fixe la cible
		var sw = this.swapDiv.delay(5000,this);	
			};

			}.bind(this),
		    transition: Fx.Transitions.Sine.easeOut
		});
		 
		myEffect.start({
		    'opacity': [0, 1]
		    
		});
},
changer2: function() {
	
 if(this.play){
	this.afficheFondDiapos();
	

	
	}else{

			this.afficheFondDiapos();
	 		 		/*	  $(this.loaderActif).setStyle("opacity",1);	
var info= "Image "+(parseInt(this.indexDiap)+1)+"/"+this.listeDiapos.length
	  $('DiapInfosZ').set("text",info);	
	*/
			};
},	
	
//changement de diapos	
fonduSortie: function() {

//	$("margePhotoB").setStyle("width",L+20);
	

	var myEffect = new Fx.Morph(this.loaderActif, {
  //  duration:listeDiapos[indexDiap].dureeApparition*1000,
  duration:1000,
  onComplete: function(){
	//////console.log("fini");
		this.afficherContenuDiaposSuite();
//this.fonduSortieMarge();
	}.bind(this),

    transition: Fx.Transitions.Sine.easeOut
});
 
myEffect.start({
    'opacity': [1,0]
    
});

},
fonduSortieMarge:function(){
	var myEffect1 = new Fx.Morph("margePhotoB", {
		  //  duration:listeDiapos[indexDiap].dureeApparition*1000,
		  duration:1000,
		  onComplete: function(){
				//////console.log("fini");
			
		//	 $( "margePhotoB").setStyle("width",0);
		//	 $( "margePhotoB").setStyle("height",0);
				this.afficherContenuDiaposSuite();
				}.bind(this),
		    transition: Fx.Transitions.Sine.easeOut
		});
	
	myEffect1.start({
	    'opacity': [1,0],
	   
	    
	});
},

afficherContenuDiapos: function(id){
	 this.activeLect();
	 if(this.play && this.firstDiap != true){
this.fonduSortie();
	 }else{
	 			  $(this.loaderActif).setStyle("opacity",0);	
		  	this.afficherContenuDiaposSuite();
	 };
},

afficherContenuDiaposSuite: function(){
var 	inner = "";
var im="";


	if(this.viewActive == this.viewA){
	this.viewActive = this.viewB;
	this.loaderActif =this.loaderB;

//	$("modeleB").set("html","");
	im =this.listeDiapos[this.indexDiap];

	this.precharger_image(im)	

}else
{	
	//this.viewActive = "viewA";
	//this.loaderActif ="loaderA";

	//$("modeleA").set("html","");
	im =this.listeDiapos[this.indexDiap];

	this.precharger_image(im)
	}	

},

activeLect: function(){
		$('DiapLectZ').setAttribute('data-selected','true');
		$('DiapLectZ').setStyle('opacity','1');
		$('DiapPauseZ').setAttribute('data-selected','false');
		$('DiapPauseZ').setStyle('opacity','0.5');
		$('DiapDiaposZ').setAttribute('data-selected','true');
		$('DiapDiaposZ').setStyle('opacity','1');
},

activePause: function(){
		$('DiapLectZ').setAttribute('data-selected','false');
$('DiapLectZ').setStyle('opacity','0.5');
	$('DiapPauseZ').setAttribute('data-selected','true');
$('DiapPauseZ').setStyle('opacity','1');
},

avanceDiapos: function(){
	//////console.log("avanceDiapos--");
		if((this.indexDiap+1)<this.listeDiapos.length){
	this.indexDiap++;
	}else{
	this.indexDiap = 0;
	};
	if(this.listeDiapos.length >1){
	this.afficherContenuDiapos();
	};

}
	

//fin de la classe
});


pageListID ="";

function getChaine(){ 
alphabet = new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
caracteres = 10;
var longueur = alphabet.length;
var word = "";

for(i = 0; i < caracteres; i++)
{
y = Math.floor(Math.random()*2);
x = Math.floor(Math.random()*longueur);
res = alphabet[x];
	if(y == 0)
	{
	res2 = res.toUpperCase();
	}
	else
	{
	res2 = res.toLowerCase();
	}
word +=res2;
}

if(pageListID.indexOf(word)>=0){
	return getChaine();
}else{
	pageListID+="/"+word;
return word;
}
};