// This is a basic message box class.
// Simplest usage is just to pass in a text and title string.
// This will automatically give an "ok" button.
// To specify custom text or more than one button, just pass in
// an array of text, one element per button, as the buttonText option.
// Use the buttonCallbacks option to specify the list of callbacks corresponding
// to the text buttons.
// Use the buttonStyles option to specify a list of styles to be used with each button.
// buttonStyles and buttonCallbacks parameters are optional, but if given, you must supply ALL
// the styles/callbacks to use in the order corresponding to the buttonText list.
// (You can use "null" for a list element to use the default.)
//
// The simplest example is:
//    new MessageBox ( "Greetings Earthlings" );
// This pops up a message box with an "Ok" button.
//
// A more interesting example:
//    new MessageBox ( "Help! The sky is falling!", "Caution",
//                    { buttonText: ["Ok", "Ignore", "Fire Missles"],
//                      buttonCallbacks: [handleOk, null, handleFire],
//                      buttonStyles: ['okStyle', 'cancelStyle'] } );
// This will popup a message with the given text/title and three buttons.
// Note that since only two buttonStyles are given, the third is assumed to be null.
//

var MessageBox = Class.create({
    messageText: "",
    messageTitle: "Alert",
    buttonText: [],
    buttonStyles: [],
    buttonCallbacks: [],
    templateFile: '/templates/message-box.tmpl',
    useLighterbox: false,
    hideTitle: false,

    initialize: function ( messagetext, messagetitle, args ) {
        this.messageText = messagetext;
        this.messageTitle = messagetitle || this.messageTitle;
        if ( args ) {
            // Pick which args to carry over:
            if ( args.templateFile ) this.templateFile = args.templateFile;
            if ( args.useLighterbox ) this.useLighterbox = true;
            if ( args.hideTitle ) this.hideTitle = true;

            // Figure out how many buttons were given
            var cnt = 0;
            if ( args.buttonText && args.buttonText.length > cnt ) cnt = args.buttonText.length;
            if ( args.buttonStyles && args.buttonStyles.length > cnt ) cnt = args.buttonStyles.length;
            if ( args.buttonCallbacks && args.buttonCallbacks.length > cnt ) cnt = args.buttonCallbacks.length;

            // Check each arg.  If not present, use default.
            for ( var i=0; i<cnt; i++ ) {
                this.buttonText[i] = ( args.buttonText && args.buttonText[i] ? args.buttonText[i] : i == 0 ? 'Ok' : 'Cancel' );
                this.buttonStyles[i] = ( args.buttonStyles && args.buttonStyles[i] ? args.buttonStyles[i] : 'buttonDefault' );
                this.buttonCallbacks[i] = ( args.buttonCallbacks && args.buttonCallbacks[i] ? args.buttonCallbacks[i] : null );
            }
        } else {
            // set up default button:
            this.buttonText.push ( "Ok" );
            this.buttonStyles.push ( "buttonDefault" );
        }

        // make sure we have the prerequestite background
        if ( this.useLighterbox && !$('lighterwindow_background') ) {
            $(document.body).insert(
                {
                    top : '<div id="lighterwindow_background" class="lighterwindow_background" style="display: none"></div>'
                });
        }
        this.createMB();
    },
    
    // All clicks start here.  This function determines the index
    // that will be used to find the targetted callback.
    // We also destroy the MB here before doing the callback.
    onClick: function(evt) {
        var ix = this.buttonIndex;
        var cb = this.mb.buttonCallbacks[ix] || function() {};
        evt.stop();
        this.mb.destroyMB();
        cb();
    },
    
    // Create a templated message box.
    createMB: function() {
        if ( this.useLighterbox ) $('lighterwindow_background').show();
        $(document.body).fillin({
            template: templatefactory.get(this.templateFile),
            position: 'bottom',
            object: { },
            callback: this.loadMB.bind(this)
        });
    },

    // After template is created, load it up with the content.
    loadMB: function() {
        $('global-message-box-messagetext').innerHTML = this.messageText;
        $('global-message-box-titlebar-text').innerHTML = this.messageTitle;
        if ( this.hideTitle ) $('global-message-box-titlebar-text').hide();

        // Set up a close button, which is by default a cancel.
        // (This could probably be an optional button... maybe...)
        Event.observe( $('global-message-box-titlebar-close'), 'click', this.destroyMB.bind(this) );

        // Set up each button requested.  We always base
        // each button on the text that was given.
        this.buttonText.each( function(el,ix) {
            var btndiv = new Element("span");
            btndiv.id = 'global-message-box-buttons-id-'+ix;
            btndiv.buttonIndex = ix;
            btndiv.mb = this;
            btndiv.className = this.buttonStyles[ix] || 'buttonDefault';
            btndiv.innerHTML = el;
            $('global-message-box-buttons').insert( btndiv );
            Event.observe( btndiv, 'click', this.onClick );
        }, this);

        // Show the ol' message
        $('global-message-box').center( { update: true, zIndex: 10001 } );
        $('global-message-box').show();
    },

    // Hide and remove the button from our sight!
    destroyMB: function() {
        if ( this.useLighterbox ) $('lighterwindow_background').hide();
        $('global-message-box').hide();
        $('global-message-box').remove();
    }
});