/*
 * Lightbox overlays
 * @author Lee Daffen lee.daffen@net-a-porter.com
 */

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 isIE6 = (navigator.appVersion.indexOf("MSIE 6.0") != -1) ? true : false,
		confirmImg = opts.confirmImg || "/outnet/build/8.19.3/images/buttons/continue.gif",
		cancelImg = opts.cancelText || "/outnet/build/8.19.3/images/buttons/cancel.gif",
		height = (opts.height) ? "height:"+opts.height+"px;" : "",
		width = (opts.width) ? "width:"+opts.width+"px;" : "width:180px;",
		overlayMaskColour = (opts.theme.toLowerCase() == "light") ? "#FFF" : "#000",
		correction = (isIE6) ? 21 : 0,
		pageHeight = $(document).height(),
		pageWidth = $(document).width(),
		modal = opts.modal || false,
		closeButton = (modal) ? '' : '<div id="lightbox-close" class="close">Close</div>',

		// create the overlay mask HTML (plus the *insane* fix for input els in IE6)
		ieFix = (isIE6) ? ['<iframe style="position:absolute;top:0;left:0;z-index:-1;filter:mask();height:',pageHeight,'px; width:',pageWidth-correction,'px;"><div></div></frame>'].join("") : '',
		overlayMask = ['<div id="overlay-mask" style="height:',pageHeight,'px; width:',pageWidth-correction,'px; position:absolute; top:0; left:0; background-color:',overlayMaskColour,'; opacity:0; filter:alpha(opacity=0); z-index:999999;">',ieFix,'&nbsp;</div>'].join(""),

		// create the overlay buttons HTML
		buttons = (opts.type == "confirm") ? ['<input type="image" id="overlay-confirm-button" class="button" src="',confirmImg,'" />&nbsp;<input type="image" src="',cancelImg,'" id="overlay-cancel-button" class="button" />'].join("") : (opts.type == "alert") ? ['<input type="image" id="overlay-confirm-button" class="button" src="',confirmImg,'" />'].join("") : '',

		// create the overlay dialog HTML
		alertBox = [
			'<div class="purchase-path-holder popup" id="lightbox-container" style="position:absolute;z-index:1000001;',width,height,'">',
    		'<div class="purchase-path-inner last">',
			'<div class="bl"><div class="br"><div class="tl"><div class="tr">',closeButton,
        	'<br class="clear">',opts.message,buttons,'<br class="clear">',
			'</div></div></div></div>',
			'</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(isIE6) $("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(isIE6) $("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();
		});

        $("#overlay-continue-shopping").click(function() {
			hideAlert(); return false;
		});
	}

	showAlert();
};