if (typeof(ZG) == 'undefined') var ZG = {};

// A stack to hold all of the created dialogs
ZG.dialogs = [];

ZG.Dialog = function() {
    var self = this,
        args = arguments;
        
    self.init.apply(self, args);
};

ZG.Dialog.prototype = {
    init: function (options) {
        var self = this;
        
        /*
        ** Default parameters for all dialogs. Not very elaborate right now, 
        ** unfortunatley most of the dialogs appear to have no similar 
        ** formatting/style. Some heavy duty callbacks for sure.
        */
        var defaults = {
            content: '<p>Please supply content for this dialog, in a string '+
                     'format, jQuery object, or array of strings.</p>'
        };
        
        self.options = jQuery.extend(defaults, options);
        
        /*
        ** Get a new id... dialog objects should be auto-appended 
        ** to a global array called ZG.dialogs, which helps with this count.
        */
        self.id = ZG.dialogs.length;
        
        // Create the initial dialog wrapper
        self.dialog = $('<div/>')
                      .attr({ 'class': 'dialog', 'id': 'dialog-'+self.id })
                      .prependTo('body');
        
        if (self.options.width) {
            self.dialog.width(self.options.width)
        };
        
        // Table wrapper, this goes inside of the dialog and does the shadow
        var table_html = Array(
            '<tr class="outlineCanada">',
                '<td class="west">&nbsp;</td>',
                '<td class="center">&nbsp;</td>',
                '<td class="east">&nbsp;</td>',
            '</tr>',
            '<tr class="outlineUSA">',
                '<td class="west">&nbsp;</td>',
                '<td class="center"><div id="dialogInnerBody" class="clearfix"></div></td>',
                '<td class="east">&nbsp;</td>',
            '</tr>',        
            '<tr class="outlineMexico">',
                '<td class="west">&nbsp;</td>',
                '<td class="center">&nbsp;</td>',
                '<td class="east">&nbsp;</td>',
            '</tr>');
        
        self.dialog_table = $('<table/>')
                            .addClass('dialogTableWrapper')
                            .html(table_html.join(""))
                            .appendTo(self.dialog)
        
        // Close button
        self.close_button = $('<a/>')
                            .attr('class', 'dialogCloseButton')
                            .text('CLOSE')
                            .click(function() {
                                self.close(); })
                            .appendTo(self.dialog);
        
        // Build the content
        self.dialog_content = $('<div/>').attr('class', 'dialogBody');
        
        var dialog_body;
        if (typeof(self.options.content) == 'string') {
            dialog_body = self.options.content;
        } else if (!(self.options.content.constructor.toString().indexOf("Array") == -1)) {
            dialog_body = self.options.content.join("");
        } else if (self.options.content instanceof jQuery) {
            dialog_body = false;
        }
        
        if (dialog_body) {
            self.dialog_content.html(dialog_body);
        } else {
            self.options.content.appendTo(self.dialog_content);
        }
        
        self.dialog_content.appendTo('#dialogInnerBody');

        // Display the dialog
        self.display();
        
        // Init any bound events -- XXX not useful at this time
        // ZG.initEvents();
        
        // If there is a callback, handle that now
        if (self.options.callback) {
            self.options.callback.call(self);
        }
        
        $('a.dialogClose').click(function() {
            self.close();
        });
        
        // Finally, add the dialog to the stack
        ZG.dialogs.push(self);
        
    },
    
    display: function() {
        var self = this;
        
        if (self.options.width) {
            self.dialog.css({ marginLeft: -self.options.width/2 })
        };
        
        // Animate the dialog into place, setting the correct properties to vertically center it
        // self.dialog.animate({ top: '100px' }, 600);
        self.dialog.animate({ top: '50%', marginTop: -(self.dialog.height()/2) }, 600);
        
        $('#dialogOverlay').fadeIn('fast').click(function() {
            self.close();
        });
    },
    
    close: function() {
        var self = this;
        
        // Slide the dialog out of the window
        self.dialog.animate({ top: '150%' }, 500);
        
        // Fade out the dialog overlay, and when that is finished, remove the actual dialog from the DOM
        $('#dialogOverlay').fadeOut('fast', function () {
            self.dialog.remove();
        });
        
    },
    
    displayError: function(error) {
        var self = this;
        // self.error = $('<div/>').attr('class', 'dialogError').text(error).prependTo(self.dialog_content).slideDown('fast');
        console.log(error);
    },
    
    clearErrors: function() {
        var self = this;
        if (self.error)
            self.error.slideUp('fast');
        
        $('span.msg.error').slideUp('fast', function() {
            $(this).remove();
        });
    },
    
    reposition: function(speed) {
        var self = this,
            height = self.dialog.height();
        
        speed = (self.options.speed) ? self.options.speed : 400;
            
        self.dialog.animate({ marginTop: -(height/2) }, speed);
    }
    
};

// Bootstrap the dialogging system, which means add the dialog to the page.
$('body').prepend('<div id="dialogOverlay"></div>');