var images = new Array();
var descriptions = new Array();
var currentImage = nextImage = prevImage = new Image();

$('#modalImageRight').live('click', function()
{
	closeImageModal();	
});


$.getJSON('http://api.flickr.com/services/feeds/groups_pool.gne?id=1609440@N22&format=json&jsoncallback=?', displayImages);

$('.thumbnail').live('click', function()
{
	currentImage.src = $(this).children('img').attr('src').replace("_s.jpg", ".jpg");
	currentImage.alt = $(this).children('img').attr('title').replace("_s.jpg", ".jpg");
	//alert(currentImage.alt);
	createImageModal();
	
	return false;
});

function closeImageModal()
{
	$('#lightbox').fadeOut('fast');
	$('#modalContainer').fadeOut('fast');
	$('#lightbox').remove();
	$('#modalContainer').remove();	
}

function createImageModal()
{
	closeImageModal();
	
	var lightbox = document.createElement('div');
	lightbox.setAttribute('id', 'lightbox');
	document.body.appendChild(lightbox);

	var modalContainer = document.createElement('div');
	modalContainer.setAttribute('id', 'modalContainer');
	document.body.appendChild(modalContainer);	

	$('#modalContainer').fadeIn('fast');	
	$('#modalContainer').html('<h4>Loading...</h4>');
	$.ajax({
	      url: root+"ajax/imageModal.php",
	      type: "POST",
	      data: ({'src' : currentImage.src, 'caption' : currentImage.title}),
	      dataType: "html",
	      async: true,
	      success: function(dt){
			$('#lightbox').fadeTo('slow', '.6');
			$('#modalContainer').html(dt);
			setTimeout("$('#imageModal').slideDown()", 400);
	      }
	   }
	);
}

function displayImages(data) 
{
	    // Start putting together the HTML string
	    var htmlString = "";
	   
	    // Now start cycling through our array of Flickr photo details
	    var count = 0; 
	    data.items.sort(function() { return Math.round(Math.random())-0.5; } );
	    $.each(data.items, function(i,item)
	    {
	        // I only want the ickle square thumbnails
	        var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
	        var description =  (item.description);
	        $('#descriptions').append('<div>'+description+'</div>');
	        images[i] = new Image();
	        images[i].src = sourceSquare;
	        images[i].alt = item.title;
	        if(count < 8)
	    	{   
	        	// Here's where we piece together the HTML
	        	htmlString += '<a href="' + item.link + '" class="thumbnail" target="_blank">';
	        	htmlString += '<img title="' + item.title + '" src="' + sourceSquare;
	        	htmlString += '" alt="'; 
	        	htmlString += item.title + '" />';
	        	htmlString += '</a>';
	        	count++;
	    	}	   
	    });
	   
	    // Pop our HTML in the #images DIV
	    $('.gallery').html(htmlString);
	    //fill the descriptions array with the descriptions
	    $('#descriptions div').each( function() {
	    	descriptions.push($(this).children('p:last').html());
	    });
	    $('#descriptions').remove();
	}

	$('.gallery a').click( function() 
	{
		var img = $(this).attr('href');
		return false;
});