$(document).ready(function() {


    //Animate the LI on mouse over, mouse out
    $('#sidebar ul li').click(function() {
        //Make LI clickable
        window.location = $(this).find('a').attr('href');

    }).mouseover(function() {

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

    }).mouseout(function() {

        //mouse oout LI and look for A element and discard the mouse over transition
        $(this).find('a')
		.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
    $('#sidebar').mousemove(function(e) {

        //Sidebar Offset, Top value
        var s_top = parseInt($('#sidebar').offset().top);

        //Sidebar Offset, Bottom value
        var s_bottom = parseInt($('#sidebar').height() + s_top);

        //Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
        var mheight = parseInt($('#sidebar ul li').height() * $('#sidebar ul li').length);

        //I used this coordinate and offset values for debuggin
        $('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
        $('#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 sidebar_height = $('#sidebar').height();
        top_value = Math.round((((e.pageY - s_top) / sidebar_height * ((sidebar_height - mheight) - (sidebar_height - 90))))); 

        //Animate the #menu by chaging the top value
        $('#sidebar ul').animate({ top: top_value }, { queue: false, duration: 500 });
    });


});