// IMAGE SWAP + PRELOADER
// VERSION 4.0
// NOTES: 
// -- images need to have "_on" and "_off" in the filenames
// -- images need to have the following attribute to swap: liteup="yes"

// Originally Written By Jonah in 2004



function getElementsByAttribute(oElm, strTagName, strAttributeName, strAttributeValue){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    var oAttributeValue = (typeof strAttributeValue != "undefined")? new RegExp("(^|\\s)" + strAttributeValue + "(\\s|$)") : null;
    var oCurrent;
    var oAttribute;
    for(var i=0; i<arrElements.length; i++){
        oCurrent = arrElements[i];
        oAttribute = oCurrent.getAttribute(strAttributeName);
        if(typeof oAttribute == "string" && oAttribute.length > 0){
            if(typeof strAttributeValue == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute))){
                arrReturnElements.push(oCurrent);
            }
        }
    }
    return arrReturnElements;
}

function addSwapEvent( obj, type, fn )
{
	if (obj.addEventListener)
		obj.addEventListener( type, fn, false );
	else if (obj.attachEvent)
	{
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
	}
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
//called on pageload for preloading images and setting up images to swap on mouseover
function initImageswap() {

	//start the preload script
	if (!document.getElementById) return
	var imgOriginSrc;
	var imgTemp = new Array();
	var imgArray = document.getElementsByTagName('img');
	// loop through all the images on the page, check for liteup images, and preload their highlight states
	for (var i = 0; i < imgArray.length; i++) {
		// if the image is set to liteup then preload its hover state
		if (imgArray[i].getAttribute('liteup')) {
			//preload 'liteup' images for smooth swapping
			imgOriginSrc = imgArray[i].getAttribute('src');
			var imgNewSrc = imgOriginSrc.replace("_wh", "_rd");
			imgTemp[i] = new Image();
			imgTemp[i].src = imgNewSrc;
		} // end liteup image "if"
	} // end image loop for preload

	// capture mouseover on parent links to highlight child liteup images function:
	// this should highlight the image when its parent link is hovered, no matter how far up the tree the parent link is.
	
	links = document.getElementsByTagName('A');
	//loop through links and add mouseover event listeners
	for (i=0;i<links.length;i++) {
		liteupImages = getElementsByAttribute(links[i], "*", "liteup");
		//if we found a liteup image in there, add the mouseover event to the link
		//the mouseover funciton will add the event listener to the image and light it up
		if (liteupImages.length > 0) {
			addSwapEvent(links[i],"mouseover",liteUp);
			addSwapEvent(links[i],"mouseout",lightsOut);
		}
	}
} // end preload initialization

//liteup on mouseover
function liteUp() {
	liteupImages = getElementsByAttribute(this, "*", "liteup");
	// just grabbing the first liteup image in the link, could be expanded to accommodate more, but havent seen a need for it yet...
	image = liteupImages[0];
	//lite up the current moused-over image
	imgOriginSrc = image.getAttribute('src');
	imgNewSrc = imgOriginSrc.replace("_wh", "_rd");
	image.setAttribute('src', imgNewSrc);
}
//mouseout return to "off" image
function lightsOut() {
	liteupImages = getElementsByAttribute(this, "*", "liteup");
	image = liteupImages[0];
	//turn off the current moused-out image
	imgOriginSrc = image.getAttribute('src');
	imgNewSrc = imgOriginSrc.replace("_rd","_wh");
	image.setAttribute('src',imgNewSrc);
}

// add load event for initializing the image prelaod and swap setup 
addLoadEvent(initImageswap);