﻿/**
* ModalDialog - Creates a modal dialog using jQuery UI
*
* Copyright (c) 2010 Wesley Jordan <wesley@livebusinessonline.com>
* Licensed under the MIT license:
*   http://www.opensource.org/licenses/mit-license.php
* 
* Place the following code on your page:
* <div id="modalDiv" style="display: none;"></div>
* 
* general parameters:
* m: mode      (str) - html or iframe
* w: width     (int)
* h: height    (int) - default = 'auto' (auto only works in html mode)
* c: content   (str) - content of dialog when using html mode
* u: url       (str) - src of iframe when using iframe mode
* t: title     (str)
* d: draggable (bool)
* r: resizable (bool)
*
* advanced parameters:
* b: buttons - @link http://jqueryui.com/demos/dialog/#option-buttons
* x: onclose - supports a single function name which receives: event, ui
*
* examples:
* ModalDialog({'t':'Results', 'c':'The result of Foo + Bar is FooBar'})
* ModalDialog({'t':'jQuery is Amazing', 'w':500, 'h':500, 'm':'iframe', 'u':'http://jquery.org'})
* ModalDialog({'t':'Sample', 'c':$('#example').html(), 'b':{'OK':function(){$(this).dialog('close');}}, 'x':'Foo'})
*
* usage notes:
* The onclose functionality is not nearly as advanced as the default jQueryUI
* dialog functionality.  This is for two reasons, first it perfectly suits the
* needs of my app and second I use the onclose option to remove the contents of
* modalDiv before calling the function defined by x. If the div content is not
* removed it will be shown briefly on the next call to ModalDialog.
*
* The iframe source script can communicate with the calling page. This makes
* it possible to set the value of hidden fields after your script completes
* and prior to closing the form.  Coupled with the onclose function you have
* the ability do things like detect if changes were made in the iframe dialog
* when it's closed and then update the parent ui accordingly.
*
* The following example shows how an iframe dialog can update a hidden field
* in the parent page and then close the dialog window.
*
* function CloseWin(){
*   window.parent.$("#hidFld").val('1');
*   window.parent.$("#modalDiv").dialog('close');
*   return false;
* }
*
* If you set the onclose function to be called, that function can then detect
* the changed hidden field and take the necessary action(s).
*
* other notes:
* This function obviously doesn't incorporate all of the options available in
* the jQueryUI dialog widget. I only included what was necessary for my app.
* You could very easily add additional options by creating new default values
* and then adding the new options to the dialogOpts variable.
*
* For more information about the jQueryUI dialog widget go to:
* @link http://jqueryui.com/demos/dialog
*/
function ModalDialog() {
    // default values
    var m = "html";
    var w = 300;
    var h = 'auto';
    var c = "";
    var t = 'ModalDialogs';
    var b = {};
    var d = true;
    var r = false;
    var x = null;
    var useCase = "";

    // parameters
    if (arguments.length == 1) {
        var params = arguments[0];
        for (key in params) eval(key + " = params[key]");
    }

    // check for required parameters
    if (m == "iframe" && u == undefined) { alert("ModalDialog Frame SRC parameter not defined."); return; }

    // check for required parameters
    if (useCase == "") { alert("Use Case not defined."); return; }

    // defines the animation speed
    $.fx.speeds._default = 350;

    // dialog options
    var dialogOpts = {
        modal: true,
        bgiframe: (m == "iframe") ? true : false,
        autoOpen: false,
        height: h,
        width: w,
        show: 'fade',
        hide: 'fade',
        draggable: d,
        resizeable: false,
        title: t,
        buttons: b,
        close: function (event, ui) {
            if (x != null) eval(x + "(event,ui)");
            //$("#modalDiv").html("");

        },
        open: function () {
            if (m == "iframe") {
                $("#popup" + useCase).html('<iframe id="popupIFrame' + useCase + '" width="100%" height="100%" screenX="200",screenY="200",left="200",top="200" frameBorder="0" scrolling="auto"></iframe>');
                $("#popupIFrame" + useCase).attr('src', u);
            }
            else $("#popup" + useCase).html(c)
        }
    };

    $("#popup" + useCase).dialog(dialogOpts);
    $("#popup" + useCase).dialog("open");
}

