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


jQuery(document).ready(function() {
	
	//  Check to see if the "ClassTab" cookie is set, if so, 
	//  make the starting Class Schedule tab be that one. 
	if (jQuery.cookie('ClassTab')) {
		var ClassTab = jQuery.cookie('ClassTab');
		jQuery('#'+ClassTab).addClass('Selected');
		var TabNum = ClassTab.substr(3);
		var MarginOffset = -645 * (TabNum -1);
		jQuery('#Views').css( { marginLeft: MarginOffset+'px' } );
		
		
	} else {
		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)
	var SlideView = function(ShowTab) {
		var ViewportWidth = 645;		
		
		
		// reset all tabs
		jQuery('#Tabs ul').children().removeClass('Selected');
		// add the class .Selected to the clicked tab
		jQuery('#'+ShowTab).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('#Tabs #Tab1').hasClass('Selected') ) {
			jQuery('.View')	.css({overflow: 'hidden'})
			jQuery('#Views').animate({ marginLeft: 0 }, 'fast',addAutoScroll);
		}
		
		else if ( jQuery('#Tabs #Tab2').hasClass('Selected') ) {
			jQuery('.View')	.css({overflow: 'hidden'})
			jQuery('#Views').animate({ marginLeft: ViewportWidth * -1 }, 'fast', addAutoScroll);
		}
		
		else if ( jQuery('#Tabs #Tab3').hasClass('Selected') ) {
			jQuery('.View')	.css({overflow: 'hidden'})
			jQuery('#Views').animate({ marginLeft: ViewportWidth * -2 }, 'fast', addAutoScroll);
		}
		
		else if ( jQuery('#Tabs #Tab4').hasClass('Selected') ) {
			jQuery('.View')	.css({overflow: 'hidden'})
			jQuery('#Views').animate({ marginLeft: ViewportWidth * -3 }, 'fast', addAutoScroll);
		}
		
		else if ( jQuery('#Tabs #Tab5').hasClass('Selected') ) {
			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(function(){
		var ClickedTab = jQuery(this).attr('id');
		SlideView(ClickedTab);
	});
	
	
	// when a location is clicked, see which tab is currently selected and
	// create a cookie to remember that tab to be auto selected in the future
	jQuery('.TabView a').click(function() {
		var selectedTab = jQuery('#Tabs .Selected').attr('id');
		jQuery.cookie('ClassTab', selectedTab, {
			domain:'.corepoweryoga.com', 
			path:'/', 
			expires:365
		});		
	});
	
	
	

	
});