var idNum=0,visible,hidden,maxId,outputLinks,i,iZindex = 0,imageNames;
var fadeSpeed=50; // 10 is fast, 100 is slow

function showNext() {
	// Hides the text layer from the previous step, drops the layer number on the previous image then fades in the new image and pops in the new text
	document.getElementById(idNum).style.visibility = 'hidden';
	document.getElementById(idNum+100).style.zIndex = iZindex;
		if (idNum < maxId) {
			idNum = idNum + 1 ;
			fadeObj = document.getElementById(idNum+100);
			setOpacity(0);
			document.getElementById(idNum+100).style.visibility = 'visible';
			iZindex++;
			document.getElementById(idNum+100).style.zIndex = iZindex;
			for (var i=0;i<11;i++) setTimeout('setOpacity('+i+')',fadeSpeed*i);
			}
	document.getElementById(idNum).style.visibility = 'visible';
	writeStep();
}

function setOpacity(value){
	// The javascript fade routine
	fadeObj.style.opacity = value/10;
	fadeObj.style.filter = 'alpha(opacity=' + value*10 + ')';
}

function showLast() {
	// Hides the text layer from the previous step, drops the layer number on the previous image then fades in the new image and pops in the new text
	document.getElementById(idNum).style.visibility = 'hidden';
	document.getElementById(idNum+100).style.zIndex = iZindex;
		if (idNum > 0) {
			idNum = idNum -1 ;
			fadeObj = document.getElementById(idNum+100);
			setOpacity(0);
			document.getElementById(idNum+100).style.visibility = 'visible';
			iZindex++;
			document.getElementById(idNum+100).style.zIndex = iZindex;
			for (var i=0;i<11;i++) setTimeout('setOpacity('+i+')',fadeSpeed*i);
		}
	document.getElementById(idNum).style.visibility = 'visible';
	writeStep();
}

function showId(idNum) {
	// Makes the new layer visible but transparent then fades in. Pops in the text
	fadeObj = document.getElementById(idNum+100);
	setOpacity(0);
	document.getElementById(idNum+100).style.visibility = 'visible';
	iZindex++;
	document.getElementById(idNum+100).style.zIndex = iZindex;
	for (var i=0;i<11;i++) setTimeout('setOpacity('+i+')',fadeSpeed*i);
	document.getElementById(idNum).style.visibility = 'visible';
	writeStep();
}

function hideAll() {
	// Hide all text layers except the current layer
	for ( i=0; i <= maxId ; i++){
		document.getElementById(i).style.visibility = 'hidden';
	}
}

function showImage(i){
	// Shows the thumb nail image over the quick links
	document.getElementById('overlay').style.left = (15*i)-20;
	document.getElementById('overlay').innerHTML = '<img src="'+imageNames+i+'.jpg" height="50px" border="1">';
}

function hideImage(i) {
	// Hides the thumb nail image over the quick links
	document.getElementById('overlay').innerHTML = '';
}

function writeStep() {

	//display quick links
	outputLinks = '&nbsp;';
	for ( i=0; i <= maxId ; i++){
		if (i == idNum){
			outputLinks += (' <a href="#" ><b><font color="#FFFFFF">' + (i+1) + '</font></b></a> ');			
		}
		else {
			outputLinks += (' <a style="color:grey" href="#" onClick="idNum='+i+';hideAll();showId('+i+');return false;" onmouseover="showImage('+(i+1)+')" onmouseout="hideImage('+i+')" >' + (i+1) + '</a>');
			}
	}
	document.getElementById('step').innerHTML = '<div style="position: absolute; z-index:99" ><div  id="overlay" style="position:absolute; left:10px; top:-60px; "></div></div>'+outputLinks;
}