// JavaScript Document
jQuery(document).ready(function() {	
		//Get all the LI from the #tabMenu UL
		jQuery('#tabMenuStd > li').click(function(){
		//remove the selected class from all LI    
		jQuery('#tabMenuStd > li').removeClass('selected');
		
		//Reassign the LI
		jQuery(this).addClass('selected');

		//Hide all the DIV in .boxBody
		jQuery('.boxBody div').slideUp('1500');

		//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
		jQuery('.boxBody div:eq(' + jQuery('#tabMenuStd > li').index(this) + ')').slideDown('1500');

		}).mouseover(function() {

		//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest    
		jQuery(this).addClass('mouseover');
		jQuery(this).removeClass('mouseout');   

		}).mouseout(function() {

		//Add and remove class
		jQuery(this).addClass('mouseout');
		jQuery(this).removeClass('mouseover');    
	});
	//Mouseover with animate Effect for menu list
	jQuery('.boxBody li').click(function(){
	//Get the Anchor tag href under the LI
	//window.location = jQuery(this).find("a").attr("href");
	}).mouseover(function() {
	
	//Change background color and animate the padding
	jQuery(this).css('backgroundColor','#fff');
	jQuery(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
	}).mouseout(function() {

	//Change background color and animate the padding
	jQuery(this).css('backgroundColor','');
	jQuery(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
	});  
});