/*
Use this CSS class:

// and feel free to customize it
.shroud {
	position: absolute;
	z-index: 999;
	background-color: #000;
	opacity: 0.5;
	filter: alpha(opacity=50);
}

*/

jQuery.fn.overlay = function() {
	var o;
	if(arguments.length == 1) { // passed in id for closer
		// process passed in options
		o = arguments[0];	

	} else {
		o = '<div />';		
	}
	var el = $(o);

	return this.each(function() {
		var d = new Date();
		var id = 'overlay' + d.getTime();
		el.attr('id', id);
		$('body').append(el);
		
		// in case body is the subject, append first, shroud the body later
		
		var fadeSubject = $(this);
		var fadeSubjectOffset = fadeSubject.offset();
		fadeSubject.attr('overlay', id);

		var zi = 999;
		if(fadeSubject.css('z-index')) {
			zi = fadeSubject.css('z-index') + 1;
		}
		
		$('#' + id)
			.css('position', 'absolute')
			.css('z-index', zi)
			.css('top', fadeSubjectOffset.top + 'px')
			.css('left', fadeSubjectOffset.left + 'px')
			.css('width', fadeSubject.outerWidth() + 'px')
			.css('height', fadeSubject.outerHeight() + 'px');
		// should we return true here?
	});
}

jQuery.fn.getOverlay = function() {
	return this.map(function() {
		var t = $(this);
		if(t.attr('overlay')) {
			return $('#' + t.attr('overlay') );
		} else {
			return null;
		}
	});
}

jQuery.fn.shroud = function() {
	return this.each(function() {
		$(this).overlay('<div class="shroud" />');
	});
}

jQuery.fn.deShroud = function() {
	return this.each(function() {
		var subject = $(this);
		var shroud = $('#' + subject.attr('overlay') );
		subject.removeAttr('overlay');
		shroud.remove();
	});
}

function deShroud(selector) {
	$(selector).deShroud();
}