var pos = 0;
var inc = 420;

$("document").ready(function(){

	var pagecount = Math.ceil($("div.gallery_thumbs div.scroller a").length/6-1)*-1;
	//alert(pagecount);

	$("a#prev").hide();

	$("div.gallery_canvas").css({
	 opacity: "0"
	});

	$("div.gallery_thumbs").css({
	 height: "45px",
	 width: "1px",
	 opacity: "0"
	});

	$("div.gallery_canvas").addClass("loading").animate({
	 opacity: "1"
	},1200, function(){
		$("div.gallery_canvas").removeClass("loading")
		$("div.gallery_thumbs").animate({
		 height: "45px",
		 width: "426px",
		 opacity: "1"
		}, 800);

	});
	

	$("a#prev").click(function(event){
	 event.preventDefault();
	 if (pos != 0) { pos = pos + inc; }
	 $("div.gallery_thumbs div.scroller").animate({
	  left : pos+"px"
	 }, 500);
	 if (pos == 0) { $(this).fadeOut(300); } else { $(this).fadeIn(300); }
	 $("a#next").fadeIn(300);
	});

	$("a#next").click(function(event){
	 event.preventDefault();
	 if (pos != pagecount*inc) { pos = pos - inc; }
	 $("div.gallery_thumbs div.scroller").animate({
	  left : pos+"px"
	 }, 500);
	 if (pos == pagecount*inc) { $(this).fadeOut(300); }
	 $("a#prev").fadeIn(300);
	});

	$("div.scroller a").click(function(event){
	  event.preventDefault();
	  imgsrc = $(this).attr("value");
	  imgtitle = $(this).children("span#title").html();
	  imgdesc = $(this).children("span#description").html();
  	  $("div.gallery_canvas img").hide();
	  $("div.gallery_canvas").addClass("loading");
  	  $("div.gallery_canvas img").load(function(){

		  $(this).fadeIn(500, function(){
			$("div.gallery_canvas").removeClass("loading");
			$("div.photo_details").css({ opacity:"0"});
			$(this).children("h2").html(imgtitle);
			$(this).children("p").html(imgdesc);
			$(this).animate({ opacity: "1" }, 500);
		  });
	  }).attr("src", "images/gallery/" + imgsrc);
	});

	  var imgsrc = $("div.scroller a:first").attr("value");
	  var imgtitle = $("div.scroller a:first").children("#title").html();
	  var imgdesc = $("div.scroller a:first").children("#description").html();
  	  $("div.gallery_canvas img").fadeOut(300);
	  $("div.photo_details").animate({ opacity:"0"}, 200);
  	  $("div.gallery_canvas img").load(function(){
		  $(this).fadeIn(500, function(){
			$("div.photo_details h2").html(imgtitle);
			$("div.photo_details p").html(imgdesc);
			$("div.photo_details").animate({ opacity: "1" }, 500);
		  });
	  }).attr("src", "images/gallery/" + imgsrc);

});