$(function(){
// load the json

	if(datasource){
	$.getJSON(datasource,
        function(data){
		  //console.log(data);
		  
          $.each(data, function(i,item){
			
          	$("<img/>").attr("src", 'photos/'+item.thumb).attr('title',item.title).data('title', item.title).data('source', item.large).addClass('thumb').appendTo("#thumbnails")
				.bind('click', function(){
					loadPhoto($(this).data('source'), $(this).data('title'));
				});

          });
		 
		  loadPhoto(data[0].large, data[1].title);
        });
	}
	
});

var currentImage = false;

function loadPhoto(source, title){
	var img = new Image();
	// display spinner
	//$('#spinner').show();
	
	$(img).load(function(){
		//$('#spinner').hide();
		// when the image is finished loading
		if(currentImage)
			$(currentImage).fadeOut(1000);
		$(img).hide();
		$('#photo').append(img);
		$(img).fadeIn(1000);
		
		currentImage = img;
	})
	.error( function(){ return; })
	.attr('src', 'photos/' + source);
	
}