/*
    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>
        
*/

//SETTINGS
var opacity = 0.90;


$(document).ready(function () {

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

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


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

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

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

			console.log(submenu);
    });

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

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


});