image1 = new Image();
image1.src = "images/sbs/step_1.png";

image2 = new Image();
image2.src = "images/sbs/step_2.png";

image3 = new Image();
image3.src = "images/sbs/step_3.png";

image4 = new Image();
image4.src = "images/sbs/step_4.png";

image5 = new Image();
image5.src = "images/sbs/step_5.png";

image6 = new Image();
image6.src = "images/sbs/step_6.png";

image7 = new Image();
image7.src = "images/sbs/step_7.png";

image8 = new Image();
image8.src = "images/sbs/step_8.png";

image9 = new Image();
image9.src = "images/sbs/step_9.png";

image10 = new Image();
image10.src = "images/sbs/step_10.png";

image11 = new Image();
image11.src = "images/sbs/step_11.png";

image12 = new Image();
image12.src = "images/sbs/step_12.png";

image13 = new Image();
image13.src = "images/sbs/step_13.png";

image14 = new Image();
image14.src = "images/sbs/step_14.png";

image15 = new Image();
image15.src = "images/sbs/step_15.png";

image16 = new Image();
image16.src = "images/sbs/step_16.png";

image17 = new Image();
image17.src = "images/sbs/step_17.png";

image18 = new Image();
image18.src = "images/sbs/step_18.png";

image19 = new Image();
image19.src = "images/sbs/step_19.png";

image20 = new Image();
image20.src = "images/sbs/step_20.png";

image21 = new Image();
image21.src = "images/sbs/step_21.png";

image22 = new Image();
image22.src = "images/sbs/step_22.png";

image0 = new Image();
image0.src = "images/sbs/transparent_step.png";

var imgArr = new Array();

imgArr[0] = image0;
imgArr[1] = image1;
imgArr[2] = image2;
imgArr[3] = image3;
imgArr[4] = image4;
imgArr[5] = image5;
imgArr[6] = image6;
imgArr[7] = image7;
imgArr[8] = image8;
imgArr[9] = image9;
imgArr[10] = image10;
imgArr[11] = image11;
imgArr[12] = image12;
imgArr[13] = image13;
imgArr[14] = image14;
imgArr[15] = image15;
imgArr[16] = image16;
imgArr[17] = image17;
imgArr[18] = image18;
imgArr[19] = image19;
imgArr[20] = image20;
imgArr[21] = image21;
imgArr[22] = image22;


document.images[document.images.length -1] = image0;
document.images[document.images.length -1] = image1;
document.images[document.images.length -1] = image2;
document.images[document.images.length -1] = image3;
document.images[document.images.length -1] = image4;
document.images[document.images.length -1] = image5;
document.images[document.images.length -1] = image6;
document.images[document.images.length -1] = image7;
document.images[document.images.length -1] = image8;
document.images[document.images.length -1] = image9;
document.images[document.images.length -1] = image10;
document.images[document.images.length -1] = image11;
document.images[document.images.length -1] = image12;
document.images[document.images.length -1] = image13;
document.images[document.images.length -1] = image14;
document.images[document.images.length -1] = image15;
document.images[document.images.length -1] = image16;
document.images[document.images.length -1] = image17;
document.images[document.images.length -1] = image18;
document.images[document.images.length -1] = image19;
document.images[document.images.length -1] = image20;
document.images[document.images.length -1] = image21;
document.images[document.images.length -1] = image22;


correctPNG();


function changeStep(ele){
	
	
	imageNode = document.getElementById('stepnum'); //gets the element with the image to swap


	step = ele.lastChild.nodeValue;
	
	//alert(imgArr[step].src);

	source = imgArr[step].src; //creates string to hold image src
	
	img = source;

	if(document.all){
		
	imageNode.innerHTML = "<img src = '" + img + "' id=\"stepnum\" height=\"29\" width=\"330\" />"; //replaces old image src with new	
		
	/*
	
		 var imgID = (img.id) ? "id='" + img.id + "' " : "";
		 var imgClass = (img.className) ? "class='" + img.className + "' " : "";
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
		 //var imgStyle = "display:inline-block;" + img.style.cssText ;
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle;
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle;
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;		
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"; 
		 img.outerHTML = strNewHTML;
		 
		 alert(strNewHTML);
	
		
	*/
		
		
	}else{
		
		
	imageNode.src = img;	
		
	}

	
	
	
}

function removeStep(){
	
	
	imageNode = document.getElementById('stepnum');
	
	//imageNode.src = imgArr[0].src;
	
	if(document.all){
		
	
	imageNode.innerHTML = "<img src = '" + imgArr[0].src + "' id=\"stepnum\" height=\"29\" width=\"330\" style=\"filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[0].src +"', sizingMethod='scale');\"/>";
	

	}else{
		
		
	imageNode.src = imgArr[0].src;	
		
	}


}