// JavaScript Document

$move_by = 278;

$frame_left = 0;

$frame_no = 1;



$(document).ready(function()

{
	$(".prev").hide();
	$(".next").hide();
	$(".gallery").mouseenter(function(){
		$(".prev").fadeIn();
		$(".next").fadeIn();
	});
	$(".gallery").mouseleave(function(){
		$(".prev").fadeOut();
		$(".next").fadeOut();
	});

	$max_clicks = $("#image_container").children().size(); 	

	/* Kudos to Rob MacKay [http://www.twitter.com/svgrob] for suggesting that we don't have to put a static style="width: 3960px" attribute in the div tag */

	$imgCont = $move_by * $max_clicks; 

	$("#image_container").css({width : $imgCont}); 

	$(".prev").click(function()

		{

			/* Set the new position & frame number */

			$new_frame_no = (($frame_no/1)-1);

			$new_left = (($frame_left/1) + $move_by);

			/* Check if we're moving too far over */

			if($new_frame_no <= 0)

				{

					/* Move the images all the way left, minus one frame */

					$new_left = -($move_by*$max_clicks)+$move_by;

					$new_frame_no = $max_clicks;

				}

			$new_left_attr = $new_left+"px";

			$("#image_container").animate({left: $new_left_attr}, 800 );

			$frame_left = $new_left;

			$frame_no = $new_frame_no;

			

		});

	$(".next").click(function()

		{

			/* Set the new position & frame number */

			$new_frame_no = (($frame_no/1)+1);

			$new_left = (($frame_left/1) - $move_by);

			/* Check if we're moving too far over */

			if($new_frame_no >= $max_clicks)

				{		

					/* Move all the way right, to the beginning*/

					$new_left = 0;

					$new_frame_no = 1;

				}				

			$new_left_attr = $new_left+"px";

			$("#image_container").animate({left: $new_left_attr}, 800 );

			$frame_left = $new_left;

			$frame_no = $new_frame_no;

		});	

});