$(function () {

    $('#scroll_menu li').click(function () {
        //Make li clickable
        window.location = $(this).find('a').attr('href'); return false;
    });


    $('#project_menu').parent().mousemove(function(e) {
        var menuTop = $('#project_menu').parent().outerHeight(true);
        $('#side_bar').height($(window).height() - 150);
        $('#side_bar').css({top: menuTop});
        $('#scroll_menu').css({top: 0});
        $('#side_bar').show();
    });

    $('#side_bar').mouseleave(function(e) {
        $('#side_bar').hide();
    });


    //Scroll the menu on mouse move above the #sidebar layer
    $('#side_bar').mousemove(function(e) {

        //height of the list that is visible i.e. the scrollable viewport...
        var viewPortHeight = $('#side_bar').height() - 20;
        //height of the last item in the list. only used for an offset calculation. to find the actual height of all the elements. The actuall height of all the elements is calculated by finding the
        var itemHeight = $('#scroll_menu li:last').height();
        var totalItemHeight = $('#scroll_menu li:last').offset().top + itemHeight - $('#scroll_menu li:first').offset().top;
        var difference = totalItemHeight - viewPortHeight;

        if (difference > 0) {

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

            var pixelsTravelled = (e.pageY - s_top);

            //Calculate the top value
            var mousePositionInList = (pixelsTravelled / viewPortHeight);
            var top_value = 0 - Math.round(mousePositionInList * difference);

            //$('#debug').html("mPos : " + mousePositionInList  + " | diff " + difference);

            $('#scroll_menu').css({top: top_value});
        } else {
            $('#scroll_menu').css({top: 0});
        }
    });

});