// 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;

function init()
{	
    for (var i=0; i<stepImages.length; ++i){
    	imageURL = stepImages[i];
    	stepImages[i] = new Image();
    	stepImages[i].src = "images/"+imageURL;
    }
    setTimeout('rotateStep(2);',3000);	
}
function showStep(id)
{
	clearTimeout(stepTimer);
	clearTimeout(opacityTimer);
	opacityTimerMS=1;
	fadeInImage(id);
}
function fadeInImage(id)
{
	for(var i=1; i<=stepImages.length; ++i){
		document.getElementById("step"+i).style.backgroundColor=(i==id ? "#3366FF" : "");
		document.getElementById("step"+i).style.color=(i==id ? "#FFFFFF" : "");
		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>stepImages.length)
        stepTimer = setTimeout("rotateStep('1')", 10000);
    else
	   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 + ")";
	xShow("fadeDiv");
	
	object = document.getElementById("stepImage").style;
	object.opacity = ((100-opacity) / 100);
    object.MozOpacity = ((100-opacity) / 100);
    object.KhtmlOpacity = ((100-opacity) / 100);
    object.filter = "alpha(opacity=" + (100-opacity) + ")";
	xShow("stepImage");
	
	if (opacity==100){
		document.getElementById("stepImage").src=document.getElementById("fadeImage").src;
        object = document.getElementById("stepImage").style;
        object.opacity = 1;
        object.MozOpacity = 1;
        object.KhtmlOpacity = 1;
        object.filter = "alpha(opacity=1.0)";
    	object.visibility="visible";
//		xHide("fadeDiv");
		opacityTimer = null;
	}else
		opacityTimer = setTimeout("changeOpac("+(opacity+2)+")",opacityTimerMS);
}