// JS and jQuery that makes this thing tick
// (c)ClintMilner.com 2011

$(document).ready(function(){



// Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images  63825117@N05	998875@N22 		  // http://api.flickr.com/services/feeds/photos_public.gne?id=63825117@N05&lang=en-us&format=json&jsoncallback=?
//http://api.flickr.com/services/feeds/groups_pool.gne?id=998875@N22&lang=en-us&format=json&jsoncallback=?  72157626915833826


//"http://api.flickr.com/services/feeds/photoset.gne?set=5983751583&nsid=63825117@N05&lang=en-us&format=json&jsoncallback=?"


	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=63825117@N05&lang=en-us&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()*(9));	
		//var iStart = 0;
		// Reset our counter to 0
		var iCount = 0;								
		
		// Start putting together the HTML string
		var htmlString = "<ul>";					
		
		// 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 + 11)) {
			//	if (iCount <= 9) {
				//if (iCount == 0 && iCount < 11) {
				//if (iCount >= iStart) {
				// 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
				htmlString += '<li><a href="' + item.link + '" target="_blank">';
				htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
				htmlString += '</a></li>';
			}
			// Increase our counter by 1
			iCount++;
		});		
		
	// Pop our HTML in the #images DIV	
	$('#images').html(htmlString + "</ul>");
	
	// Close down the JSON function call
	};
	


	
	//Showing more info links
	
	 $(".description-fb-fanpage, .description-youtube-encode, .description-photo-edit, .description-bespoke, .description-psd-to-html, .description-five, .description-six, .description-seven, .description-eight, .description-nine, .description-URL, .description-admin").hide();
	 $(".long-description").show();
	 
    $('#fb-fanpage').click(function(){
	    $(".description-fb-fanpage").slideToggle();
    });
	$('#youtube-encode').click(function(){
	    $(".description-youtube-encode").slideToggle();
    });
	$('#photo-edit').click(function(){
	    $(".description-photo-edit").slideToggle();
    });
	$('#bespoke').click(function(){
	    $(".description-bespoke").slideToggle();
    });
	$('#psd-to-html').click(function() {
		$(".description-psd-to-html").slideToggle();
	});
	$('#five').click(function(){
	    $(".description-five").slideToggle();
    });
	$('#six').click(function(){
	    $(".description-six").slideToggle();
    });
	$('#seven').click(function(){
	    $(".description-seven").slideToggle();
    });
	$('#eight').click(function(){
	    $(".description-eight").slideToggle();
    });
	$('#nine').click(function(){
	    $(".description-nine").slideToggle();
    });
	$('#URL').click(function(){
	    $(".description-URL").slideToggle();
    });
	 $('#admin').click(function(){
	    $(".description-admin").slideToggle();
    });
	
	 
						   
		$(".web-design").show();
		$(".digital-design").show();
		$(".print-design").show();
		$(".video-design").show();
	
	
	$('#web').click(function() {
		$(".web-design").show();
		$(".digital-design").hide();
		$(".print-design").hide();
		$(".video-design").hide();
	});
	$('#digital').click(function() {
		$(".web-design").hide();
		$(".digital-design").show();
		$(".print-design").hide();
		$(".video-design").hide();
	});
	$('#typo').click(function() {
		$(".web-design").hide();
		$(".digital-design").hide();
		$(".print-design").show();
		$(".video-design").hide();
	});
	$('#video').click(function() {
		$(".web-design").hide();
		$(".digital-design").hide();
		$(".print-design").hide();
		$(".video-design").show();
	});
	

});// end of $Ready