﻿/**************
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();
    }
}
