/**
 *---------------------------------------------------------------------------
 *  TCH-IU
 *
 *  Javascript functions for tchepannou.com web user interface
 *
 *  Author: Herve Tchepannou
 *---------------------------------------------------------------------------
 */

/**
 * Perform the upload of a file via an iframe.
 * See: http://viralpatel.net/blogs/2008/11/ajax-style-file-uploading-using-hidden-iframe.html
 *
 * @param form          Form
 * @param action_url    URL where to submit the file
 * @param div_id        ID of the container for the feedback
 * @param callback      (Optional) Callback method to call after the upload is performed
 */
function file_upload(form, action_url, div_id, callback)
{
    // Create the iframe...
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id","upload_iframe");
    iframe.setAttribute("name","upload_iframe");
    iframe.setAttribute("width","0");
    iframe.setAttribute("height","0");
    iframe.setAttribute("border","0");
    iframe.setAttribute("style","width: 0; height: 0; border: none;");

    // Add to document...
    form.parentNode.appendChild(iframe);
    window.frames['upload_iframe'].name="upload_iframe";

    iframeId = document.getElementById("upload_iframe");

    // Add event...
    var eventHandler = function()  {

        if (iframeId.detachEvent)
        {
            iframeId.detachEvent("onload", eventHandler);
        }
        else
        {
            iframeId.removeEventListener("load", eventHandler, false);
        }

        // Message from server...
        var content = '';
        if (iframeId.contentDocument)
        {
            content = iframeId.contentDocument.body.innerHTML;
        }
        else if (iframeId.contentWindow)
        {
            content = iframeId.contentWindow.document.body.innerHTML;
        }
        else if (iframeId.document)
        {
            content = iframeId.document.body.innerHTML;
        }

        if (callback)
        {
            callback(content);
        }
        document.getElementById(div_id).innerHTML = ""

        // Del the iframe...
        setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
    }

    if (iframeId.addEventListener)
        iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent)
        iframeId.attachEvent("onload", eventHandler);

    // Set properties of form...
    form.setAttribute("target","upload_iframe");
    form.setAttribute("action", action_url);
    form.setAttribute("method","post");
    form.setAttribute("enctype","multipart/form-data");
    form.setAttribute("encoding","multipart/form-data");

    // Submit the form...
    form.submit();

    document.getElementById(div_id).innerHTML = "Uploading...";
}

/**
 * Display a message dialog.
 * A message dialog is composed of:
 * - A title
 * - A text
 * - A button.
 *
 * @param containerId   ID of the element containing the message box
 * @param id            ID of the message box element
 * @param title         Title of the message
 * @param text          Text of the message
 * @param button        Button label
 * @param callback      Name of the function to call when the button is clicked (optional)
 */
function tchui_msg_dialog(containerId, id, title, text, button, callback)
{
    /* Html */
    var innerHtml = "<div id='" + id + "' class='msgbox'>"
     + "<div>"
       + "<h1 class='title'>" + title + "</h1>"
       + "<p class='text'>"+ text + "</p>"
       + "<p class='button_bar'>"
         + "<button type='button' class='close' id='" + id + "_button'>" + button + "</button>"
       + "</p>"
     + "</div>"
     + "</div>";
    if (callback)
    {
        innerHtml += "<script type='text/javascript'>$('#" + id + "_button').click(function(){" + callback + "();});</script>"
    }

    $('#' + containerId).html (innerHtml);

    /* Open the popup */
    __overlay(id);
}


function tchui_error(containerId, id, text, callback)
{
    tchui_msg_dialog(containerId, id, 'Error', text, "OK", callback);
}

function tchui_info(containerId, id, text, callback)
{
    tchui_msg_dialog(containerId, id, 'Infomation', text, "OK", callback);
}

function tchui_warning(containerId, id, text, callback)
{
    tchui_msg_dialog(containerId, id, 'Warning', text, "OK", callback);
}




/**
 * Display a message dialog.
 * A message dialog is composed of:
 * - A title
 * - A text
 * - 2 buttons.
 *
 * @param containerId   ID of the element containing the message box
 * @param id            ID of the message box element
 * @param title         Title of the message
 * @param text          Text of the message
 * @param button1       1st button label
 * @param button2       2nd button label
 * @param callback1     Name of the function to call when the 1st button is clicked (optional)
 * @param callback2     Name of the function to call when the 2nd button is clicked (optional)
 */
function tchui_option_dialog(containerId, id, title, text, button1, button2, callback1, callback2)
{
    /* Html */
    var innerHtml = "<div id='" + id + "' class='msgbox'>"
     + "<div>"
       + "<h1 class='title'>" + title + "</h1>"
       + "<p class='text'>"+ text + "</p>"
       + "<p class='button_bar'>"
         + "<button type='button' class='close' id='" + id + "_button1'>" + button1 + "</button>"
         + "<button type='button' class='close' id='" + id + "_button2'>" + button2 + "</button>"
       + "</p>"
     + "</div>"
     + "</div>";

    if (callback1 || callback2)
    {
        innerHtml += "<script type='text/javascript'>";
        if (callback1)
        {
            innerHtml += "$('#" + id + "_button1').click(function(){" + callback1 + "()});"
        }
        if (callback2)
        {
            innerHtml += "$('#" + id + "_button2').click(function(){" + callback2 + "()});"
        }
        innerHtml += "</script>";
    }

    $('#' + containerId).html (innerHtml);

    /* Open the popup */
    __overlay(id);
}

function tchui_yes_no(containerId, id, title, text, callback1, callback2)
{
    tchui_option_dialog(containerId, id, title, text, 'Yes', 'No', callback1, callback2);
}

function tchui_ok_cancel(containerId, id, title, text, callback1, callback2)
{
    tchui_option_dialog(containerId, id, title, text, 'OK', 'Cancel', callback1, callback2);
}



/*
 * Display an input dialog.
 * A message dialog is composed of:
 * - A title
 * - A text
 * - An input field
 * - The buttons: OK and Cancel
 *
 * @param containerId   ID of the element containing the message box
 * @param id            ID of the message box element
 * @param title         Title of the message
 * @param text          Text of the message
 * @param name          Name of the input field
 * @param value         value of the input field
 * @param callback      Name of the function to call when the button OK is clicked.
 *                      This method must have the signature: <code>function foo (value)</code>
 *                      because it will be called with the value entered as parameter.
 */
/*
function tchui_input_dialog(containerId, id, title, text, name, value, callback)
{
    var innerHtml = "<div id='" + id + "' class='msgbox'>"
     + "<div>"
       + "<h1 class='title'>" + title + "</h1>"
       + "<p class='text'>"+ text + "</p>"
       + "<p class='input'><input id='" + id + "_input' name='" + name + "' value='" + value + "'></p>"
       + "<p class='button_bar'>"
         + "<button type='button' class='close' id='" + id + "_button1'>OK</button>"
         + "<button type='button' class='close' id='" + id + "_button2'>Cancel</button>"
       + "</p>"
     + "</div>"
     + "</div>";

    if (callback)
    {
        innerHtml += "<script type='text/javascript'>$('#" + id + "_button1').click(function(){" + callback + "($('#" + id + "_input').val());});</script>"
    }

    $('#' + containerId).html (innerHtml);

    __overlay(id);
}
*/


/*== PRIVATE METHODS ========================*/
function __overlay (id)
{
    var overlay = $('#' + id).data('overlay');
    if (!overlay)
    {
        $('#' + id).overlay(
        {
            closeOnClick: false,
            load: true,
            oneInstance: false,

            mask:
            {
                color: '#fff',
                loadSpeed: 200,
                opacity: 0.5
            }
        });
    }
    else
    {
        overlay.load();
    }
}