/*******************************************************************************
*                                                                              *
* FILE:         rollover.js                                                    *
* DESCRIPTION:  This unobtrusive script dynamically adds events for rollover   *
*               images and also works for <input type="image"...               *
* INSTRUCTIONS: Include this file on the page and use the following naming     *
*               convention for images:                                         *
*               Normal Image:   xxx_off.yyy                                    *
*               Rollover Image: xxx_on.yyy                                     *
*                                                                              *
*******************************************************************************/

var rolloverOn = [];
function initRollovers() {
	if(document.getElementsByTagName) {
		// get all images on the page
		var allImages = document.getElementsByTagName("img");
		for(var i = 0; i < allImages.length; i++) {
			// check that the image is a rollover
			if(allImages[i].src.indexOf("_off.") != -1) {
				addRolloverEvents(allImages[i]);
			}
		}
		// get all inputs on the page
		var allInputs = document.getElementsByTagName("input");
		for(var i = 0; i < allInputs.length; i++) {
			// check that the image is a rollover
			if(allInputs[i].src.indexOf("_off.") != -1) {
				addRolloverEvents(allInputs[i]);
			}
		}
	}
}
if (window.addEventListener) {
	window.addEventListener("load", initRollovers, false);
} else if (window.attachEvent) {
	window.attachEvent("onload", initRollovers);
}

function addRolloverEvents(theImage) {
	// preload the rollover
	var rolloverImage = new Image();
	var imageSrc = theImage.src.replace(/_off./,"_on.");
	rolloverImage.src = imageSrc;
	// put the rollover into the rollover array
	rolloverOn.push(rolloverImage);
	// add mouseover and mouseout events
	theImage.onmouseover = function(){this.src = this.src.replace(/_off./,"_on.");};
	theImage.onmouseout = function(){this.src = this.src.replace(/_on./,"_off.");};
}