// JavaScript Document
$(document).ready(function()
	{
		$('.paging').show();
		$('.paging a:first').addClass('active');
		var imageWidth = $('.window').width();
		var imageSum = $('.image_reel img').size();
		var imageReelWidth = imageSum * imageWidth;
		
		$('.image_reel').css({'width':imageReelWidth});
		
		rotate = function()
		{
			var triggerID = $active.attr('rel') - 1;
			var image_reelPosition = triggerID * imageWidth;
			
			$('.paging a').removeClass('active');
			$active.addClass('active');
			
			
			$('.image_reel').animate({
				left: -image_reelPosition
			},500);
		};
		
		rotateSwitch = function()
		{
			play = setInterval(function()
			{
				$active = $('.paging a.active').next();
				if($active.length == 0)
				{
					$active = $('.paging a:first');
				}
				rotate();
			},2500);
		};
		rotateSwitch();
		
		$('.image_reel a').hover(function()
		{
			clearInterval(play);
		},function()
		{
			rotateSwitch();
		});
		
		$('.paging a').click(function()
		{
			$active = $(this); //activate the clicked paging
			clearInterval(play); // stop the rotation
			rotate(); // trigger rotation immediately
			rotateSwitch(); //resume rotation
			return false; //prevent browser jump to link anchor
			
		});
		
		$('.left_arrow a').click(function()
		{
			clearInterval(play);
			$active = $('.paging a.active').prev();
			if($active.length == 0)
			{
				$active = $('.paging a:last');
			}
			rotate();
			//setInterval(play);
		});
		$('.right_arrow a').click(function()
		{
			clearInterval(play);
			$active = $('.paging a.active').next();
			if($active.length == 0)
			{
				$active = $('.paging a:first');
			}
			rotate();
			//setInterval(play);
		});
	});