/* Evolved from http://www.viget.com/inspire/using-the-flickr-api */

function jsonFlickrApi(rsp) {
	if (rsp.stat != "ok"){
  	// If this executes, something broke!
  	return;
 	}
 	//variable "s" is going to contain 
 	//all the markup that is generated by the loop below
 	var s = "";

 	//this loop runs through every item and creates HTML that will display nicely on your page
 	//this example displays 10 photos because because variable i is set to 10
 	//you can change that number depending on how many photos you want to show
 	//to show all the photos, replace that number with rsp.photos.photo.length  <-- rsp.photos is now rsp.photoset, so this might not be correct now
 	for (var i=0; i < rsp.photoset.photo.length; i++) {
  	photo = rsp.photoset.photo[i];

  	//notice that "s.jpg" is where you change the size of the image
  	t_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+ 
  	photo.id +'_'+ photo.secret +'_m.jpg';

	/*p_url = 'http://www.flickr.com/photos/'+ photo.owner +'/'+ photo.id;*/
	p_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+ photo.id +'_'+ photo.secret +'.jpg';


  	/*s += '<div><a href="'+ p_url +'" title="'+ photo.title +'" target="_blank"><img alt="'+ photo.title +'" src="'+ t_url +'" /></a></div>';*/
	s += '<li><div><a href="'+ p_url +'" style="background-image: url('+ t_url +'); background-position: 50% 50%" title="'+ photo.title +'"></a></div><p>'+ photo.title +'</p></li>';

 	}

 	//this tells the JavaScript to write everything in variable s onto the page
	document.getElementById('photostream').innerHTML = "<div>"+s+"</div>";

}