$(document).ready(function() {
	var lbWidth   = 904;
	var lightbox  = false;
	var overlay   = false;
	var loading   = $('<img src="/publicweb/styles/images/loading-big.gif" alt="" />');
	
	$('a.lightbox').click(function(){
		var off  = $(this).offset(); // Get position of clicked link
		var href = $(this).attr('href'); // Get the href value. Ajax content will load this url 
		
		// Create the lightbox elements if they don't already exist on the page
		if( !lightbox ) {
			overlay  = $('<div id="overlay"></div>');
			lightbox = $('<div id="lightbox"></div>');
			
			overlay.hide();
			overlay.css({ 
				opacity: 0,
				width:   $(document).width(),
				height:  $(document).height()
			});
			
			overlay.click( closeLB );
			
			$('body').prepend(overlay);
			$('body').prepend(lightbox);
		}

		overlay.append(loading);
		// Center loading image to middle of window
		loading.css({
			top: ( $(window).height() / 2 ) + $(document).scrollTop() - 33 + 'px'
		})
		loading.show(); // Display loading image until content is loaded
		
		overlay.show();
		overlay.animate({ opacity: 0.75 }, 400);
		
		// Hide the lightbox by setting a position far outside the window.
		// We can't hide it it with display: none because then it's height 
		// won't be available
		lightbox.css({
			left:    '-1000px',
			width:   lbWidth 
		});
		
		// Get and contents of the clicked link and show the lightbox once the content is loaded
		$.get( href, {}, showLB );

		// Show the lightbox with animation
		function showLB(data){
			var html = $(data).find('#lightbox-content');
			

			html.find('.content').addClass('article-body');
			if(html.find('.screenshot h1').html()=='') html.find('.screenshot h1').html('&nbsp;');
			if($.trim(html.find('.screenshot p').html())=='') html.find('.screenshot p').remove();

			loading.hide(); // Content is loaded, hide the loading image
			lightbox.empty(); // Clear previous content
			lightbox.append(html); // Append new content
			
			if(lightbox.find('.screenshot img').length>0) {
				if(lightbox.find('.screenshot img').width()>900) {
					$(lightbox).find('.screenshot img').css('width', 900);
				}
			}
			
			var lbHeight =  lightbox.height(); // Get the height of the lightbox. We will grow the lightbox to this height

			// Set the starting position of the lightbox to the position of the link
			// that opened the lightbox, it will grow outwards from there
			lightbox.css({
				top:     off.top,
				left:    off.left,
				width:   '1px',
				height:  '1px'  
			});

			// Make the lightbox grow starting from the position of the clicked link 
			// ending up on the center of the screen
			lightbox.animate({
				width:   lbWidth + 'px',
				height:  lbHeight + 'px',
				left:    ( $(document).width() / 2 ) - ( lbWidth ) / 2 + 'px',
				top:     40 + $(document).scrollTop() + 'px'
			}, 300, function(){
				// Once the animation is finished reset height to auto to allow the 
				// height to grow or shrink with new content added to the lightbox later
				// (for instance after submitting a form)
				lightbox.css({
					height:  'auto'  
				});
			});

			initContent();
		}

		// Initialize new content in lightbox after displayed for the first time or 
		// when the content has changed
		// If called with the html parameter the content of the lightbox will be replaced
		// with the content of the html parameter
		function initContent(data) {
			if( data ) {
				var html = $(data).find('#lightbox-content');

				lightbox.empty(); // Clear previous content
				lightbox.append(html); // Append new content
			}

			// Inputs or links with the class cancel will close the lightbox
			lightbox.find('input.cancel, a.cancel').click(function(){
				closeLB();
				return false;
			});

			// Add a close link to the title of the lightbox
			var closeLink = $('<a id="lightbox-close" title="'+ lightBoxCloseText +'">'+ lightBoxCloseText +' <img src="/publicweb/styles/images/body-lightbox-close.png" alt="'+ lightBoxCloseText +'" /></a>');
			lightbox.find('h1').append(closeLink).click(function(){
				closeLB();
			});
			lightbox.find('.closewindow a').text(lightBoxCloseText);
			
			// Replace text og
			
			// Replace form submit with an ajax POST request
			// The contents of the lightbox is replaced with the result of the request
			lightbox.find('form').submit(function(){
				var formData = {};

				// Post the values of all input and textarea elements
				// No other element types are supported yet 
				$(this).find('input, textarea').each(function(){
					eval('formData.' + $(this).attr('name') + ' = "' + $(this).attr('value') + '"');
				});
				
				// Do the post request
				$.post( $(this).attr('action'), formData, initContent);
				
				// Cancel the regular form submit
				return false;
			});
		}
		
		return false;
	});
	
	// Close the lightbox
	function closeLB(){
		overlay.css({ 'opacity': 0 });
		overlay.hide();
		lightbox.css({
			left: '-1000px'
		});
	}
});