// Controls the slider.  When a tab is cicked, the 
// content that coresponds to that tab slides into view.
// this code works for up to 7 tabs.

// assign .activeTab class to the first tab and set .panel "left: " attribute to 0


$(document).ready(function() {
	$('.tab1').addClass('activeTab');
	$('.panel').css( { left: '0px', overflow: 'auto'} );
});

// autoScroll function is to call AFTER animation is finished within the slideIt function
// because the scroll bars mess up the animation in FF.
var addAutoScroll = function() {
	$('.panel').css({overflow: 'auto'});
}


// when a tab is clicked, remove .activeTab from all tabs, then add it 
// to the clicked tab. Then set the .panel "left: " attribute to whatever 
// number of px coresponds with the clicked tab (in 380px increments)
$(document).ready(function() {
	var slideIt = function() {
		var panelWidth = 380;		
		
		
		// reset all tabs
		$('.tabs ul').children().removeClass('activeTab');
		// add the class .activeTab to the clicked tab
		$(this).addClass('activeTab');
		
		// determine which tab was clicked by checking for it's tab number
		// then take away the overflow:auto scrollbars so that it won't casue the FF animation problem
		// then animate the .panel "left: " attribute to the coresponding position
		// then when animation is complete use the callback function to call autoScroll and add the overflow:auto back.
		if ( $(this).hasClass('tab1') ) {
			$('.panel')
				.css({overflow: 'hidden'})
				.animate({ left: 0 }, 'medium',addAutoScroll);
		} else if ( $(this).hasClass('tab2') ) {
			$('.panel')
				.css({overflow: 'hidden'})
				.animate({ left: panelWidth * -1 }, 'medium', addAutoScroll);
		} else if ( $(this).hasClass('tab3') ) {
			$('.panel')
				.css({overflow: 'hidden'})
				.animate({ left: panelWidth * -2 }, 'medium', addAutoScroll);
		} else if ( $(this).hasClass('tab4') ) {
			$('.panel')
				.css({overflow: 'hidden'})
				.animate({ left: panelWidth * -3 }, 'medium', addAutoScroll);
		} else if ( $(this).hasClass('tab5') ) {
			$('.panel')
				.css({overflow: 'hidden'})
				.animate({ left: panelWidth * -4 }, 'medium', addAutoScroll);
		} else if ( $(this).hasClass('tab6') ) {
			$('.panel')
				.css({overflow: 'hidden'})
				.animate({ left: panelWidth * -5 }, 'medium', addAutoScroll);
		} else if ( $(this).hasClass('tab7') ) {
			$('.panel')
				.css({overflow: 'hidden'})
				.animate({ left: panelWidth * -6 }, 'medium', addAutoScroll);
		} 
		
		
	};
	
	$('.tabs ul li').click(slideIt);
});