/**
 * jQuery Spotlight
 *
 * Project Page: http://dev7studios.com/portfolio/jquery-spotlight/
 * Copyright (c) 2009 Gilbert Pellegrom, http://www.gilbertpellegrom.co.uk
 * Licensed under the GPL license (http://www.gnu.org/licenses/gpl-3.0.html)
 * Version 1.0 (12/06/2009)
 */
 
(function($) {

	$.fn.unspotlight = function(options) {
		
		// Default settings
		settings = $.extend({}, {
			opacity: .5,
			speed: 400,
			color: '#333',
			padding: 5,
			animate: true,
			easing: '',
			exitEvent: 'click',
			onShow: function(){},
			onHide: function(){}
		}, options);
		
		// Do a compatibility check
		if(!jQuery.support.opacity) return false;		
		
		var element = $(this);
		var spotlight = $('.spotlight');	
		
		// Set element CSS
		var currentPos = element.css('position');
		if(currentPos == 'static'){
			element.css({'position':'relative', 'z-index':'9999'});
		} else {
			element.css('z-index', '9999');
		}		
		
		if(settings.animate){
				spotlight.animate({opacity: 0}, settings.speed, settings.easing, function(){
					if(currentPos == 'static') element.css('position', 'static');
					element.css('z-index', '1');
					$(this).remove();
					// Trigger the onHide callback
					settings.onHide.call(this);
				});
			} else {
				spotlight.css('opacity', '0');
				if(currentPos == 'static') element.css('position', 'static');
				element.css('z-index', '1');
				$(this).remove();
				// Trigger the onHide callback
				settings.onHide.call(this);
			}			
		// Returns the jQuery object to allow for chainability.  
		return this;		
	};
	
	$.fn.spotlight = function(options) {
		
		
		// Default settings
		settings = $.extend({}, {
			opacity: .5,
			speed: 400,
			color: '#333',
			padding: 2,
			animate: true,
			easing: '',
			exitEvent: 'click',
			onShow: function(){},
			onHide: function(){}
		}, options);
		
		// Do a compatibility check
		if(!jQuery.support.opacity) return false;
		
		if($('#spotlight').size() == 0){
			
			// Add the overlay div
			$('body').append('<div id="spotlight1" class="spotlight"></div>');
			$('body').append('<div id="spotlight2" class="spotlight"></div>');
			$('body').append('<div id="spotlight3" class="spotlight"></div>');
			$('body').append('<div id="spotlight4" class="spotlight"></div>');

			// Get our elements
			var element = $(this);
			var spotlight = $('.spotlight');			
				
			
			// Set the CSS styles
			spotlight.css({
				'position':'absolute', 
				'background':settings.color, 
				'opacity':'0',
				'z-index':'9998'
			});
			

			var width  = $(this).outerWidth(); 
			var height = $(this).outerHeight();
			var offset = $(this).offset();
			var bodywidth = $('body').outerWidth();
			var bodyheight = $('body').outerHeight();
			
			var boxtop          = offset.top - settings.padding;
			var boxbottom       = offset.top + height + settings.padding;
			var boxheight       = height + settings.padding*2;
			var boxleft         = offset.left - settings.padding;
			var boxright        = offset.left + width + settings.padding;
			var boxoffsetright  = bodywidth - offset.left - width - settings.padding*2;
			var boxoffsetbottom = bodyheight - offset.top - height - settings.padding;
			
			$('#spotlight1').css({
				'top': '0px', 
				'left':'0px', 
				'height': boxtop + 'px', 
				'width':'100%', 
			});

			$('#spotlight2').css({
				'top': boxtop + 'px', 
				'left':'0px', 
				'height': boxheight + 'px', 
				'width': boxleft + 'px', 
			});
			
			$('#spotlight3').css({
				'top': boxtop + 'px', 
				'left': boxright + 'px', 
				'height': boxheight + 'px', 
				'width': boxoffsetright + 'px', 
			});
			
			$('#spotlight4').css({
				'top': boxbottom + 'px', 
				'left': '0px', 
				'height': boxoffsetbottom + 'px', 
				'width': '100%', 
			});									
			
			// Set element CSS
			var currentPos = element.css('position');
			if(currentPos == 'static'){
				element.css({'position':'relative', 'z-index':'9999'});
			} else {
				element.css('z-index', '9999');
			}
			
			// Fade in the spotlight
			if(settings.animate){
				spotlight.animate({opacity: settings.opacity}, settings.speed, settings.easing, function(){
					// Trigger the onShow callback
					settings.onShow.call(this);
				});
			} else {
				spotlight.css('opacity', settings.opacity);
				// Trigger the onShow callback
				settings.onShow.call(this);
			}
			
			// Set up click to close
			spotlight.live(settings.exitEvent, function(){
				if(settings.animate){
					spotlight.animate({opacity: 0}, settings.speed, settings.easing, function(){
						if(currentPos == 'static') element.css('position', 'static');
						element.css('z-index', '1');
						$(this).remove();
						// Trigger the onHide callback
						settings.onHide.call(this);
					});
				} else {
					spotlight.css('opacity', '0');
					if(currentPos == 'static') element.css('position', 'static');
					element.css('z-index', '1');
					$(this).remove();
					// Trigger the onHide callback
					settings.onHide.call(this);
				}
			});
		}

		// Returns the jQuery object to allow for chainability.  
		return this;
	};

})(jQuery);