/**
 * Se il browser supporta l'opacità non viene applicata (la usa da css).
 * Se il browser è IE < 7 non viene applicata.
 * Se il browser è IE >=7 crea un sottolivello di dimensione uguale a quello corrente
 * cui viene applicato lo style ie-box-shadow che viene sfumato "Blur" per simulare l'opacità.
 */
(function($){
	$.fn.extend({
        shadow: function(options) {
	        var settings = $.extend({
	            clearDiv : 'clearDiv'
	        }, options);

	        var isIE = $.browser.msie; 
			var version = $.browser.version.slice(0, $.browser.version.indexOf('.'));
	        var hasOpacity = $.support.opacity;
			
	        // nel caso di ie6 o browser che già supportano opacity, esce
			if ( (isIE && parseInt(version) < 7) || hasOpacity) {
				return;
			}
			
			return this.each(function() {
				var box = $(this);
				
				// creo un contenitore wrapper con dentro shadow-box
				var wrapper = box
								.wrap(
									$('<div />')
										.width(box.width())
										.height(box.height()))
								.parent();
				
				// formattiamo il wrapper
				wrapper
					// il wrapper prende le stesse proprietà del contenitore che voglio ombreggiare
					.css({
						'margin-bottom' : box.css('margin-bottom'),
						'margin-left' : box.css('margin-left'),
						'z-index' : box.css('z-index'),
						'float' : box.css('float'),
						'position' : 'relative'
					})
					// aggiungo un div nel wrapper su cui applico poi una maschera ie-shadow
					.append(
						$('<div />')
							.addClass('ie-box-shadow')
							.css({
								'height': box.height(),
								'top' : '-' + box.height()
							})
						)
					// aggiungo un clear:both
					.append(
						$('<div />')
							.addClass(settings.clearDiv)
					);

				// resettiamo i valori che anrebbero a collidere con il wrapper
				box.css({
					'margin-bottom' : 0,
					'margin-left' : 0,
					'float' : 'none',
					'position' : 'relative'
				});
					
			});
		}
	});
})
(jQuery);