jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}

$.preloadImages("images/grass.jpg");

// Thumbnail popups
function removePopup(m) {
	//t = setTimeout("document.getElementById('details" + m + "').style.display='none'", 300);
	document.getElementById('details' + m).style.display='none';
}

function displayPopup(m, showreelCount) {
	// Clear the current timeout
	if (typeof(t) != 'undefined') {
		clearTimeout(t);
	}
	for(var i = 0; i < 9; i++) {
		try {
		document.getElementById('details' + i).style.display='none';
		} catch(err) {}
	}
	document.getElementById('details' + m).style.display='block';
	
}


scrollNav = function() {

		var offset = 0;
		if (window.pageYOffset) {
			offset = window.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop) {
			offset = document.documentElement.scrollTop;
		} else if (document.body) {
			offset = document.body.scrollTop;
		}
		
		if (offset > 110) {
			var top = offset - 110;
		} else {
			var top = 0;
		}
		// easeInOutQuad
		$("#nav").animate({ 
			top: top + "px"
		  }, {queue:false, duration:1500, easing:"easeOutBounce"} );

}

$(document).ready(function() {

	if ($.browser.msie && $.browser.version < 7) {
		$("#upgradeBrowser").fadeIn(3000);
	}

	// Default easing animation
	//jQuery.easing.def = "string";
	scrollTimeout = 0;
	
	$(window).scroll(function () { 
		if(scrollTimeout) {
			clearTimeout(scrollTimeout);
		}
		scrollTimeout = setTimeout("scrollNav()" , 400);
	});

	 


	$("#nav").hover(
		function() { $(this).animate({ backgroundColor: "#F5FFF0" }, 500); }, 
		function() { $(this).animate({ backgroundColor: "#FFFFFF" }, 500);
	});
	
	$("#body").hover(function() {
			$(this).animate({ backgroundColor: "#F5FFF0" }, 500);
			$(".meta").animate({ backgroundColor: "#F5FFF0" }, 500);
		}, function() {
			$(this).animate({ backgroundColor: "#FFFFFF" }, 500);
			$(".meta").animate({ backgroundColor: "#FFFFFF" }, 500);
	});
	
	$(".meta").hover(
		function() { $(this).animate({ backgroundColor: "#DDFFCC" }, 500);}, 
		function() { $(this).animate({ backgroundColor: "#F5FFF0" }, 300);
	});
	
	
	$(".optionBox").hover(
		function() { $(this).fadeTo("slow", 1.0); }, 
		function() { $(this).fadeTo("slow", 0.4);}
	);

	//$(".fontSize").fadeTo(1, 0.5);
	$(".optionBox").fadeTo(1, 0.4);
	$(".optionBox").fadeIn("slow");
	
	$("#increaseFont").click(function() { changeFontSize(true) });
	$("#decreaseFont").click(function() { changeFontSize(false) });
	
	
	$("#red").click(function() { 
		changePageStyle("images/JapanFish.jpg", "images/redbackground.gif", "#FFF0F0", "#FF3232", "#FF3030", "#FFDFDF", "#FFC1C1", "Tsukiji Fish Market, Tokyo, Japan", "#AAAAAA");
	});
	
	$("#cream").click(function() { 
		changePageStyle("images/GreatWall.jpg", "images/creambackground.gif", "#FAF4E4", "#E7CB80", "#DDB54A", "#F9EED9", "#F7E7C8", "The Great Wall of China, Simatai", "#FFFFFF");
	});
	
	$("#green").click(function() { 
		changePageStyle("images/Munnar.jpg", "images/background.gif", "#F5F9DD", "#DEEA8A", "#66CD00", "#F5FFF0", "#DDFFCC", "Tea Plantation, Munnar, India", "#FFFFFF");
	});
	
	$.preloadImages("images/JapanFish.jpg", "images/GreatWall.jpg", "images/Munnar.jpg", "images/redbackground.gif", "images/creambackground.gif","images/background.gif");
	
});


function changePageStyle(headerImg, bgImg, wrapperBgClr, wrapperBorderClr, accentClr, navBodyHoverClr, metaHoverClr, caption, captionColor) {

		$("#upgradeBrowser").fadeOut(2000);
		$("#header").css("background-image", "url(" + headerImg + ")");
		$("body").css("background-image", "url(" + bgImg + ")");
		$("#wrapper").css("background-color", wrapperBgClr);
		$("#wrapper").css("border-left", "5px solid " + wrapperBorderClr);
		$("#wrapper").css("border-right", "5px solid " + wrapperBorderClr);
		$("h2, .selectedPage").css("color", accentClr);
		$(".optionBox").css("background-color", accentClr);
		$(".meta").css("border", "1px dashed " + accentClr);
		$("a").hover(
			function() { $(this).css("color", accentClr); },
			function() { $(this).css("color", "#444444"); }
		);
		
		$("#nav, #body, .meta").unbind('mouseenter').unbind('mouseleave');
		
		$("#nav").hover(
			function() { $(this).animate({ backgroundColor: navBodyHoverClr }, 500); }, 
			function() { $(this).animate({ backgroundColor: "#FFFFFF" }, 500);
		});
		
		$("#body").hover(function() {
			$(this).animate({ backgroundColor: navBodyHoverClr }, 500);
			$(".meta").animate({ backgroundColor: navBodyHoverClr }, 500);
		}, function() {
			$(this).animate({ backgroundColor: "#FFFFFF" }, 500);
			$(".meta").animate({ backgroundColor: "#FFFFFF" }, 500);
		});
	
		$(".meta").hover(
			function() { $(this).animate({ backgroundColor: metaHoverClr }, 500);}, 
			function() { $(this).animate({ backgroundColor: navBodyHoverClr }, 300);
		});
		
		$("#header #caption").text(caption).css("color", captionColor);

}



function changeFontSize(larger) {
	var bodyFontSize = $("body").css("font-size");
	var increment = larger ? 1 : -1;
	var increasedSize = parseInt(bodyFontSize.substring(0, bodyFontSize.length -2)) + increment;
	if(increasedSize >= 9 && increasedSize <= 16) {
		$("body").css("font-size", increasedSize + "px"); 
	}
}