// JavaScript Document

function jsonFlickrFeed(data) {
	if (window.console) { console.log(data); }
}

$(document).ready(function(){
						   
	// Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images			   
	// $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=998875@N22&lang=en-us&format=json&jsoncallback=?", displayImages);
	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=41438021@N02&lang=pt-br&format=json&jsoncallback=?", displayImages);
	
	function displayImages(data) {																																   
		// Randomly choose where to start. A random number between 0 and the number of photos we grabbed (20) minus 9 (we are displaying 9 photos).
		// var iStart = Math.floor(Math.random()*(16));
		var iStart = -1; // <<<< pra pegar o primeiro item.
		
		// Reset our counter to 0
		var iCount = 0;
		
		// Start putting together the HTML string
		var htmlString = "";					
		
		var direita = true;
		
		// Now start cycling through our array of Flickr photo details
		$.each(data.items, function(i,item){
									
			// Let's only display 9 photos (a 3x3 grid), starting from a random point in the feed					
			if (iCount > iStart && iCount < (iStart + 5)) {
				
				
				// I only want the ickle square thumbnails
				var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");	
				
				// Here's where we piece together the HTML
				
				if (direita) { 
					htmlString += '<li><a href="' + item.link + '" target="_blank">';
				}
				else {
					htmlString += '<li class="direita"><a href="' + item.link + '" target="_blank">';
				}
				
				htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
				htmlString += '</a></li>';
				
				direita = !direita;
			}
			// Increase our counter by 1
			iCount++;
		});		
		
	// Pop our HTML in the #images DIV	
	$('#flickr').html(htmlString);
	
	// Close down the JSON function call
	}
	
// The end of our jQuery function	
});