// assign .Selected class to the first tab and set #Views "left: " attribute to 0
$(document).ready(function() {
	$('#Tab1').addClass('Selected');
	$('#Views').css( { marginLeft: '0px'} );
});

// 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() {
	//$('.View').css({overflow: 'auto'});
}

// when a tab is clicked, remove .Selected from all tabs, then add it 
// to the clicked tab. Then set the #View "left: " attribute to whatever 
// number of px coresponds with the clicked tab (in 900px increments)
$(document).ready(function() {
	var SlideView = function() {
		var ViewportWidth = 900;		
		
		
		// reset all tabs
		$('#Tabs ul').children().removeClass('Selected');
		// add the class .Selected to the clicked tab
		$(this).addClass('Selected');
		
		// 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 #Views "left: " attribute to the coresponding position
		// then when animation is complete use the callback function addAutoScroll() to add the overflow:auto back on.
		if ( $(this).hasClass('Tab1') ) {
			$('.View')	.css({overflow: 'hidden'})
			$('#Views').animate({ marginLeft: 0 }, 'slow',addAutoScroll);
		}
		
		else if ( $(this).hasClass('Tab2') ) {
			$('.View')	.css({overflow: 'hidden'})
			$('#Views').animate({ marginLeft: ViewportWidth * -1 }, 'slow', addAutoScroll);
		}
		
		else if ( $(this).hasClass('Tab3') ) {
			$('.View')	.css({overflow: 'hidden'})
			$('#Views').animate({ marginLeft: ViewportWidth * -2 }, 'slow', addAutoScroll);
		}
		
		else if ( $(this).hasClass('Tab4') ) {
			$('.View')	.css({overflow: 'hidden'})
			$('#Views').animate({ marginLeft: ViewportWidth * -3 }, 'slow', addAutoScroll);
		}
		
		
	};
	// Attach the function SlideView to the click action any tab
	$('#Tabs ul li').click(SlideView);
});