$(document).ready(function () {

    //transitions
    //for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
    var style = 'jswing';

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

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

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

        //Get the position and width of the menu item
        left = Math.round($(this).offset().left - $('#MenuTop').offset().left);
        width = $(this).width();
        $('#debug').html(left);
        //Set the floating bar position, width and transition
        $('#box').stop(false, true).animate({ left: left }, { duration: 500, easing: style });
        $('#box .head').stop(false, true).animate({ width: width }, { duration: 500, easing: style });

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

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

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

    });

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

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

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

    });

});


    function changeClass(elementID, newClass) {
        var element = document.getElementById(elementID);
		var element2 = document.getElementById('homeTop');
		element2.className = ' ';
        element.className = newClass;		
		
    }