/**********************************
*
* Quick image rollover script
*-----------------------------
* Avoids the need to add onmouseover and onmouseout events to each image.
* All you need to add is one class name to the img tag (e.g. class="rollover").
*
**********************************
*
* Charles Davison
* Gum Interactive
* charles@guminteractive.com
* http://www.guminteractive.com
*
**********************************
*
* INSTRUCTIONS:
*
* 1. Save the rollover/mouseover image state in the same directory as the original image
*
* 2. On the end of the filename add '-over' (before the filetype), e.g.:
* 		'home.gif' will have the accompanying image 'home-over.gif'
*
* 3. In the HTML, add the class 'rollover' to the 'img' tag, e.g.:
* 		'<img src="home.gif" class="rollover" />'
*
*	 Multiple classes are allowed, e.g.:
*		'<img src="home.gif" class="leftNav rollover" />'
*
***********************************/

//Define constants
OVER_STR = "-over"; //the suffix you give to images to identify them as the mouseover state
CLASS_STR = "rollover"; //the class name you give to images in the HTML to identify as images that should have a rollover state

//Cycle through the document's IMG elements and apply mouseover and mouseout events if they have the relevant class name
function loadMouseOvers()
{	
	for (var i = 0; i < document.images.length; i++)
	{
		if (hasClass(CLASS_STR, document.images[i]))
		{
			document.images[i].onmouseover = doMouseOver;
			document.images[i].onmouseout = doMouseOut;
		}
	}
}

function doMouseOver()
{	
	if (!hasOverState(this)) //img is not already in the mouseover state
	{
		var filename = this.src.substring(0, this.src.length-4);
		var extension = this.src.substring(this.src.length-4, this.src.length);
	
		this.src = filename + OVER_STR + extension;
	}
}

function doMouseOut()
{
	if (hasOverState(this)) //img is in the mouseover state
	{
		var filenamePos = this.src.length - 4 - OVER_STR.length; //used to find the position before the extension and 'over' state (e.g. "-over.gif")
		
		var filename = this.src.substring(0, filenamePos);
		var extension = this.src.substring(this.src.length-4, this.src.length);
		
		this.src = filename + extension;
	}
}

//Check if the image is already in the over state (contains OVER_STR in the filename)
function hasOverState(element)
{
	if (element.src.indexOf(OVER_STR) != -1)
	{
		return true; //image is  in the mouseover state	
	}
	else
	{
		return false; //image is in the mouseout state
	}
}


//check if the referenced image object has the relevant class name
function hasClass(classStr, element)
{
	var rExp = new RegExp("\\b" + classStr + "\\b");
	
	if(rExp.exec(element.className))
	{
		return true; //image has rollover class
	}
	else
	{
		return false; //images does not have rollover class
	}
}