$(function() { 
	
		$('.cbox').colorbox({  
			scrolling: false,
			iframe:true, 
			innerWidth:640, 
			innerHeight:385
		});
		
		var tabCounter = 0; ////Current counter for the tabs 
		var timeToRotate = 10000; //5000
		var continueRotating = true; ////A flag to stop the rotation
		
		/////Fade out the homepage background image and fade in the first tab
		$('#rotator').delay(3500).fadeIn().addClass('loaded'); //fades in the tab image after 5 seconds
		$('#callout-bg-top').delay(4000).fadeOut('normal',function(){  //top of the leather image
			updateActiveTab(tabCounter);
		}); //fades out the top part of the bag after 5 seconds, applies an active class to the first tab link and first tab
		
		function updateActiveTab(num) {
			if(continueRotating == true) {
				$('#plans li a').removeClass('active');
				$('#rotator .activeRotator').removeClass('activeRotator');
				
				$('#plans li:eq('+num+') a').addClass('active'); //Change the text to yellow
				$('.tabBGImage:eq('+num+')').addClass('activeRotator');
				
				tabCounter = ((num+1) % 4);
				
				setTimeout(function() {updateActiveTab(tabCounter);}, timeToRotate);
			}
		}
		
		
		//////////// On click, change the tabs active state by calling a function /////////
		$('#plans li a').mouseover(function(){
			continueRotating = false;
			switchTabs($(this));
		});
		
		//////////// A function to switch the tabs active states //////////////////
		function switchTabs(currentTab) {
			
			/////Turn off the initial bg image, if this is an early click
			$('#rotator').css('display','block');
			$('#callout-bg-top').css('display','none');
			
			////Handle the tabs /////
			$('#plans li a').removeClass('active');
			$(currentTab).addClass('active');
			
			////Handle the main image //////
			var tabID = $(currentTab).attr('rel');
			$('#rotator div').removeClass('activeRotator');
			$(tabID).addClass('activeRotator');
		}
	
	});