(function($) {
	// roberson@zurka.com
	// Version 2
	//
	// Include this file then call:
	// $().zGaryScreen("<p>Hello World</p>");
	// $().zGaryScreen({type:'rectangle', title:'Title Text', closeLink:false, html:"<p>Hello World</p>", onHide:function() { alert("Goodbye")} })
	// $().zGaryScreen();  // returns what's in the dialog box.
	//
	// $().zGrayScreenHide()  // hides the grayScreen

	var marginTopDefault = 40;
	var grayLayer, dialogWrapper, marginTop, onHide;
	var clickBubble = 0;
	var boxOptions = ['type', 'title', 'closeLink', 'html', 'size', 'marginTop', 'onHide']; // possible options for a dialog box

	$.fn.zGrayScreen = function(options) {
		var options = options || 0;

		if(options === 0) {
			// return the contents of the dialog box
			return $(".dialogContent").html();
		}

		// just html passed in
		if(typeof options == 'string') {
			options.html = options;
		}

		// has grayScreen been initialized
		if($('#grayLayer').length == 0) {
			zGrayScreenInit();
		}
		
		if(typeof options.onHide == 'function') {
			// if hide returns false, cancel the hide
			onHide = options.onHide;
		} else {
			onHide = '';
		}

		// margin-top
		if(typeof options.marginTop != 'undefined') {
			marginTop = options.marginTop;
		} else {
			marginTop = marginTopDefault;
		}
		$(dialogBox).css({'margin-top':marginTop});

		// size of dialogBox
		if(typeof options.size != 'undefined' && (options.size == 'large' || options.size == 'medium')) {
			$(dialogBox).addClass(options.size);
		} else {
			$(dialogBox).addClass('small');
		}

		if(typeof options.type != 'undefined' && options.type == 'rectangle') {
			$(dialogBox).html(rectangleBox(options)).removeClass('dialogRoundedBox').addClass('dialogRectangleBox');
		} else {
			$(dialogBox).html(roundedBox(options)).removeClass('dialogRectangleBox').addClass('dialogRoundedBox');
		}

		// Set the top of dialogWrapper to include the scrollTop so the user sees the dialog box
		$(dialogWrapper).css({top:$(window).scrollTop()});
		
		// Set up the clicks.  Doing this on init didn't work as expected
		$(grayLayer).click(function() {
			$().zGrayScreenHide();
		});
		$(dialogWrapper).click(function() {
			$().zGrayScreenHide();
		});
		
		// hide any select boxes in IE6
		if($.browser.msie && parseInt($.browser.version) == 6) {
			// !#dialogWrapper
			$('select:not(#dialogWrapper select)').each(function() {
				$(this).addClass('zGrayScreenHidden').css({'visibility':'hidden'});
			});
		}
		
		resizeGrayLayer(true);
		$(grayLayer).css({display:'block'});
		$(dialogWrapper).css({display:'block'});
		$(dialogBox).css({display:'block'});
	}

	$.fn.zGrayScreenHide = function(force) {
		var force = force || false;
		if (clickBubble > 0 && !force) {
			
			clickBubble = 0;	
		} else {
			if(typeof onHide == 'function') {
				// if hide returns false, cancel the hide
				if(onHide() === false) {
					return;
				}
			}
			$(grayLayer).css({display:'none'}).unbind('click');
			$(dialogWrapper).css({display:'none'}).unbind('click');
			$(dialogBox).css({display:'none'});
			
			// show any hidden select boxes in IE6
			if($.browser.msie && parseInt($.browser.version) == 6) {
				// !#dialogWrapper
				$('select.zGrayScreenHidden').each(function() {
					$(this).removeClass('zGrayScreenHidden').css({'visibility':'visible'});
				});
			}
		}
	}

	function zGrayScreenInit() {
		// set up the grayScreen elements
		grayLayer = document.createElement("div");
		$(grayLayer).attr('id','grayLayer').addClass('grayLayer').css('display','none');

		dialogWrapper = document.createElement("div");
		$(dialogWrapper).attr('id','dialogWrapper');

		dialogBox = document.createElement("div");
		$(dialogBox).attr('id','dialogBox').css({display:'none'});
		$(dialogBox).click(function(e) {
			clickBubble++;
		});

		$(dialogWrapper).append(dialogBox);		
		$('body').append(grayLayer).append(dialogWrapper);

		$(window).resize(function() {
			resizeGrayLayer();
		});
		
		// IE6 doesn't know how to do position:fixed
		if ($.browser.msie && parseInt($.browser.version) == 6) {
			$(window).scroll(function() {
				resizeGrayLayer();
			});
		}
	}

	function resizeGrayLayer(force) {
		var force = force || false;
		if(force || $(grayLayer).css('display') == 'block') {
			if ($.browser.msie && parseInt($.browser.version) == 6) {
				// IE6 doesn't know how to do position:fixed
				$(grayLayer).css({width:$(window).width(), height:$(window).height()+$(window).scrollTop()});
			} else {
				$(grayLayer).css({width:$(window).width(), height:$(window).height()});
			}
			
		}
	}

	// formatting option
	function roundedBox(options) {
		var options = options || {};

		for(var i=0; i<boxOptions.length; i++) {
			if(typeof options[boxOptions[i]] == 'undefined') {
				options[boxOptions[i]] = '';
			}
		}

		var boxHTML = "<div class='dialogTitle'>"+options.title+"</div>";
		if(options.closeLink !== false) {
			boxHTML += "<div class='dialogClose'><a href='#' onclick='$().zGrayScreenHide(true);return false;'>Close</a></div>";
		}
		boxHTML += "<div class='top'><div class='leftCorner'>&nbsp;</div><div class='middle'>&nbsp;</div><div class='rightCorner'>&nbsp;</div></div>";
		boxHTML += "<div class='dialogContent'>"+options.html+"</div>";
		boxHTML += "<div class='bottom'><div class='leftCorner'>&nbsp;</div><div class='middle'>&nbsp;</div><div class='rightCorner'>&nbsp;</div></div>";	
		return boxHTML;
	}

	// formatting option
	function rectangleBox(options) {
		var options = options || {};

		for(var i=0; i<boxOptions.length; i++) {
			if(typeof options[boxOptions[i]] == 'undefined') {
				options[boxOptions[i]] = '';
			}
		}

		var boxHTML = "<div class='dialogTitle'>"+options.title+"</div>";
		if(options.closeLink !== false) {
			boxHTML += "<div class='dialogClose'><a href='#' onclick='$().zGrayScreenHide();return false;'>Close</a></div>";
		}	
		boxHTML += "<div class='dialogContent'>"+options.html+"</div>";
		return boxHTML;
	}

}) (jQuery);