/*
jquery.htmllightbox.js
Based on the jQuery Lightbox Plugin by Leandro Vieira Pinho found at -> http://leandrovieira.com/projects/jquery/lightbox/
*/

$(document).ready(function()
{
	// Define the settings globally so it's
	// easy to reference the function values
	var arr_settings;

	/*----------------------------------------------------------------------------------------*/
	$.fn.htmlLightBox = function ( options )
	/*----------------------------------------------------------------------------------------*/
	{
		return this.each ( function ( )
		{
			$.htmlLightBox ( this, options );
		});
	};

	/*----------------------------------------------------------------------------------------*/
	$.htmlLightBox = function ( str_container, arr_options )
	/*----------------------------------------------------------------------------------------*/
	{
		arr_settings = {
			'overlayElementId':			'htmlLightboxOverlay',		// Id of the opaique background layer
			'overlayFadeSpeed':			'normal',									// Fade speed of background layer
			'overlayBgColor': 			'#000',										// Colour of backgrojund layer
			'overlayOpacity':				0.5,											// Opacity of background layer
			'overlayZIndex':				100,											// Index of background layer. The content z-index will be this plus one
			'containerElementId':		'htmlLightboxContainer',	// Container element for lightbox content
			'containerBgColor': 		'#fff',										// Background colour of lightbox container
			'containerFadeSpeed':		'normal',									// Fade speed of c content
			'containerOpacity':			1,												// Opactity of lightbox container
			'contentURL':						'',												//
			'contentURLData':				'',												//
			'contentURLDataType':		'html',										//
			'closeElement':					'' 												// tag, class or id that can close the lightbox
		};
		
		// Merge the options over the default settings into one array.
		if ( arr_options )
		{
			$.extend ( arr_settings, arr_options );
		}

		// Check if the content element can be found in the page. If there's a content
		// URl that we can add the element automatically and inject the content from the
		// URL, if not, then we've got not content 
		if ( !$( '#' + arr_settings.containerElementId ).attr ( 'id' ) )
		{
			if ( arr_settings.contentURL == '' )
			{
				alert ( "htmlLightBox error: Can't find content element " + arr_settings.containerElementId );
			}
			else 
			{
				// Add the div to the copy for the overlay element
				$( 'body' ).append ( '<div id="' + arr_settings.containerElementId + '">&nbsp;</div>' );
			}
		}
		
		// Add the div to the DOM for the overlay element
		$( 'body' ).append ( '<div id="' + arr_settings.overlayElementId + '">&nbsp;</div>' );
		// Add the hash to make sure the elements are referenced correctly
		arr_settings.overlayElementId		= '#' + arr_settings.overlayElementId;
		arr_settings.containerElementId	= '#' + arr_settings.containerElementId;
		// Get the dimensions of the page
		var arr_page_size = $.htmlLightBox.pageHeight( );
		// Set the style of the overlay elements ready for the fade
		$( arr_settings.overlayElementId ).css ( {
			'z-index':				arr_settings.overlayZIndex,
			position:					'absolute',
			display:					'none',
			backgroundColor:	arr_settings.overlayBgColor,
			opacity:					arr_settings.overlayOpacity,
			width:						arr_page_size[0],
			height:						arr_page_size[1],
			top:							0,
			left:							0
		} );

		// Inject the content into the content element if a url has been provided
		if ( arr_settings.contentURL )
		{
			$.ajax ( {
									url: 			arr_settings.contentURL,
									data: 		arr_settings.contentURLData,
									dataType: arr_settings.contentURLDataType,
									cache:		false,
									error:		function ( ) { alert ( "htmlLightBox error: Problem interacting with content URL " + arr_settings.contentURL ) },
									success:	function ( str_data )
														{
															$( arr_settings.containerElementId ).html ( str_data );
															$.htmlLightBox.setupCloseElement ( );
														}
			});
		}
		else
		{
			$.htmlLightBox.setupCloseElement ( );
		}

		// Scroll to the top of the page so
		// the user can see the lighbox properly
		$.scrollTo ( 'body', 500 );

		// Display the light box, animating both elements
		$( arr_settings.overlayElementId ).fadeIn ( arr_settings.overlayFadeSpeed, function ( )
		{
			// Calculate how much padding has been applied to the element
			// so we can take it into account when calculating the width and position
			var int_padding_l			= $( arr_settings.containerElementId ).css ( 'padding-left' );
			var int_padding_r			= $( arr_settings.containerElementId ).css ( 'padding-right' );
			var int_padding_t			= $( arr_settings.containerElementId ).css ( 'padding-top' );
			var int_padding_b			= $( arr_settings.containerElementId ).css ( 'padding-bottom' );
			var int_padding_h			= Number ( int_padding_l.slice ( 0, int_padding_l.length - 2 ) ) + Number ( int_padding_r.slice ( 0, int_padding_r.length - 2 ) );
			var int_padding_v			= Number ( int_padding_t.slice ( 0, int_padding_t.length - 2 ) ) + Number ( int_padding_b.slice ( 0, int_padding_b.length - 2 ) );
			// Calculate the size and position of the content element
			var int_content_w 		= $( arr_settings.containerElementId ).width ( );
			var int_content_h 		= $( arr_settings.containerElementId ).height ( );
			var int_content_top		= ( arr_page_size[3] - int_content_h - int_padding_v ) / 2;
			var int_content_left	= ( arr_page_size[2] - int_content_w - int_padding_h ) / 2;
						
			// Set up the styling for the content element
			$( arr_settings.containerElementId ).css ( {
				'z-index':				arr_settings.overlayZIndex + 1,
				position:					'absolute',
				display:					'none',
				backgroundColor:	arr_settings.containerBgColor,
				opacity:					arr_settings.containerOpacity,
				width:						int_content_w,
				height:						int_content_h,
				top:							int_content_top,
				left:							int_content_left,
				margin:						0
			} );
	
			$( arr_settings.containerElementId ).fadeIn ( arr_settings.containerFadeSpeed );
		});

		// Add a click event to the overlay to close teh lightbox
		$( arr_settings.overlayElementId ).livequery ( 'click', function ( event )
		{
			$.htmlLightBox.closeHtmlLightBox ( );
		});

	};
	
	/*----------------------------------------------------------------------------------------*/
	$.htmlLightBox.setupCloseElement = function ( )
	/*----------------------------------------------------------------------------------------*/
	/* If the user has specified an element that can close the light box, check it's present  */
	/* and add a click event to it that closes the lighbox                                    */
	/*----------------------------------------------------------------------------------------*/
	{
		if ( arr_settings.closeElement != '' )
		{
			// Add a click event to the close element to close teh lightbox
			$( arr_settings.closeElement ).livequery ( 'click', function ( event )
			{
				$.htmlLightBox.closeHtmlLightBox ( );
				return false;
			});
		}
	}

	/*----------------------------------------------------------------------------------------*/
	$.htmlLightBox.closeHtmlLightBox = function ( )
	/*----------------------------------------------------------------------------------------*/
	/* Fade out the elements and remove them from the DOM as appropriate                      */
	/*----------------------------------------------------------------------------------------*/
	{
		$( arr_settings.containerElementId ).fadeOut ( arr_settings.containerFadeSpeed, function ( )
		{
			$( arr_settings.overlayElementId ).fadeOut ( arr_settings.overlayFadeSpeed, function ( )
				{
					$( arr_settings.overlayElementId ).remove ( );
					// Remove the content element we've added, but only
					// if we've added it ourselves for content injection
					if ( arr_settings.contentURL != '' )
					{
						$( arr_settings.containerElementId ).remove ( );	
					}
				}
			)
		});
	}

	/*----------------------------------------------------------------------------------------*/
	$.htmlLightBox.pageHeight = function ( )
	/*----------------------------------------------------------------------------------------*/
	/* Determin the height of the page and the window and retrun the result in an array       */
	/*----------------------------------------------------------------------------------------*/
	{
		// For small pages with total width or height less then that the viewport
		int_page_w	= ( $(document).width ( ) < $(window).width ( ) ? $(window).width ( ) : $(document).width ( ) );
		int_page_h	= ( $(document).height ( ) < $(window).height ( ) ? $(window).height ( ) : $(document).height ( ) );

		return new Array ( int_page_w, int_page_h, $(window).width ( ), $(window).height ( ) );
	};

})