/*
		$(window).load(function(){ 
			$("#loader").fadeOut("fast");
			
		});
		*/
		
		function resizeImage(){
			//loader
			$("#loader img").center();
			$("#loader").height($(window).height() + 60);
			
			// thumbnails
			$("#navigation_wrap").height($(window).height() - 80);
			
			//Image
			$("#image").height($(window).height() - 60);
			$("#image").width($(window).width() - 120);
			
			$("#image").css({position: "fixed"})
			
			//determine the aspect ratio of the image based on the height and width attributes
			
			var elementWidth = 1680;
			var elementHeight = 946;
			
			/*
			var elementWidth = $("#image img").attr("width");
			var elementHeight = $("#image img").attr("height");
			*/
			
			var heightPercentageOfWidth = elementHeight / elementWidth;
			var widthPercentageOfHeight = elementWidth / elementHeight;
			
			
			if($("#image img").width() <= $("#image").width() || $("#image img").width() >= $("#image").width()){
				$("#image img") 
				   .width($("#image").width()) 
				   //.height($(window).width() * .56); 
				   .height($("#image").width() * heightPercentageOfWidth);	
			}
			
			if($("#image img").height() <= $("#image").height()){	
				$("#image img")
					.height($("#image").height())
					//.width($(window).height() * 1.77);
					.width($("#image").height() * widthPercentageOfHeight);	
			}	
						
			$("#image img").center();
		}
		
		$("#image").load(function () {
		  resizeImage();
		  showHideDockArrows();
		});
		
		$(window).load(function () {
		  resizeImage();
		  showHideDockArrows();
		});

		
		function imageNext(){
			$("#navigation ul li").each(function (i) {
	
				var imgSrc = $(this).children("a").children("img").attr("src");
				var imgSrcNext = $(this).next().children("a").children("img").attr("src");
				var imgAlt = $(this).next().children("a").children("img").attr("alt");
				
				if (imgSrc == $("#image img").attr("src")) {
					if (imgSrcNext){
						$("#image img").fadeTo(500,0,function() {
							
							$("#image img").attr({src : imgSrcNext});
							
						}).fadeTo(500, 1);							
			
						// change the selected class
						$("#navigation ul li a img").removeClass("selected");				
						$(this).next().children("a").children("img").toggleClass("selected");
						
						changeURL(imgAlt);
						
						return false;
					}else{
						imgSrcNext = $("#navigation ul li:first a img").attr("src");
						imgAlt =  $("#navigation ul li:first a img").attr("alt");
						
						$("#image img").fadeTo(500,0,function() {
							$("#image img").attr({src : imgSrcNext});
						}).fadeTo(500, 1);
						
						// change the selected class
						$("#navigation ul li a img").removeClass("selected");				
						$("#navigation ul li:first a img").toggleClass("selected");
						
						changeURL(imgAlt);
						
						return false;
					}
				}
			});
		}
		
		function imagePrev(){
			$("#navigation ul li").each(function (i) {
					
				var imgSrc = $(this).children("a").children("img").attr("src");
				var imgSrcPrev = $(this).prev().children("a").children("img").attr("src");
				
				if (imgSrc == $("#image img").attr("src")) {
					if (imgSrcPrev){
						$("#image img").fadeTo(500,0,function() {
							$("#image img").attr({src : imgSrcPrev});
						}).fadeTo(500, 1);
						
						
						
						// change the selected class
						$("#navigation ul li a img").removeClass("selected");				
						$(this).prev().children("a").children("img").toggleClass("selected");
						
						return false;
					}else{
						imgSrcPrev = $("#navigation ul li:last a img").attr("src");
						
						$("#image img").fadeTo(500,0,function() {
							$("#image img").attr({src : imgSrcPrev});
						}).fadeTo(500, 1);
						
													
						// change the selected class
						$("#navigation ul li a img").removeClass("selected");				
						$("#navigation ul li:last a img").toggleClass("selected");
						return false;
					}
					
				}
			});
		}
		
		function changeURL(image_name){
			parent.location.hash = image_name;
		}
		
		function setImageFromURL(){
			/*
var imgHashName = parent.location.hash;
			var imgHashName = imgHashName.substring(1);
			
			
			$("#navigation ul li").each(function (i) {
	
				var imgAlt = $(this).children("a").children("img").attr("alt");
				var imgSrc = $(this).children("a").children("img").attr("src");
				
				if (imgAlt == imgHashName) {
					
					$("#image img").attr({src : imgSrc});
						
					// change the selected class
					$("#navigation ul li a img").removeClass("selected");				
					$(this).children("a").children("img").toggleClass("selected");
					
				}
			});
*/
		}
		
		
		
		$(function() {
									
			//make the first thumbnail selected
			$("#navigation ul li:first a img").toggleClass("selected");
			
			setImageFromURL();
			// Image Resizing and Cropping
			// -------------------------------------------------------
			
			resizeImage();
			
			$(document).pngFix();
			
			// Full Screen button
			// -------------------------------------------------------
			/* Method for optimizing aspect ratio
			$("#full_screen").click(function(){
				// subtract 200 to account for space the browser tool bar takes up, can only be an approximated guess, no way to actually figure it
				window.resizeTo(((screen.height - 200) * 1.77), screen.height);
				return false;
			}); */
			
			$("#full_screen").click(function(){
				window.resizeTo(screen.width, screen.height);
				window.moveTo(10, 10);
				return false;
			});
				

			
			// Create the thumbnail Strip
			// -------------------------------------------------------
			
			
			
			$("#navigation ul li a").click(function () {
				var imgSrc = $(this).children("img").attr("src");
				var imgClass = $(this).children("img").attr("class");
				var imgAlt = $(this).children("img").attr("alt");
				
				$("#navigation ul li a img").removeClass("selected");				
				$(this).children("img").toggleClass("selected");
				
				$("#image img").fadeTo(500,0,function() {
					$("#image img").attr({src : imgSrc });
				}).fadeTo(500, 1);
				
				
				changeURL(imgAlt);
						
				return false;

					
			});
			
			
			//Next/Previous arrow visibility
			// -------------------------------------------------------
			$("#prev").animate({
				opacity: 0
			}, 100 );
			
			$("#next").animate({
				opacity: 0
			}, 100 );
					
			$("#prev").hover(
				function () {
					$(this).stop().animate({
						opacity: 1
					}, 100 );
				},
				function () {
					$(this).stop().animate({
						opacity: 0
					}, 100 );
				}
			);
			
			$("#next").hover(
				function () {
					$(this).stop().animate({
						opacity: 1
					}, 100 );
				},
				function () {
					$(this).stop().animate({
						opacity: 0
					}, 100 );
				}
			);

			// Next/Previous click functionality
			// -------------------------------------------------------
			
		
			$("#next").click(function () {
								
				imageNext();
				
				return false;
					
			});
			
			$("#prev").click(function () {
				
				imagePrev();
				
				return false;
					
			});
			
			
			
			// Carousel Controlling
			// -------------------------------------------------------
			var totalDockHeight = 0;
			$("#navigation ul li").each(function (i) {
					
				totalDockHeight += $("#navigation ul li").height() + 24; // the 24 is the padding and 2px border on the thumbs
				
			});
						
			$("#navigation ul").height(totalDockHeight);
			
			var animateSpeedUp = 0;
			var dockHangingOutHeight;
			var animateSpeed = 0;
			
			function calculateAnimateSpeed(){
				animateSpeed = dockHangingOutHeight;
					
				var navOffset = parseInt($("#navigation ul").css("margin-top"));
				animateSpeed += navOffset;
				
				animateSpeed = animateSpeed * 9;
				
				animateSpeedUp = dockHangingOutHeight * 9; //set "up speed" to the difference of the fastest speed from the ...
				animateSpeedUp -= animateSpeed; // ... current "down speed". So if down is 6000 to start and moves to 5000, up becomes 1000.
			}
			
			
			$("#thumb_next").hover(
				function () {
				
					var totalDockHeight = 0;
					
					$("#navigation ul li").each(function (i) {
							
						totalDockHeight += $("#navigation ul li").height() + 28; // the 10 is the padding and 2px border on the thumbs
						
					});
								
					$("#navigation ul").height(totalDockHeight);
					   
					dockHangingOutHeight = totalDockHeight - ($(window).height() - 95);
					
					calculateAnimateSpeed();
					
					
					$("#navigation ul").animate({ 
						marginTop: "-" + dockHangingOutHeight + "px"
					}, animateSpeed, "linear" );
					
					showHideDockArrows();
				},
				function () {
					calculateAnimateSpeed();
					showHideDockArrows();
					$("#navigation ul").stop();					
				}
			);
			
			
			
			$("#thumb_prev").hover(
				function () {
					calculateAnimateSpeed();
					$("#navigation ul").animate({ 
						marginTop: "0"
					}, animateSpeedUp, "linear" );
					
				},
				function () {
					calculateAnimateSpeed();
					showHideDockArrows();
					$("#navigation ul").stop()	
				}
				
			);
			
			
			
			/* $("#thumb_next").click(function () {
				
				
				var nav_height = ($("#navigation_wrap").height() - 60);
					
				$("#navigation").animate({"top": "-=" + nav_height + "px"},  2000);
				showHideDockArrows();
				return false;
			}); */
			
			$("body").keydown(function (e) {
				if (e.which == 39 || e.which == 40) {
					imageNext();
				} else if (e.which == 37 || e.which == 38) {
					imagePrev();
			  }
			});

						
		});
		
		
		function showHideDockArrows(){
			
			var totalDockHeight = 0;
			$("#navigation ul li").each(function (i) {	
				totalDockHeight += $("#navigation ul li").height() + 28; // add 28 for padding
				//alert(totalDockHeight);
			});
			
			
			
			var dockHangingOutHeight = totalDockHeight - ($(window).height() - 61);
			
			
			//totalDockHeight += $(window).height() * .06;
			$("#navigation ul").height(totalDockHeight);
			var dockHangingOutHeight = totalDockHeight - ($(window).height() - 61);
			
			var navOffset = parseInt($("#navigation ul").css("margin-top"));
			
			//alert(dockHangingOutHeight + ", " + navOffset);
			
			if((navOffset + dockHangingOutHeight) <= 0){
				$("#thumb_next").hide();
			}else{
				$("#thumb_next").show();
			}
			
			
			if ($("#navigation ul").css("margin-top") > "0"){
				$("#thumb_prev").hide();
			}else{
				$("#thumb_prev").show();
			}
			
			
			
			
			//alert("hey" + totalDockHeight + ", " + dockHangingOutHeight);
		}
		
		
		$(window).resize(function(){
			resizeImage();	
			showHideDockArrows();
			
		});