/*******************************************************
* 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 = '_off';
var ON_SUFFIX = '_on';

/**********************************************************
* Here's the meat of the operation - this function sets 
* 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;
}


/**********************************************************
* The 'bootstrapper' that loads the behavior when the 
* page loads. 
* This will perform any existing onload functions, 
* then execute the image rollover setup.
*********************************************************/

if (window.onload)
{
//Hang on to any existing onload function.
var existingOnload = window.onload;
}

window.onload=function(ev){
//Run any onload that we found.
if (existingOnload)
{
existingOnload(ev);
}

//Don't bother loading unless getElementsByTagName is supported.
if (document.getElementsByTagName)
{
enableMenuImageRollovers();
}
};