/// class ProspectDirector.Web.UI.FeatureSets.TargetEditorDialogDOM
/// using ProspectDirector.Web.UI.Dialog

/**
@class TargetEditorDialogDOM
@namespace Web.UI.FeatureSets
@constructor
@extends Web.UI.Dialog
**/
ProspectDirector.Web.UI.FeatureSets.TargetEditorDialogDOM = Class.extend({

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

    _options: null,
    _containerNode: null,
    _contentNode: null,
    _waitScreen: null,

    //================================
    // CONSTRUCTOR
    //================================

    init: function (options) {
        this._options = options;
    },

    //================================
    // PROPERTIES
    //================================

    /**
    @property get_id {GUID}
    **/
    get_id: function () {
        return this._options.id;
    },

    /**
    @property get_containerNode {jQuery}
    **/
    get_containerNode: function () {
        this._ensureContainerNode();
        return this._containerNode;
    },

    /**
    @property get_contentNode {jQuery}
    **/
    get_contentNode: function () {
        this._ensureContentNode();
        return this._contentNode;
    },

    /**
    @property get_buttonDeckCustomNode {jQuery}
    **/
    get_buttonDeckCustomNode: function () {
        return this.get_contentNode().find(".-pd-button-deck > [data-id=button-deck-custom]");
    },

    /**
    @property get_cancelButton {jQuery}
    **/
    get_cancelButton: function () {
        return this.get_contentNode().find("INPUT[type=button][value=Cancel]");
    },

    /**
    @property get_okButton {jQuery}
    **/
    get_okButton: function () {
        return this.get_contentNode().find("INPUT[type=button][value=OK]");
    },

    //================================
    // EVENT HANDLERS
    //================================

    _okButton_onClick: function (e) {

        var fn = this._options["commit"];

        if ($.isFunction(fn)) {
            fn();
        }

    },

    _cancelButton_onClick: function (e) {

        var fn = this._options["cancel"];

        if ($.isFunction(fn)) {
            fn();
        }

    },

    _input_onKeyPress: function (e) {

        var that = this,
            $node = $(e.currentTarget);

        if (e.which === 13) {

            $node.blur();

            setTimeout(function () {
                that._okButton_onClick(e);
            }, 100);

        }

    },

    //================================
    // PRIVATE METHODS
    //================================

    _ensureContainerNode: function () {
        if (this._containerNode === null) {
            this._containerNode = $("#" + this.get_id());
        }
    },

    _ensureContentNode: function () {
        if (this._contentNode === null) {
            this._contentNode = this.get_containerNode().find(".k-window-content");
        }
    },

    _showWaitMessage: function () {

        if (this._waitScreen == null) {
            this._waitScreen = new PD.Web.UI.Controls.WaitScreen({
                container: this.get_contentNode(),
                message: ""
            });
        }

    },

    _hideWaitMessage: function () {

        if (this._waitScreen != null) {
            this._waitScreen.remove();
            this._waitScreen = null;
        }

    },

    //================================
    // PUBLIC METHODS
    //================================

    activate: function () {

        this.eventHandlerRegistration(false);
        this.eventHandlerRegistration(true);

    },

    addDeckItem: function (item) {
        this.get_buttonDeckCustomNode().append(item);
        this.get_buttonDeckCustomNode().append("&nbsp;");
    },

    block: function () {
        this.get_okButton().attr("disabled", "disabled");
        this._showWaitMessage();
        
    },

    unblock: function () {
        //TODO: Remove the content node.
        this.get_okButton().removeAttr("disabled");
        this._hideWaitMessage();
    },

    render: function (content) {

        var template = this.template(content);
        this.get_contentNode().empty();
        this.get_contentNode().append(template);

    },

    template: function (content) {

        var $template = $("<div class=\"-pd-target-editor\"></div>"),
            $layout = $(content),
            $buttonDeck = $("<div class=\"-pd-button-deck\"></div>"),
            $buttonDeckCustom = $("<div data-id=\"button-deck-custom\"></div>"),
            $buttonDeckStatic = $("<div></div>"),
            $okButton = $("<input type=\"button\" value=\"OK\" class=\"pd-button\" />"),
            $cancelButton = $("<input type=\"button\" value=\"Cancel\" class=\"pd-button\" />");

        $buttonDeckCustom.css({
            position: "absolute",
            top: "0px",
            left: "10px",
            right: "260px",
            textAlign: "left",
            boxSizing: "border-box"
        });

        $buttonDeckStatic.css({
            position: "absolute",
            top: "0px",
            right: "10px",
            width: "250px",
            boxSizing: "border-box"
        });

        $buttonDeckStatic.append($okButton);
        $buttonDeckStatic.append("&nbsp;");
        $buttonDeckStatic.append($cancelButton);

        $buttonDeck.append($buttonDeckCustom);
        $buttonDeck.append($buttonDeckStatic);

        $template.append($layout);
        $template.append($buttonDeck);

        return $template;

    },

    eventHandlerRegistration: function (on) {

        var attr = on ? "on" : "off";

        this.get_okButton()[attr]("click", $.proxy(this._okButton_onClick, this));
        this.get_cancelButton()[attr]("click", $.proxy(this._cancelButton_onClick, this));
        this.get_containerNode()[attr]("keypress", "INPUT[type!=button][type!=submit],SELECT", $.proxy(this._input_onKeyPress, this));

    }

});