var IE  = document.all;
var NS4 = document.layers;
var DOM = document.getElementById;
var IE4 = IE && !DOM;
var mac = (navigator.appVersion.indexOf("Mac") != -1);


var menuReady = false;

function menuItem(name, wholeItem) {
    this.name = name;
    this.wholeItem = wholeItem;
}

function menu(name, imageId, menuItemArray, unselectedImage, selectedImage, elemId) {
    this.name = name;
    this.imageId = imageId;
    this.menuItemArray = menuItemArray;
    this.unselectedImage = unselectedImage;
    this.selectedImage = selectedImage;
    this.elemId = elemId;
}

var imagesNormal = new Array();
var imagesOver = new Array();


var CSSRuleValues = {
    menuItemHeight:"18px",
    menuItemLineHeight:"1.0em",
    menuWrapperBorderWidth:"1px",
    menuWrapperPadding:"2px",
    defaultBodyFontSize:"8pt" };

var menus = new Array();


function getElementStyle(elem, IEStyleProp, CSSStyleProp) {

    if (elem.currentStyle) {
        return elem.currentStyle[IEStyleProp];
    } else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, "");
        return compStyle.getPropertyValue(CSSStyleProp);
    }

    return "";

}

function makeHashes() {
    for (var i = 0; i < menus.length; i++) {
        menus[menus[i].elemId] = menus[i];
        menus[menus[i].imageId] = menus[i];
    }
}

function assignLabelEvents() {
    var elem;
    for (var i = 0; i < menus.length; i++) {
        elem = document.getElementById(menus[i].imageId);
        elem.onmouseover=swap;
        elem.onmouseout=swap;
    }
}


function makeMenus() {

    var menuDiv, menuItem, itemLink, imageId,
        textNode, offsetLeft, offsetTop;

    var menuItemHeight = 0;

    var bodyFontSize = parseInt(getElementStyle(document.body, "fontSize", "font-size"));

    if (bodyFontSize == parseInt(CSSRuleValues.defaultBodyFontSize)) {
        menuItemHeight = (parseFloat(CSSRuleValues.menuItemHeight));
    } else {
        menuItemHeight = parseInt(parseFloat(CSSRuleValues.menuItemLineHeight) * bodyFontSize);
    }

    var heightAdjust = parseInt(CSSRuleValues.menuWrapperPadding) + parseInt(CSSRuleValues.menuWrapperBorderWidth);

    if (IE && navigator.userAgent.indexOf("Win") != -1 &&
            (typeof document.compatMode == "undefined" || document.compatMode == "BackCompat")) {

        heightAdjust = -heightAdjust;
    }

    for (var i = 0; i < menus.length; i++) {

        menuDiv = document.createElement("div");
        menuDiv.id = "popupmenu" + i;
        menus[i].elemId = menuDiv.id;
        menuDiv.className = "menuWrapper";

        if (menus[i].menuItemArray.length > 0) {
            menuDiv.style.height = (menuItemHeight * menus[i].menuItemArray.length) - heightAdjust + "px";
        } else {
            menuDiv.style.display = "none";
        }

        menuDiv.onmouseover = keepMenu;
        menuDiv.onmouseout = requestHide;
        menuDiv.style.zindex = 1000;

        for (var j = 0; j < menus[i].menuItemArray.length; j++) {

            menuItem = document.createElement("div");
            menuItem.id = "popupmenuItem_" + i + "_" + j;
            menuItem.className = "menuItem";
            menuItem.onmouseover = toggleHighlight;
            menuItem.onmouseout  = toggleHighlight;
            menuItem.onclick = hideMenus;
            menuItem.style.top = menuItemHeight * j + "px";
            menuItem.innerHTML = menus[i].menuItemArray[j].wholeItem;
            menuDiv.appendChild(menuItem);

        }

        document.body.appendChild(menuDiv);
    }

    makeHashes();
    assignLabelEvents();

    for (i = 0; i < menus.length; i++) {
        positionMenu(menus[i].elemId);
    }

    menuReady = true;

}

var timer;

function keepMenu() {
    clearTimeout(timer);
}

function cancelAll() {
    keepMenu();
    menuReady = false;
}

function requestHide() {
    timer = setTimeout("hideMenus()", 250);
}

function hideMenus() {

    for (var i = 0; i < menus.length; i++) {
        document.getElementById(menus[i].imageId).src = menus[i].unselectedImage.src;
        var menu = document.getElementById(menus[i].elemId);
        menu.style.visibility = "hidden";
    }
}

function positionMenu(menuId) {

    var image = document.getElementById(menus[menuId].imageId);

    var offsetTrail = image;
    var offsetLeft = image.width;
    var offsetTop = 0;

    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }

    if (navigator.userAgent.indexOf("Mac") != -1 &&
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }

    var menuDiv = document.getElementById(menuId);
    menuDiv.style.left = offsetLeft + "px";
    menuDiv.style.top = offsetTop + "px";

}

function showMenu(menuId) {
    if (menuReady) {
        keepMenu();
        hideMenus();
        positionMenu(menuId);
        var menu = document.getElementById(menuId);
        menu.style.visibility = "visible";
    }
}

function toggleHighlight(evt) {

    evt = (evt) ? evt : ((event) ? event : null);

    if (typeof menuReady != "undefined") {

        if (menuReady && evt) {
            var elem = (evt.target) ? evt.target : evt.srcElement;

            if (elem.nodeType == 3) {
                elem = elem.parentNode;
            }

            if (evt.type == "mouseover") {
                keepMenu();
                elem.className = "menuItemOn";
            } else {
                elem.className = "menuItem";
                requestHide();
            }

            evt.cancelBubble = true;
        }
    }
}

function swap(evt) {

    evt = (evt) ? evt : ((event) ? event : null);

    if (typeof menuReady != "undefined") {

        if (menuReady && evt && document.getElementById && document.styleSheets) {

            var elem = (evt.target) ? evt.target : evt.srcElement;

            if (elem.className == "menuImg") {

                if (evt.type == "mouseover") {
                    showMenu(menus[elem.id].elemId);
                    elem.src = menus[elem.id].selectedImage.src;
                } else if (evt.type == "mouseout") {
                    requestHide();
                }


                evt.cancelBubble = true;
            }
        }
    }
}

function initMenus() {
    if (document.getElementById && document.styleSheets) {
        setTimeout("makeMenus()", 5);
        window.onunload = cancelAll;
    }

}