$(document).ready(function(){
    var mainNav = $("#menu>ul");
    mainNav.append("<li id='magic-line'></li>");
    var magicLine = $("#magic-line");
    Cufon.replace ('#menu>.header', { fontFamily: 'Kurier', textShadow: '1px 1px #FFFFFF'});
    Cufon.replace ('#menu>.navi-back', { fontFamily: 'Kurier', textShadow: '1px 1px #FFFFFF'});
    Cufon.replace ('#menu>ul', { fontFamily: 'Kurier', textShadow: '1px 1px #FFFFFF', onAfterReplace: function(){
        magicLine
            .width($("li.current_page_item>a", mainNav).width() - 10)
            .css("left", $("li.current_page_item>a", mainNav).position().left - 5)
            .data("left", magicLine.position().left)
            .data("width", magicLine.width());
    }});
    $("li>a", mainNav).hover(function() {
        var self = $(this);
        magicLine.stop().animate({
            left: self.position().left - 5,
            width: self.width() - 10
        });
    }, function() {
        magicLine.stop().animate({
            left: magicLine.data("left"),
            width: magicLine.data("width")
        });
    });
});