jQuery(document).ready(function($){
	
	var apiKEY = '9c65ee3419e52d406019f621630f0647';
	var userID = '48114264@N08';
	var secret = '';
	
	/* Hide necessary elements */
	$('.set-preview').hide();
	
	/* Load flickr photoset information */
	$.getJSON("http://www.flickr.com/services/rest/?method=flickr.photosets.getList&format=json&api_key="+ apiKEY +"&user_id="+ userID +"&jsoncallback=?", function(data){
		
		/* Set a variable to hold the html generated for the portfolio list */
		
		var htmlSets = '';
		
		$.each(data.photosets.photoset, function(i, set){
			
			/* Append to the generated html */
			htmlSets += '<li><a href="" id="'+ set.id +'" class="a-set">'+ capitalize(set.title._content) +'<span class="set-count">('+ set.photos +')</span></a><div class="set-preview" id="pre-'+ set.id +'"></div></li>';
		});
		
		/* Turn off the loader for the sets */
		$('#set-loader').hide();
		
		/* Load the html into the portfolio ul */
		$('#portfolio').html('').html(htmlSets);
		
	});
	
	$('.a-set').live('click', function(e){
		
		/* Prevent the default click */
		e.preventDefault();
		
		/* Get the id from the current element */
		var idSet = $(this).attr('id').replace(/a-/, '');
		
		if($('#pre-'+ idSet).is(':hidden'))
		{
			

			if($('#pre-'+ idSet).html() == '')
			{
				/* Set the html of the preview div */
				$('#pre-'+ idSet).html('<div id="loader-'+ idSet +'" class="loader"></div>').show();


				/* Load flickr photos information */
				$.getJSON("http://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&format=json&api_key="+ apiKEY +"&photoset_id=" + idSet + "&jsoncallback=?", function(data){

					/* Set a variable to hold the html generated for the portfolio list */

					var htmlImages = '<ul>';

					$.each(data.photoset.photo, function(i, img){

						/* Append to the generated html */
						htmlImages += '<li><a href="" id="'+ img.id +'" class="set-img">'+ capitalize(img.title) +'</a></li>';

					});

					htmlImages += '</ul>';

					/* Replace the loader with the html */
					$('#pre-'+ idSet).html('').html(htmlImages);

				});
				
			}
			else
			{
				$('#pre-'+ idSet).slideToggle();
			}
			
		}
		else
		{
			$('#pre-'+ idSet).slideToggle();
		}
		
	});
	
	$('.set-img').live('click', function(e){
		
		e.preventDefault();
		
		/* Get the id of the image */
		var idImg = $(this).attr('id');
		
		var content = $('#main').find('#content');
	
		if(content.length != 0)
		{
			$('#content').attr('id', 'index-content');
		}
		
		/* Get the image data from Flickr */
		$.getJSON("http://www.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&api_key="+ apiKEY +"&photo_id=" + idImg + "&jsoncallback=?", function(data){
			
			$.each(data.sizes.size, function(i, size){
				if(size.label == 'Large')
				{
					var htmlSrc = size.source;
					var w = size.width;
					var h = parseInt(size.height) + parseInt(60);
					
					/* Get the description for the photo */
					$.getJSON("http://www.flickr.com/services/rest/?method=flickr.photos.getInfo&format=json&api_key="+ apiKEY +"&photo_id=" + idImg + "&jsoncallback=?", function(detail){
						var htmlDesc = '<div class="img-description"><div class="img-title">'+ detail.photo.title._content +'</div><div class="desc-text">'+ detail.photo.description._content +'</div></div>';
						
						$('#index-content').html('<div class="loader">Loading...</div>').animate({width: w + 'px', height: h + 'px'}, 500).html('<img src="'+ size.source +'"/>' + htmlDesc);
					});
					
				}
			});
			
		});
		
		
	});
	
	
	
	
	function capitalize(string)
	{
		string = string.replace(/_/, ' ', string);
		
	    return string.charAt(0).toUpperCase() + string.slice(1);
	}
	
	function unix_timestamp()
	{
		return parseInt(new Date().getTime().toString().substring(0, 10));
	}
	
	
});