/*

	VERSION: Drop Shadow jQuery Plugin 1.6  12-13-2007



	REQUIRES: jquery.js (1.2.6 or later)



	SYNTAX: $(selector).dropShadow(options);  // Creates new drop shadows

					$(selector).redrawShadow();       // Redraws shadows on elements

					$(selector).removeShadow();       // Removes shadows from elements

					$(selector).shadowId();           // Returns an existing shadow's ID



	OPTIONS:



		left    : integer (default = 4)

		top     : integer (default = 4)

		blur    : integer (default = 2)

		opacity : decimal (default = 0.5)

		color   : string (default = "black")

		swap    : boolean (default = false)



	The left and top parameters specify the distance and direction, in	pixels, to

	offset the shadow. Zero values position the shadow directly behind the element.

	Positive values shift the shadow to the right and down, while negative values 

	shift the shadow to the left and up.

	

	The blur parameter specifies the spread, or dispersion, of the shadow. Zero 

	produces a sharp shadow, one or two produces a normal shadow, and	three or four

	produces a softer shadow. Higher values increase the processing load.

	

	The opacity parameter	should be a decimal value, usually less than one. You can

	use a value	higher than one in special situations, e.g. with extreme blurring. 

	

	Color is specified in the usual manner, with a color name or hex value. The

	color parameter	does not apply with transparent images.

	

	The swap parameter reverses the stacking order of the original and the shadow.

	This can be used for special effects, like an embossed or engraved look.



	EXPLANATION:

	

	This jQuery plug-in adds soft drop shadows behind page elements. It is only

	intended for adding a few drop shadows to mostly stationary objects, like a

	page heading, a photo, or content containers.



	The shadows it creates are not bound to the original elements, so they won't

	move or change size automatically if the original elements change. A window

	resize event listener is assigned, which should re-align the shadows in many

	cases, but if the elements otherwise move or resize you will have to handle

	those events manually. Shadows can be redrawn with the redrawShadow() method

	or removed with the removeShadow() method. The redrawShadow() method uses the

	same options used to create the original shadow. If you want to change the

	options, you should remove the shadow first and then create a new shadow.

	

	The dropShadow method returns a jQuery collection of the new shadow(s). If

	further manipulation is required, you can store it in a variable like this:



		var myShadow = $("#myElement").dropShadow();



	You can also read the ID of the shadow from the original element at a later

	time. To get a shadow's ID, either read the shadowId attribute of the

	original element or call the shadowId() method. For example:



		var myShadowId = $("#myElement").attr("shadowId");  or

		var myShadowId = $("#myElement").shadowId();



	If the original element does not already have an ID assigned, a random ID will

	be generated for the shadow. However, if the original does have an ID, the 

	shadow's ID will be the original ID and "_dropShadow". For example, if the

	element's ID is "myElement", the shadow's ID would be "myElement_dropShadow".



	If you have a long piece of text and the user resizes the	window so that the

	text wraps or unwraps, the shape of the text changes and the words are no

	longer in the same positions. In that case, you can either preset the height

	and width, so that it becomes a fixed box, or you can shadow each word

	separately, like this:



		<h1><span>Your</span> <span>Page</span> <span>Title</span></h1>



		$("h1 span").dropShadow();



	The dropShadow method attempts to determine whether the selected elements have

	transparent backgrounds. If you want to shadow the content inside an element,

	like text or a transparent image, it must not have a background-color or

	background-image style. If the element has a solid background it will create a

	rectangular	shadow around the outside box.



	The shadow elements are positioned absolutely one layer below the original 

	element, which is positioned relatively (unless it's already absolute).



	*** All shadows have the "dropShadow" class, for selecting with CSS or jQuery.



	ISSUES:

	

		1)	Limited styling of shadowed elements by ID. Because IDs must be unique,

				and the shadows have their own ID, styles applied by ID won't transfer

				to the shadows. Instead, style elements by class or use inline styles.

		2)	Sometimes shadows don't align properly. Elements may need to be wrapped

				in container elements, margins or floats changed, etc. or you may just 

				have to tweak the left and top offsets to get them to align. For example,

				with draggable objects, you have to wrap them inside two divs. Make the 

				outer div draggable and set the inner div's position to relative. Then 

				you can create a shadow on the element inside the inner div.

		3)	If the user changes font sizes it will throw the shadows off. Browsers 

				do not expose an event for font size changes. The only known way to 

				detect a user font size change is to embed an invisible text element and

				then continuously poll for changes in size.

		4)	Safari support is shaky, and may require even more tweaks/wrappers, etc.

		

		The bottom line is that this is a gimick effect, not PFM, and if you push it

		too hard or expect it to work in every possible situation on every browser,

		you will be disappointed. Use it sparingly, and don't use it for anything 

		critical. Otherwise, have fun with it!

				

	AUTHOR: Larry Stevens (McLars@eyebulb.com) This work is in the public domain,

					and it is not supported in any way. Use it at your own risk.

*/





(function($){



	var dropShadowZindex = 1;  //z-index counter



	$.fn.dropShadow = function(options)

	{

		// Default options

		var opt = $.extend({

			left: 4,

			top: 4,

			blur: 2,

			opacity: .5,

			color: "black",

			swap: false

			}, options);

		var jShadows = $([]);  //empty jQuery collection

		

		// Loop through original elements

		this.not(".dropShadow").each(function()

		{

			var jthis = $(this);

			var shadows = [];

			var blur = (opt.blur <= 0) ? 0 : opt.blur;

			var opacity = (blur == 0) ? opt.opacity : opt.opacity / (blur * 8);

			var zOriginal = (opt.swap) ? dropShadowZindex : dropShadowZindex + 1;

			var zShadow = (opt.swap) ? dropShadowZindex + 1 : dropShadowZindex;

			

			// Create ID for shadow

			var shadowId;

			if (this.id) {

				shadowId = this.id + "_dropShadow";

			}

			else {

				shadowId = "ds" + (1 + Math.floor(9999 * Math.random()));

			}



			// Modify original element

			$.data(this, "shadowId", shadowId); //store id in expando

			$.data(this, "shadowOptions", options); //store options in expando

			jthis

				.attr("shadowId", shadowId)

				.css("zIndex", zOriginal);

			if (jthis.css("position") != "absolute") {

				jthis.css({

					position: "relative",

					zoom: 1 //for IE layout

				});

			}



			// Create first shadow layer

			bgColor = jthis.css("backgroundColor");

			if (bgColor == "rgba(0, 0, 0, 0)") bgColor = "transparent";  //Safari

			if (bgColor != "transparent" || jthis.css("backgroundImage") != "none" 

					|| this.nodeName == "SELECT" 

					|| this.nodeName == "INPUT"

					|| this.nodeName == "TEXTAREA") {		

				shadows[0] = $("<div></div>")

					.css("background", opt.color);								

			}

			else {

				shadows[0] = jthis

					.clone()

					.removeAttr("id")

					.removeAttr("name")

					.removeAttr("shadowId")

					.css("color", opt.color);

			}

			shadows[0]

				.addClass("dropShadow")

				.css({

					height: jthis.outerHeight(),

					left: blur,

					opacity: opacity,

					position: "absolute",

					top: blur,

					width: jthis.outerWidth(),

					zIndex: zShadow

				});

				

			// Create other shadow layers

			var layers = (8 * blur) + 1;

			for (i = 1; i < layers; i++) {

				shadows[i] = shadows[0].clone();

			}



			// Position layers

			var i = 1;			

			var j = blur;

			while (j > 0) {

				shadows[i].css({left: j * 2, top: 0});           //top

				shadows[i + 1].css({left: j * 4, top: j * 2});   //right

				shadows[i + 2].css({left: j * 2, top: j * 4});   //bottom

				shadows[i + 3].css({left: 0, top: j * 2});       //left

				shadows[i + 4].css({left: j * 3, top: j});       //top-right

				shadows[i + 5].css({left: j * 3, top: j * 3});   //bottom-right

				shadows[i + 6].css({left: j, top: j * 3});       //bottom-left

				shadows[i + 7].css({left: j, top: j});           //top-left

				i += 8;

				j--;

			}



			// Create container

			var divShadow = $("<div></div>")

				.attr("id", shadowId) 

				.addClass("dropShadow")

				.css({

					left: jthis.position().left + opt.left - blur,

					marginTop: jthis.css("marginTop"),

					marginRight: jthis.css("marginRight"),

					marginBottom: jthis.css("marginBottom"),

					marginLeft: jthis.css("marginLeft"),

					position: "absolute",

					top: jthis.position().top + opt.top - blur,

					zIndex: zShadow

				});



			// Add layers to container	

			for (i = 0; i < layers; i++) {

				divShadow.append(shadows[i]);

			}

			

			// Add container to DOM

			jthis.after(divShadow);



			// Add shadow to return set

			jShadows = jShadows.add(divShadow);



			// Re-align shadow on window resize

			$(window).resize(function()

			{

				try {

					divShadow.css({

						left: jthis.position().left + opt.left - blur,

						top: jthis.position().top + opt.top - blur

					});

				}

				catch(e){}

			});

			

			// Increment z-index counter

			dropShadowZindex += 2;



		});  //end each

		

		return this.pushStack(jShadows);

	};





	$.fn.redrawShadow = function()

	{

		// Remove existing shadows

		this.removeShadow();

		

		// Draw new shadows

		return this.each(function()

		{

			var shadowOptions = $.data(this, "shadowOptions");

			$(this).dropShadow(shadowOptions);

		});

	};





	$.fn.removeShadow = function()

	{

		return this.each(function()

		{

			var shadowId = $(this).shadowId();

			$("div#" + shadowId).remove();

		});

	};





	$.fn.shadowId = function()

	{

		return $.data(this[0], "shadowId");

	};





	$(function()  

	{

		// Suppress printing of shadows

		var noPrint = "<style type='text/css' media='print'>";

		noPrint += ".dropShadow{visibility:hidden;}</style>";

		$("head").append(noPrint);

	});



})(jQuery);