/// class ProspectDirector.Web.UI.FeatureSets.Editors.ColorEditor
/// using ProspectDirector.Web.UI.FeatureSets.Editors.CompositeEditor

/**
[NEEDS DOCUMENTATION]
@constructor
@class ColorEditor
@namespace Web.UI.FeatureSets.Editors
@extends Web.UI.FeatureSets.Editors.CompositeEditor
**/
ProspectDirector.Web.UI.FeatureSets.Editors.ColorEditor = ProspectDirector.Web.UI.FeatureSets.Editors.CompositeEditor.extend({

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

    get_input: function () {
        return this.get_element().find("INPUT[type=text]");
    },

    /**
    The DOM node that displays the color currently selected or associated with the editor.
    @protected
    @property get_swatch
    @type {jQuery}
    **/
    get_swatch: function () {
        return this.get_element().find(".swatch");
    },

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

    _input_onKeyUp: function () {

        var value = this.get_input().val();

        this.updateUI(value);

        this.setPrimaryValue(value);

    },

    _button_onClick: function () {

        var that = this;

        ProspectDirector.Web.UI.FeatureSets.Editors.ColorEditorDialog.open({
            config: {
                title: "Color Editor - " + this.get_definition().get_data().label
            },
            data: {
                hex: this.getPrimaryValue()
            },
            callbacks: {
                ok: function (sender, e) {
                    that.setPrimaryValue(e);
                    that.updateUI(e);
                    that.get_input().val(e);
                }
            }
        });

    },

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

    updateUI: function (value) {

        var allowsTransparency = this.get_definition().get_data()["allowTransparency"];

        if (allowsTransparency && (value === "" || value === null)) {
            this.get_swatch().addClass("transparent");
        }
        else {
            this.get_swatch().removeClass("transparent");
        }

        this.get_swatch().css({
            backgroundColor: value
        });

        this.get_eventBus().publish("color-editor/value/change", { name: this.get_definition().get_name(), value: value });
        
    },

    //==============================
    // OVERRIDDEN METHODS
    //==============================

    activate: function () {
        this._super();
        this.get_input().on("keyup", $.proxy(this._input_onKeyUp, this));
        this.get_input().val(this.getPrimaryValue());
        this.updateUI(this.getPrimaryValue());
    },

    render: function () {
        return "<div id=\"" + this.getId() + "\" class=\"-pd-micro-editor-composite color-picker\">" +
                "<div class=\"swatch\">&nbsp;</div>" +
                "<input type=\"text\" maxlength=\"7\">" +
                "<input type=\"button\" value=\"...\">" +
                "</div>";
    }

});