var steps = new Array("step 1 desc","step 2 desc","step 3 desc","step 4 desc");	
var stepImages = new Array("step1.jpeg","step2.jpeg","step3.jpeg","step4.gif");
var imageId=1,
	curleft,
	curtop,
	targetOpacity=100,
	opacityTimerMS=2,
	stepTimer,
	opacityTimer,
	imageURL;
	
for (var i=0; i<stepImages.length; ++i){
	imageURL = stepImages[i];
	stepImages[i] = new Image();
	stepImages[i].src = "images/"+imageURL;
}
function showStep(id)
{
	clearTimeout(stepTimer);
	clearTimeout(opacityTimer);
	opacityTimerMS=1;
	fadeInImage(id);
}
function fadeInImage(id)
{
	for(var i=1; i<=4; ++i){
		document.getElementById("step"+i).style.backgroundColor=(i==id ? "#E99A01" : "");
		document.getElementById("stepDesc"+i).style.visibility=(i==id ? "visible" : "hidden");
	}	
	imageId=id;
	document.getElementById("fadeImage").src=stepImages[imageId-1].src;
	opacityTimer = setTimeout("changeOpac(0)",opacityTimerMS) // ;opacity(0,100,750);	
	return(false);
}
function rotateStep(id)
{	
	fadeInImage(id);
	if (++id<=4)
		stepTimer = setTimeout("rotateStep('"+id+"')", 5000);
}
function changeOpac(opacity) 
{
    var object = document.getElementById("fadeDiv").style;			
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
	object.visibility="visible";
	if (opacity==100){
		document.getElementById("stepImage").src=document.getElementById("fadeImage").src; 
		document.getElementById("fadeDiv").style.visibility="hidden";
	}else
		opacityTimer = setTimeout("changeOpac("+(opacity+2)+")",opacityTimerMS);
}