// Our very special jQuery JSON fucntion call to Flickr, gets details
// of the most recent 20 images

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=50511831@N07&lang=nl&format=json&jsoncallback=?", displayImages);

function displayImages(data) {

    // Start putting together the HTML string
    var htmlString = '<div class="item" style="text-align:center">';
    var i = 0;
    // Now start cycling through our array of Flickr photo details
    $.each(data.items, function(i,item){
   		if( i < 4 )
   		{     
	        // I only want the ickle square thumbnails
	        var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
	        //var sourceSquare = item.media.m;
	       
	        // Here's where we piece together the HTML
	        htmlString += '<a href="' + item.link + '" target="_blank">';
	        htmlString += '<img title="' + item.title + '" src="' + sourceSquare;
	        htmlString += '" alt="'; htmlString += item.title + '" />';
	        htmlString += '</a> ';
	        
	       	i++;
   		}   
    });
   htmlString += '</div> ';
    // Pop our HTML in the #images DIV
    $('#flickr').html(htmlString);
}