JS Class

var UIDialog = makeClass();

UIDialog.prototype.init = function(options) {

    var dialog = this;

    dialog.defaultOptions = {
        type: 'Error',
        content: null,
        buttons: null
    }

    dialog.options = $.extend({}, dialog.defaultOptions, options);

    switch(dialog.options.type) {

        case 'Error':

            dialog.content  = '<h1>Advarsel</h1>';
            dialog.content += '<h2>Er du sikker på at du vil fortsætte med sletningen?</h2>';
            dialog.content += '<h3>(De slettede data vil ikke være til at gendanne)</h3>';

            dialog.options = {
                content: dialog.content,
                buttons: [
                    { text: 'Annuller', type: 'Cancel' },
                    { text: 'Fortsæt', type: 'Proceed' }
                ]
            }

        break;

    }

    dialog.buttons = $('<div class="dialog-box-footer-buttons"></div>');

    for(var index = 0; index < dialog.options.buttons.length; index++) {

        dialog.button  = '<div class="dialog-box-footer-button">';
        dialog.button +=     '<div>' + dialog.options.buttons[index].text + '</div>';
        dialog.button += '</div>';

        switch(dialog.options.buttons[index].type) {

            case 'Cancel':

                dialog.buttonAction = function() {

                    //dialog.close();

                    return false;

                };

            break;

            case 'Proceed':

                dialog.buttonAction = function() {

                    //dialog.close();

                    return true;

                };

            break;

        }

        dialog.buttons.append($(dialog.button).click(dialog.buttonAction));

    }

    dialog.markup  = '<div class="dialog-box">';
    dialog.markup +=     '<div class="dialog-box-header">';
    dialog.markup +=         '<div class="dialog-box-header-left"></div>';
    dialog.markup +=         '<div class="dialog-box-header-right"></div>';
    dialog.markup +=         '<div class="dialog-box-header-middle"></div>';
    dialog.markup +=     '</div>';
    dialog.markup +=     '<div class="dialog-box-content">';
    dialog.markup +=         '<div class="dialog-box-content-left">';
    dialog.markup +=         '<div class="dialog-box-content-right">';
    dialog.markup +=         '<div class="dialog-box-content-middle">';
    dialog.markup +=             dialog.options.content;
    dialog.markup +=         '</div>';
    dialog.markup +=         '</div>';
    dialog.markup +=         '</div>';
    dialog.markup +=     '</div>';
    dialog.markup +=     '<div class="dialog-box-footer">';
    dialog.markup +=         '<div class="dialog-box-footer-left"></div>';
    dialog.markup +=         '<div class="dialog-box-footer-right"></div>';
    dialog.markup +=         '<div class="dialog-box-footer-middle"></div>';
    dialog.markup +=     '</div>';
    dialog.markup += '</div>';

    dialog.elements = $('#dialog-background').html(dialog.markup);
    dialog.elements.find('.dialog-box-footer-middle').html(dialog.buttons);
    dialog.elements.show();

};