// =====================================================================================
// = LavaLamp Menu =====================================================================
// =====================================================================================

$(document).ready(function () {

    // Add hover box
    $("#menu").append("<div id=\"box\"><div class=\"head\"></div></div>");

    // Remove standard hover over li 
    $('#menu ul li').each(function () {
        $(this).css("background", "none");
        $(this).css("cursor", "default");
    });

    // basic setup
    var style = "swing";
    var width_offset = 0;
    var default_left = 0;
    var default_width = 0;

    // If is selected any menu
    if ($('#menu li.selected').length != 0) {
        //Retrieve the selected item position and width
        default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
        default_width = $('#menu li.selected').width();

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

    $('#menu li a').mouseenter(function () {

        var parent = $(this).parent();

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

        // Change color of selected li, fi we move to another li
        if (parent.attr('class') != "selected")
            $(this).animate({ color: "#b92335" }, 500);

    });

    $('#menu li a').mouseleave(function () {

        var parent = $(this).parent();

        // Change color of selected li, fi we move to another li
        if (parent.attr('class') != "selected")
            $(this).animate({ color: "#6d6e71" }, 300);
    });

});