/*

 Unobtrusive Javascript Image Rollovers
 brett@webfroot.co.nz

 USAGE:
 
 1. Make sure that the rollover image filename is exactly the same as the non-rollover image, 
    except with _rollover before the last four characters: 
    
    Example: 
    	button.png
    	button_rollover.png
    or
   		hello1.gif
   		hello1_rollover.gif

 2. Include the non-rollover image on the page like normal, but add 'rollover' to the class:
 
 	Example: 
 		<img src='button.png' alt='button' class='rollover' />
 	or
 		<img src='hello1.gif' alt='hello!' class='floatright rollover' />
 	
	The position of the word 'rollover' within the class attribute value is unimportant.
	
	Add an <a> link around the image if you want it to go somewhere when you click it.

 3. Test and verify! Enjoy!

*/

// run an anonymous function so that our functions don't clobber other javascripts
// there is a bracket around the entirety of the function so we can run it once it's defined.
(function () {

	// add event listener so that we don't clobber other scripts using window.onload
	// run init() when page loads
	if (window.addEventListener) { // test if this function exists
		window.addEventListener('load', init, false); // firefox, opera, safari, etc
	} else if (window.attachEvent) { // test if this function exists
		window.attachEvent('onload', init); // ie
	} // if neither exist, no rollover effects for you.
	
	function init() {
		// when page loads:
		// get collection of all img tags on the page
		var imageelements = document.getElementsByTagName('img');
		
		// set up a regular expression that we can use to match any class containing rollover
		// at the beginning, surrounded by spaces, at the end, or as the whole className 
		var classRegExp = /(^|\s)rollover(\s|$)/;
		
		// loop through each image tag
		for (var i=0; i < imageelements.length; i++) {
			
			// if the image's className has the word 'rollover' in it:
			if (classRegExp.test(imageelements[i].className)) {
			
				// add rollover events
				imageelements[i].onmouseover = function () {
					// add _rollover to the end of the filename, 
					// but just before the .  of the extension.
					// get the image's source
					var s = this.src;
					// get the extension of the image's source (assumes 3 chars + dot)
					var extension = s.substring(s.length-4);
					// get the everything but the extension of the image's source
					var firstpart = s.substring(0,s.length-4);
					// insert rollover in between the firstpart and extension
					this.src = firstpart + "_rollover" + extension;
				}
				imageelements[i].onmouseout = function () {
					// remove the _rollover from the image's source
					var s = this.src;
					var extension = s.substring(s.length-4);
					// get the first part, excluding '_rollover'
					var firstpart = s.substring(0,s.length-13);
					// join the extension and the firstpart back together excluding '_rollover'
					this.src = firstpart + extension;
				}
				
				// preload the rollover image -- force the browser to cache the image
				var s = imageelements[i].src;
				var extension = s.substring(s.length-4);
				var firstpart = s.substring(0,s.length-4);
				// create an anonymous image object and load the image into it.
				// the browser will start downloading it, and then when this function ends
				// we don't have useless variables lying around.
				(new Image()).src = firstpart + "_rollover" + extension;
				
			}// end if contains 
		}// end for
		
	}// end function init
	
}) (); // after defining the function, execute it.