//
//Notes:
//Requires that the element getting the shadow have a fixed height and width defined in the html, and that both a left and right or top and bottom reference be provided.
//Alternatively a shadow-class="xxx" attribute can be supplied that references a css class with those properties.  The css class must have width and height that includes the contents, border, and shadow size (10px x 10px).
// Example: <div class="shadow" shadow-class="shadowDivCss" style="">...</div>
//
(function($) {
	$.fn.buildShadow = function() {
		for(var index = 0; index < this.length; index++) {
			var next = $(this[index]);
			
			//Prevent a double shadow.//
			if(!next.parent().data('is-shadow')) {
				//<div style="position: relative; top: -8px; left: 0px; width: 256px; height: 164px; float: left;">
				//Wrap the image with a div and leave space for shadows.//
				next.wrap(function(index) {
					$next = $(next);
					var p = $next.css('position');
					var f = $next.css('float');
					var w = parseInt($next.css('width'));
					var h = parseInt($next.css('height'));
					var classes = $next.attr('shadow-class');
					var c = $next.css('clear');
					var padT = parseInt($next.css('padding-top'));
					var padR = parseInt($next.css('padding-right'));
					var padB = parseInt($next.css('padding-bottom'));
					var padL = parseInt($next.css('padding-left'));
					var marT = $next.css('margin-top');
					var marR = $next.css('margin-right');
					var marB = $next.css('margin-bottom');
					var marL = $next.css('margin-left');
					var borL = parseInt($next.css('border-left-width'));
					var borR = parseInt($next.css('border-right-width'));
					var borT = parseInt($next.css('border-top-width'));
					var borB = parseInt($next.css('border-bottom-width'));
					var html;
					
					html = "<div " + (classes ? " class='" + classes + "'" : "") + " style='" + (w > 0 && h > 0 ? "width: " + (w + 10 + padL + padR + borL + borR) + "px; height: " + (h + 10 + padT + padB + borT + borB) + "px;" : "");
					
					if(p != 'static') {
						var left = $next.css('left');
						var right = $next.css('right');
						var top = $next.css('top');
						var bottom = $next.css('bottom');
						
						html += " position: " + p + ";";
						
						//TODO: Assuming for now that a left & right or top & bottom were not defined.
						if(left) {
							html += " left: " + left + ";";
						}
						else {
							html += " right: " + right + ";";
						}
						
						if(top) {
							html += " top: " + top + ";";
						}
						else {
							html += " bottom: " + bottom + ";";
						}
						
						//Make the image static.//
						$next.css({left: 0, right: 0, top: 0, bottom: 0, position: 'static'});
					}
					else {
						//Make the position relative such that the absolutely positioned shadow backgrounds are absolute relative to the parent div.//
						html += " position: relative;";
						$next.css({left: 0, top: 0, position: 'absolute'});
					}
					
					//Transfer the float to the container, from the image.//
					if(f && f != 'none') {
						html += " float: " + f + ";";
						$next.css('float', undefined);
					}
					
					if(c && c != 'none') {
						html += " clear: " + c + ";";
						$next.css('clear', undefined);
					}
					
					//Margins & Padding//
					html += " margin-top: " + marT + "; margin-right: " + marR + "; margin-bottom: " + marB + "; margin-left: " + marL + ";"
		//			padding-top: " + padT + "; padding-right: " + padR + "; padding-bottom: " + padB + "; padding-left: " + padL + ";";
					//$next.css({margin: 0, padding: 0});
					$next.css('margin', 0);
					
					html += "'/>";
					
					return html;
				});
				//Place the shadows.//
				next.each(function(index) {
					$next = $(next);
					$next.before("<div style='position: absolute; right: 0px; top: 0px; height: 10px; width: 10px; background: url(\"images/shadow_tr.png\");'></div><div style='position: absolute; top: 10px; right: 0px; bottom: 10px; width: 10px; background: url(\"images/shadow_r.png\");'></div><div style='position: absolute; right: 0px; bottom: 0px; height: 10px; width: 10px; background: url(\"images/shadow_br.png\");'></div><div style='position: absolute; left: 10px; right: 10px; bottom: 0px; height: 10px; background: url(\"images/shadow_b.png\");'></div><div style='position: absolute; left: 0px; bottom: 0px; height: 10px; width: 10px; background: url(\"images/shadow_bl.png\");'></div>");
				});
				next.parent().data('is-shadow', true);
			}
		}
		
		return this;
	}
})(jQuery);