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

/**
@class ChartValuesFeature
@constructor
@namespace Web.UI.Canvas.Charts
@extends Web.UI.FeatureSets.MacroEditorBase
**/
ProspectDirector.Web.UI.Canvas.Charts.ChartValuesFeature = 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: "Value Axis Styles",
                height: 500,
                width: 450
            },
            data: {
                targetType: "ProspectDirector.Web.UI.Canvas.Elements.Charts.ValueAxisStyle",
                targetData: this.getValue("valueAxis"),
                layoutType: ProspectDirector.Web.UI.FeatureSets.Layouts.TabStripLayout
            },
            callbacks: {
                ok: function (sender, e) {
                    that.setValue("valueAxis", 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: "valueFields",
            getBaseFields: function () {
                return that.get_feature().get_featureSet().getValue("fields");
            },
            getFieldSource: function () {
                return that.getValue("valueFields");
            },
            setFieldSource: function (value) {
                that.setValue("valueFields", value);
            },
            change: function (selection) {
                that._toolbar.load(selection.get_selections());
            },
            dblclick: function (selection) {

                var command = new ProspectDirector.Web.UI.Canvas.Charts.EditValueField({
                    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\">" +
            "Value fields set the data used to create the data points on your chart and the values displayed on the value axis.  Click the \"Add\" button below to begin adding value 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);
        }

    },

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

    _commitFieldEdit: function (sender, e) {

        var index = 0,
            fields = this.getValue("valueFields");

        for (index; index < fields.length; index++) {
            if (e.target.id === fields[index].id) {
                fields[index] = e.target;
            }
        }

        this._editor.refresh();

    }

});