/*
 * Lightbox overlays
 * @author Lee Daffen
 *
 * @usage NAP.overlayPanel(opts)
 */

if(typeof NAP == "undefined") {
	var NAP = {};
}

NAP.overlayPanel = function(opts) {
	/* opts = { title: title of the dialog [string],
				message: message to alert [string],
				height: optional, height of dialog, e.g. 200 [integer],
				width: optional, defaults to 180px, width of dialog, e.g. 100 [integer],
				top: optional, top position [integer],
				left: optional, left position [integer],
				type: alert / confirm / info, alert has one 'ok' button, confirm has one 'confirm' and one 'cancel' button, info has none [string],
				callback: optional, function to call on confirm click, returns confirm state as argument [function],
				onReady: optional, function to call when the dialog box HTML is available in the DOM [function],
				confirmText: text to display on the confirm button [string],
				cancelText: text to display on the cancel button [string],
				theme: dark/light, sets the overlay background color [string],
				addClass: optional additional classname for the lightbox-container [string],
				modal: optional, defaults to false, modal dialog (requires user interaction within the dialog) [boolean]
			} */

	var confirmText = opts.confirmText || "OK",
		cancelText = opts.cancelText || "Cancel",
		height = (opts.height) ? "height:"+opts.height+"px;" : "",
		width = (opts.width) ? "width:"+opts.width+"px;" : "width:180px;",
		overlayMaskColour = (opts.theme.toLowerCase() == "light") ? "#FFF" : "#000" ,
		correction = (navigator.appName.indexOf('Microsoft') != -1) ? 21 : 0 ,
		pageHeight = $(document).height(),
		pageWidth = $(document).width(),
		modal = opts.modal || false,
		closeButton = (modal) ? "" : '<div id="lightbox-close" title="Close">Close</div>' ,

		// create the overlay mask HTML
		overlayMask = ['<div id="overlay-mask" style="height:',pageHeight,'px; width:',pageWidth,'px; position:absolute; top:0; left:0; background-color:',overlayMaskColour,'; opacity:0; filter:alpha(opacity=0); z-index:999999;">&nbsp;</div>'].join(""),

		// create the overlay buttons HTML
		buttons = (opts.type == "confirm") ? ['<input type="button" id="overlay-confirm-button" class="overlay-alert-button lightbox-yes" value="',confirmText,'" />&nbsp;<input type="button" value="',cancelText,'" id="overlay-cancel-button" class="overlay-alert-button lightbox-no" />'].join("") : (opts.type == "alert") ? ['<input type="image" src="/outnet/build/2011.17.00/images/buttons/ok.gif" id="overlay-confirm-button" class="overlay-alert-button lightbox-ok" value="',confirmText,'" />'].join("") : "",

		// create the overlay dialog HTML
		alertBox = [
			'<div id="lightbox-container" style="position:absolute;z-index:1000001;',width,height,'">',
			'<div id="lightbox-top">',closeButton,opts.title,'</div>',
			'<div id="lightbox-middle">',opts.message,'</div>',
			'<div id="lightbox-bottom">',
			buttons,
			'</div></div>'].join("");

	function hideAlert() {
		$("#overlay-mask").fadeOut("fast", function() {
			$(this).remove();
		});
		$("#lightbox-container").fadeOut("fast", function() {
			$(this).remove();
		});

		// replace the scrollbars in IE6 (only required for position:fixed dialogs)
		// if(navigator.appVersion.indexOf("MSIE 6.0") != -1) $("html").css("overflow","auto");
	}

	function showAlert() {
		hideAlert();	// remove any existing dialogs from the page

		// remove the scrollbars in IE6 (only required for position:fixed dialogs)
		// if(navigator.appVersion.indexOf("MSIE 6.0") != -1) $("html").css("overflow","hidden");

		var opacity = (opts.theme == "light") ? 0.50 : 0.35 ;
		$(overlayMask)
			.appendTo($("body"))
			.animate({opacity:opacity}, "fast", function() {
				$(alertBox).appendTo($("body"));

				// calculate the left and top values to position the dialog in the centre of the viewport
				var boxPosX = (typeof opts.left != "undefined") ? opts.left : Math.max((($(window).width())/2) - (parseInt($("#lightbox-container").width())/2) + $(document).scrollLeft(),0),
					// 1/2 width of visible bit - 1/2 width of the dialog box + left scroll offset of the visible bit
					boxPosY = (typeof opts.top != "undefined") ? opts.top : Math.max((($(window).height())/2) - (parseInt($("#lightbox-container").height())/2) + $(document).scrollTop(),0);
					// 1/2 height of visible bit - 1/2 height of the dialog box + top scroll offset of the visible bit

				$("#lightbox-container")
					.css({
						"left":boxPosX+"px",
						"top":boxPosY+"px"
					})
					.fadeIn("fast", function() {
						if(opts.onReady) opts.onReady();
					});

				if(typeof opts.addClass != "undefined") {
					$("#lightbox-container").addClass(opts.addClass);
				}

				bindClicks();
			});

		if(!modal) {
			$("#overlay-mask").click(function() {
				if(opts.callback) { opts.callback(); }
				hideAlert();
			});
		}
	}

	function bindClicks() {
		if(opts.type == "confirm") {
			$("#overlay-confirm-button").click(function() {
				if(opts.callback) { opts.callback(true); }
				hideAlert();
			});
			$("#overlay-cancel-button").click(function() {
				if(opts.callback) { opts.callback(false); }
				hideAlert();
			});
		} else {
			$("#overlay-confirm-button").click(function() {
				if(opts.callback) { opts.callback(); }
				hideAlert();
			});
		}
		$("#lightbox-close").click(function() {
			if(opts.callback) { opts.callback(); }
			hideAlert();
		});
	}

	showAlert();
};