$(function() {

    var topPos, newHeight, $mainNav = $("#main-nav");
    $("#btn-" + $("body").attr("id").replace("pg-", "")).addClass("current");

    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");

    $magicLine
        .height($(".current").height())
        .css("top", $(".current a").position().top)
        .data("origTop", $magicLine.position().top)
        .data("origHeight", $magicLine.height());

    $("#main-nav>li>a").hover(function() {
        $("ul.submenu").hide("fast");
        $(this).parent().attr("subOn", false);
        $(this).siblings("ul").show("fast");

        topPos = $(this).position().top;
        newHeight = $(this).parent().height();
        $magicLine.stop().animate({
            top: topPos,
            height: newHeight
        });
        
    }, function() {      
        var item = $(this);
        setTimeout(function() {
            if (!item.parent().attr("subOn")) {
                item.siblings("ul").hide("fast");
            }
        }, 200);

        $magicLine.stop().animate({
            top: $magicLine.data("origTop"),
            height: $magicLine.data("origHeight")
        });
    });
    
    $("ul.submenu").hover(function() {
        $(this).parent().attr("subOn", true);
     }, function() {
         $(this).parent().attr("subOn", false);
         $(this).hide("fast");
     });

});