var Diaporama = function(id) {	
	this.rangEnCours = '0';
	this.updater = '';
	this.diapoEnCours = false,
	this.id_album = id;
	this.im = new Image();
	this.im.parent = this;
	
	this.im.onload = function() {
		var nouveau = this.src;
		var larg = this.width;
		var haut = this.height;
		var hauteurPage = this.parent.getPageSize()[3];
		var hauteurScroll = this.parent.getPageScroll()[1];
		
		new PeriodicalExecuter(function(pe) {
			
				if($($('imgPrinc').firstChild).getStyle("opacity")<=0) {
					pe.stop();
					$('centrage').style.top = ((hauteurPage - haut) / 2) + hauteurScroll + "px";
					$($('imgPrinc').firstChild).setAttribute("src", nouveau);
					$($('imgPrinc').firstChild).setStyle({'width': larg+"px", 'height': haut+'px'});
					
					new PeriodicalExecuter(function(pe2) {
						if($($('imgPrinc').firstChild).getStyle("opacity")>=1) {
							pe2.stop();
						} else {
							$($('imgPrinc').firstChild).setOpacity($($('imgPrinc').firstChild).getStyle("opacity")+0.1);
						}
					}, 0.01);
					
				} else {
					$($('imgPrinc').firstChild).setOpacity($($('imgPrinc').firstChild).getStyle("opacity")-0.1);
				}
			
		}, 0.01);
	};
	
	this.getPageScroll = function(){

		var yScroll;
	
		if (self.pageYOffset) {
			yScroll = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
			yScroll = document.documentElement.scrollTop;
		} else if (document.body) {// all other Explorers
			yScroll = document.body.scrollTop;
		}
	
		arrayPageScroll = new Array('',yScroll) 
		return arrayPageScroll;
	}
	
	this.getPageSize = function(){
		
		var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = document.body.scrollWidth;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		if (self.innerHeight) {	// all except Explorer
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = windowWidth;
		} else {
			pageWidth = xScroll;
		}
	
	
		arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
		return arrayPageSize;
	}
	
	this.arrayPageSize = this.getPageSize();
	this.arrayPageScroll = this.getPageScroll();
	
	// on cree l'arbre
	var reco = document.createElement("div");
	reco.setAttribute("id", "recouvre");
	$(reco).setStyle( {
		backgroundImage: 'url(/images/overlay.png)',
		'display': 'none',
		'height': '100%',
		'left': '0px',
		'margin': '0px',
		'padding': '0px',
		'position': 'absolute',
		'text-align': 'center',
		'top': '0px',
		'width': '100%',
		'z-index': '90'});
	
	var centr = document.createElement("div");
	centr.setAttribute("id", "centrage");
	$(centr).setStyle({
	'position': 'relative',
	'margin': 'auto'
	});
	
	reco.appendChild(centr);
	
	var lien;
	var img;
	
	lien = document.createElement("a");
	lien.setAttribute("id", "boutonPlay");
	lien.setAttribute("href", "javascript:diapo.lanceDiapo();");
	$(lien).setStyle({'display': 'none'});
	
	img = document.createElement("img");
	img.setAttribute("src", "/images/play_diapo.png");
	$(img).setStyle( {verticalAlign: 'middle', 'margin': '0px'});
	
	lien.appendChild(img);
	centr.appendChild(lien);
	
	
	lien = document.createElement("a");
	lien.setAttribute("id", "boutonPause");
	lien.setAttribute("href", "javascript:diapo.pauseDiapo();");
	
	img = document.createElement("img");
	img.setAttribute("src", "/images/pause_diapo.png");
	$(img).setStyle( {verticalAlign: 'middle', 'margin': '0px'});
	
	lien.appendChild(img);
	centr.appendChild(lien);
	
	
	var span=document.createElement("span");
	span.setAttribute("id", "imgPrinc");
	$(span).setStyle({'display': 'inline-block', 'margin': 'auto 10px', 'width': '640px'});
	
	img = document.createElement("img");
	img.setAttribute("src", "/images/loading.gif");
	$(img).setStyle( {verticalAlign: 'middle', 'margin': '0px'});
	
	span.appendChild(img);
	centr.appendChild(span);
	
	
	lien = document.createElement("a");
	lien.setAttribute("href", "javascript:diapo.recule(1);");
	
	img = document.createElement("img");
	img.setAttribute("src", "/images/prec_diapo.png");
	img.setAttribute("id", "boutonPrec");
	$(img).setStyle( {verticalAlign: 'middle', 'margin': '0px'});
	
	lien.appendChild(img);
	centr.appendChild(lien);
	
	
	lien = document.createElement("a");
	lien.setAttribute("href", "javascript:diapo.avance(1);");
	
	img = document.createElement("img");
	img.setAttribute("src", "/images/suiv_diapo.png");
	img.setAttribute("id", "boutonSuiv");
	$(img).setStyle( {verticalAlign: 'middle', 'margin': '0px'});
	
	lien.appendChild(img);
	centr.appendChild(lien);
	
	document.body.appendChild(reco);
	
};
	
Diaporama.prototype.eclaircir = function(evenement) {
	if(Event.element(evenement)==$('recouvre') || Event.element(evenement)==$('centrage') || evenement.keyCode==27) {
		this.diapoEnCours=false;
		$('recouvre').style.display = 'none';
	
		// make select boxes visible
		selects = document.getElementsByTagName("select");
		for (i = 0; i != selects.length; i++) {
			selects[i].style.visibility = "visible";
		}
		// make object tags visible
		obj = document.getElementsByTagName("object");
		for (i = 0; i != obj.length; i++) {
			obj[i].style.visibility = "visible";
		}
		// make embed tags visible
		emb = document.getElementsByTagName("embed");
		for (i = 0; i != emb.length; i++) {
			emb[i].style.visibility = "visible";
		}
		
		Event.stopObserving(document, "click", this.eclaircir);
		Event.stopObserving(document, "keypress", this.eclaircir);
		
		this.updater.stop();
	}
};
	
Diaporama.prototype.assombrir = function() {
	
	// prep objects
	var recouvre = document.getElementById('recouvre');
	
	// set height of Overlay to take up whole page and show
	if(document.all) {
		recouvre.style.width = (this.arrayPageSize[2] + 'px');
	}
	recouvre.style.height = (this.arrayPageSize[1] + 'px');
	recouvre.style.display = 'block';
	
	$('centrage').style.top = ((this.arrayPageSize[3] - $('centrage').getHeight()) / 2) + this.arrayPageScroll[1] + "px";
	
	Event.observe(document, "click", this.eclaircir);
	Event.observe(document, "keypress", this.eclaircir);
	
	// make select boxes invisible
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "hidden";
	}
	// make object tags invisible
	obj = document.getElementsByTagName("object");
	for (i = 0; i != obj.length; i++) {
		obj[i].style.visibility = "hidden";
	}
	// make embed tags invisible
		emb = document.getElementsByTagName("embed");
		for (i = 0; i != emb.length; i++) {
			emb[i].style.visibility = "hidden";
		}
	
	this.lanceDiapo();
	
};
	
Diaporama.prototype.changephoto = function() {
	var laBonneImage = this.im;
	new Ajax.Request("/ajax/photodiapo.php", {
		parameters: {i:this.id_album, r:this.rangEnCours},
		onSuccess: function(retour) {
			var balise = retour.responseXML.getElementsByTagName('bal').item(0);
			laBonneImage.width=balise.getAttribute('width');
			laBonneImage.height=balise.getAttribute('height');
			laBonneImage.src=balise.getAttribute('url');
		}
	});
};

Diaporama.prototype.avance = function(combien) {
	if(this.diapoEnCours) {
		this.pauseDiapo();
	}
	this.rangEnCours += combien;
	this.changephoto();
};

Diaporama.prototype.recule = function(combien) {
	if(this.diapoEnCours) {
		this.pauseDiapo();
	}
	this.rangEnCours -= combien;
	this.changephoto();
};

Diaporama.prototype.incr = function(pe) {
	this.rangEnCours++;
	this.changephoto();
};

Diaporama.prototype.lanceDiapo = function(ev) {
	if(ev!=undefined) {
		ev.stop();
	}
	if(!this.diapoEnCours) {
		this.diapoEnCours=true;
		if(this.rangEnCours!=0) {
			this.rangEnCours++;
		}
		this.changephoto();
		this.updater = new PeriodicalExecuter(this.incr.bind(this), 6);
	}
	$('boutonPlay').style.display = "none";
	$('boutonPause').style.display = "inline";
};



Diaporama.prototype.pauseDiapo = function(ev) {
	if(ev!=undefined) {
		ev.stop();
	}
	this.diapoEnCours=false;
	this.updater.stop();
	$('boutonPlay').style.display = "inline";
	$('boutonPause').style.display = "none";
};