$(document).ready(function()
	{
		$(".button_holder").show();
		$(".button_holder a:first").addClass("active");
		
		var image_width = $(".view_window").width();
		var image_count = $(".image_slide img").size();
		var total_image_width = image_width * image_count;
		
		$(".image_slide").css({'width' : total_image_width});
		
		//Does the actual transition from one image to another
		rotate = function()
		{
			var current_id = $active.attr("rel") - 1;
			var slide_pos = current_id * image_width;
			
			$(".button_holder a").removeClass('active');
			$active.addClass('active');
			
			$(".image_slide").animate(
			{
				left: -slide_pos
			}, 500);
		};
		
		//Create the timer to rotate the image after 7 seconds
		timed_rotate = function()
		{
			play = setInterval(function()
			{
				$active = $('.button_holder a.active').next();
				
				if( $active.length === 0 )
				{
					$active = $('.button_holder a:first');
				}
				
				rotate();
			}, 7000);
		};
		
		//Start the rotation
		timed_rotate();
		
		//Stops the rotation timer as long as you hover over the image
		$(".image_slide a").hover(function()
		{
			clearInterval(play);
		}, 
		function()
		{
			timed_rotate();
		});
		
		//Handles the button click
		$(".button_holder a").click(function()
		{
			$active = $(this);
			
			clearInterval(play);
			rotate();
			timed_rotate();
			return false;
		});
	});