// JavaScript Document

	/* 
	There are 3 functions in this JavaScript file:
	
	1) The first function builds the html that creates the flickr thumbnail images. 
	2) The timer function moves the thumbnails 4 at a time to display all of the thumbnails. (This has been defaulted to 12 images).  
	3) The flickrLink function is for when the thumbnails have been clicked on, the large flickr photo gets populated and becomes a link to the flickr site. 
	
	*/


	/*************************************/
	/*        Build the Thumbnails       */
	/*************************************/

// Don't execute any code until the DOM is ready!
$(document).ready(function(){				
						
	var firstImage = true;					
						
	// The call to Flickr, gets details of the most recent 20 images			   
	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=37234526@N08&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 12 (we are displaying 12 photos. 20-12 = 8).
		var iStart = Math.floor(Math.random()*(8));
		
		// 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 12 photos (four at a time), starting from a random point in the feed					
			if (iCount > iStart && iCount < (iStart + 13)) { 
				
				//We want to make the large flickr image to be the same as the first thumbnail image that was randomly selected.
				if(firstImage)
				{
					// get the large version of the flickr image
					var firstImageSource = (item.media.m).replace("_m.jpg", ".jpg");
					// add the large photo and make it an anchor that will direct the user to the flickr account when it is clicked on
					$('#largeFlickrPhoto').html('<a id="largeImageLink" href="' + item.link + '" target="_blank"><img id="flickr" src=' + firstImageSource + ' alt="flickr" /></a>');
				}
				// change the large image to the first thumbnail
				firstImage = false;
				
				// Get the small thumbnail of the image
				var thumbnail = (item.media.m).replace("_m.jpg", "_s.jpg");
				// Get the large version of the image
				var large = (item.media.m).replace("_m.jpg", ".jpg");
				
				// Here's where we piece together the HTML
				htmlString += '<li><a href="javascript:flickrLink(\'' + large + '\',\''+ item.link + '\')">';
				htmlString += '<img src="' + thumbnail + '" alt="' + item.title + '" title="' + item.title + '"/>';
				htmlString += '</a></li>';
			}
			// Increase our counter by 1
			iCount++;
		});		
		
	// Pop our HTML in the #flickrThumbnails DIV	
	$('#flickrThumbnails').html(htmlString + "</ul>");
	// Close down the JSON function call
	}
	
	
	
	
	/*************************************/
	/*        Rotate the Thumbnails      */
	/*************************************/
	
 	// This moves the flickr thumbnails. A timeout is set to make sure the code above is complete before we move the thumbnails.
	setTimeout ( timer, 1000 );
	function timer()
	{
		// We don't want to see the thumbnail arrows if javascript is turned off. Since JS is on, we turn them back on.
		$("#thumbnailArrows").css("display", "block");
		// Auto sets the time the thumbnails rotate, the speed tells how fast, and visible tells how many thumbnails to show at one time.
		$("#flickrThumbnails").jCarouselLite({auto: 8000, speed: 1000, visible: 4, btnNext: ".up", btnPrev: ".down", scroll: 4, vertical:true});
	}
			
// The end of the jQuery function	
});


	/*************************************/
	/*       Click the Thumbnails        */
	/*************************************/


// This function gets called with the flickr thumbnails are clicked. The large flickr images are populated and their links are updated
function flickrLink(largeImg, linkPath)
{
	document.getElementById('largeImageLink').href=linkPath;
	document.getElementById('flickr').src = largeImg;
	document.getElementById('flickr').style.height = "317px";
}