jQuery.initOuterShadow = function() {
 $('div[class^=outerShadowPanel]').outerShadow()
 };
 
 jQuery.fn.outerShadow = function outerShadow()
 {
	 this.each(function() 
	{
		var elem = $(this);
		applyOuterShadow(elem);
	});
};


function applyOuterShadow(elem)
{
	//memorizzo le dimensioni originali
		var originalWidth = (elem.outerWidth() > elem.innerWidth()) ? elem.innerWidth() : elem.outerWidth();
		var originalHeight = (elem.outerHeight() > elem.innerHeight()) ? elem.innerHeight() : elem.outerHeight();
		
		var totalHPadding = 0;
		var totalVPadding = 0;
		if(!isNaN(parseInt(elem.css("padding-left"))))
			totalHPadding += parseInt(elem.css("padding-left"));
		if(!isNaN(parseInt(elem.css("padding-right"))))
			totalHPadding += parseInt(elem.css("padding-right"));
		if(!isNaN(parseInt(elem.css("padding-top"))))
			totalVPadding += parseInt(elem.css("padding-top"));
		if(!isNaN(parseInt(elem.css("padding-bottom"))))
			totalVPadding += parseInt(elem.css("padding-bottom"));
		
		//crea il nuovo contenitore
		var newDiv = $("<div></div>");
		//lo inseriesce intorno a quello di partenza
		elem.wrap(newDiv);
		//cerca, nel contenitore di partenza, le classi che iniziano per outerShadowPanel
		//e le mette al contenitore piu' esterno
		var classes = elem.attr("class").split(' ');
		for(var i=0; i < classes.length; i++)
			if(classes[i].toLowerCase().indexOf("outershadowpanel") >= 0)
			{		
				elem.removeClass(classes[i]);
				elem.parent().addClass(classes[i]);
			}
		//al conteintore interno viene assegnata la classe shadowFload
		elem.addClass("outerShadowFloat");
		elem.parent().width(originalWidth+totalHPadding);
		elem.parent().height(originalHeight+totalVPadding);
		
		
		//costruisce gli 8 elementi di contorno
		
		//1. top-left
		var tl = $("<div class='outerShadowFloat outerShadowTopLeft'></div>");
		elem.before(tl);
		var totalWidth = tl.outerWidth();
		var totalHeight = tl.outerHeight();
		
		//2. top-center
		var tc = $("<div class='outerShadowFloat outerShadowTopCenter'></div>");
		elem.before(tc);
		totalWidth += (tc.outerWidth() > tc.innerWidth()) ? (tc.outerWidth() - tc.innerWidth()) : 0;
		
		//3. top-right
		var tr = $("<div class='outerShadowFloat outerShadowTopRight'></div>");
		elem.before(tr);
		totalWidth += tr.outerWidth();
		
		//aggiungo il div di divisione
		var breakDiv = $("<div class='outerShadowBreak'></div>");
		elem.before(breakDiv);
			
		//4. center-left
		var cl = $("<div class='outerShadowFloat outerShadowCenterLeft'></div>");
		elem.before(cl);
		totalHeight += (cl.outerHeight() > cl.innerHeight()) ? (cl.outerHeight() - cl.innerHeight()) : 0;
		
		//5. bottom-right
		var br = $("<div class='outerShadowFloat outerShadowBottomRight'></div>");
		elem.after(br);
		totalHeight += br.outerHeight();
		
		//6. bottom-center
		var bc = $("<div class='outerShadowFloat outerShadowBottomCenter'></div>");
		elem.after(bc);
		
		//7. bottom-left
		var bl = $("<div class='outerShadowFloat outerShadowBottomLeft'></div>");
		elem.after(bl);
		
		//aggiungo il div di divisione
		var breakDiv2 = $("<div class='outerShadowBreak'></div>");
		elem.after(breakDiv2);
		
		//8. center-right
		var cr = $("<div class='outerShadowFloat outerShadowCenterRight'></div>");
		elem.after(cr);
		
		//riassegna le corrette dimensioni ad elem
		elem.width(originalWidth - totalWidth);
		elem.height(originalHeight - totalHeight);
		
		//setto le dimensioni di tc, cl, cr, bc
		tc.width(elem.width()+totalHPadding);
		cl.height(elem.height()+totalVPadding);
		bc.width(elem.width()+totalHPadding);
		cr.height(elem.height()+totalVPadding);
}