﻿/**************
Modal Popup
**************/
/*  Reusable modal popup object using jQuery.

Example use:
var modal = new ModalPopup({
popupSelector: "#modal1", 
triggerSelector: ".openModel",
closeSelector:".closeModal"
});
        
All the options parameters are used as jQuery selectors. So all CSS3 selectors + jQuery extensions can be used.
        
popupSelector - element containing the modal popup
triggerselector - element(s) that will trigger the popup
closeSelector - element(s) that will cause popup to close    
*/

//Set options for Modal Popup

var ModalPopup = function (options) {
	var popupSelector = options.popupSelector,
        closeSelector = options.closeSelector,
        triggerSelector = options.triggerSelector,
        opacity = options.opacity || 0.55,
        dynamic = options.dynamic || false,
        urlContent = options.urlContent || "",
        modalHeadline = options.modalHeadline || "",
        fadeSpeed = options.fadeSpeed || "slow",
        smallPopup = popupSelector,
        center = (options.center === undefined) ? true : options.center,
        allSelectBoxes = $("select"),
        popupSelectBoxes = $("select", popupSelector);

	var overlayContent = '<div id="modalBackground">&nbsp;</div>';  //modal background code
	var overlay = '#modalBackground';    //Modal background ID
	var dynamicModalBox = '#modalBox';
	var modalClass = '.modalBox';

	// set up the events
	$(triggerSelector).click(showModal);
	//$(window).resize(AdjustOverlay);
	if (center === true) {
		$(window).resize(Center);
		$(window).scroll(Center);
	}


	// methods
	function showModal() {
		//Create Modal Background
		createModalBackground();

		if (center) { Center(); } // If center option is set, center modal     

		/* IE6 fix to select zindex bug */
		if (($.browser.msie === true) && ($.browser.version == '6.0')) {
			allSelectBoxes.css("visibility", "hidden");
			popupSelectBoxes.css("visibility", "visible");
		}

		$(overlay).fadeIn(fadeSpeed, function () { // Fade in modal background and show modal

			if (dynamic) {
				loadDynamicModal();
				//Bind closing event
				$(closeSelector).click(hideModal);
			}
			else {
				$(smallPopup).show();

				//Bind closing event
				$(closeSelector).click(hideModal);

			}
		});

		return false;
	}

	function hideModal() {
		/* IE6 fix to select zindex bug */

		if (($.browser.msie === true) && ($.browser.version == '6.0')) {
			allSelectBoxes.css("visibility", "visible");
		}

		//alert(smallPopup);

		$(overlay).fadeOut(fadeSpeed);
		if (dynamic) {
			closeDynamicModal();
		}
		else {
			$(modalClass).hide();
			$(overlay).remove();
			$(smallPopup).hide();
		}


		return false;
	}

	function Center() {
		var popups = $(smallPopup + ', ' + dynamicModalBox);
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		var scrollLeft = $(window).scrollLeft();
		var scrollTop = $(window).scrollTop();

		var popupWidth = popups.width();
		var popupHeight = popups.height();
		if ($.browser.safari) {

			windowHeight = document.documentElement.clientHeight;

		}
		var leftPos = (windowWidth - popupWidth) / 2 + scrollLeft;
		var topPos = (windowHeight - popupHeight) / 2 + scrollTop;

		$(smallPopup + ', ' + dynamicModalBox).css({
			"left": leftPos,
			"top": topPos
		});
	}

	function createModalBackground() {
		// If modal background does not exist, build modal
		if (!$('#modalBox').length) {
			$('body').append(overlayContent);
		}

		if (typeof document.body.style.maxHeight === "undefined") { //if IE 6 calculate height of window
			$("body", "html").css({ height: "100%", width: "100%" });
		}
		$(overlay).css({ opacity: 0.0 }).animate({ opacity: opacity }, 0); // Set overlay		
	}

	function createModal() {
		// if dynamic modal box does not exist, build out
		if (!$('#modalBox').length) {
			//Add generic modal box to body
			$('body').append('<div id="modalBox" class="modalBox"><a href="../default.aspx" class="logo">Millennium</a><a class="closeModal">Close</a><div class="modalContent"></div></div>');
		}
	}

	function loadDynamicModal() {
		createModal();
		$.ajax({
			type: "POST",
			url: urlContent,
			data: "",
			success: function (msg) {
				var contentInsert = $(msg).find('.modalDynamicContent').html();
				$("#modalBox .modalContent").html(contentInsert);
				$("#modalBox .modalContent h1").html(modalHeadline);
				if (center) { Center(); }
				if ($('#modalBox .modalContent').height() >= 500) {
					$('#modalBox .modalContent').css('overflow-y', 'scroll');
				}
			}
		});


		$(dynamicModalBox).show();

		//if dynamic, and if refreshing same window
		$('#modalBox .modalContent').animate({ scrollTop: 0 }, 500);
	}

	function closeDynamicModal() {
		$(dynamicModalBox).remove();
		$(overlay).remove();
	}

}

