text: ///////////////////////////////////////////////////////////////////////////
  // Copyright © 2014 - 2016 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',
      'dojo/Evented',
      'dojo/_base/lang',
      'dojo/_base/html',
      'dojo/_base/array',
      'dojo/on',
      'dojo/query',
      'dijit/TooltipDialog',
      'dijit/popup',
      'dijit/registry',
      'jimu/dijit/SymbolChooser',
      'jimu/symbolUtils'
    ],
    function(declare, _WidgetBase, _TemplatedMixin, Evented, lang, html, array, on, query,
      TooltipDialog, dojoPopup, registry, SymbolChooser, jimuSymUtils) {
      return declare([_WidgetBase, _TemplatedMixin, Evented], {
        baseClass: 'jimu-symbol-picker',
        declaredClass: 'jimu.dijit.SymbolPicker',
        templateString: '<div>' +
                          '<div data-dojo-attach-point="symbolNode" class="symbol-node jimu-float-leading"></div>' +
                          '<div class="separator jimu-float-leading"></div>' +
                          '<div class="jimu-icon jimu-icon-down-arrow-8 jimu-float-leading"></div>' +
                        '</div>',
        tooltipDialog: null,
        _isTooltipDialogOpened: false,
  
        //options:
        //you must set symbol or type
        symbol: null, //optional
        type: null, //optional, available values:marker,line,fill,text
  
        //public methods:
        //reset
        //showBySymbol
        //showByType
        //getSymbol
  
        //events:
        //change
  
        postCreate: function() {
          this.inherited(arguments);
          this._createTooltipDialog();
          this._hideTooltipDialog();
          var symbol = this.symbolChooser.getSymbol();
          if(symbol){
            this._drawSymbol(symbol);
          }
        },
  
        destroy: function(){
          this._hideTooltipDialog();
          if(this.symbolChooser){
            this.symbolChooser.destroy();
          }
          this.symbolChooser = null;
          this.inherited(arguments);
        },
  
        _createTooltipDialog: function() {
          var ttdContent = html.create("div");
          this.tooltipDialog = new TooltipDialog({
            content: ttdContent
          });
  
          this.symbolChooser = new SymbolChooser({
            symbol: this.symbol,
            type: this.type
          });
  
          this.symbolChooser.placeAt(ttdContent);
          this.symbolChooser.startup();
  
          this.own(on(this.symbolChooser, 'change', lang.hitch(this, function(newSymbol){
            this._drawSymbol(newSymbol);
            this.emit('change', newSymbol);
          })));
  
          this.own(on(this.domNode, 'click', lang.hitch(this, function(event){
            event.stopPropagation();
            event.preventDefault();
            if(this._isTooltipDialogOpened){
              this._hideTooltipDialog();
            }else{
              this._showTooltipDialog();
            }
          })));
  
          this.own(on(document.body, 'click', lang.hitch(this, function(event){
            var target = event.target || event.srcElement;
            var colorPickers = this._getColorPickers();
            if(colorPickers.length > 0){
              var isClickColorPicker = array.some(colorPickers, function(colorPicker){
                return colorPicker.isPartOfPopup(target);
              });
              if(isClickColorPicker){
                return;
              }
            }
            var node = this.tooltipDialog.domNode;
            var isInternal = target === node || html.isDescendant(target, node);
            if(!isInternal){
              this._hideTooltipDialog();
            }
          })));
  
          this.own(on(this.symbolChooser, 'resize', lang.hitch(this, function(){
            if(this._isTooltipDialogOpened){
              this._hideTooltipDialog();
              this._showTooltipDialog();
            }
          })));
        },
  
        _getColorPickers: function(){
          var doms = query('.jimu-color-picker', this.symbolChooser.domNode);
          var colorPickers = array.map(doms, lang.hitch(this, function(dom){
            return registry.byNode(dom);
          }));
          return colorPickers;
        },
  
        reset: function(){
          this.type = null;
          this.symbol = null;
          html.empty(this.symbolNode);
          this.symbolChooser.reset();
        },
  
        showBySymbol: function(symbol){
          this.reset();
          if(symbol){
            this._drawSymbol(symbol);
            this.symbolChooser.showBySymbol(symbol);
          }
        },
  
        showByType: function(type){
          this.reset();
          this.symbolChooser.showByType(type);
          var symbol = this.symbolChooser.getSymbol();
          if (symbol) {
            this._drawSymbol(symbol);
          }
        },
  
        getSymbol: function(){
          return this.symbolChooser.getSymbol();
        },
  
        _drawSymbol: function(symbol) {
          html.empty(this.symbolNode);
          if (symbol) {
            var symbolDom = jimuSymUtils.createSymbolNode(symbol, {
              width: 16,
              height: 16
            });
            if (symbolDom) {
              html.place(symbolDom, this.symbolNode);
            }
          }
        },
  
        _showTooltipDialog: function(){
          if(this.tooltipDialog){
            dojoPopup.open({
              parent: this.getParent(),
              popup: this.tooltipDialog,
              around: this.domNode
            });
            this._isTooltipDialogOpened = true;
          }
        },
  
        _hideTooltipDialog: function(){
          if(this.tooltipDialog){
            dojoPopup.close(this.tooltipDialog);
            this._isTooltipDialogOpened = false;
          }
        }
  
      });
    });