$(document).ready(function() {

$('.paging').show();
$('.paging a:first').addClass('active');
$('.info a:first').addClass('active');
$('#caption p').html($('#caption a:first').attr('title'));

var imageWidth = $('.window').width();
var imageSum = $('.image_reel img').size();
var imageReelWidth = imageWidth * imageSum;

var char = 0;
var caption = "";
var standby;

$('.image_reel').css({'width': imageReelWidth});

//Paging  and Slider Function
rotate = function(){
	var rel = $active.attr("rel");
	var triggerID = rel - 1; //Get number of times to slide
	var text = ".info a[rel='"+rel+"']";
	var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

	$activeText = $(text);
	$(".paging a").removeClass('active'); //Remove all active class
	$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
	
	$(".info a").fadeOut(function(){
		$(".info a").removeClass('active');
		$('#caption p').html("");
	});

	//Slider Animation
	//$(".image_reel").fadeOut("slow").animate({left: -image_reelPosition},500).fadeIn("slow");
	
	$(".image_reel").fadeOut(function(){
		$(".image_reel").animate({
			left: -image_reelPosition
		}, 500, function(){
			$activeText.fadeIn(function(){
				$activeText.addClass('active');
			});
			caption = $activeText.attr('title');
			if(caption){
				ticker();
			}
		}).fadeIn("slow");
	});
};

ticker = function(){
	$('#caption p').html(caption.substr(0, char++));
	if(char < caption.length+1)
		setTimeout("ticker()", 28);
	else {
		char = 0;
		caption = "";
	}
}

//Rotation  and Timing Event
rotateSwitch = function(){
	play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
		$active = $('.paging a.active').next(); //Move to the next paging
		if ( $active.length === 0) { //If paging reaches the end...
			$active = $('.paging a:first'); //go back to first
		}
		rotate(); //Trigger the paging and slider function
	}, 14000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch
	
//On Hover
$(".image_reel a").hover(function() {
  clearInterval(play); //Stop the rotation
}, function() {
  rotateSwitch(); //Resume rotation timer
});	
	
//On Click
$(".paging a").click(function() {
  $active = $(this); //Activate the clicked paging
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation timer
  return false; //Prevent browser jump to link anchor
});
});