////////////////////////////////////////////////////////////////////////
//
// Filename:    modaldialog.js
// Purpose:     Create modal dialogs
// Method:      Fade main content
//
// Author:      J.van.der.Steen@gobase.org
// Date:        2010-03-07
//
// Note:        Requires prototype.js
//
////////////////////////////////////////////////////////////////////////

/*global */

//
// The current panel settings
//
var hNavAuto   = Math.ceil((document.viewport.getHeight() - 64) / 3);
var hNavigator = hNavAuto;
var hShare     = hNavigator;
var wShare     = 256;   // was 216
var wDetails   = 0;     // no substraction, maximum

/*
 * Set dimensions for the panels
 */
function panelSetDimensions(hNavigator, wShare, hShare, wDetails)
{
    var w = document.viewport.getWidth();
    var h = document.viewport.getHeight();
    var style;

    var colorTitle ;
    var colorBorder;
    var colorContent;
    var colorWarning;

    colorTitle   = config.color.panelTitle  ;
    colorBorder  = config.color.panelBorder ;
    colorContent = config.color.panelContent;
    colorWarning = config.color.panelWarning;

    $('modal').setStyle(
      { position:           'absolute'
      , left:               (1*w/5) + 'px'
      , top:                h/4 + 'px'
      , width:              (3*w/5) + 'px'
      , height:             h/2 + 60 + 'px'

      , backgroundColor:    colorWarning
      , border:             '1px solid ' + colorBorder
      , display:            'none'
      } );

    style =
      { height:             '20px'
      , backgroundColor:    colorTitle

      , border:             '1px solid ' + colorTitle
      , borderBottom:       '1px solid ' + colorBorder

      , paddingLeft:        '4px'
      , paddingRight:       '2px'

      , fontWeight:         'normal'
      , textAlign:          'left'
      , verticalAlign:      'middle'
      } ;
    $('modal-title').setStyle(style);

    style =
      { height:             h - 2*8 - hNavigator - 48 - 10 - 20 - 2 + 'px'
      , overflowX:          'hidden'
      , overflowY:          'scroll'

      , textAlign:          'left'
      , padding:            '0px'

      , backgroundColor:    colorContent
      } ;

    $('modal-content').setStyle(
      { 
        overflowX:          'hidden'
      , overflowY:          'auto'
   // , height:             '100%'        h/2 - 20 - 2 + 'px'

      , textAlign:          'center'
      , padding:            '8px'

      , backgroundColor:    colorWarning
      } );

    style =
      { cssFloat:           'left'
      , textAlign:          'left'
      , border:             '1px solid ' + colorTitle
      , fontSize:           '0.8em'
      } ;
    $('modal-menu').setStyle(style);

    style =
      { cssFloat:           'right'
      , textAlign:          'right'
      , border:             '1px solid ' + colorTitle
      } ;
    $('modal-controls').setStyle(style);

}

/*
 * Use current dimensions for the panels
 */
function panelDimensions()
{
    var h = document.viewport.getHeight();

    //
    // Install the defaults
    //
    hNavAuto   = Math.ceil((h - 64) / 3);
    hNavigator = hNavAuto;
    hShare     = (h - 64) - 2;
    wDetails   = wShare + 8;

    panelSetDimensions(hNavigator, wShare, hShare, wDetails);
}

function panelAddControls()
{
    //
    // Add control to modal dialog
    //
    html = '';
    html += "<span class='icon-on' id='control-modal-close'><img src='img/close.gif' alt='Close' title='Close' onClick='hideModalDialog();'\/><\/span>";
    Element.insert('modal-controls', html);
}

function hideModalDialog()
{
    var elem   = $('page');
    var dialog = $('modal');

    if (elem !== null) {
        elem.setOpacity(1.0);
    }
    if (dialog !== null) {
        dialog.hide();
    }
    Element.update('modal-content', '');
}


/**
 * Improved modal dialog
 *
 *    specs.title       set title of modal form
 *    specs.text        text if modal dialog cannot be displayed
 *    specs.html        content of the modal dialog
 *    specs.width       set fixed width  of dialog (0 for auto size)
 *    specs.height      set fixed height of dialog (0 for auto size)
 *    specs.buttons     define buttons for modal form
 */
function showModalDialog(specs)
{
    var elem   = $('page');
    var dialog = $('modal');
    var html   = '';

    if (elem === null) {
        alert(specs.text);
        return;
    }

    //
    // Buttons
    //
    if (specs.buttons) {
        //
        // text [= action] [ | text [= action] | ... ]
        //
        var i;
        var b = specs.buttons.split("|");
        html += "<p style='margin-bottom:16px;text-align:center;'>\n";
        for (i = 0; i < b.length; i++) {
            var a = b[i].split("=", 2);
            html += "<button class='form'";
            html += " onclick='hideModalDialog();";
            if (a.length > 1) {
                //
                // Optional JavaScript execution code
                //
                html += a[1] + ";";
            }
            html += "'>";
            html += a[0];
            html += "</button>\n";
        }
        html += "</p>\n";
    }

    if (specs.html === undefined) {
        specs.html = '';
    }

    elem.setOpacity(0.5);
    Element.update('modal-menu'   , specs.title);
    Element.update('modal-content', specs.html + html);

    if (specs.width === undefined || specs.width === 0) {
        var w = document.viewport.getWidth();
        specs.width = (w * 3 / 5) + 'px';
    }
    if (specs.height === undefined || specs.height === 0) {
        specs.height = 'auto';
    }
    if (specs.height !== 'auto' || specs.width !== 'auto') {
        $('modal').setStyle( { height: specs.height, width: specs.width } );
    }

    $('modal-content').setStyle( { height: specs.height, width: specs.width } );
    $('modal-content').setStyle( { height: specs.height, width: specs.width } );
    $('modal')        .setStyle( { height: 'auto'       } );
    
    dialog.show();
}


/**
 * showAlert(message, title) 
 * replacement for javascript alert();
 */
function showModalAlert(message)
{
    var title = arguments.length > 1 ? arguments[1] : "";
    var specs = { title   : title
                , text    : message
                , html    : ""
                , buttons : "OK"
                } ;

    specs.html += "<br/>\n";
    specs.html += "<p style='margin-bottom:16px;text-align:center;'>\n";
    specs.html += message + "\n";
    specs.html += "</p>\n";
                
    showModalDialog(specs);
}

function needSettingsConfirmation(actions)
{
    specs = null;

    if (config.userManagement.currentUser.dirty != config.saved) {
        //
        // Create a confirmation dialog:
        //
        //       Your changes have not been saved yet?
        //
        //       [Don't save] [Save] [Cancel]
        //
        var specs = { title  : "Your changes have not been saved yet"
                    , text   : ''
                    , html   : ''
                    , buttons:       "Don't save=" + actions[0] + ";"
                             + "|" + "Save="       + actions[1] + ";"
                             + "|" + "Cancel"
                    } ;

        specs.html += "<br/>\n";
        specs.html += "<p style='margin-bottom:16px;text-align:center;'>\n";
        specs.html += specs.title + "<br>\n";
        specs.html += "</p>\n";
    }

    return specs;
}