jQuery(document).ready(function($) {

    var menuWidth = $('#navigation').width();
    //$('#navigation').css('margin-left', 0-menuWidth-25);
    //$('#navigation').css('width', menuWidth+25);
    //Background color, mouseover and mouseout
    var colorOver = jQuery('#color_menubghover').attr('value');
    var colorOut = jQuery('#main-menu li a').css('background-color');
    //Padding, mouseover
    var padLeft = '20px';
    var padRight = '20px';

    //Default Padding
    var defpadLeft = $('#main-menu li a').css('paddingLeft');
    var defpadRight = $('#main-menu li a').css('paddingRight');

    //Animate the LI on mouse over, mouse out
    $('#main-menu li a').mouseover(function (){

        //mouse over LI and look for A element for transition
        $(this).animate( {
            paddingLeft: padLeft,
            paddingRight: padRight
        }, {
            queue:false,
            duration:50
        } )
        .animate( {
            backgroundColor: colorOver
        }, {
            queue:false,
            duration:50
        });

    }).mouseout(function () {

        //mouse oout LI and look for A element and discard the mouse over transition
        $(this).animate( {
            paddingLeft: defpadLeft,
            paddingRight: defpadRight
        }, {
            queue:false,
            duration:100
        } )
        .animate( {
            backgroundColor: colorOut
        }, {
            queue:false,
            duration:200
        });
    });

    //Scroll the menu on mouse move above the #sidebar layer
    $('#navigation').mousemove(function(e) {
        //if($('#main-menu').height() > $(window).height()) {
            //Sidebar Offset, Top value
            var s_top = 0;

            //Sidebar Offset, Bottom value
            var s_bottom = parseInt($(window).height());

            //Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
            //var mheight = parseInt($('#main-menu li').height() * $('#main-menu li').length);
            var mheight = parseInt(($('#main-menu li').height()+25) * $('#main-menu li').length);
            //I used this coordinate and offset values for debuggin
            $('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY + " | " + $('#main-menu li').length);
            $('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));
            

            //Calculate the top value
            //This equation is not the perfect, but it 's very close
            var top_value = Math.round(( (s_top - e.pageY + s_bottom) /100) * mheight / 2);
            //var top_value = Math.round(( (s_top - e.pageY) / $('#navigation').height()) * mheight);
            if( false ) {
                //Animate the #menu by chaging the top value
                $('#main-menu').animate({
                    top: top_value
                }, {
                    queue:false,
                    duration:500
                });
            }
            $('#debugging_status1').html('bottom: '+ s_bottom + ', top:' + s_top + ', top-value:' + top_value + ', delta:'+ ($(window).height()-top_value));
        //}
    });
});