// menus.js contains the functions related to the navigation menus
//

// The writeMenuItem function writes a List Item HTML element <li> and anchor for a link
function writeMenuItem(menuText, description, linkPage, currentPage)
{
    if (currentPage == linkPage) {
        // Do not include an "href" anchor tag attribute for the current page
        document.write('<li><a title="You are viewing the ' + description +'">' + menuText + '</a>');
    } else {
        // Create the link with the description in a "tooltip" when the cursor hovers over it
        document.write('<li><a href="' + linkPage +'" title="' + description + '">' + menuText + '</a>');
    }
}
// The renderMenu function renders HTML elements for the links
// Note: Any special styling of the side, top or bottom menus should be done through style sheets
// so that the same "unordered list" element <ul> and list items <li> can be used for each menu.
// To-Do: It would be a bit cleaner if we separated menu date from presentation by
// defining the links using Microsoft Visual Studio's Web.Sitemap XML format,
// and do a client-side eXtensible Style Sheet (XSL) transformation into HTML.
function renderMenu()
{
    // Split the path of the current URL into an array of directories and the current page name
    var pathParts = document.location.pathname.split('/');
    // The last item after a slash is the current page name
    var currentPage = pathParts[pathParts.length - 1];
        
    document.write('<ul>\n'); // Unordered List element <ul> holds ListItem elements <li> for each link

    writeMenuItem('Home', 'Home Page', 'index.html', currentPage);
    document.write('</li>\n')

    writeMenuItem('About Us', 'About the University Club', 'about.html', currentPage);
        document.write('<ul>\n'); // Unordered List element <ul> with submenus for "About Us" menu
        
            writeMenuItem('History', 'History of the University Club', 'history.html', currentPage);
            document.write('</li>\n')
            
            writeMenuItem('Board Members', 'Members of the Board', 'board.html', currentPage);
            document.write('</li>\n')
        
        document.write('</ul>\n'); // End of "About Us" submenu
    document.write('</li>\n'); // End of "About Us" menu

    writeMenuItem('Big 10', 'Other Big 10 Women\'s Organizations', 'big10.html', currentPage);
    document.write('</li>\n')

    writeMenuItem('Calendar', 'Event Calendar, monthly format', 'calendar.html', currentPage);
    document.write('</li>\n')

    writeMenuItem('Events', 'List of upcoming events', 'events.html', currentPage);
    document.write('</li>\n')

    writeMenuItem('Interest Groups', 'Interest Groups within the University Club', 'groups.html', currentPage);
        document.write('<ul>\n'); // Unordered List element <ul> with submenus for "Interest Groups" menu
        
            writeMenuItem('Newcomers', 'Newcomers Club', 'newcomers.html', currentPage);
            document.write('</li>\n')
        
        document.write('</ul>\n'); // End of "About Us" submenu
     document.write('</li>\n')

    writeMenuItem('Newsletter', 'Monthly Newsletter', 'news.html', currentPage);
    document.write('</li>\n')

    writeMenuItem('Scholarship', 'Information on the University Club Scholarship', 'scholarship.html', currentPage);
    document.write('</li>\n')

    writeMenuItem('Contact Us', 'Contact Information', 'contact.html', currentPage);
    document.write('</li>\n')

    document.write('</ul>\n'); // End of the Unordered List element holding the links
}

// This function finds the main menus (navleft, navbottom) and hooks up the submenus under each one.
function hookupAllSubmenus()
{
    var navigationMenuIDs = new Array('navleft', 'navbottom', 'navtop', 'navright');
    // Show submenus towards the center of the page from the main menus
    var navigationSubmenuDirection = new Array('right', 'up', 'down', 'left');
    // Loop through the array containing the IDs of the possible navigation menu containers
    for (var i = 0; i < navigationMenuIDs.length; i++)
    {
        // See if this page contains an element with the given ID
        var containerElement = document.getElementById(navigationMenuIDs[i]);
        // If found, hookup the subMenus under the container element
        if (containerElement) hookupSubmenus(containerElement, navigationSubmenuDirection[i]);
    }
}
function showSubmenu(p, direction)
{
    var c = p.submenu; // hookupSubmenus saved a reference to the child (submenu) as a property
    // Set the position of the submenus relative to the positioned container,
    // which is the relatively positioned 'LI' element with the submenu
    p.style.position = 'relative'; // submenu positioning is relative to the positioned container
    c.style.left = '0px';
    c.style.top = '0px';
    if (direction == 'right') c.style.left = (p.offsetWidth) + 'px';
    if (direction == 'left') c.style.left = (0 - c.offsetWidth) + 'px';
    if (direction == 'down') c.style.top = (p.offsetHeight) + 'px';
    if (direction == 'up') c.style.top = (0 - c.offsetHeight) + 'px';
    c.style.zIndex = 1;
    c.style.visibility = 'visible';
}
function hideSubmenu()
{   // hide the submenu in a little while if we don't move into it first
    var c = this.submenu;
    var menuTimerID = window.setTimeout(function() {c.style.visibility = 'hidden';}, 500);
    c.onmouseover = new Function("window.clearTimeout(" + menuTimerID +");");
}
// When it finds an LI with a submenu (UL) underneath, it will position the UL
// and add event handlers (onmouseover, onmouseout) to show or hide the submenu
function hookupSubmenus(containerElem, direction)
{
    // Some of this code was inspired by: http://www.dynamicdrive.com/dynamicindex1/dropdowncontrol.htm
    // var textNode = document.createTextNode('hooking up Submenus for ' + containerElem.id);
    // containerElem.appendChild(textNode);

    // Find all the menu list items ('li' elements) under the main container
    var items = containerElem.getElementsByTagName('LI');
    // Check any child elements under each menu item for submenus ('ul' elements)
    for (var i = 0; i < items.length; i++)
    {
        var children = items[i].childNodes;
        for (var childIndex = 0; childIndex < children.length; childIndex++)
        {
            var childElem = children[childIndex];
            if (childElem.nodeName == 'UL')
            {
                var parentElem = items[i]; // this will be the parent element for the submenu
                // Create a new property containing the submenu element object
                parentElem["submenu"] = childElem;
                childElem.style.visibility = 'hidden';
                childElem.style.position = 'absolute';
                parentElem.onmouseover = function() {showSubmenu(this, direction);};
                // parentElem.onmouseout =  hideSubmenu;
                parentElem.onmouseout = function() {this.submenu.style.visibility = 'hidden';}
                childElem.onmouseout = function() {this.style.visibility = 'hidden';}
            }
        }
    }
}
// When the page first loads, hookup the event handlers for the submenus of all navigation elements
window.onload = hookupAllSubmenus;