jQuery(function() {
    var overlayContainer = jQuery('<div></div>').css({
        'width': '100%'
            , 'height': '100%'
            , 'position': 'fixed'
            , 'left': '0'
            , 'top': '0'
            , 'opacity': '0.5'
            , 'background-color': '#000000'
            , 'z-index': '2999'
    }).hide();
    jQuery('body').append(overlayContainer);


    jQuery('div[x-modweb-designer-modalwindow]').each(function() {

        var containerUniqueID = jQuery(this).attr('x-uniqueid');
        var thisModalWindowContainer = jQuery(this);
        var onClientCloseScript = jQuery(this).attr('x-onclientclose');
        var iFrameWidth = jQuery(this).attr('x-iframewidth');
        var iFrameHeight = jQuery(this).attr('x-iframeheight');

        if (iFrameWidth === "0" || iFrameWidth === "" || typeof iFrameWidth === "undefined") {
            iFrameWidth = "100%";
        } else {
            iFrameWidth += 'px';
        }
        if (iFrameHeight === "0" || iFrameHeight === "" || typeof iFrameHeight === "undefined") {
            iFrameHeight = "100%";
        } else {
            iFrameHeight += 'px';
        }

        //alert("iFrameWidth=" + iFrameWidth + ", iFrameHeight=" + iFrameHeight);


        var RenderOverlay = function() {
            overlayContainer.fadeIn("fast");
        };


        // find all controls that have this uniqueid for this modalwindow node and add a click event to them that will open the modal window.
        jQuery('[x-modweb-designer-modalwindow-trigger-open="' + containerUniqueID + '"]').each(function() {
            jQuery(this).click(function() {
                //alert('opening modal window');

                // render overlay.
                RenderOverlay();

                // set the modal window contents.
                if (thisModalWindowContainer.attr('x-navigateurl') == '') {
                    // use the contents that are already in the div.
                    //thisModalWindowContainer.html('inner contents of window');
                }
                else {
                    // use contents from an external url in an iframe.
                    var h = '';
                    h += '<iframe src="' + thisModalWindowContainer.attr('x-navigateurl') + '" width="' + iFrameWidth + '" height="' + iFrameHeight + '" style="border-style:none;">';
                    h += '</iframe>';
                    thisModalWindowContainer.html(h);
                }


                // style the modal window.
                var modalWindowContainerBorderTopWidth = thisModalWindowContainer.css('border-top-width');
                modalWindowContainerBorderTopWidth = modalWindowContainerBorderTopWidth.replace(new RegExp("px", "g"), ""); // trim the 'px' off the end of the string.
                modalWindowContainerBorderTopWidth = parseInt(modalWindowContainerBorderTopWidth); // convert to integer for calculations.
                thisModalWindowContainer.css({
                    'z-index': '3000',
                    'position': 'fixed'
                , 'left': '50%'
                , 'top': '50%'
                    //, 'padding': '8px'
                , 'margin-left': '-' + (thisModalWindowContainer.width() / 2) + 'px'
                , 'margin-top': '-' + (thisModalWindowContainer.height() / 2) + 'px'
                });



                // show the modal window.
                thisModalWindowContainer.fadeIn("fast", function() {

                    // render a 'close' button next to the window.
                    //var h = '<div>close</div>';
                    var closeContainer = jQuery('<div></div>').text("close");

                    closeContainer.addClass('closeButton'); // NOTE: this class is not used by the ModalWindow control itself. it is a hack for the PasswordReminderButton control so it can run trigger the click event on when finished sending a password reset email.

                    //closeContainer.attr({ 'x-debug-findme': '123' });
                    closeContainer.css({
                        'position': 'absolute',
                        //'float': 'right',
                        'margin-top': '-' + (20 + modalWindowContainerBorderTopWidth) + 'px',
                        'color': '#ffff99',
                        'cursor': 'pointer'
                    });
                    thisModalWindowContainer.prepend(closeContainer);
                    closeContainer.click(function() {



                        // close code. if changing then also change for CloseButtonControlID event handler.
                        thisModalWindowContainer.hide();
                        // if this was loading an iframe instead of templated content, then destroy the iframe.
                        if (thisModalWindowContainer.attr('x-navigateurl').length > 0) {
                            thisModalWindowContainer.html('');
                        }
                        overlayContainer.hide();
                        eval(onClientCloseScript);




                    });


                    // push the close button to the right side - must be after rendered so we can get its own width offset calculated with the modal window width.
                    closeContainer.css({ 'left': (thisModalWindowContainer.width() - closeContainer.width()) + 'px' });

                });
            });
        });





        // now do the same thing for close buttons.
        jQuery('[x-modweb-designer-modalwindow-trigger-close="' + containerUniqueID + '"]').each(function() {
            jQuery(this).click(function() {




                // close code. if changing then also change for static close corner link event handler.
                thisModalWindowContainer.hide();
                // if this was loading an iframe instead of templated content, then destroy the iframe.
                if (thisModalWindowContainer.attr('x-navigateurl').length > 0) {
                    thisModalWindowContainer.html('');
                }
                overlayContainer.hide();
                eval(onClientCloseScript);




            });
        });




        //alert(uniqueID);
    });
});