/**********************************************************
 * Last Updated:
 * Update Description:
 *
 * !!!! TODO !!!!
 * > Add functionality to also scan through INPUT tags of type submit, button, and image
 *
 * To install: 
 *
 * Step 1 - Include the script in the page: 
 * <script src="path to dir/AutoRollovers.js" type="Javascript" />
 *
 * Step 2 - Create the rollover image pair with _off/_on, -1/-2, etc in the names.
 * e.g. "home_off.gif" and "home_on.gif"
 *
 * Step 3 - Add the image tag with a class of "rollover":
 * <img src="images/home_off.gif" class="rollover" />
 *
 *********************************************************/

// These can be changed to whatever you want them to be
var ROLLOVER_CLASSNAME = 'rollover';
var OFF_SUFFIX = '_off';
var ON_SUFFIX = '_on';


/**********************************************************
 * 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);
	var inputs = getElementsByTagAndClassName('input', ROLLOVER_CLASSNAME);
	
	for(var i = 0; i < imgs.length; i++) // go through all images
	{
		var img=imgs[i];
		swapImage(img);		
	}
	
	for (var j = 0; j < inputs.length; j++) { // go through all inputs
		var input = inputs[j];
		if (input.type == "image") { // support only inputs with type = image for now
			swapImage(input);
		}
	}
}

function swapImage(element) {
	//Create a couple of new image objects.
	var imgOn = new Image();
	var imgOff = new Image();
	
	if (element.className.match(/rollover (\S+)/)) { // if an image name is given after the rollover class name, use that as the rollover 
		imgOn.src = element.className.match(/rollover (\S+)/)[1];
		imgOff.src = element.src;
	} else { // otherwise just swap the on and off versions
		//Set their source (this triggers the browser to load them).
		imgOn.src = element.src.replace(OFF_SUFFIX,ON_SUFFIX);
		imgOff.src = element.src.replace(ON_SUFFIX,OFF_SUFFIX);
	}
	
	//Bind them to the original image.
	element.imgOn = imgOn;
	element.imgOff = imgOff;
	
	//Switch to them on mouseover/mouseout.
	element.onmouseover=function() {
		this.src=this.imgOn.src;
	}
	
	element.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;
}


function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

addLoadEvent(contentChange);


function contentChange() {
    if (navigator.userAgent.match(/Opera (\S+)/)) {
        var operaVersion = parseInt(navigator.userAgent.match(/Opera (\S+)/)[1]);
    }
    if (!document.getElementById || operaVersion < 7) return;

    var links = document.getElementsByTagName('a');
    var contentDiv;
    for (j = 0; j < links.length; j++) {
        if (links[j].className.indexOf('content') != -1) {
            links[j].onclick = function() {
                for (k = 0; k < links.length; k++) { // go through links with class content and set them to invisible (before setting the new one visible)
                    if (links[k].className.indexOf('content') != -1) {
                        document.getElementById(links[k].className.match(/content (\S+)/)[1]).style.display = 'none';

                        var imgs = links[k].getElementsByTagName('img');
                        if (imgs.length > 0) {
                            imgs[0].src = "App_Themes/Default/images/subpage/" + links[k].className.match(/content (\S+)/)[1] + "_inactive.jpg";
                        }
                    }
                }

                document.getElementById(this.className.match(/content (\S+)/)[1]).style.display = 'block';
                var img2 = this.getElementsByTagName('IMG');
                if (img2.length > 0) {
                    img2[0].src = "App_Themes/Default/images/subpage/" + this.className.match(/content (\S+)/)[1] + "_active.jpg";
                }
            }
        }
    }
}

/**********************************************************
 * 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();
	}
};