$(document).ready(function() {
						   
	// *********************************************** initial set up ***********************************************
	
	var atl_image = new Image();
	$(atl_image).load( displayImage );
	var atl_minTopMargin = 0
	var atl_positionoffset = 0;
	var atl_currentImage = 0;
	var atl_totalImages = $('.feature_photo img').length;
	var atl_closeBtnSrc = '/_js/atl_lightbox/atl_close.png';
	
	var atl_lightboxHTML = '<!-- start lightbox -->';
  	atl_lightboxHTML += '<div id="atl_mask"></div>';
  	atl_lightboxHTML += '<div id="atl_slide_container" class="content-highlight">';
	atl_lightboxHTML += '<div id="atl_slide" class="inner">';
	atl_lightboxHTML += '<a href="" id="atl_close_slide"><img src="' + atl_closeBtnSrc + '" alt="close_slide" /></a>';
	atl_lightboxHTML += '<div id="atl_slide_image_container"></div>';
	atl_lightboxHTML += '</div>';
  	atl_lightboxHTML += '</div>';
  	atl_lightboxHTML += '<!-- end lightbox -->';
	
	$('body').append( atl_lightboxHTML );
	
	// get the position offset value - this is equal to the width of the border + the padding of the slide element (helps centre the slide and deal with an IE6 quirk)
	$('#atl_slide_container').show();
	atl_positionoffset = atl_positionoffset = ($('#atl_slide').outerWidth() - $('#atl_slide').width()) / 2;
	$('#atl_slide_container').hide();
	
	// *********************************************** event handlers ***********************************************
	
	// when the user clicks a thumbnail in the gallery
	$('.feature_photo a').click( function(e){						   
							   
		e.preventDefault();
		
		// determine which image the user has clicked on
		var currentHref = $(this).attr('href');
		$('.feature_photo a').each( function(i){
			if( currentHref == $(this).attr('href') ){
				atl_currentImage = i;
			}
		});
		
		// set the height of the mask to the full height of the page
		$('#atl_mask').css( 'height', documentHeight = $('body').outerHeight(true) );
		
		// fade in the mask, then start loading the slide
		$('#atl_mask').fadeTo( 400, 0.5, function(){
							
				// start loading in the image
				$(atl_image).attr('src', '#');
				$(atl_image).attr('src', $( '.feature_photo a:eq(' + atl_currentImage + ')' ).attr('href') );																													
		});	   	
	});
	
	// when the user clicks the close button on the lightbox modal popup, or clicks the semi-opaque black overlay
	$('#atl_close_slide, #atl_mask, #atl_slide_container').click( function(e){
		
		e.preventDefault();
		
		// remove the close button, fade out the mask and lightbox slide, then remove the image
		$('#atl_slide_container').fadeOut( 400, function(){
															
			$('#atl_slide_image_container').html('');	
			$('#atl_mask').fadeOut( 400 );												
		});								  
	});
	
	// *********************************************** functions ***********************************************
	
	// on loading the image, adjust the height and width of the image container, place the image in the container, then fade it in, then reveal the descriptive text and slide navigation
	function displayImage()
	{	
		// let's hide the close button
		$('#atl_close_slide').hide();
		
		// now, animate the width change of the slide container
		var newSlidePosition = getSlidePosition( $(atl_image).prop('width'), $(atl_image).prop('height') );
		
		$('#atl_slide_container').css('top', newSlidePosition.y + 'px');
		$('#atl_slide_container').css('left', newSlidePosition.x + 'px');
		
		$('#atl_slide_image_container').css('width', $(atl_image).prop('width'));
		$('#atl_slide_image_container').css('height', $(atl_image).prop('height'));
		
		newImage = $(atl_image).clone();
		$('#atl_slide_image_container').html( '' );	
		$('#atl_slide_image_container').append( newImage );	

		$('#atl_slide_container').fadeIn(400);
	}	
	
	function loadNewImage(imageSrc){
	
		// fade out the current image, hide the description & nav, load in the next image
		$('#atl_slide_info').slideUp();	
		$('#atl_slide_image_container img').fadeOut('slow', function(){
			$(atl_image).attr('src', '#');
			$(atl_image).attr('src', imageSrc);				  
		});
	}
	
	function getSlidePosition( imageWidth, imageHeight ){
		
		var horizontalPosition;
		var verticalPosition;
		
		slideWidth = imageWidth;
		slideHeight = imageHeight;
		
		// get the current viewport & document dimensions
		var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();	
		var viewportWidth = window.innerWidth ? window.innerWidth : $(window).width();	
		var documentHeight = $("body").outerHeight( true );
		
		// Centre the slide vertically within the visible viewport, ensuring at least x pixels margin at the top
		verticalPosition = $(document).scrollTop() + ( (viewportHeight - slideHeight) / 2 );
		verticalPosition = verticalPosition + atl_minTopMargin > $(document).scrollTop() ? verticalPosition : $(document).scrollTop() + atl_minTopMargin;
		
		// Centre the image horizontally within the visible viewport, making sure it doesn't go off screen to the left
		horizontalPosition = ( viewportWidth - slideWidth ) / 2
		horizontalPosition = horizontalPosition < 0 ? 0 : horizontalPosition;
		
		var returnObject = { x: horizontalPosition - atl_positionoffset, y: verticalPosition - atl_positionoffset };
		return returnObject;
	}
	
});