/*******************************************************
 * Copyright (C) 2006 Blend Interactive, Inc.
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public
 * License along with this library; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
 *
 **********************************************************/
/**********************************************************
 * Blend Javascript Rollovers V 1.0.0
 *
 * To install: 
 * -- Include the script in the page: 
 * <script src="javascripts/rollovers.js" type="Javascript" />
 *
 * -- Create the rollover image pair with _off and _on in the names.
 * e.g. "home_off.gif" and "home_on.gif"
 *
 * -- Add the image tag with a class of "rollover":
 * <img src="images/home_off.gif" class="rollover" />
 *********************************************************/

var ROLLOVER_CLASSNAME = 'rollover';
var OFF_SUFFIX = '_up';
var ON_SUFFIX = '_ov';

/**********************************************************
 * Here's the meat of the operation - this function sets 
 * up mouseover functions on all IMG tags with a 
 * classname of ROLLOVER_CLASSNAME.
 *********************************************************/
function enableMenuImageRollovers()
{
	var imgs = getElementsByTagAndClassName('img',ROLLOVER_CLASSNAME);
	
	for(var i = 0; i < imgs.length; i++)
	{
		var img=imgs[i];
		
		//Create a couple of new image objects.
		var imgOn = new Image();
		var imgOff = new Image();
		
		//Set their source (this triggers the browser to load them).
		imgOn.src=img.src.replace(OFF_SUFFIX,ON_SUFFIX);
		imgOff.src=img.src.replace(ON_SUFFIX,OFF_SUFFIX);
		
		//Bind them to the original image.
		img.imgOn = imgOn;
		img.imgOff = imgOff;
		
		//Switch to them on mouseover/mouseout.
		img.onmouseover=function() {
			this.src=this.imgOn.src;
		}
		
		img.onmouseout=function() {
			this.src=this.imgOff.src;
		}
	}

}

/**********************************************************
 * A handy utility function that lets you find elements 
 * with a certain className, which is a common need.
 * This will properly support cases where there are 
 * multiple class names assigned to an object.
 *********************************************************/
function getElementsByTagAndClassName(tagName, className)
{
	var items = new Array();
	var elems = document.getElementsByTagName(tagName);
	for(var i = 0; i < elems.length; i++)
	{
		var elem = elems[i];
		var classNames = elem.className.split(" ");
		for (var j = 0; j < classNames.length; j++)
		{
			if(classNames[j] == className)
			{
				items.push(elem);
			}
		}
	}
	return items;
};