/*
made by: Tim Dirckx
Version: 1.0
Jquery Version: v1.3.2
*/

var Lightbox = (function() 
{
	//our vars
	this.body = jQuery('body');
	this.box = '#lightbox-box';
	this.overlay = '#lightbox';
	this.content = '#lightbox-content';
	this.closeBtn = '#lightbox-close';
	this.afterLoad;
	this.loadFrom;
	var self = this;
	
	//you can give a number from 1 to 10 for the  transparency of the overlay.
	this.transparent = 6;
	
	
	//start showing the lightbox	
	this.show = function(e) 
	{		
		posLightOrgi = jQuery(self.box).css('top');
		posLight = parseInt(jQuery(self.box).css('top'));
		
		//check if there is already a id existing
		if(jQuery(self.overlay).attr('id') != "lightbox")
		{
			//if the id is not known then create the div's
			self.body.append("<div id='lightbox'></div><div id='lightbox-box'><a href='#' id='lightbox-close'>X</a><div id='lightbox-content'></div></div>");
		
			//hide the html of the lightbox
			jQuery(jQuery(self.overlay + ", " + self.box + ", " +self.closeBtn + ", " + self.content)).css( {
				'display':'none',
				'opacity': 0
			});	
			
			jQuery(window).scroll(function() {
				jQuery(self.overlay + ", " + self.box + ", " + self.content).css('top', jQuery(window).scrollTop());
				jQuery(self.box).css('top', posLight + jQuery(window).scrollTop());
			});
			
		}		
		
		//because you can select multiple elements we each trough it.
		e.each(function() {			
			//set the click event
			jQuery(this).click(function() 
			{
				//call our sgow method
				self.showLightbox();
				
				//if it is a link take the href or else the rel else you can define one yourself by calling the LoadFrom var before the show method
				if(jQuery(this).attr('href')) 
				{
					loadme = jQuery(this).attr('href');
				} else if(jQuery(this).attr('rel')) 
				{
					loadme = jQuery(this).attr('rel');
				} else 
				{
					loadme = self.loadFrom;
				}
				
				//load the content
				//In Afterload you can set some function what you want to be loaded after its loaded.
				jQuery(self.content).load(loadme, '', self.afterLoad);
				
				//cancel the normal thing of the element
				return false;
			});
			
		});
	};
	
	//method for showing the lightbox
	this.showLightbox = function() 
	{
		//make our html visible
		jQuery(jQuery(self.overlay + ", " + self.box + ", " +self.closeBtn + ", " +self.content)).css( {
			'display':'block'
		});
		
		//some funcky fadeIn on our div's
		self.showAndFadeIn(jQuery(self.overlay), self.opacity());		
		self.showAndFadeIn(jQuery(self.box + ", " +self.closeBtn + ", " +self.content), "1");		
		
		//set the height of the overlay
		this.setHeightOverlay();
		//when the window is resizing we want to check and set the hight again of the overlay
		jQuery(window).bind('resize', function() 
		{
			self.setHeightOverlay();
		});
		
		//set the close Events on the close button and the overlay
		self.close(jQuery(self.overlay + ", " + self.closeBtn));
	};
	
	//lazy method fot opacity of the overlay
	this.opacity = function() 
	{
		return self.transparent / 10;
	};
	
	//add a click event on a element 
	this.close = function (e)
	{
		jQuery(self.box).css('top', posLightOrgi);
		
		
		e.click(function() 
		{
			jQuery('#lightbox-content').html('&nbsp;');
			self.closeAndRemove(jQuery(self.overlay + ", " + self.box + ", " + self.closeBtn + ", " + self.content), 0);
		});
	};
	
	//function for fadeing out and set a element on display none;
	this.closeAndRemove = function(e, f) {
		e.stop(true).fadeTo("def", f, function() {
			jQuery(self.overlay + ", " + self.box + ", " + self.closeBtn + ", " +self.content).css( {
				'display':'none'
			});
			
		});
	};
	
	//Do some fading in on a element with a different opacity
	this.showAndFadeIn = function(e, f) {
		e.stop(true).fadeTo("def", f);
	};
	
	//method for setting the overlay hight
	this.setHeightOverlay = function () 
	{
		jQuery(self.overlay).css({'height':jQuery(window).height()+"px"});
	};
});

//lets make a plugin for jquery so we can easely call it
jQuery.fn.lightbox = function(options){
	//call  our lightbox
	var light = new Lightbox();
	
	//set this so we can add some options to the lightbox
	light.afterLoad = options;
	
	//lets show the lightbox
	light.show(this);
}
