/// class ProspectDirector.Web.UI.Canvas.Charts.ChartCategoriesFeature
/// using ProspectDirector.Web.UI.FeatureSets.MacroEditorBase

/**
@class ChartCategoriesFeature
@constructor
@namespace Web.UI.Canvas.Charts
@extends Web.UI.FeatureSets.MacroEditorBase
**/
ProspectDirector.Web.UI.Canvas.Charts.ChartCategoriesFeature = ProspectDirector.Web.UI.FeatureSets.MacroEditorBase.extend({

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

    _editor: null,
    _toolbar: null,

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

    get_styleButton: function () {
        return this.get_container().find("BUTTON[data-id=style]");
    },

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

    _editor_onChange: function () {
        this._toolbar.update(this._editor.get_selections());
    },

    _styleButton_onClick: function () {

        var that = this;

        ProspectDirector.Web.UI.FeatureSets.JsonTargetEditorDialog.open({
            config: {
                title: "Category Axis Styles",
                height: 500,
                width: 450
            },
            data: {
                targetType: "ProspectDirector.Web.UI.Canvas.Elements.Charts.CategoryAxisStyle",
                targetData: this.getValue("categoryAxis"),
                layoutType: ProspectDirector.Web.UI.FeatureSets.Layouts.TabStripLayout
            },
            callbacks: {
                ok: function (sender, e) {
                    that.setValue("categoryAxis", e.target);
                }
            }
        });

    },

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

    activate: function () {

        var that = this;

        this._editor = new ProspectDirector.Web.UI.Canvas.Charts.FieldList({
            container: this.get_container().find("DIV[data-id=grid]"),
            fieldType: "categoryFields",
            getBaseFields: function () {
                return that.get_feature().get_featureSet().getValue("fields");
            },
            getFieldSource: function () {
                return that.getValue("categoryFields");
            },
            setFieldSource: function (value) {
                that.setValue("categoryFields", value);
            },
            change: function (selections) {
                that._toolbar.load(selections.get_selections());
            },
            dblclick: function (selection) {

                var command = new ProspectDirector.Web.UI.Canvas.Charts.EditCategoryField({
                    feature: that.get_feature(),
                    editor: that._editor
                });

                command.execute();

            }
        });

        this._toolbar = new ProspectDirector.Web.UI.Canvas.Charts.FieldListToolBar({
            container: this.get_container().find("DIV[data-id=toolbar]"),
            editor: this._editor,
            feature: this.get_feature()
        });

        this.get_styleButton().on("click", $.proxy(this._styleButton_onClick, this));

    },

    render: function () {

        var result = "" +

        "<div id=\"" + this.getId() + "\" style=\"padding:10px;\">" +
            "<div class=\"-pd-macro-editor-description\">" +
            "Category fields set how data will be \"grouped\" in your chart and the values shown along the category axis.  Click the \"Add\" button below to begin adding category fields." +
            "</div>" +
            "<div data-id=\"toolbar\" style=\"height:30px;margin-bottom:5px;\"></div>" +
            "<div data-id=\"grid\" style=\"border:1px solid #AAAAAA;margin-right:20px;margin-bottom:10px;\">" +
            "</div>" +
            "<button data-id=\"style\" class=\"pd-button\"><img src=\"" + ProspectDirector.RUNTIME.resolveUrl("~/application/icons/16x16/WINDOW_FONT.PNG") + "\" style=\"vertical-align:middle;\"/>&nbsp;Style...</button>" +
        "<div>";

        return result;

    },

    size: function (e) {

        this.get_element().height(e.height);
        this.get_element().width(e.width);

        if (this._editor) {
            this._editor.resize(e.height - 108, e.width - 2);
        }

    }

});