$(document).ready(function(){
	//Find the First Thumbnail and make it the default image
	var defaultImage = $(".Thumbnails li:last").find("img").attr("src");
	//Strip off the _thumb from the file name so that we are getting the large image
	defaultImage = defaultImage.replace("_thumb","");
	
	$(".Thumbnails img").mouseover( function() {
		//Add the Loader GIF to the Main Image
		//$(".MainImage").prepend('<div class="Loader"></div>');
		var imageNumber = $(this).attr("name");
		var imageSrc = $(this).attr("src");
		imageSrc = imageSrc.replace("_thumb","");
		var img = new Image();    
		// wrap our new image in jQuery, then:  
		$(img)    
			// once the image has loaded, execute this code    
			.load(function () {     
				// set the image hidden by default          
				$(this).hide();  
				// remove the loading class (so no background spinner),         
				//$(".Loader").fadeOut(); 
				// with the holding div #loader, apply:      
				$('.MainImage')             
				// then insert our image        
				.find("img").replaceWith(this);          
				// fade our image in to create a nice effect      
				$(this).fadeIn();    
			})        
			// if there was an error loading the image, react accordingly    
			.error(function () {    
				// notify the user that the image could not be loaded
				alert("no image");    
			})        
			// *finally*, set the src attribute of the new image to our image    
			.attr('src', imageSrc);
	});
});