$(document).ready(function() {
  
  $('#swatches div.swatch').click(function() {
	var $current_img = $('#loader img');
	var current_src = $current_img.attr('src');
	var new_src = this.id;
	
	/*
	var width = $current_img.width();
	var height = $current_img.height();
	
	alert(width + "  " + height);
	*/
	
	if (current_src != new_src) {
		
		$('#loader').addClass('loading')
		.empty();
		
		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();
			
			  // with the holding div #loader, apply:
			  $('#loader')
				// remove the loading class (so no background spinner), 
				.removeClass('loading')
				.empty()
				// then insert our image
				.append(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
			})
			
			// *finally*, set the src attribute of the new image to our image
			.attr('src', new_src);
	}
  });
});