// JavaScript Document

$(document).ready(
	function() {


		var IsSlideChange = false;

		//wire up events
		$("div.listPanel li a").live("click",
			function() {

				if (!IsSlideChange) {
					IsSlideChange = true;

					var image = $("div.imageHolder img");

					//append target
					$("div.listPanel li").removeClass("target");
					$(this).parents("li").addClass("target");

					//set image path
					var imagePath = $(this).attr("_large");

					if (imagePath != null && imagePath.length > 0) {
						//remove the notes
						image.attr("title", "");

						//$("div.imagePanel div.labelHolder").html("");
						
						
						
						
						var notes = $("div.listPanel li.target a").attr("_notes");
						var label = $("div.listPanel li.target a").attr("_label");
						
												
						ToggleCaption(label,notes);
						
						//move the slider
						ClickMoveSlider($(this));

						//cycle the image
						image.fadeOut(200,
							function() {
								image.bind("load",
									function() {
										//fade in
										image.fadeIn(200,
											function() {
												//reset notes next
												
												$(this).attr("title", unescape(notes));
												

												IsSlideChange = false;
											}
										);
									}
								);

								image.attr("src", imagePath);

							}

						);
						
					}

				}





			}
		);
		
		function ToggleCaption(label,notes)
		{
			
			$("#caption").css("visibility","hidden");
			
			$("#caption div.caption-header").html(unescape(label));
			$("#caption div.caption-text").html(unescape(notes));
			
			if ((notes != null && notes.length > 0) || (label != null && label.length > 0) )
			{
				$("#caption").delay(800).css("visibility","visible");
			}
			
			
		}

		
		
		function ClickMoveSlider(target)
		{
			if (target instanceof jQuery)
			{
				//get the % of length down the content path
				var targetLeft = target.position().left;
				var parentWidth = target.parents("div.listHolder").width();
				var targetPercent = targetLeft/parentWidth;
				
				//alert(targetLeft + " : " + parentWidth + " : " +targetPercent );
				
				//get the sliderlength
				var sliderWidth = $("#slider").width();
				var sliderTarget = parseInt(targetPercent * sliderWidth);
				//alert(sliderWidth + " : " + sliderTarget);
				
				$("#slider a").animate({"left": sliderTarget + "px"},"fast");
			
			}
			
		
		}
		

		$("div.nextPanel a").click(
			function() {
				//find the target
				var target = $("div.listPanel li.target");

				if (target.length == 1) {
					//check and see if we can move next
					var next = target.next("li");
					var target = null;

					if (next.length == 0) {
						next = $("div.listPanel li:first");
					}

					if (next != null && next.length > 0) {
						next.find("a").trigger("click")
					}

					scrollNext(next);

				}

			}
		);

		$("div.backPanel a").click(
			function() {
				//find the target
				var target = $("div.listPanel li.target");

				if (target.length == 1) {
					//check and see if we can move next
					var next = target.prev("li");
					var target = null;

					if (next.length == 0) {
						next = $("div.listPanel li:last");
					}

					if (next != null && next.length > 0) {
						next.find("a").trigger("click")
					}

					scrollNext(next);

				}

			}
		);


		function scrollNext(next) {
			
													   
			var maxScroll = $("div.listPanel").attr("scrollWidth") - $("div.listPanel").width();
			var percent =  parseInt((next.position().left/maxScroll) * 100);
			var nextPlace = parseInt(percent * (maxScroll/100)) -  parseInt(next.width());
			
			$("div.listPanel").attr({ scrollLeft: nextPlace });
			
			
			
		}

		//set up slider
		$(document).ready(function() {
			$("div.thumbPanel div.sliderPanel #slider").slider(
				{ change: sliderHandleChange,
					slide: sliderHandleSlide,
					min: 0,
					max: 100
				});

		});

		function sliderHandleChange(e, ui) {
			//no actions here			

		}

		function sliderHandleSlide(e, ui) {
			var maxScroll = $("div.listPanel").attr("scrollWidth") - $("div.listPanel").width();
			$("div.listPanel").attr({ scrollLeft: ui.value * (maxScroll / 100) });

		}

		
		//initalize
		var first = $("div.listPanel li:first a");

		if (first.length > 0) {
			$("div.imageHolder img").attr("src", $(first).attr("_large")).css("display", "block")


			var notes = first.attr("_notes");
			var label = first.attr("_label");

			
			ToggleCaption(label,notes);
			
			
			first.parents("li").addClass("target");
		}

		$("div.imageHolder  img").css("border", "");


	}
);