// assign .Selected class to the first tab and set #Views "left: " attribute to 0


jQuery(document).ready(function() {
								
	jQuery('#Tab1').addClass('Selected');
	jQuery('#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() {
	//jQuery('.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)
jQuery(document).ready(function() {
	var SlideView = function() {
		var ViewportWidth = 645;		
		
		
		// reset all tabs
		jQuery('#Tabs ul').children().removeClass('Selected');
		// add the class .Selected to the clicked tab
		jQuery(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 ( jQuery(this).hasClass('Tab1') ) {
			jQuery('.View')	.css({overflow: 'hidden'})
			jQuery('#Views').animate({ marginLeft: 0 }, 'fast',addAutoScroll);
		}
		
		else if ( jQuery(this).hasClass('Tab2') ) {
			jQuery('.View')	.css({overflow: 'hidden'})
			jQuery('#Views').animate({ marginLeft: ViewportWidth * -1 }, 'fast', addAutoScroll);
		}
		
		else if ( jQuery(this).hasClass('Tab3') ) {
			jQuery('.View')	.css({overflow: 'hidden'})
			jQuery('#Views').animate({ marginLeft: ViewportWidth * -2 }, 'fast', addAutoScroll);
		}
		
		else if ( jQuery(this).hasClass('Tab4') ) {
			jQuery('.View')	.css({overflow: 'hidden'})
			jQuery('#Views').animate({ marginLeft: ViewportWidth * -3 }, 'fast', addAutoScroll);
		}
		
		else if ( jQuery(this).hasClass('Tab5') ) {
			jQuery('.View')	.css({overflow: 'hidden'})
			jQuery('#Views').animate({ marginLeft: ViewportWidth * -4 }, 'fast', addAutoScroll);
		}
		
		
	};
	// Attach the function SlideView to the click action any tab
	jQuery('#Tabs ul li').click(SlideView);
});