// Do this stuff once the DOM is loaded:

$(document).ready(function(){

	var firstBigPic =	$('div.gallery a:first').attr('href');
	$('#big-pic').empty().hide().append('<img src="'+firstBigPic+'" alt="" />');
	$('#big-pic').fadeIn('slow');
	$('div.gallery-row:first dl.gallery-item:first dd.gallery-caption').show();

	$('div.gallery a').click(function() {
	
		// bigPicSrc is the src of the big pic to show
		var bigPicSrc = $(this).attr('href');
		
		// empty the big pic div in the event that it already contains a big pic, append the new one
		$('#big-pic img').fadeOut('fast', function() {
			
			// remove the current image and append the new one
			// hide the new image whilst it loads
			$('#big-pic').empty().append('<img src="'+bigPicSrc+'" alt="" />').find('img').hide();		
			
			// fade in the big pic but only do it once it has finished loading
			$('#big-pic img').load(function() {
				$(this).fadeIn('fast');			
			});
		})
		
		// hide any previous captions that were shown
		$('dd.gallery-caption').hide();
		
		// find the caption for the image that got clicked and show it		
		$(this).parent().next().fadeIn('slow');
		
		return false;
	});

});