// JavaScript Document
$(document).ready(function() {	

	//Background color, mouseover and mouseout
	var colorOver = '#63A18C';
	var colorOut = '#ffffff';

	//Padding, mouseover
	var padLeft = '10px';
	var padRight = '10px';
	
	//Default Padding
	var defpadLeft = $('#menu li a').css('paddingLeft');
	var defpadRight = $('#menu li a').css('paddingRight');
		
	//Animate the LI on mouse over, mouse out
	$('#menu 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($('#menu li').height() * $('#menu 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 top_value = Math.round(( (s_top - e.pageY) /100) * mheight / .9);
		
		//Animate the #menu by chaging the top value
		$('#menu').animate({top: top_value}, { queue:false, duration:500});
	});

	
});
	

$(document).ready(function() {	

	//Background color, mouseover and mouseout
	var colorOver = '#63A18C';
	var colorOut = '#ffffff';

	//Padding, mouseover
	var padLeft = '10px';
	var padRight = '10px';
	
	//Default Padding
	var defpadLeft = $('#menu2 li a').css('paddingLeft');
	var defpadRight = $('#menu2 li a').css('paddingRight');
		
	//Animate the LI on mouse over, mouse out
	$('#menu2 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
	$('#sidebar2').mousemove(function(e) {

		//Sidebar Offset, Top value
		var s_top = parseInt($('#sidebar2').offset().top);		
		
		//Sidebar Offset, Bottom value
		var s_bottom = parseInt($('#sidebar2').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($('#menu2 li').height() * $('#menu2 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 top_value = Math.round(( (s_top - e.pageY) /100) * mheight /.97);
		
		//Animate the #menu by chaging the top value
		$('#menu2').animate({top: top_value}, { queue:false, duration:500});
	});

	
});
	

$(document).ready(function() {	

	//Background color, mouseover and mouseout
	var colorOver = '#63A18C';
	var colorOut = '#ffffff';

	//Padding, mouseover
	var padLeft = '10px';
	var padRight = '10px';
	
	//Default Padding
	var defpadLeft = $('#menu3 li a').css('paddingLeft');
	var defpadRight = $('#menu3 li a').css('paddingRight');
		
	//Animate the LI on mouse over, mouse out
	$('#menu3 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
	$('#sidebar3').mousemove(function(e) {

		//Sidebar Offset, Top value
		var s_top = parseInt($('#sidebar3').offset().top);		
		
		//Sidebar Offset, Bottom value
		var s_bottom = parseInt($('#sidebar3').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($('#menu3 li').height() * $('#menu3 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 top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
		
		//Animate the #menu by chaging the top value
		$('#menu3').animate({top: top_value}, { queue:false, duration:500});
	});

	
});
$(document).ready(function() {	

	//Background color, mouseover and mouseout
	var colorOver = '#63A18C';
	var colorOut = '#ffffff';

	//Padding, mouseover
	var padLeft = '10px';
	var padRight = '10px';
	
	//Default Padding
	var defpadLeft = $('#menu4 li a').css('paddingLeft');
	var defpadRight = $('#menu4 li a').css('paddingRight');
		
	//Animate the LI on mouse over, mouse out
	$('#menu4 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
	$('#sidebar4').mousemove(function(e) {

		//Sidebar Offset, Top value
		var s_top = parseInt($('#sidebar4').offset().top);		
		
		//Sidebar Offset, Bottom value
		var s_bottom = parseInt($('#sidebar4').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($('#menu4 li').height() * $('#menu4 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 top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
		
		//Animate the #menu by chaging the top value
		$('#menu4').animate({top: top_value}, { queue:false, duration:500});
	});

	
});

$(document).ready(function() {	

	//Background color, mouseover and mouseout
	var colorOver = '#63A18C';
	var colorOut = '#ffffff';

	//Padding, mouseover
	var padLeft = '10px';
	var padRight = '10px';
	
	//Default Padding
	var defpadLeft = $('#menu5 li a').css('paddingLeft');
	var defpadRight = $('#menu5 li a').css('paddingRight');
		
	//Animate the LI on mouse over, mouse out
	$('#menu5 li').click(function () {	
		//Make LI clickable
		window.location = 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
	$('#sidebar5').mousemove(function(e) {

		//Sidebar Offset, Top value
		var s_top = parseInt($('#sidebar5').offset().top);		
		
		//Sidebar Offset, Bottom value
		var s_bottom = parseInt($('#sidebar5').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($('#menu5 li').height() * $('#menu5 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 top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
		
		//Animate the #menu by chaging the top value
		$('#menu5').animate({top: top_value}, { queue:false, duration:500});
	});

	
});