(function ($) {
	var ie6 = $.browser.msie && $.browser.version <= 6,

	modalCss = {
		"position": "absolute",
		"background-color": "#000",
		"opacity": 0.5,
		"z-index": 1000
	},
	
	frameCss = {
		"opacity": 0,
		"width": "100%",
		"height": "100%"
	};

	$.fn.extend({
		modal: function (options) {
			return this.each(function (index, selfDom) {
				var selfJq = $(selfDom),
				modalJq = selfJq.data("modal"),
				frameJq;
				
				if (!modalJq) {
					if (ie6) {
						modalJq = $("<div></div>")
							.attr("class", "modal")
							.css($.extend({
								"top": selfJq.scrollTop(),
								"left": selfJq.scrollLeft()
							}, modalCss))
							.appendTo(selfJq),
						
						frameJq = $("<iframe></iframe>")
							.attr("class", "modal")
							.css(frameCss)
							.appendTo(modalJq);
	
						with (modalJq.get(0).style) {
							setExpression("width", "this.parentNode.offsetWidth + 'px'");
							setExpression("height", "this.parentNode.offsetHeight + 'px'");
						}
	
						$(frameJq.get(0).contentWindow.document).bind("click", function (event) {
							selfJq.trigger("click", event);
						});
					}
					else {
						modalJq = $("<div></div>")
							.attr("class", "modal")
							.css($.extend({
								"top": selfJq.scrollTop(),
								"left": selfJq.scrollLeft(),
								"width": "100%",
								"height": "100%"
							}, modalCss))
							.appendTo(selfJq);
					}
					
					selfJq
						.css("overflow", "hidden")
						.data("modal", modalJq);
				}
			});
		},

		unmodal: function (options) {
			return this.each(function (index, selfDom) {
				var selfJq = $(selfDom),
				modalJq = selfJq.data("modal");
				
				if (modalJq) {
					selfJq
						.css("overflow", "visible")
						.removeData("modal");
	
					// For some reason this is the cleanest (only in IE6) way to do this...
					window.setTimeout(function () {
						modalJq.remove();
					}, 0);
				}
			});
		}
	});
})(jQuery);