var dropDownTimer = null;
var dropUpTimer = null;

$(function() {
    $(".toplistpanel ul a").click(function() {
        var ul = $(this).closest("ul");
        hideChildren(ul);
    });

    $(".toplistpanel ul").hover(
        function(e) {
            var el = this;
            dropDownTimer = window.setTimeout(function() { showChildren(el); }, 400);
            if (dropUpTimer) {
                window.clearTimeout(dropUpTimer);
                dropUpTimer = null;
            }
        },
        function(e) {
            var el = this;
            dropUpTimer = window.setTimeout(function() { hideChildren(el); }, 400);
            if (dropDownTimer) {
                window.clearTimeout(dropDownTimer);
                dropDownTimer = null;
            }
        }
    );
});

function showChildren(el) {
    $(el).css({ zIndex: 8999, width: $(el).parent().width() + "px" });
    $(el).children("li").show().addClass("dropped");
}

function hideChildren(el) {
    $(el).children("li:not(.active)").hide();
    $(el).children("li").removeClass("dropped");
}