$(document).ready(function(){						   
	// Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images	
	$('#leftbtn_01').hide();
	$('#rightbtn_01').hide();	
	
	$.getJSON("http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=998ab78129a2f7048ecd73236b4fb609&photoset_id=72157622808628563&per_page=100&page=1&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).
		
		
		// Reset our counter to 0
		var iCount = 0;
		var iWidth = 0;								
		
		// Start putting together the HTML string
		var htmlString = "<ul>";					

		// Now start cycling through our array of Flickr photo details
		$.each(data.photoset.photo, 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 + 10)) {
				
				// 
				var imagelink = 'http://farm'+item.farm+'.static.flickr.com/'+item.server+'/'+item.id+'_'+item.secret+''+'.jpg';
				var imagelink_s = 'http://farm'+item.farm+'.static.flickr.com/'+item.server+'/'+item.id+'_'+item.secret+'_s'+'.jpg';
				var flickrLink = 'http://www.flickr.com/photos/' + data.photoset.owner + '/' + item.id;

				// Here's where we piece together the HTML
				if ((iCount % 15==0) && (iCount>=1)){
			htmlString += '</ul><ul>';
			$('#leftbtn_01').show();
			$('#rightbtn_01').show();
					} else
				if ((iCount % 5==0) && (iCount>=1)){
			htmlString += '<br />';

					}
				if 	((iCount % 3==0)) {
					htmlString += '<li>';
					htmlString += '<a class="tooltip2" rel="<b>This is not an image! Choose another one :)</b>" href="#"><img src="./images/no_image.png" alt="" /></a>';
					htmlString += '</li>';
					
					iCount++;
					 
					
					if ((iCount % 15==0) && (iCount>=1)){
			htmlString += '</ul><ul>';
			$('#leftbtn_01').show();
			$('#rightbtn_01').show();
					} else
				if ((iCount % 5==0) && (iCount>=1)){
			htmlString += '<br />';

					}}
					
				htmlString += '<li>';
				htmlString += '<a class="tooltip" rel="<b>'+ item.title +'</b>" href="' + imagelink + '" alt="&lt;p&gt;' + item.title + '&lt;/p&gt; &lt;a href=&quot;' + flickrLink + '&quot; target=&quot;_blank&quot; &gt;Watch it on Flickr.com!  &lt;/a&gt;"><img src="' + imagelink_s + '" alt=""/></a>';
				htmlString += '</li>';
			//}
			// Increase our counter by 1
			iCount++;
		});
		var mult_x=(parseInt((iCount-1)/15)+1)*485+17;
		$('#images_webdesign').width(mult_x);

		
		
	// Pop our HTML in the #images DIV	
	$('#images_webdesign').html(htmlString + "</ul>");
	$('#images_webdesign ul li a.tooltip').lightBox();
	$('.images img').fadeTo("slow", 0.5);
	$('#images_webdesign .tooltip').bind('mouseenter', mouseoverActiontooltip);
	$('#images_webdesign .tooltip').bind('mouseleave', mouseoutActiontooltip);
	$('#images_webdesign .tooltip').bind('mousemove', mousemoveActiontooltip);
	$('#images_webdesign .tooltip2').bind('mouseenter', mouseoverActiontooltip);
	$('#images_webdesign .tooltip2').bind('mouseleave', mouseoutActiontooltip);
	$('#images_webdesign .tooltip2').bind('mousemove', mousemoveActiontooltip);
	
	function mouseoverActiontooltip(event)
{
$("body").append("<p id='tooltip'>"+ this.rel + "</p>");
$("#tooltip").css("left",(event.pageX + 20) + "px");
$("#tooltip").css("top",(event.pageY - 10) + "px");
}

function mouseoutActiontooltip(event)
{
$("#tooltip").remove();
}

function mousemoveActiontooltip(event)
{
$("#tooltip").css("left",(event.pageX - 30) + "px");
$("#tooltip").css("top",(event.pageY - 60) + "px");
}
	
	$('.images img').hover(
	  function () {
        $(this).fadeTo("100", 1);
      }, 
      function () {
        $(this).fadeTo("100", 0.7);
      }
	);
	// Close down the JSON function call
	}
	
// The end of our jQuery function	
});