$(document).ready(function() {	

	//Background color, mouseover and mouseout
	var colorOver = '#31b8da';
	var colorOut = '#1f1f1f';

	//Padding, mouseover
	var padLeft = '20px';
	var padRight = '20px';
	
	
	
	
	//Scroll the menu on mouse move above the #scroll layer
	$('#scroll').mousemove(function(e) {

		//text Offset, Top value
		var s_top = parseInt($('#scroll').offset().top);		
		
		//text Offset, Bottom value
		var s_bottom = parseInt($('#scroll').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($('#menu').height());
	
		//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)/50) * 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) /50) * mheight / 2);
		if(top_value > s_top-mheight*2){
			return true;
		}
		//Animate the #menu by chaging the top value
		$('#menu').animate({top: top_value}, {queue:false, duration:20});
	});

	
});