// This script should be included AFTER DOM elements that are to be configured for hover and AFTER custom event handlers have
// been defined for the elements so that those event handlers are preserved and not overwritten
//
// For ASP.Net elements, you must either programmatically add the hoverable attribute to the element or write script to directly
// call the initializeHoverableElement function.
//
// For HTML elements, simply add the hoverable attribute to the tag (i.e. <input type="button" hoverable value="..." />)


var g_hoverableClassHash = new Array();
var g_hoverableImageHash = new Array();
var g_hoverableMouseOverEventBubble = new Array();
var g_hoverableMouseOutEventBubble = new Array();


function registerHoverableClass(class1, class2) {
    g_hoverableClassHash[class1] = class2;
    g_hoverableClassHash[class2] = class1;
}

// Define global hoverable css class mappings here
registerHoverableClass("linktext", "linktexthover");
registerHoverableClass("button", "buttonhover");

function registerHoverableImage(image1, image2) {
    g_hoverableImageHash[image1] = image2;
    g_hoverableImageHash[image2] = image1;
}

//registerHoverableImage("img.gif", "img_hover.gif");


function initializeHoverableElement(element) {
    // Allow other event handlers
    g_hoverableMouseOverEventBubble[g_hoverableMouseOverEventBubble.length] = element.onmouseover;
    element.setAttribute('mouseOverEventID', g_hoverableMouseOverEventBubble.length - 1);
    element.onmouseover = hoverableElementMouseOver;
    g_hoverableMouseOutEventBubble[g_hoverableMouseOutEventBubble.length] = element.onmouseout;
    element.setAttribute('mouseOutEventID', g_hoverableMouseOutEventBubble.length - 1);
    element.onmouseout = hoverableElementMouseOut;
}

function hoverableElementMouseOver() {
    this.className = g_hoverableClassHash[this.className];
        
    if (isHoverableImage(this)) toggleHoverableImage(this);
    
    // Bubble event
    if (g_hoverableMouseOverEventBubble[this.getAttribute('mouseOverEventID')]) {
        this.onmouseover = g_hoverableMouseOverEventBubble[this.getAttribute('mouseOverEventID')];
        this.onmouseover();
        this.onmouseover = hoverableElementMouseOver;
    }
}

function hoverableElementMouseOut() {
    this.className = g_hoverableClassHash[this.className];
    
    if (isHoverableImage(this)) toggleHoverableImage(this);
    
    // Bubble event
    if (g_hoverableMouseOutEventBubble[this.getAttribute('mouseOutEventID')]) {
        this.onmouseout = g_hoverableMouseOutEventBubble[this.getAttribute('mouseOutEventID')];
        this.onmouseout();
        this.onmouseout = hoverableElementMouseOut;
    }
}

function isHoverableImage(element) {
    switch (element.tagName.toUpperCase()) {
        case "IMG":
            return true;
            break;
        case "INPUT":
            return (element.type.toUpperCase() == "IMAGE");
            break;
        default:
            return false;
            break;
    }
}

function toggleHoverableImage(element) {
    var imageFullPath = element.src;
    var imageFile = imageFullPath.substring(imageFullPath.lastIndexOf("/") + 1, imageFullPath.length);
    var imagePath = imageFullPath.substring(0, imageFullPath.lastIndexOf("/") + 1);
    element.src = imagePath + g_hoverableImageHash[imageFile];
}

// Walk the DOM to find any elements that have the hoverable attribute
function searchDomForHoverableItems(element) {
    if (g_hoverableClassHash[element.className] != null) {
        initializeHoverableElement(element);
    }
}
registerDomWalkerHandler(searchDomForHoverableItems);