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

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

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

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

    get_seriesType: function () {
        return this.get_element().find("[data-id=SeriesType]");
    },

    get_chartTitle: function () {
        return this.get_element().find("[data-id=ChartTitle]");
    },

    get_templateId: function () {
        return this.get_element().find("[data-id=TemplateId]");
    },

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

    _seriesType_onChange: function () {
        this.setValue("seriesType", this.get_seriesType().val());
    },

    _chartTitle_onBlur: function () {
        this.getValue("generalStyle").title.text = this.get_chartTitle().val();
    },

    _templateId_onChange: function () {
        this.setValue("templateId", this.get_templateId().val());
        this.setValue("templateIsDocumentBased", this.isTemplateDocumentBased());
        this.get_eventBus().publish("reload-target");
    },

    _styleButton_onClick: function () {

        var that = this;

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

    },

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

    activate: function () {

        var that = this;

        this.get_chartTitle().on("blur", $.proxy(this._chartTitle_onBlur, this));
        this.get_seriesType().on("change", $.proxy(this._seriesType_onChange, this));
        this.get_styleButton().on("click", $.proxy(this._styleButton_onClick, this));
        this.get_templateId().on("change", $.proxy(this._templateId_onChange, this));

        this._populateTemplateId();

        this.get_seriesType().val(this.getValue("seriesType"));
        this.get_chartTitle().val(this.getValue("generalStyle").title.text);
        this.get_templateId().val(this.getValue("templateId"));

    },

    render: function () {

        var result = "" +

        "<div id=\"" + this.getId() + "\" style=\"padding:10px;\">" +
        "<label for=\"SeriesType\" class=\"-pd-macro-editor-label\">Chart Type:</label><br/>" +
            "<select data-id=\"SeriesType\" style=\"width:300px;\">" +
                "<option value=\"area\">Area</option>" +
                "<option value=\"bar\">Bar</option>" +
                "<option value=\"column\">Column</option>" +
                "<option value=\"line\">Line</option>" +
            "</select>" +
        "<br/>" +
        "<br/>" +
        "<label for=\"ChartTitle\" class=\"-pd-macro-editor-label\">Chart Title:</label><br/>" +
        "<input data-id=\"ChartTitle\" type=\"text\" style=\"width:300px;\" />" +
        "<br/>" +
        "<br/>" +
        "<label for=\"TemplateId\" class=\"-pd-macro-editor-label\">Chart Data From:</label><br/>" +
        "<select data-id=\"TemplateId\" type=\"text\" style=\"width:300px;\"></select>" +
        "<br/>" +
        "<br/>" +
        "<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;

    },

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

    _populateTemplateId: function () {

        var that = this,
            templates = new ProspectDirector.Web.List(this.getValue("templates"));

        templates.each(function (index, template) {
            that.get_templateId().append("<option value=\"" + template.id + "\">" + template.name + "</option>");
        });

    },

    isTemplateDocumentBased: function () {

        var result = false,
            id = this.getValue("templateId"),
            templates = new ProspectDirector.Web.List(this.getValue("templates"));

        id = id * 1;

        templates.each(function (index, template) {
            if (template.id == id) {
                result = template.isDocumentBased;
                return false;
            }
        });

        return result;

    }

});