/// class PD.Web.UI.DocumentViewerDialog
/// using PD.Web.UI.Dialog

PD.Web.UI.DocumentViewerDialog =
PD.Web.UI.Dialog.extend({

    //================================
    // FIELDS
    //================================

    _editor: null,
    
    //================================
    // PROPERTIES
    //================================
    
    get_aceElement: function () {
        return this.get_node().find("div[data-role=ace-editor]");
    },

    get_closeButton: function () {
        return this.get_node().find("button[data-role=close]");
    },

    //================================
    // EVENT HANDLERS
    //================================
    
    onActivate: function () {

        var that = this;
        var loadCallback = this.get_options().load;
        
        ace.config.set("basePath", PD.Path.resolve("~/areas/shared/assets/external/ace"));
        this._editor = ace.edit(this.get_aceElement()[0]);
        this._editor.renderer.setShowPrintMargin(false);
        this._editor.setShowFoldWidgets(false);
        this._editor.getSession().setUseSoftTabs(false);
        this._editor.setTheme(this._getStyleTheme());
        this._editor.session.setMode({ path: this._getStyleMode(), v: Date.now() });
        this._editor.setReadOnly(true);
        this._editor.setOptions({
            fontSize: "11pt",
            highlightActiveLine: false
        });

        this.get_closeButton().on("click", _.bind(function (e) {
            this.close();
        }, this));

        if (_.isFunction(loadCallback)) {
            loadCallback({
                setContent: function (value) {
                    that._editor.setValue(value);
                    that._editor.gotoLine(0, 0);
                }
            });
        }

        setTimeout(function () {
            that._setDefaultFocus();
        }, 100);
        
    },

    //================================
    // PROTECTED METHODS
    //================================
    
    getDefaultOptions: function (options) {
        return {
            title: "Document Viewer",
            width: this._occupyWidth(.8),
            height: this._occupyHeight(.8),
            contentType: "text",
            load: function () { },
            resizable: true
        }
    },

    template: function () {
        return [
            "<div class='-pd-document-viewer-dialog'>",
                "<div data-role='ace-editor'>",
                "</div>",
                "<div class='-pd-dialog-button-deck'>",
                    "<button class='-pd-button' data-role='close'>Close</button>",
                "</div>",
            "</div>"
        ];
    },
    
    //================================
    // PRIVATE METHODS
    //================================

    _setDefaultFocus: function () {
        this.get_node().find("button:first").focus();
    },
    
    _getStyleTheme: function () {
        
        return this._parseContentType({
            "html": "ace/theme/chrome",
            "javascript": "ace/theme/chrome",
            "plain": "ace/theme/chrome",
            "css": "ace/theme/tomorrow",
            "xml": "ace/theme/sqlserver"
        }, this.get_options().contentType, "style", "plain");
        
    },

    _getStyleMode: function () {
        
        return this._parseContentType({
            "html": "ace/mode/html",
            "javascript": "ace/mode/javascript",
            "plain": "ace/mode/text",
            "css": "ace/mode/css",
            "xml": "ace/mode/xml"
        }, this.get_options().contentType, "mode", "plain");

    },

    _parseContentType: function (themes, content, property, defaultType) {

        switch (true) {
            case _.isObject(content):
                result = content[property];
                break;
            case _.isString(content):
                result = themes[content] || themes[defaultType];
                break;
            default:
                result = themes[defaultType];
                break;
        }

        result = result || themes[defaultType];

        return result;

    },

    _occupyWidth: function (percent) {

        var width = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;

        return (width * percent);

    },

    _occupyHeight: function (percent) {

        var height = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;

        return (height * percent);

    }
        
});

//================================
// STATIC METHODS
//================================

PD.Web.UI.DocumentViewerDialog.open = function (options) {
    return new PD.Web.UI.DocumentViewerDialog(options);
};