// DOM Ready
$(function() {
    var $el, leftPos, newWidth;
    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
    $(".big-menu .menu").children('ul').append("<li id='magic-line'></li>");
    /* Cache it */
    var $magicLine = $("#magic-line");
    $magicLine
        .width($(".current-menu-item").width() - 15)
        .css("left", $(".current-menu-item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
    $(".big-menu .menu > ul > li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width() - 15;
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
    
    $('.big-menu .menu ul li').bind('mouseover', openSubMenu); 
    $('.big-menu .menu ul li').bind('mouseout', closeSubMenu); 
    function openSubMenu() { 
        $(this).find('ul').css('visibility', 'visible'); 
    }; 
    function closeSubMenu() { 
        $(this).find('ul').css('visibility', 'hidden'); //$(this).find('ul li:not(:first)').css('visibility', 'hidden'); 
         
    };
    
    $('.big-menu').find('li.hasSubitem').bind('mouseover', function(){
        var $t = $(this),
            t_left = $t.position().left + 8;
            t_width = $t.width() - 15;    
        $magicLine.stop().animate({
            'left' : t_left + 'px',
            'width' : t_width + 'px'
        }, 250);
    }); 
});