$(document).ready(function () {

    //transitions
    //for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/

    var style = 'easeOutElastic';
    var item_class = '';
    if ($('#navigation li.current_page_ancestor').length) {
        item_class='current_page_ancestor';
    } else {
        if ($('#navigation li.current_page_item').length) {
            item_class='current_page_item';
        } else {
            item_class='home_page_link';
        }
    }

    //Retrieve the selected item position and width
    var default_left = Math.round($('#navigation li.' + item_class).offset().left - $('#navigation').offset().left);
    var default_width = $('#navigation li.' + item_class).width();

    //Set the floating bar position and width
    $('#box').css({left: default_left});
    $('#box .head').css({width: default_width});

    //if mouseover the menu item
    $('#navigation li').hover(function () {

        //Get the position and width of the menu item
        left = Math.round($(this).offset().left - $('#navigation').offset().left);
        width = $(this).width();

        //Set the floating bar position, width and transition
        $('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});
        $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});

    //if user click on the menu
    }).click(function () {

        //reset the selected item
        $('#navigation li').removeClass( item_class );

        //select the current item
        $(this).addClass( item_class );

    });

    //If the mouse leave the menu, reset the floating bar to the selected item
    $('#navigation').mouseleave(function () {

        //Retrieve the selected item position and width
        default_left = Math.round($('#navigation li.' + item_class).offset().left - $('#navigation').offset().left);
        default_width = $('#navigation li.' + item_class).width();

        //Set the floating bar position, width and transition
        $('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});
        $('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});

    });

});