// JavaScript Document

<!--function to load images and place correct image in main "photo" div when thumbnail is clicked-->

$(document).ready(function() {
		
$('#gallery img').each(function(i) {
	var imgFile = $(this).attr('src');
	var preloadImage = new Image();
	

	/*var imgExt = /(\.\w{3,4}$)/;
	preloadImage.src = imgFile.replace(imgExt,'_h$1');*/
		
}); // end each

/*The click function is practically the same as the mouseover; it replaces the main image*/

$('#gallery a').click(function(evt) {
	//don't follow link
	evt.preventDefault();
	//get path to new image
	var imgPath = $(this).attr('href');
	//get reference to old image
	var oldImage = $('#photo img');
	//check to see if they're the same image
		 
	//create HTML for new image
	var newImage = $('<img src="' + imgPath +'">');
	//make new image invisible
	newImage.hide();
	//add to the #photo div
		 $('#photo').prepend(newImage);
			 //fade in new image
			 newImage.fadeIn(1000);
			 
			 //fade out old image and remove from DOM
			 oldImage.fadeOut(1000,function(){
			     $(this).remove();
		});
		 
	}); // end click

$('#gallery a').mouseover(function(evt) {
	//get path to new image
	var imgPath = $(this).attr('href');
	//get reference to old image
	var oldImage = $('#photo img');
	//check to see if they're the same image
	if (imgPath == oldImage.attr('src')) { 
	//if they are then you're done
	return;
	} else {
	//remove highlight from previously clicked thumbnail
       $('.selected').removeClass('selected');		
			 //add highlight to this thumbnail
			 $(this).addClass('selected');
			 //create HTML for new image
			 var newImage = $('<img src="' + imgPath +'">');
			 //make new image invisible
			 newImage.hide();
			 //add to the #photo div
				 $('#photo').prepend(newImage);
					//fade out old image and remove from DOM
			 		oldImage.fadeOut(1000,function(){
		     			$(this).remove();
				});
			 //fade in new image
			 newImage.fadeIn(1000);
		 }
	});
	
	// end mouseover
	
/*This selects and highlights the first gllery image when the page is loaded*/	
		
		$('#gallery a:first').mouseover();
		$('#gallery a:first').click();
		

}); // end ready