var activeButton = null;

function buttonMouseover(event, menuId) {
    var button;
    button = getEventTarget(event);
    if (activeButton == null) {
        if (button.menu == null) {
            button.onmouseout = buttonOrMenuMouseout;
            button.menu = document.getElementById(menuId);
            button.menu.onmouseout = buttonOrMenuMouseout;
            menuInit(button.menu);
        }

        if (button != activeButton) {
            showMenu(button);
            activeButton = button;
        } else {
            activeButton = null;
        }
        return;
    }
}

function buttonOrMenuMouseout(event) {
    var el;

    if (activeButton == null) return;

    if (browser.isIE) {
        el = window.event.toElement;
    } else if (event.relatedTarget != null) {
        el = (event.relatedTarget.tagName ? event.relatedTarget : event.relatedTarget.parentNode);
    }

    if (getContainerWith(el, "DIV", "menu" ) == null) {
        hideMenu(activeButton);
        activeButton = null;
    }
}

function showMenu(button) {
    var x, y;
    button.className += " menuButtonHover";
    x = getPageOffsetLeft(button);
    y = getPageOffsetTop(button) + button.offsetHeight;

    button.menu.style.left = x + "px";
    button.menu.style.top  = y + "px";
    button.menu.style.visibility = "visible";
}

function hideMenu(button) {
    button.className = "menuButton";
    button.menu.style.visibility = "hidden";
}

function menuInit(menu) {
    var itemList;
    var itemWidth;
    var w, dw;

    // Find the width of a menu item.
    itemList = menu.getElementsByTagName("A" );
    if (itemList.length > 0) {
        itemWidth = itemList[0].offsetWidth;
    } else {
        return;
    }

    // Fix IE hover problem by setting an explicit width on first item of the menu.
    if (browser.isIE) {
        w = itemList[0].offsetWidth;
        itemList[0].style.width = w + "px";
        dw = itemList[0].offsetWidth - w;
        w -= dw;
        itemList[0].style.width = w + "px";
    }
    menu.isInitialized = true;
}