// 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'});
}

//$('#el').click(function(evt){ if(evt.originalEvent){ //user click } else { // .click() call } }																		

function myClick2() { 
		$('#Tabs ul li.Tab2').trigger("click")
		}
		
function TimeNavigate(TabNumber) { 
		//$('#Tabs ul li.Tab2').trigger("click")
		
		switch(TabNumber)
			  {
			  case 1:
				$('#Tabs ul li.Tab1').trigger("click");
				setTimeoutPause = false;
				break;
			  case 2:
			   $('#Tabs ul li.Tab2').trigger("click");
			   setTimeoutPause = false;
			   break;
			  case 3:
				$('#Tabs ul li.Tab3').trigger("click");
				setTimeoutPause = false;
				break;
			  case 4:
				$('#Tabs ul li.Tab4').trigger("click");
				setTimeoutPause = false;
				break;
			  case 5:
				$('#Tabs ul li.Tab5').trigger("click");
				setTimeoutPause = false;
				break;
			  default:
				break;
			  }
		
		}
		
var setTimeoutPause = false; // used to make sure multiple setTimeouts aren't queued
function StartAgain() {
	setTimeoutPause = true;
	$('#Tabs li.Selected').next().click();
}
		
		
// 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(e) {
	
	var intervalID; 					   		   
						   
	var SlideView = function() {
		if( !$('#TabViewer').hasClass('pause') ){
			var ViewportWidth = 930;		
			// 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') ) {
				clearInterval(intervalID); 
				//$('.View')	.css({overflow: 'hidden'})
				$('#Views').animate({ marginLeft: 0 }, 'slow',addAutoScroll);
				$('#SliderArrow').animate({ marginLeft: 137}, 'slow',addAutoScroll);
				
				
				if(e.originalEvent==undefined) {
					// event was triggered programmatically - do something
					intervalID = window.setInterval('TimeNavigate(2)', 6000);
					 } else {
					// event was triggered by user - do something else
					intervalID = window.setInterval('TimeNavigate(2)', 20000);
					}
				
			}
			
			else if ( $(this).hasClass('Tab2') ) {
				clearInterval(intervalID); 
				//$('.View')	.css({overflow: 'hidden'})
				$('#Views').animate({ marginLeft: ViewportWidth * -1 }, 'slow', addAutoScroll);
				$('#SliderArrow').animate({ marginLeft: 396 }, 'slow',addAutoScroll);
				intervalID = window.setInterval('TimeNavigate(3)', 6000);
			}
			
			else if ( $(this).hasClass('Tab3') ) {
				clearInterval(intervalID); 
				//$('.View')	.css({overflow: 'hidden'})
				$('#Views').animate({ marginLeft: ViewportWidth * -2 }, 'slow', addAutoScroll);
				$('#SliderArrow').animate({ marginLeft: 629 }, 'slow',addAutoScroll);
				intervalID = window.setInterval('TimeNavigate(4)', 6000);
			}
			
			else if ( $(this).hasClass('Tab4') ) {
				clearInterval(intervalID); 
				//$('.View')	.css({overflow: 'hidden'})
				$('#Views').animate({ marginLeft: ViewportWidth * -3 }, 'slow', addAutoScroll);
				$('#SliderArrow').animate({ marginLeft: 831 }, 'slow',addAutoScroll);
				intervalID = window.setInterval('TimeNavigate(1)', 6000);
			}
			
		
		} // end if hasClass()
				
		
	};

	// Attach the function SlideView to the click action any tab
	$('#Tabs ul li').click(SlideView);
	
	//Trigger first slide so animation begins
	$('#Tabs ul li.Tab1').trigger("click");
	
	// pause slides from changingo on mouseenter by adding .pause class to #TabViewer
	// if .pause is present, then SlideView() cannot run. 
	$('#TabViewer').hover(
		function() {
			$(this).addClass('pause');
		},
		function() {
			$(this).removeClass('pause');
			if ($('#Tabs li.Selected').is(':last-child')) {
				$('#Tab1').click();
			} else {
				if( setTimeoutPause = false ) {
					setTimeout("StartAgain()", 2000);
				}
			}
		});
	
	
});