//when the window loads, go to the follover function
window.onload = rollover;

//function rollover is declared and ran
function rollover(){
	//for loop going through all the images on the page and adding 1 to i each time it runs through
	for(var i=0; i<document.images.length; i++){
		//if the current image is enclosed by an a tag, then...
		if (document.images[i].parentNode.tagName == "A"){
			//go to the setupRollover function passing it the current image we are on.
			setupRollover(document.images[i]);
		};
	};
};

//function setupRollover declared and ran, it gets passed the current image we are on and renames it thisImage
function setupRollover(thisImage){
	//a new regular expression searching for any amount of single white spaced characters followed by _button followed by any amount of single white spaced characters
	var re = /\s*_btn\s*/;
	
	//sets the outImage of the current image to a new image
	thisImage.outImage = new Image();
	//sets the source of the image when moused out of to the same source as the current image
	thisImage.outImage.src = thisImage.src;
	//runs an anonymous function when the current image is moused out on
	thisImage.onmouseout = function(){
		//sets the source of the current image to the source of this image's outImage source (the same source)
		this.src = this.outImage.src;
	};
	
	//sets the overImage of the current image to a new image
	thisImage.overImage = new Image();
	//sets the source of the image when hovered over to the same source as the current image except we are replacing _button with _button_hover using the regular expression above
	thisImage.overImage.src = thisImage.src.replace(re,"_btn_hv");
	//runs an anonymous function when the current image is hovered over
	thisImage.onmouseover = function(){
		//sets the source of the current image to the source of this image's overImage source (the hovered image)
		this.src = this.overImage.src;
	};
	
	//sets the clickImage of the current image to a new image
	thisImage.clickImage = new Image();
	//sets the source of the image when clicked to the same source as the current image
	thisImage.clickImage.src = thisImage.src.replace(re,"_btn_hv");
	//runs an anonymous function when the current image is clicked on
	thisImage.onclick = function(){
		//sets the source of the current image to the source of this image's clickImage source (the same source)
		this.src = this.clickImage.src;
	};
	
};