$(document).ready(function() {
  
  //current tab
  var ctab=1;
  var animating=false;

  function rotateTab(){
	setTimeout(rotateTab, 6000);
	
	if(!animating){
		ctab++;
		if(ctab >3) ctab=1;
		
		//remove the selected class from all LI    
		$('#tabMenu > li').removeClass('selected');
		
		//Reassign the LI
		$("#tab"+ctab).addClass('selected');
		
		animating=true;
		//Hide all the DIV in .boxBody
		//*amended: hide all slide divs to easly use div tags inside 
		$('.boxBody .slide').slideUp('1500');
		
		//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
		$('.boxBody .slide:eq(' + (ctab-1) + ')').slideDown('1500', function(){animating=false});
	}
  }
  rotateTab();
  
  //Get all the LI from the #tabMenu UL
  $('#tabMenu > li').click(function(){
     
	//perform the actions when it's not selected   
    if (!$(this).hasClass('selected') && !animating) { 
		//remove the selected class from all LI    
		$('#tabMenu > li').removeClass('selected');
		
		//Reassign the LI
		$(this).addClass('selected');
		
		animating=true;
		//Hide all the DIV in .boxBody
		//*amended: hide all slide divs to easly use div tags inside 
		$('.boxBody .slide').slideUp('1500');
		
		//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
		$('.boxBody .slide:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500', function(){animating=false});
	}
    
  }).mouseover(function() {
    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest    
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');
    
  }).mouseout(function() {
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');    
    
  }); 	
	
});