window.onload = init;
	
var images = new Array('img/p_tranq.jpg', 'img/p_archi.jpg', 'img/p_secur.jpg');
var currentImage = 0;

var foreImage = 'display1';
var backImage = 'display2';
var direction = 1; //backward < 0 < forward

function init()
{
	document.getElementById(foreImage).src = images[0];
	goForeground(foreImage);
	document.getElementById(backImage).src = images[0];
	goBackground(backImage);
	
	setInterval("next()", 5000);
}

function next()
{
	direction = 1;
	fadeTo(foreImage,backImage);
}

function prev()
{
	direction = -1;
	fadeTo(foreImage,backImage);
}

function fadeTo(id1, id2)
{
	var op = 0.99999;
	var delay = 10;
	var i = 0;
	
	/* load image in background */
	setNextImage(id2);
	/* fade out */
	while (op >= 0.0)
	{
		setTimeout("setOpacity('"+id1+"','"+op+"')", delay);
		op -= 0.01;
		i++;
		delay += (delay/i);
	}
	/* swap foreground et background */
	setTimeout("swapImage('"+id1+"','"+id2+"')", delay);
	/* restore opacity after fade out */
	setTimeout("setOpacity('"+id1+"',0.99999)", delay);
}

function getOpacity(id)
{
	var o = document.getElementById(id);
	return window.getComputedStyle(o,null).getPropertyValue("opacity");
}

function setOpacity(id,value)
{
	var o = document.getElementById(id);
	o.style.opacity = value; //CSS3
	o.style.filter = "alpha(opacity:"+(value*100)+")"; //IE
}

function swapImage(id1, id2)
{
	//swap z-index
	var zTemp = document.getElementById(id1).style.zIndex;
	document.getElementById(id1).style.zIndex = document.getElementById(id2).style.zIndex;
	document.getElementById(id2).style.zIndex = zTemp;
	
	//swap id
	var iTemp = foreImage;
	foreImage = backImage;
	backImage = iTemp;
}

function goBackground(id)
{
	var o = document.getElementById(id);
	o.style.zIndex = 1;
}

function goForeground(id)
{
	var o = document.getElementById(id);
	o.style.zIndex = 2;
}

function setNextImage(id)
{
	if (direction > 0)
	{
		currentImage++;
	}
	else
	{
		currentImage--;
	}
	currentImage = Math.abs(images.length+currentImage)%images.length;
	var o = document.getElementById(id);
	o.src = images[currentImage];
}
