<!--

$(document).ready(function(){

	$("img.thumb")
		.mouseenter(function(){
			$(this).fadeTo("normal", 1.0);
			preloadImg(this.src.replace("thumbs","images"));
		})
		.mouseleave(function(){
			$(this).fadeTo("normal", 0.25);
    	})
    	.click(function(){
			crossFadeImg(this.src.replace("thumbs","images"));
    	});

	function preloadImg(path) {
		var image1 = $('<img />').attr('src',path);		
	}

	function crossFadeImg(path) {
		// load foregnd img with backgnd img, it's a cover up
		$("div#fgnd").css("background-image", $("div#photo").css("background-image"));
		// set foregnd opacity to 100%, now the foreground is visible
		$("div#fgnd").fadeTo(0, 1.0);
		// load backgnd img with new image
		$("div#photo").css("background-image", "url('"+ path +"')");
		// fade foregnd opacity to 0% -> backgnd will show
		$("div#fgnd").fadeTo(750, 0.0);
	}
	
	$("img.thumb").fadeTo(1500, 0.25);
	$("div#fgnd").fadeTo(750, 0.0);

});

//-->