/*
Etienne's Simple Drop Down Menu
Last update: 24 Aug 2010 
    
How to use:
    
1) On the HyperLink Add the attribute SubMenu (the ID of the Sub Menu): 
<a href="#" SubMenu="menu-about"> Show Menu </a>
        
2) Create the menus
<ul id="menu-about" class="submenu">
<li>a</li>
<li>b</li>
</ul>
        
NOTE:  SUB MENUS MUST BE *** OUTSIDE *** OF THE MAIN MENU CONTAINER
*/

//SETTINGS
var opacity = 1.00;

jQuery(document).ready(function () {

    //Flag to determine if we are hover the menu
    var oversubmenu = false;
    jQuery('.submenu').mouseenter(function () {
        overmenu = true;

    }).mouseleave(function () {  overmenu = false; });

    jQuery(".menu a").mouseenter(function () {
        overmenu = true;
    }).mouseleave(function () { overmenu = false; });

    var submenu;
    jQuery(".menu a").mouseover(function () {

        //close last opened menu
        jQuery(submenu).stop().fadeOut(200);

        //Open the new menu
        submenu = "#" + jQuery(this).attr('submenu');
        jQuery(submenu).stop().fadeTo(200, opacity);

       // console.log(submenu);
    });

    //close opened menu on mouseout from submenu
    jQuery(".submenu").mouseleave(function () { jQuery(submenu).stop().fadeOut(200); });

    //close submenu when leaving main button
    jQuery(".menu a").mouseleave(function () {
        setTimeout(function () { if (!overmenu) { jQuery(".submenu").fadeOut(200); } }, 100);
    });

});