function FadeEffect(instanceName, elemId){
	if(instanceName != ''){
		this._instanceName = instanceName
		this._elemId = elemId;
		this._elem = document.getElementById(elemId);
		this._fadeRunning = false;
	}
}

new FadeEffect('', '');

FadeEffect.prototype.setOpacity = function(opacity){
	// Fix for math error in some browsers
	opacity = (opacity == 100) ? 99.999 : opacity;
	// IE/Windows
	this._elem.style.filter = "alpha(opacity:"+opacity+")";
	// Safari < 1.2, Konqueror
	this._elem.style.KHTMLOpacity = opacity / 100;
	// Older Mozilla and Firefox
	this._elem.style.MozOpacity = opacity / 100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	this._elem.style.opacity = opacity / 100;
}
FadeEffect.prototype.fadeOut = function(opacity, change, speed){
	// opacity: starting opacity of element
	// change: the size of the increments between steps
	// speed: the rate of the animation
	if (opacity >= 0){
		this._fadeRunning = true;
		this.setOpacity(opacity);
		opacity -= change;
		setTimeout(this._instanceName+'.fadeOut('+opacity+','+change+','+speed+')', speed);
	} else {
		this._fadeRunning = false;
		//this._elem.style.visible = 'false';//'true';
		this._elem.style.visibility = 'hidden';
	}
}
FadeEffect.prototype.fadeIn = function(opacity, change, speed){
	// opacity: starting opacity of element
	// change: the size of the increments between steps
	// speed: the rate of the animation
	if (opacity <= 100){
		//this._elem.style.visible = 'true';//'false';
		this._elem.style.visibility = 'visible';
		this._fadeRunning = true;
		this.setOpacity(opacity);
		opacity += change;
		setTimeout(this._instanceName+'.fadeIn('+opacity+','+change+','+speed+')', speed);
	} else {
		this._fadeRunning = false;
		this.setOpacity(100);
	}
}



function Diaporama(instanceName, elemId1, elemId2, images){
	if(instanceName != ''){
		this._instanceName = instanceName;
		this._elemId1 = elemId1;
		this._elem1 = document.getElementById(elemId1);
		this._fade1 = new FadeEffect(instanceName+'._fade1', elemId1);

		this._elemId2 = elemId2;
		this._elem2 = document.getElementById(elemId2);
		this._fade2 = new FadeEffect(instanceName+'._fade2', elemId2);

		this._topImage = 1;
		this._elem2.style.visible = 'false'

		this._images = images;
		this._preloadImg = new Array();

		// preload img
		for(i=0; i<this._images.length; i++){
			this._preloadImg[i] = new Image;
			this._preloadImg[i].src = this._images[i];
		}

		this._index = 1;

		// run switching
		setTimeout(this._instanceName+'.switchImage()', 3000);
	}
}

new Diaporama('', '', '', new Array()); // doing this will force the prototype object to be created

Diaporama.prototype.switchImage = function(){
	// reset index (restart loop)
	if(this._index >= this._images.length){
		this._index = 0;
	}

	// remplace image
	if(this._topImage == 1){
		// elem1 on top, change 2
		this._elem2.src = this._images[this._index];
	} else {
		// elem2 on top, change 1
		this._elem1.src = this._images[this._index];
	}

	// fadeOut ,  fadeIn
	if(this._topImage == 1){
		this._fade2.fadeIn(0, 1, 20);
		this._fade1.fadeOut(100, 1, 20);

		this._elem1.style.zIndex = 4;
		this._elem2.style.zIndex = 3;

		this._topImage = 2;
	} else {
		this._fade1.fadeIn(0, 1, 20);
		this._fade2.fadeOut(100, 1, 20);

		this._elem2.style.zIndex = 4;
		this._elem1.style.zIndex = 3;

		this._topImage = 1;
	}


	// increment index, next image
	this._index++;

	// exec time for switching = 2000ms
	setTimeout(this._instanceName+'.switchImage()', 8000);
}