///////////////////////////////////////////////////////////////////////////
// Copyright © 2014 - 2018 Esri. All Rights Reserved.
//
// Licensed under the Apache License Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///////////////////////////////////////////////////////////////////////////

define([
  'dojo/_base/declare',
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  'dijit/_WidgetsInTemplateMixin',
  'dojo/text!./templates/RendererChooser.html',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/on',
  'dojo/query',
  'dojox/gfx',
  'dojo/_base/Color',
  'jimu/symbolUtils',
  'jimu/rendererUtils',
  'esri/renderers/SimpleRenderer',
  'esri/renderers/UniqueValueRenderer',
  'esri/renderers/ClassBreaksRenderer',
  'esri/symbols/jsonUtils',
  'esri/symbols/SimpleMarkerSymbol',
  'jimu/dijit/CheckBox',
  'dijit/form/Select',
  'dijit/form/ComboBox',
  'dijit/form/NumberSpinner',
  'dijit/form/NumberTextBox',
  'jimu/dijit/SymbolChooser'
],
function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin,
  template, lang, html, array, on, query, gfx, Color,
  symbolUtils, rendererUtils, SimpleRenderer, UniqueValueRenderer,
  ClassBreaksRenderer, jsonUtils, SimpleMarkerSymbol, CheckBox) {

  return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
    templateString: template,
    baseClass: 'jimu-renderer-chooser',
    declaredClass: 'jimu.dijit.RendererChooser',
    renderer: null,
    type: null,//available values:marker,line,fill
    nls: null,
    fields: null,

    //public methods:
    //getRenderer
    //showByRenderer
    //showByType
    //reset

    _uniqueColors:{
      color1:['#fce138', '#fff799', '#fcd27e', '#f1983c',
              '#a553b7', '#b1a9d0', '#6ecffc', '#4c81cd',
              '#fc6f84', '#fc3e5a', '#69f488', '#48885c'],
      color2:['#102432', '#144d59', '#ffc754', '#ea9010',
              '#a54e1d', '#661510', '#d8341a', '#b31515',
              '#4a0932', '#8c213f', '#18382e', '#2c6954'],
      color3:['#be9626', '#607100', '#00734c', '#704489',
              '#01acca', '#024e76', '#f09100', '#ea311f',
              '#c6004b', '#7570b3', '#666666', '#333333'],
      color4:['#fffa00', '#f5cb11', '#9fd40c', '#46e29c',
              '#32b8a6', '#7ff2fa', '#ad00f2', '#c461ea',
              '#eb7200', '#e8a784', '#bf2e2e', '#6c7000'],
      color5:['#191921', '#11495c', '#78b1c2', '#454f4b',
              '#8f8f82', '#99dbbc', '#87b051', '#f7ec88',
              '#ebdcc1', '#dbb658', '#c43541', '#75351e'],
      color6:['#332424', '#751555', '#d47013', '#d68989',
              '#211173', '#82aad6', '#7bfaeb', '#6ec9a8',
              '#6b6408', '#e9da40', '#ccc54a', '#1fc235']
    },
    _classBreaksColors:{
      color1: ['#eaf0fd', '#03519e'],
      color2: ['#ebf9e7', '#046e2e'],
      color3: ['#f5f5f5', '#2a2a2a'],
      color4: ['#ffeddd', '#a83a00'],
      color5: ['#f2eef6', '#582890'],
      color6: ['#ffe3d7', '#a71713'],
      color7: ['#ecf7fb', '#006d2a'],
      color8: ['#edf8fa', '#83067e'],
      color9: ['#eef9e8', '#0167af'],
      color10: ['#fff1d7', '#b80201'],
      color11: ['#f0eef6', '#015b90'],
      color12: ['#f5eff7', '#006dfa'],
      color13: ['#f1eef7', '#9c0042'],
      color14: ['#ffebe2', '#7d0078'],
      color15: ['#ffffc9', '#016a35'],
      color16: ['#ffffcb', '#253197'],
      color17: ['#fffed1', '#9e3601'],
      color18: ['#ffffad', '#c20120'],
      color19: ['#a9620d', '#038772'],
      color20: ['#d3168c', '#46ae1b'],
      color21: ['#7c2d96', '#048936'],
      color22: ['#eb6300', '#603b9b'],
      color23: ['#cc0117', '#0471b2'],
      color24: ['#ce0118', '#424242'],
      color25: ['#db1a10', '#287cba'],
      color26: ['#da1baf', '#03983e'],
      color27: ['#db1a10', '#2483bb']
    },
    _selectedUniqueValueTr:null,
    _selectedClassBreakTr:null,
    _isDrawing:false,
    _showOthersSymbol: true,
    _jimuUrl:window.location.protocol + "//" + window.location.host + require.toUrl("jimu"),

    postMixInProperties:function(){
      if(!this.fields){
        this.fields = [];
      }
      this.nls = window.jimuNls.rendererChooser;
      this.inherited(arguments);
    },

    postCreate:function(){
      this.inherited(arguments);
      this._initFields();
      this.own(on(this.rendererSelect, 'change', lang.hitch(this, this._onRendererSelectChange)));
      this.own(on(this.defaultSymbolChooser, 'change', lang.hitch(this, this._onDefaultSymbolChange)));
      this.own(on(this.selectedSymbolChooser, 'change', lang.hitch(this, this._onSelectedSymbolChange)));
      this._bindUniqueSettingEvents();
      this._bindClassBreaksEvents();
      if(this.renderer){
        if (!this.renderer.defaultSymbol) {
          this._showOthersSymbol = false;
        } else {
          this._showOthersSymbol = true;
        }
        this.showByRenderer(this.renderer);
      }
      else if(this.type){
        this.showByType(this.type);
      }
      this._onRendererSelectChange();
    },

    getRenderer:function(){
      var renderer = null;
      var value = this.rendererSelect.get('value');
      if(value === 'simple'){
        renderer = this._getSimpleRenderer();
      }
      else if(value === 'unique'){
        renderer = this._getUniqueValueRenderer();
      }
      else if(value === 'color' || value === 'size'){
        renderer = this._getClassBreaksRenderer();
      }
      return renderer;
    },

    reset: function(){
      this.renderer = null;
      this.type = null;
      html.setStyle(this.domNode, 'display', 'none');
    },

    showByRenderer:function(renderer){
      this.reset();
      html.setStyle(this.domNode, 'display', 'block');
      this.renderer = renderer;
      this.type = null;
      var defaultSymbol = this.renderer && (this.renderer.defaultSymbol || this.renderer.symbol);
      if (!defaultSymbol && this.renderer && this.renderer.infos && this.renderer.infos.length > 0) {
        // Take the first one as default symbol, since some functionality doesn't work without this.
        defaultSymbol = this.renderer.infos[0].symbol;
      }
      this._setDefaultSymbol(defaultSymbol);
      this._updateRendererSelect();

      if(rendererUtils.isSimpleRenderer(this.renderer)){
        this.rendererSelect.set('value', 'simple');
      }
      else if(rendererUtils.isUniqueValueRenderer(this.renderer)){
        this._showUniqueValueRenderer(this.renderer);
      }
      else if(rendererUtils.isClassBreaksRenderer(this.renderer)){
        this._showClassBreaksRenderer(this.renderer);
      }
      else{
        this.showByType(this.type);
      }

      var defaultSym = this.defaultSymbolChooser.getSymbol();
      if(defaultSym){
        this._onDefaultSymbolChange(defaultSym);
      }
    },

    showByType:function(type){
      this.reset();
      this.renderer = null;
      this.type = null;
      if(type !== 'marker' && type !== 'line' && type !== 'fill'){
        return;
      }
      html.setStyle(this.domNode, 'display', 'block');
      this.type = type;
      this.defaultSymbolChooser.showByType(type);
      this._updateRendererSelect();

      var defaultSym = this.defaultSymbolChooser.getSymbol();
      if(defaultSym){
        this._onDefaultSymbolChange(defaultSym);
      }
    },

    _setDefaultSymbol:function(defaultSymbol){
      this.type = null;

      if(!defaultSymbol){
        return;
      }

      if(symbolUtils.isSimpleMarkerSymbol(defaultSymbol) ||
         symbolUtils.isPictureMarkerSymbol(defaultSymbol)){
        this.type = 'marker';
      }
      else if(symbolUtils.isSimpleLineSymbol(defaultSymbol)){
        this.type = 'line';
      }
      else if(symbolUtils.isSimpleFillSymbol(defaultSymbol)){
        this.type = 'fill';
      }

      if(this.type){
        this.defaultSymbolChooser.showBySymbol(defaultSymbol);
      }
    },

    _getDefaultSymbolTr: function() {
      var value = this.rendererSelect.get('value');
      var targetNode;
      if (value === 'unique') {
        targetNode = this.uniqueSysTbody;
      } else if (value === 'color' || value === 'size') {
        targetNode = this.classBreaksTbody;
      }
      if (!targetNode) {
        return null;
      }
      var symbolTrs = query('.default-symbol-tr', targetNode);
      if (symbolTrs.length === 0) {
        return null;
      }
      return symbolTrs[0];
    },

    _onDefaultSymbolChange: function(newSymbol){
      var tr = this._getDefaultSymbolTr();
      if(tr){
        tr.symbol = newSymbol;
        var symbolDiv = query('.symbol-div', tr)[0];
        this._drawSymbolPreview(symbolDiv, newSymbol);
      }
    },

    _setDefaultSymbolStatus: function(status) {
      var tr = this._getDefaultSymbolTr();
      if(tr){
        if (tr.checkbox.getStatus() !== status) {
          if (status) {
            tr.checkbox.setStatus(status);
          } else {
            this._showOthersSymbol = true;
            tr.checkbox.setValue(true);
            tr.checkbox.setStatus(status);
          }
        }
      }
    },

    _updateRendererSelect:function(){
      var sizeOption = this.rendererSelect.getOptions('size');
      if(this.type === 'marker'){
        if(!sizeOption){
          this.rendererSelect.addOption({
            value:'size',
            label:'Size'
          });
        }
      }
      else if(this.type === 'line' || this.type === 'fill'){
        if(sizeOption){
          this.rendererSelect.removeOption(sizeOption);
        }
      }
    },

    _initFields:function(){
      if(this.fields && this.fields.length > 0){
        var first = '';
        array.forEach(this.fields, lang.hitch(this, function(field){
          if(field && typeof field === 'string'){
            if(!first){
              first = field;
            }
            this._addField(field);
          }
        }));
        if(first && !this.fieldComboBox.get('displayedValue')){
          this.fieldComboBox.set('displayedValue', first);
        }
      }
    },

    _addField:function(field){
      this.fieldComboBox.get('store').add({name:field});
    },

    _onRendererSelectChange:function(){
      var value = this.rendererSelect.get('value');
      this._showDefaultSymbol();
      if(value === 'simple'){
        html.setStyle(this.fieldSelectTr, 'display', 'none');
        html.setStyle(this.colorBlockTr, 'display', 'none');
        html.setStyle(this.colorBarTr, 'display', 'none');
        html.setStyle(this.domainTr, 'display', 'none');
        html.setStyle(this.classCountTr, 'display', 'none');
        html.setStyle(this.uniqueSetting, 'display', 'none');
        html.setStyle(this.classBreaksSetting, 'display', 'none');
        html.setStyle(this.symbolSizeDomainTr, 'display', 'none');
      }
      else if(value === 'unique'){
        html.setStyle(this.fieldSelectTr, 'display', 'table-row');
        html.setStyle(this.colorBlockTr, 'display', 'table-row');
        html.setStyle(this.colorBarTr, 'display', 'none');
        html.setStyle(this.domainTr, 'display', 'none');
        html.setStyle(this.classCountTr, 'display', 'none');
        html.setStyle(this.uniqueSetting, 'display', 'block');
        html.setStyle(this.classBreaksSetting, 'display', 'none');
        html.setStyle(this.symbolSizeDomainTr, 'display', 'none');
        this._updateUniqueValueDivVisibility();
      }
      else if(value === 'color'){
        html.setStyle(this.fieldSelectTr, 'display', 'table-row');
        html.setStyle(this.colorBlockTr, 'display', 'none');
        html.setStyle(this.classCountTr, 'display', 'table-row');
        html.setStyle(this.domainTr, 'display', 'table-row');
        html.setStyle(this.colorBarTr, 'display', 'table-row');
        html.setStyle(this.uniqueSetting, 'display', 'none');
        html.setStyle(this.symbolSizeDomainTr, 'display', 'none');
        this._updateClassBreaksSettingVisibility();
      }
      else if(value === 'size'){
        html.setStyle(this.fieldSelectTr, 'display', 'table-row');
        html.setStyle(this.colorBlockTr, 'display', 'none');
        html.setStyle(this.colorBarTr, 'display', 'none');
        html.setStyle(this.domainTr, 'display', 'table-row');
        html.setStyle(this.classCountTr, 'display', 'table-row');
        html.setStyle(this.uniqueSetting, 'display', 'none');
        html.setStyle(this.symbolSizeDomainTr, 'display', 'table-row');
        this._updateClassBreaksSettingVisibility();
      }
    },

    _showDefaultSymbol:function(){
      html.setStyle(this.defaultSymSection, 'display', 'block');
      html.setStyle(this.selectedSymSection, 'display', 'none');
    },

    _showSelectedSymbol:function(symbol){
      html.setStyle(this.defaultSymSection, 'display', 'none');
      html.setStyle(this.selectedSymSection, 'display', 'block');
      var value = this.rendererSelect.get('value');
      if(value === 'simple'){
        html.setStyle(this.uniqueSelectedSymInfoSet, 'display', 'none');
        html.setStyle(this.classBreaksSelectedInfoSet, 'display', 'none');
      }
      else if(value === 'unique'){
        html.setStyle(this.uniqueSelectedSymInfoSet, 'display', 'block');
        html.setStyle(this.classBreaksSelectedInfoSet, 'display', 'none');
      }
      else if(value === 'color' || value === 'size'){
        html.setStyle(this.uniqueSelectedSymInfoSet, 'display', 'none');
        html.setStyle(this.classBreaksSelectedInfoSet, 'display', 'block');
      }
      this.selectedSymbolChooser.showBySymbol(symbol);
    },

    _onSelectedSymbolChange:function(newSymbol){
      var value = this.rendererSelect.get('value');
      if(value === 'unique'){
        this._onUniqueSelectedSymbolChange(newSymbol);
      }
      else if(value === 'color'){
        this._onClassBreakSelectedSymbolChange(newSymbol);
      }
      else if(value === 'size'){
        this._onClassBreakSelectedSymbolChange(newSymbol);
      }
    },

    _cloneSymbol:function(symbol){
      if(!symbol){
        return null;
      }
      var jsonSym = symbol.toJson();
      var clone = jsonUtils.fromJson(jsonSym);
      return clone;
    },

    _drawSymbolPreview:function(previewNode, sym){
      var node = previewNode;
      var symbol = this._cloneSymbol(sym);

      html.empty(node);

      var sWidth = 80;
      var sHeight = 30;
      if (symbol.type === "simplemarkersymbol") {
        // extra padding for the outline width
        sWidth = Math.min(symbol.size + 12, 125);
        sHeight = sWidth;
      } else if (symbol.type === "picturemarkersymbol") {
        if (!symbol.url || symbol.url === "http://" ||
            (symbol.url.indexOf("http://") === -1 &&
             symbol.url.indexOf("https://") === -1 &&
             symbol.url.indexOf("data:") === -1)) {
          // bad URL
          return;
        }
        sWidth = Math.min(Math.max(symbol.width, symbol.height), 125);
        sHeight = sWidth;
      } else if (symbol.type === "simplelinesymbol" || symbol.type === "cartographiclinesymbol") {
        sWidth = 190;
        sHeight = 20;
      }

      if(sWidth > 60){
        sWidth = 60;
      }

      var surface = gfx.createSurface(node, sWidth, sHeight);
      if (gfx.renderer === "vml") {
        // Fixes an issue in IE where the shape is partially drawn and
        // positioned to the right of the table cell
        var source = surface.getEventSource();
        html.setStyle(source, "position", "relative");
        html.setStyle(source.parentNode, "position", "relative");
      }
      var shapeDesc = null;

      // if(symbolUtils.isSimpleLineSymbol(symbol) || symbolUtils.isCartographicLineSymbol(symbol)){
      //   shapeDesc = this._getLineShapeDesc(symbol);
      // }
      // else{
      shapeDesc = jsonUtils.getShapeDescriptors(symbol);
      // }

      var gfxShape;
      try {
        gfxShape = surface.createShape(shapeDesc.defaultShape)
                   .setFill(shapeDesc.fill).setStroke(shapeDesc.stroke);
      } catch (e) {
        surface.clear();
        surface.destroy();
        return;
      }

      var dim = surface.getDimensions();
      var transform = {
        dx: dim.width / 2,
        dy: dim.height / 2
      };

      var bbox = gfxShape.getBoundingBox(),
        width = bbox.width,
        height = bbox.height;
      if (width > sWidth || height > sHeight) {
        var actualSize = width > height ? width : height;
        var refSize = sWidth < sHeight ? sWidth : sHeight;
        var scaleBy = (refSize - 5) / actualSize;
        lang.mixin(transform, {
          xx: scaleBy,
          yy: scaleBy
        });
      }

      gfxShape.applyTransform(transform);
      return surface;
    },

    /* simple renderer */
    _getSimpleRenderer:function(){
      var symbol = this.defaultSymbolChooser.getSymbol();
      var renderer = new SimpleRenderer(symbol);
      return renderer;
    },

    /* unique symbols */
    _bindUniqueSettingEvents:function(){
      this.own(on(this.btnAddUniqueValue, 'click', lang.hitch(this, this._onAddUniqueValue)));
      this.own(
        on(this.uniqueSelectedValue, 'change', lang.hitch(this, this._onUniqueSelectedValueChange))
      );
      this.own(
        on(this.uniqueSelectedLabel, 'change', lang.hitch(this, this._onUniqueSelectedLabelChange))
      );
      this.own(
        on(this.uniqueColorSelect, 'change', lang.hitch(this, this._onUniqueColorSelectChange))
      );
    },

    _showUniqueValueRenderer:function(renderer){
      this.rendererSelect.set('value', 'unique');
      this.fieldComboBox.set('displayedValue', renderer.attributeField);
      html.empty(this.uniqueSysTbody);
      array.forEach(renderer.infos, lang.hitch(this, function(info){
        this._addUniqueValueTr(info.symbol, info.value, info.label || info.value);
      }));
      this._addDefaultValueTr(this.uniqueSysTbody);
    },

    _getUniqueValueRenderer:function(){
      var defaultSym = this.defaultSymbolChooser.getSymbol();
      var field = this.fieldComboBox.get('value');
      var renderer = new UniqueValueRenderer(this._showOthersSymbol ? defaultSym : null, field);
      var trs = query('.unique-symbol-tr', this.uniqueSysTbody);
      array.forEach(trs, lang.hitch(this, function(tr){
        renderer.addValue({
          value: tr.value,
          symbol: tr.symbol,
          label: tr.label,
          description: tr.label
        });
      }));
      return renderer;
    },

    _onUniqueColorSelectChange:function(){
      var colors = this._getSelectedUniqueColors();
      var trs = query('.unique-symbol-tr', this.uniqueSysTbody);
      array.forEach(trs, lang.hitch(this, function(tr, index){
        if(tr.symbol){
          if(!(symbolUtils.isPictureMarkerSymbol(tr.symbol))){
            var idx = index % colors.length;
            var color = colors[idx];
            tr.symbol.setColor(color);
            var symbolDiv = query('.symbol-div', tr)[0];
            this._drawSymbolPreview(symbolDiv, tr.symbol);
            if(this._selectedUniqueValueTr === tr){
              this._showSelectedSymbol(tr.symbol);
            }
          }
        }
      }));
    },

    _onUniqueSelectedValueChange:function(){
      var tr = this._selectedUniqueValueTr;
      if(tr){
        tr.value = this.uniqueSelectedValue.value;
        tr.label = this.uniqueSelectedLabel.value;
        var labelDiv = query('.label-div', tr)[0];
        labelDiv.innerHTML = tr.label;
      }
    },

    _onUniqueSelectedLabelChange:function(){
      var tr = this._selectedUniqueValueTr;
      if(tr){
        tr.label = this.uniqueSelectedLabel.value;
        var labelDiv = query('.label-div', tr)[0];
        labelDiv.innerHTML = tr.label;
      }
    },

    _onUniqueSelectedSymbolChange:function(newSymbol){
      var tr = this._selectedUniqueValueTr;
      if(!tr){
        return;
      }
      tr.symbol = newSymbol;
      var symbolDiv = query('.symbol-div', tr)[0];
      if(!symbolDiv){
        return;
      }
      this._drawSymbolPreview(symbolDiv, newSymbol);
    },

    _onAddUniqueValue:function(){
      var uniqueValue = lang.trim(this.uniqueEditValue.value);
      if (uniqueValue) {
        var trs = query('.unique-symbol-tr', this.uniqueSysTbody);
        var colors = this._getSelectedUniqueColors();
        var colorIndex = trs.length % colors.length;
        var color = colors[colorIndex];
        var symbol = this._getUniqueSymbol(color);
        this._addUniqueValueTr(symbol, uniqueValue, uniqueValue);
        this._setDefaultSymbolStatus(true);
      }
      this.uniqueEditValue.value = '';
    },

    _addUniqueValueTr:function(symbol, value, label){
      value = lang.trim(value);
      var s = '';
      s = '<tr class="unique-symbol-tr">' +
          '<td class="symbol-td">' +
            '<div class="symbol-div"></div>' +
          '</td>' +
          '<td class="edit-td">' +
            '<div wrap class="label-div"></div>' +
          '</td>' +
          '<td class="delete-td">' +
            '<div class="delete-div jimu-icon jimu-icon-delete"></div>' +
          '</td>' +
        '</tr>';
      var trDom = html.toDom(s);
      var defaultSymbolTr = query('.default-symbol-tr', this.uniqueSysTbody);
      if (defaultSymbolTr.length > 0) {
        html.place(trDom, defaultSymbolTr[0], 'before');
      } else {
        html.place(trDom, this.uniqueSysTbody);
      }
      this._updateUniqueSymTableStyle();
      var symbolDiv = query('.symbol-div', trDom)[0];
      var labelDiv = query('.label-div', trDom)[0];
      var deleteDiv = query('.delete-div', trDom)[0];
      labelDiv.innerHTML = value;
      this.own(on(trDom, 'click', lang.hitch(this, function(){
        this._selectUniqueValueTr(trDom);
      })));
      this.own(on(deleteDiv, 'click', lang.hitch(this, function(event){
        event.stopPropagation();
        if(this._selectedUniqueValueTr === trDom){
          this._selectedUniqueValueTr = null;
        }
        html.destroy(trDom);
        this._updateUniqueSymTableStyle();
        this._updateUniqueValueDivVisibility();
      })));
      this._drawSymbolPreview(symbolDiv, symbol);
      trDom.symbol = symbol;
      trDom.value = value;
      trDom.label = label;
      this._selectUniqueValueTr(trDom);
      html.setStyle(this.uniqueValueDiv, 'display', 'block');
    },

    _selectUniqueValueTr:function(tr){
      query('tr', this.uniqueSysTbody).removeClass('selected');
      html.addClass(tr, 'selected');
      this._selectedUniqueValueTr = tr;
      this.uniqueSelectedValue.value = tr.value;
      this.uniqueSelectedLabel.value = tr.label;
      this._showSelectedSymbol(tr.symbol);
    },

    _updateUniqueSymTableStyle:function(){
    },

    _getSelectedUniqueColors:function(){
      var value = this.uniqueColorSelect.get('value');
      var strColors = this._uniqueColors[value];
      var colors = array.map(strColors, lang.hitch(this, function(str){
        return new Color(str);
      }));
      return colors;
    },

    _getUniqueSymbol:function(color){
      var symbol = null;
      if(this.type === 'marker'){
        var args = {
          "style": "esriSMSCircle",
          "color": [0, 0, 128, 128],
          "name": "Circle",
          "outline": {
            "color": [191, 151, 39, 255],
            "width": 1
          },
          "type": "esriSMS",
          "size": 18
        };
        symbol = new SimpleMarkerSymbol(args);
        symbol.setColor(color);
      }
      else if(this.type === 'line' || this.type === 'fill'){
        var sym = this.defaultSymbolChooser.getSymbol();
        symbol = jsonUtils.fromJson(sym.toJson());
        symbol.setColor(color);
      }

      return symbol;
    },

    _updateUniqueValueDivVisibility:function(){
      var trs = query('tr', this.uniqueSysTbody);
      if (trs.length === 0) {
        this._addDefaultValueTr(this.uniqueSysTbody);
        this._setDefaultSymbolStatus(false);
      } else if (trs.length === 1 && html.hasClass(trs[0], 'default-symbol-tr')) {
        this._setDefaultSymbolStatus(false);
      }
      trs.removeClass('selected');
      query('.default-symbol-tr', this.uniqueSysTbody).addClass('selected');
      html.setStyle(this.uniqueValueDiv, 'display', 'block');
    },

    /* class breaks renderer */
    _bindClassBreaksEvents:function(){
      this.own(on(this.minDomain, 'change', lang.hitch(this, this._updateClassBreaksTable)));
      this.own(on(this.maxDomain, 'change', lang.hitch(this, this._updateClassBreaksTable)));
      this.own(on(this.classCount, 'change', lang.hitch(this, this._updateClassBreaksTable)));
      this.own(on(this.selectedFrom, 'change', lang.hitch(this, this._onSelectedRangeChange)));
      this.own(on(this.selectedTo, 'change', lang.hitch(this, this._onSelectedRangeChange)));
      this.own(on(this.classBreakSelectedLabel, 'change', lang.hitch(this, this._onClassBreakSelectedLabelChange)));

      //color
      this.own(on(this.classBreaksColorSelect, 'change', lang.hitch(this, this._updateClassBreaksTable)));

      //size
      this.own(on(this.minSymbolSize, 'change', lang.hitch(this, this._updateClassBreaksTable)));
      this.own(on(this.maxSymbolSize, 'change', lang.hitch(this, this._updateClassBreaksTable)));
    },

    _showClassBreaksRenderer:function(renderer){
      this._isDrawing = true;
      this.rendererSelect.set('value', 'color');
      var min = Infinity, max = -Infinity;
      this.fieldComboBox.set('displayedValue', renderer.attributeField);
      this.classCount.set('value', renderer.infos.length);
      html.empty(this.classBreaksTbody);
      array.forEach(renderer.infos, lang.hitch(this, function(info){
        var minValue = info.minValue;
        var maxValue = info.maxValue;
        var symbol = info.symbol;
        var label = info.label ? info.label : info.minValue + ' —— ' + info.maxValue;
        this._addClassBreaksTr(symbol, minValue, maxValue, label);
        min = Math.min(min, minValue);
        max = Math.max(max, maxValue);
      }));
      this.minDomain.set('value', min);
      this.maxDomain.set('value', max);
      this._addDefaultValueTr(this.classBreaksTbody);

      if(this.type === 'marker'){
        var minSymSize = Infinity, maxSymSize = -Infinity;
        array.forEach(renderer.infos, lang.hitch(this, function(info){
          var symbol = info.symbol;
          var symbolSize = symbolUtils.isPictureMarkerSymbol(symbol) ? symbol.width : symbol.size;
          minSymSize = Math.min(symbolSize, minSymSize);
          maxSymSize = Math.max(symbolSize, maxSymSize);
        }));
        this.minSymbolSize.set('value', minSymSize);
        this.maxSymbolSize.set('value', maxSymSize);
        if(this.minSymSize !== this.maxSymSize){
          this.rendererSelect.set('value', 'size');
        }
      }
      var that = this;
      setTimeout(function(){
        that._isDrawing = false;
      }, 1000);
    },

    _getClassBreaksRenderer:function(){
      var defaultSym = this.defaultSymbolChooser.getSymbol();
      var field = this.fieldComboBox.get('value');
      var renderer = new ClassBreaksRenderer(this._showOthersSymbol ? defaultSym : null, field);
      var trs = query('.class-breaks-tr', this.classBreaksTbody);
      array.forEach(trs, lang.hitch(this, function(tr){
        renderer.addBreak({
          minValue: tr.from,
          maxValue: tr.to,
          symbol: tr.symbol,
          label: tr.label
        });
      }));
      return renderer;
    },

    _onClassBreakSelectedSymbolChange:function(newSymbol){
      var tr = this._selectedClassBreakTr;
      if(tr){
        tr.symbol = newSymbol;
        var symbolDiv = query('.symbol-div', tr)[0];
        this._drawSymbolPreview(symbolDiv, newSymbol);
      }
    },

    _onSelectedRangeChange:function(){
      var from = parseFloat(this.selectedFrom.get('value'));
      var to = parseFloat(this.selectedTo.get('value'));
      if(from > to){
        var temp = from;
        from = to;
        to = temp;
        this.selectedFrom.set('value', from);
        this.selectedTo.set('value', to);
      }
      var tr = this._selectedClassBreakTr;
      if(tr && (tr.from !== from || tr.to !== to)){ // update label only when range changed
        tr.from = from;
        tr.to = to;
        var label = from + " — " + to;
        tr.label = label;
        this.classBreakSelectedLabel.value = label;
        var labelDiv = query('.label-div', tr)[0];
        labelDiv.innerHTML = label;
      }
    },

    _onClassBreakSelectedLabelChange:function(){
      var tr = this._selectedClassBreakTr;
      if(tr){
        var label = this.classBreakSelectedLabel.value;
        tr.label = label;
        var labelDiv = query('.label-div', tr)[0];
        labelDiv.innerHTML = label;
      }
    },

    _updateClassBreaksTable:function(){
      if(this._isDrawing){
        return;
      }
      html.setStyle(this.classBreaksSetting, 'display', 'none');
      html.empty(this.classBreaksTbody);
      var min = parseFloat(this.minDomain.get('value'));
      var max = parseFloat(this.maxDomain.get('value'));
      if(min > max){
        var temp = min;
        min = max;
        max = temp;
        this.minDomain.set('value', min);
        this.maxDomain.set('value', max);
      }
      else if(min === max){
        return;
      }
      var minSymSize = parseFloat(this.minSymbolSize.get('value'));
      var maxSymSize = parseFloat(this.maxSymbolSize.get('value'));
      if(minSymSize > maxSymSize){
        var temp2 = minSymSize;
        minSymSize = maxSymSize;
        maxSymSize = temp2;
        this.minSymbolSize.set('value', minSymSize);
        this.maxSymbolSize.set('value', maxSymSize);
      }
      var count = parseInt(this.classCount.get('value'), 10);
      var interval = (max - min) / count;
      var nums = [];//length=count+1
      var i;
      for(i = 0; i <= count; i++){
        var num = min + interval * i;
        num = parseFloat(num.toFixed(4));
        nums.push(num);
      }
      var rendererType = this.rendererSelect.get('value');
      var symbols = [];//length = count
      if(rendererType === 'color'){
        symbols = this._createColorClassBreaksSymbols(count);
      }
      else if(rendererType === 'size'){
        symbols = this._createSizeClassBreaksSymbols(count, minSymSize, maxSymSize);
      }
      //create count tr
      for(i = 0; i < count; i++){
        var from = nums[i];
        var to = nums[i + 1];
        var label = from + " — " + to;
        this._addClassBreaksTr(symbols[i], from, to, label);
      }
      this._addDefaultValueTr(this.classBreaksTbody);
      this._updateClassBreaksSettingVisibility();
    },

    _selectClassBreaksTr:function(tr){
      var trs = query('tr', this.classBreaksTbody);
      trs.removeClass('selected');
      html.addClass(tr, 'selected');
      this._selectedClassBreakTr = tr;
      var symbol = tr.symbol;
      var from = parseFloat(tr.from);
      var to = parseFloat(tr.to);
      var label = tr.label;
      this.selectedFrom.set('value', from);
      this.selectedTo.set('value', to);
      this.classBreakSelectedLabel.value = label;
      this._showSelectedSymbol(symbol);
    },

    _addClassBreaksTr:function(symbol, from, to, label){
      var s = '';
      s = '<tr class="class-breaks-tr">' +
          '<td class="symbol-td">' +
            '<div class="symbol-div"></div>' +
          '</td>' +
          '<td class="label-td">' +
            '<div wrap class="label-div"></div>' +
          '</td>' +
          '<td class="delete-td">' +
            '<div class="delete-div jimu-icon jimu-icon-delete"></div>' +
          '</td>' +
        '</tr>';
      var tr = html.toDom(s);
      var defaultSymbolTr = query('.default-symbol-tr', this.classBreaksTbody);
      if (defaultSymbolTr.length > 0) {
        html.place(tr, defaultSymbolTr[0], 'before');
      } else {
        html.place(tr, this.classBreaksTbody);
      }
      tr.symbol = symbol;
      tr.from = from;
      tr.to = to;
      tr.label = label;
      var symbolDiv = query('.symbol-div', tr)[0];
      var labelDiv = query('.label-div', tr)[0];
      var deleteDiv = query('.delete-div', tr)[0];
      this._drawSymbolPreview(symbolDiv, symbol);
      labelDiv.innerHTML = label;
      this.own(on(tr, 'click', lang.hitch(this, function(){
        this._selectClassBreaksTr(tr);
      })));
      this.own(on(deleteDiv, 'click', lang.hitch(this, function(event){
        event.stopPropagation();
        if(this._selectClassBreaksTr === tr){
          this._selectClassBreaksTr = null;
        }
        html.destroy(tr);
        this._updateClassBreaksSettingVisibility();
      })));
      this._updateClassBreaksTableStyle();
      this._showDefaultSymbol();
      html.setStyle(this.classBreaksSetting, 'display', 'block');
    },

    _addDefaultValueTr:function(targetNode){
      var node = query('.default-symbol-tr', targetNode);
      if (node.length > 0) {
        return;
      }
      var s = '', symbol = this.defaultSymbolChooser.getSymbol(), label = this.nls.defaultSymbol;
      s = '<tr class="default-symbol-tr">' +
          '<td class="symbol-td">' +
            '<div class="symbol-div"></div>' +
          '</td>' +
          '<td class="label-td">' +
            '<div wrap class="label-div"></div>' +
          '</td>' +
          '<td class="check-td">' +
            '<div class="check-div"></div>' +
          '</td>' +
        '</tr>';
      var trDom = html.toDom(s);
      html.place(trDom, targetNode);
      var symbolDiv = query('.symbol-div', trDom)[0];
      var labelDiv = query('.label-div', trDom)[0];
      var checkDiv = query('.check-div', trDom)[0];
      html.setAttr(checkDiv, 'title', this.nls.othersSymbolTip);
      var checkbox = new CheckBox({
        checked: this._showOthersSymbol
      });
      checkbox.placeAt(checkDiv);
      checkbox.startup();
      labelDiv.innerHTML = this.nls.othersSymbol;
      this.own(on(trDom, 'click', lang.hitch(this, function(){
        var trs = query('tr', targetNode);
        trs.removeClass('selected');
        html.addClass(trDom, 'selected');
        this._showDefaultSymbol();
      })));
      this.own(on(checkbox, 'change', lang.hitch(this, function(checked){
        this._showOthersSymbol = checked;
      })));
      this._drawSymbolPreview(symbolDiv, symbol);
      trDom.symbol = symbol;
      trDom.label = label;
      trDom.checkbox = checkbox;
      html.setStyle(this.uniqueValueDiv, 'display', 'block');
    },

    _updateClassBreaksTableStyle:function(){},

    _updateClassBreaksSettingVisibility:function(){
      var trs = query('tr', this.classBreaksTbody);
      if (trs.length === 0) {
        this._addDefaultValueTr(this.classBreaksTbody);
        this._setDefaultSymbolStatus(false);
      } else if (trs.length === 1 && html.hasClass(trs[0], 'default-symbol-tr')) {
        this._setDefaultSymbolStatus(false);
      }
      trs.removeClass('selected');
      query('.default-symbol-tr', this.classBreaksTbody).addClass('selected');
      html.setStyle(this.classBreaksSetting, 'display', 'block');
    },

    //color
    _createColorClassBreaksSymbols:function(count){
      var symbols = [];
      var colors = this._createClassBreaksColors(count);
      for(var i = 0; i < count; i++){
        var color = colors[i];
        var sym = null;
        if(this.type === 'marker'){
          var args = {
            "style": "esriSMSCircle",
            "color": [0, 0, 128, 128],
            "name": "Circle",
            "outline": {
              "color": [191, 151, 39, 255],
              "width": 1
            },
            "type": "esriSMS",
            "size": 18
          };
          sym = new SimpleMarkerSymbol(args);
          sym.setColor(color);
        }
        else if(this.type === 'line' || this.type === 'fill'){
          var a = this.defaultSymbolChooser.getSymbol();
          sym = jsonUtils.fromJson(a.toJson());
          sym.setColor(color);
        }
        symbols.push(sym);
      }
      return symbols;
    },

    _createClassBreaksColors:function(count){
      var colors = [];
      var value = this.classBreaksColorSelect.get('value');
      var c = this._classBreaksColors[value];
      var c1 = new Color(c[0]);
      var c2 = new Color(c[1]);
      var deltaR = Math.floor((c2.r - c1.r) / count);
      var deltaG = Math.floor((c2.g - c1.g) / count);
      var deltaB = Math.floor((c2.b - c1.b) / count);
      for(var i = 0; i < count; i++){
        var r = c1.r + deltaR * i;
        var g = c1.g + deltaG * i;
        var b = c1.b + deltaB * i;
        var color = new Color([r, g, b, 255]);
        colors.push(color);
      }
      return colors;
    },

    //size
    _createSizeClassBreaksSymbols:function(count, minSymSize, maxSymSize){
      var defaultSym = this.defaultSymbolChooser.getSymbol();
      var symbols = [];
      var interval = (maxSymSize - minSymSize) / (count - 1);
      for(var i = 0; i < count; i++){
        var size = Math.round(minSymSize + interval * i);
        var jsonSym = defaultSym.toJson();
        var sym = jsonUtils.fromJson(jsonSym);

        if(symbolUtils.isPictureMarkerSymbol(sym)){
          sym.setWidth(size);
          sym.setHeight(size);
        }
        else{
          sym.setSize(size);
        }
        symbols.push(sym);
      }
      return symbols;
    }
  });
});