// DOM Ready

jQuery(function($){



    var $el, leftPos, newWidth,

        $mainNav = $("#menu-main-menu");



    /*

        EXAMPLE ONE

    */

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



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

	if($('#menu-main-menu .current_page_item').length)

	{

    $magicLine

        .width($("#menu-main-menu .current_page_item").width())

        .css("left", $("#menu-main-menu .current_page_item a").position().left)

        .data("origLeft", $magicLine.position().left)

        .data("origWidth", $magicLine.width());

	}



    $("ul#menu-main-menu li a").hover(function() {



        $el = $(this);

        leftPos = $el.position().left;

        newWidth = $el.parent().width();



                        $("ul#menu-main-menu li").hover(function() {

                        $(this).addClass("hover");                                                              

                        $('ul:first',this).css('visibility', 'visible');

                        $('ul:first',this).css('left', leftPos);

                        },function() {

                        $(this).removeClass("hover");

                        $('ul:first',this).css('visibility', 'hidden');

                        }),



        $magicLine.stop().animate({

            left: leftPos,

            width: newWidth

        });



    }, function() {

        $magicLine.stop().animate({

            left: $magicLine.data("origLeft"),

            width: $magicLine.data("origWidth")

        });    

    });



        $("ul.sub-menu li").hover(function() {

                $magicLine.stop().animate();

                $("#magic-line").css('visibility', 'hidden');



         }, function() {

                $("#magic-line").css('visibility', 'visible');

                leftPos = $el.position().left;

        newWidth = $el.parent().width();



        });



});