// JavaScript Document

$(document).ready(function() {
	//Show the paging and activate its first link
	$(".header-paging").show();
	$(".header-paging a:first").addClass("active");
	
	//Show the caption and activate its first link
	$(".header-caption").show();
	$(".header-caption a:first").addClass("active");
	
	//Show the special and activate its first link
	$(".header-special").show();
	$(".header-special a:first").addClass("active");

	
	//Get size of the image, how many images there are, then determin the size of the image reel.
	var headerImageWidth = $(".header-window").width();
	var headerImageSum = $(".header-image_reel img").size();
	var headerImageReelWidth = headerImageWidth * headerImageSum;
	
	//Adjust the image reel to its new size
	$(".header-image_reel").css({'width' : headerImageReelWidth});
	
	//Paging  and Slider Function
	headerRotate = function(){
		var headerTriggerID = $headerActive.attr("rel") - 1; //Get number of times to slide
		var headerImage_reelPosition = headerTriggerID * headerImageWidth; //Determines the distance the image reel needs to slide
	
		$(".header-paging a").removeClass('active'); //Remove all active class
		$headerActive.addClass('active'); //Add active class (the $headerActive is declared in the headerheaderRotateSwitch function)

		$(".header-caption a").removeClass('active'); //Remove all active class
		$headerActiveCaption.addClass('active'); //Add active class (the $headerActive is declared in the headerheaderRotateSwitch function)
		
		$(".header-special a").removeClass('active'); //Remove all active class
		$headerActiveSpecial.addClass('active'); //Add active class (the $headerActive is declared in the headerheaderRotateSwitch function)

		//Slider Animation
		$(".header-image_reel").animate({
			left: -headerImage_reelPosition
		}, 500 );
	
	}; 
	
	//Rotation  and Timing Event
	headerheaderRotateSwitch = function(){
		headerPlay = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
			$headerActive = $('.header-paging a.active').next(); //Move to the next paging
			$headerActiveCaption = $('.header-caption a.active').next();
			$headerActiveSpecial = $('.header-special a.active').next();
			if ( $headerActive.length === 0) { //If paging reaches the end...
				$headerActive = $('.header-paging a:first'); //go back to first
				$headerActiveCaption = $('.header-caption a:first');
				$headerActiveSpecial = $('.header-special a:first');
			}
			headerRotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (7 seconds)
	};
	
	headerheaderRotateSwitch(); //Run function on launch
	
	//On Hover
	$(".header-image_reel a").hover(function() {
		clearInterval(headerPlay); //Stop the rotation
	}, function() {
		headerheaderRotateSwitch(); //Resume rotation timer
	});	
	
	//On Click
	$(".header-paging a").click(function() {
		$headerActive = $(this); //Activate the clicked paging
		$headerActiveCaption = $(".header-caption").children("[rel="+$headerActive.attr("rel")+"]");
		$headerActiveSpecial = $(".header-special").children("[rel="+$headerActive.attr("rel")+"]");
		//Reset Timer
		clearInterval(headerPlay); //Stop the rotation
		headerRotate(); //Trigger rotation immediately
		headerheaderRotateSwitch(); // Resume rotation timer
		return false; //Prevent browser jump to link anchor
	});
	
});