$(document).ready(
function() {


///////////////////////////////////////////////////////////////////////////
// Magic line

    var $el, leftPos, newWidth,
        $alter = -6,
        $mainNav2 = $("#menu");


    $mainNav2.append("<li id='magic-line'></li>");

    var $magicLineTwo = $("#magic-line");

    $magicLineTwo
        .width(88) // cloud width
        .height(24) // cloud height
        .css("left", $(".current_page_item a").position().left+$alter)
        .data("origLeft", $(".current_page_item a").position().left)
        .data("origWidth", $magicLineTwo.width())
        .data("origColor", $(".current_page_item a").attr("rel"));

    $("#menu li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left+$alter;
        $magicLineTwo.stop().animate({
            left: leftPos
        })
    }, function() {
        $magicLineTwo.stop().animate({
            left: $magicLineTwo.data("origLeft")+$alter
        });
    });

    // In case of window resize, calculate starting position again
    $(window).resize(function() {
        $magicLineTwo
            .width(88) // cloud width
            .height(24) // cloud height
            .css("left", $(".current_page_item a").position().left+$alter)
            .data("origLeft", $(".current_page_item a").position().left)
            .data("origWidth", $magicLineTwo.width())
            .data("origColor", $(".current_page_item a").attr("rel"));
    });
});