$(function() {
    var normalColor = $('.menu .menu-header').css('border-left-color');
    var activeColor = $('.menu .menu-options').css('border-left-color');

    function hideMenu(event) {
        $('.menu').css({ 'z-index': 0, overflow: "hidden" });
        $('.menu .menu-header').css({ 'border-color': normalColor });
    }

    function showMenu(event, $menu) {
        $menu.css({ 'z-index': 1, overflow: "visible" });
        $('.menu-header', $menu).css({ 'border-color': activeColor });
        event.stopPropagation();
    }

    function toggleMenu(event) {
        var $menu = $(this).closest('.menu');

        var any = 0;
        $('.menu').each(function() {
            if ($(this).css('overflow') == 'visible') any = 1;
        });

        //if ($('.menu').css('overflow') == 'visible')
        //    hideMenu();

        if (any) {
            hideMenu();
            $('.menu-header', $menu).css({ 'border-color': activeColor });
        }
        else if ($menu.css('overflow') == 'hidden') {
            $('.menu-header').css({ 'border-color': normalColor });
            showMenu(event, $menu);
        }

        event.stopPropagation();
    }

    $('body').click(hideMenu);

    //$('.menu').click(function(e) { showMenu(e, $(this)) });
    $('.menu').click(function(e) { e.stopPropagation() });

    $('.menu .menu-header').click(toggleMenu);
});