(function($) {
	
	$.fn.addOverlay = function(o, callback) {
		return this.each(function() {
			var container = $(this);
			var data = container.data('overlay');
			if (data) {
				data.overlay.remove();
			}
			
			data = $.extend({
				speed: 'fast',
		        opacity: 0.6
		    }, o || {});

			var overlay;
			var fadeOn;
			var bgDiv;
			if (jQuery.browser.msie) {
				// IE does strange things when fading on the div with the background - so put an inner div in to carry the background
				overlay = $('<iframe /><div><div /></div>');
				fadeOn = overlay.eq(1);
				bgDiv = fadeOn.children();
				bgDiv.css({width:'100%', height:'100%'});
			} else {
				overlay = $('<div />');
				fadeOn = overlay;
				bgDiv = overlay;
			}
			overlay.css({
				position: 'absolute',
				'z-index': '1000010',
				top: '0px',
				left: '0px',
				height: this.parentNode.scrollHeight,
				width: '100%',
				opacity: '0',
				filter: "alpha(opacity='0')"
			});
			bgDiv.css({background:'black', opacity:data.opacity});

			data.overlay = overlay;
			data.fadeOn = fadeOn;
			container.data('overlay', data);
			
			fadeOn.hide();
			container.append(overlay);
			fadeOn.fadeIn(data.speed, callback);
		});
	};

	$.fn.removeOverlay = function(callback) {
		return this.each(function() {
			var container = $(this);
			var data = container.data('overlay');
			if (data) {
				data.fadeOn.fadeOut('fast', function() {
					data.overlay.remove();
					container.removeData('overlay');
					if (callback) {
						callback();
          }
				});
			}
		});
	};
	
})(jQuery);