var lightbox = {
	created: false,
	content: false,
	overlay: false,
	width: 510,
	height: 0,
	element: $('<div id="lightbox"><div id="lightbox-close">Lukk vindu</div><div id="lightbox-wrap"></div><div class="shadow shadow1"></div><div class="shadow shadow2"></div><div class="shadow shadow3"></div><div class="shadow shadow4"></div></div>'),
	overlay: $('<div id="overlay"></div>'),
	content: false,
	open: function(link){
		lightbox.linkOffset = link.offset(); // Get position of clicked link
		lightbox.linkHref = link.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.created ) {
			// Add a close link to the title of the lightbox
			lightbox.element.find('#lightbox-close').click(function(){
				lightbox.close();
			});

			lightbox.content = lightbox.element.find('#lightbox-wrap');
			lightbox.overlay.hide();
			lightbox.overlay.css({ 
				opacity: 0,
				width:   '100%',
				height:  $(document).height()
			});
			
			lightbox.overlay.click( lightbox.close );
			
			$('body').prepend(lightbox.overlay);
			$('body').prepend(lightbox.element);
			
			lightbox.created = true;
		}

		lightbox.overlay.show();
		lightbox.overlay.animate({ opacity: 0.8 }, 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.element.css({
			left:    '-1000px' 
		});
		
		// Get and contents of the clicked link and show the lightbox once the content is loaded
		$.post( lightbox.linkHref, {}, lightbox.show );
	},

	show: function(data){
		var html = $(data);
		lightbox.content.empty();
		lightbox.content.append(html); // Append new content
		
		lightbox.height = lightbox.element.height(); // Get the height of the lightbox. We will grow the lightbox to this height
		lightbox.width  = lightbox.content.find('img').width() + 40; // 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.element.css({
			top:     lightbox.linkOffset.top,
			left:    lightbox.linkOffset.left,
			width:   '1px',
			height:  '1px'  
		});
        
        var layout = $('#layout-page');

		// Make the lightbox grow starting from the position of the clicked link 
		// ending up on the center of the screen
		lightbox.element.animate({
			width:   lightbox.width + 'px',
			height:  lightbox.height + 'px',
			left:    layout.offset().left + ( layout.width() / 2 ) - ( lightbox.width / 2 ) + 'px',
			top:     20 + $(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.element.css({
				height:  'auto'  
			});
		});
		
		// Hide selects in IE6 when lightbox is active to prevent the IE6 select z-index bug
		$('body').addClass('hideSelects');

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

	// Close the lightbox
	close: function(){
		lightbox.overlay.css({ 'opacity': 0 });
		lightbox.overlay.hide();
		lightbox.element.css({
			left: '-1000px'
		});
		// Show selects in IE6 when the lightbox closes
		$('body').removeClass('hideSelects');
	}
};