// JavaScript Document

function jsonFlickrApi(rsp) {
 if (rsp.stat != "ok"){
  // If this executes, something broke!
  return;
 }
 
 // Set up variable to collect output
 var s = "";
 
 // Loop through every result an dnd create HTML 
 for (var i=0; i < rsp.photos.photo.length; i++) {
  photo = rsp.photos.photo[ i ];
  
  // Thumbnail URL
  t_url = "http://farm" + photo.farm + 
  ".static.flickr.com/" + photo.server + "/" + 
  photo.id + "_" + photo.secret + "_" + "s.jpg";
  
  // Link to medium image URL
  l_url = "http://farm" + photo.farm + 
  ".static.flickr.com/" + photo.server + "/" + 
  photo.id + "_" + photo.secret + ".jpg";
    
  // Photo page URL
  p_url = "http://www.flickr.com/photos/" + 
  photo.owner + "/" + photo.id;
  
  s +=  '<a href="' + l_url + '" class="grid-image fancybox" rel="'+ photo.id +'">' + '<img alt="'+ 
  photo.title + '" title="'+ 
  photo.title + '" src="' + t_url + '"/>' + '<span id="'+ photo.id +'"><strong>' + photo.title + '</strong><br />Click to enlarge</span></a>';
 }

  // Write everything in variable "s" into the page
 document.writeln(s); 
}

$(document).ready(function() {
	
	// Expand bonus bar on rollover
	$('#handle').mouseout(function() {
        
		if ($('.grid-image').is('.open')) {
			
			$('.grid-image').removeClass('open');
			$('#bonusbar').animate({ width: 81 });
			
		} else {
		
			$('.grid-image').addClass('open');
			$('#bonusbar').animate({ width: 420 });
			
		}
		
	});
	
	// Swap class on grid-image on rollover
	$('.grid-image').each(function() {
	
		$(this).mouseover(function() {
			$(this).addClass("selected");
		});
	
		$(this).mouseout(function() {
			$(this).removeClass("selected");
		});
		
	});
});