var currentSelectedElementId = 0;
var navFadeInTime = 300;
var navFadeOutTime = 200;
var navMouseOutHideTime = 700;

$(document).ready(function()
{
    //attach event to main top-level menu item elements
    $('.top-nav-button-link').mouseover(function()
    {
        $('body').stopTime('hide');

        if (currentSelectedElementId == $(this).attr("id"))
            return;

        hideSubMenu();

        //fade in the submenu and apply styles to the currently selected top-level menu button element
        $(this).next().fadeIn(navFadeInTime);
        $(this).parent(0).next().fadeIn(navFadeInTime);

        currentSelectedElementId = $(this).attr("id");
    });

    //attach appropriate events to menu elements - a timer runs before closing the menu, 
    //unless it it cancelled by a mouse action over another element
    $('.mouseover-timer-element').mouseover(function()
    {
        $('body').stopTime('hide');
    });

    $('.mouseout-timer-element').mouseout(function()
    {
        $('body').oneTime(navMouseOutHideTime, 'hide', function()
        {
            hideSubMenu();
        });
    });

    //handle highlighting
    //    $('.top-sub-nav a').mouseover(function()
    //    {
    //        $(this).css('backgroundColor', '#DDDDDD');
    //    });

    //    $('.top-sub-nav a').mouseout(function()
    //    {
    //        $(this).css('backgroundColor', '#FFFFFF');
    //    });
});

function hideSubMenu()
{
    $('.top-sub-nav-header').fadeOut(navFadeOutTime);
    $('.top-sub-nav').fadeOut(navFadeOutTime);
    currentSelectedElementId = 0;
}