$(document).ready(function() {
  
  //declare the full image function to add an image tag to the full image div
  function fullImage(link){
	//get the url from the jquery object
	url = $("a", link).attr("href");
    
    $(".current").removeClass("current");
    link.addClass("current");   
	
	$('#photo').html("");
	
    // create the full image programatically 
    //var list = $('<img src="' + url + '" />');
	var list = $('<div class="largeimage loading"></div>');

    // append the new LI to UL 
    $('#photo').append(list);
	
	var current = $(".largeimage");
	
    // new image object 
    var img = new Image(); 
    // image onload
    $(img).load(function () { 
        // hide first 
        $(this).css('display','none'); // since .hide() failed in safari
        $(current).removeClass('loading').append(this); 
        $(this).fadeIn(); 
    }).error(function () { 
        $(current).remove(); 
    }).attr('src', url);
  }

  $('#thumbnails ul li').each(function () {
	
	  $("a", this).click(function(evt) {
		  //look at the full sized image
	      fullImage($(this).parent());
		
		  //prevent the default action for safari
		  return false;
	      
	  });
  });

  //load the full image of the first li
  fullImage($('#thumbnails ul li:first'));
  
});