RORTICUS.Header = {};

RORTICUS.Header.showMenu = function (name) {
    var mainNav = document.getElementById(name);
    var menu = document.getElementById(name + "Menu");

    menu.style.visibility = "hidden";
    menu.style.display = "block";

    var oldClassName = mainNav.className;
    mainNav.className = "option selected";

    var parentCoords = RORTICUS.elementFrame(document.getElementById("main"));
    var coords = RORTICUS.elementFrame(mainNav);
    var menuSize = RORTICUS.elementFrame(menu);

    // position the image
    var image = menu.getElementsByTagName("IMG")[0];
    image.style.position = "absolute";
    image.style.left = "2px";
    image.style.top = "12px";

    if(coords.left + (menuSize.right - menuSize.left) > parentCoords.right)
    {
        // open to the left
        menu.style.visibility = "visible";
        menu.style.position = "absolute";
        menu.style.left = coords.right - (menuSize.right - menuSize.left) + "px";
        menu.style.top = coords.bottom + "px";
    }
    else
    {
        // open to the right
        menu.style.visibility = "visible";
        menu.style.position = "absolute";
        menu.style.left = coords.left + "px";
        menu.style.top = coords.bottom + "px";
    }

    mainNav.onmouseout = function () {
        mainNav.className = oldClassName;
        menu.style.display = "none";
    };
};