define([
    'dojo/_base/declare',
    'dojo/_base/array',
    'dojo/_base/lang',
    'dojo/_base/html',
    'dojo/aspect',
    'dojo/query',
    'dojo/on',
    'dojo/dom-attr',
    'dojo/dom-class',
    'dojo/dom-construct',
    'dojo/dom-geometry',
    'dojo/dom-style',
    'jimu/BaseWidget',
    'jimu/PoolControllerMixin',
    'jimu/utils'
  ],
  function(declare, array, lang, html, aspect, query, on,
    domAttr, domClass, domConstruct, domGeometry, domStyle,
    BaseWidget, PoolControllerMixin, utils) {
    /* jshint scripturl:true */

    var clazz = declare([BaseWidget, PoolControllerMixin], {

      baseClass: 'dart-controller dart-bgcolor jimu-main-background shadow',
      height: 54,
      minimized: false,
      collapsed: false,
      iconCount: 0,
      wPos: {
        bottom: 78,
        right: 0
      },
      panelCount: 0,
      openedId: '',
      openedIds: [],

      // post create
      postCreate: function() {
        this.inherited(arguments);
        this.titleNode.innerHTML =
          utils.sanitizeHTML(this.appConfig.title ? this.appConfig.title : '');
        on(this.toggleNode, "click", lang.hitch(this, this._toggleController));
        on(this.collapseNode, "click", lang.hitch(this, this._collapseController));
        this.own(on(this.widgetManager, 'widget-created',
          lang.hitch(this, this._onWidgetCreation)));
        on(window, "resize", lang.hitch(this, this._resizeWindow));
      },

      // startup
      startup: function() {
        this.inherited(arguments);
        this._createIconNodes();
      },

      // on action
      onAction: function(action, data) {
        /*jshint unused: false*/
        if (action === 'highLight' && data) {
          var node = query('div[settingid="' + data.widgetId + '"]', this.domNode)[0];
          this._highLight(node);
        }
        if (action === 'removeHighLight') {
          this._removeHighLight();
        }
      },

      // destroy
      destroy: function() {
        if (this.timeoutHandle) {
          clearTimeout(this.timeoutHandle);
          this.timeoutHandle = null;
        }
        this.inherited(arguments);
      },

      // on app config changed
      onAppConfigChanged: function(appConfig, reason, changedData) {
        switch (reason) {
          case 'attributeChange':
            this._onAttributeChange(appConfig, changedData);
            break;
          case 'layoutChange':
            break;
          default:
            return;
        }
      },

      getOpenedIds: function() {
        this.inherited(arguments);
        var ids = [];
        if (this.openedId && this.openedId !== '') {
          ids.push(this.openedId);
        }
        array.forEach(this.openedIds, function(id) {
          ids.push(id);
        });
        return ids;
      },

      setOpenedIds: function(ids) {
        var interval = 0;
        for (var i = 0; i < ids.length; i++) {
          interval += 600;
          setTimeout(lang.hitch(this, this._switchNodeToOpen), interval, ids[i]);
        }
      },

      _onWidgetCreation: function(widget) {
        if (widget.name === 'Search') {
          this._resizeWindow();
        }
      },

      // resize window
      _resizeWindow: function() {
        if (this.resizeTimer) {
          clearTimeout(this.resizeTimer);
          this.resizeTimer = null;
        }
        this.resizeTimer = setTimeout(lang.hitch(this, this._resizeController), 600);
      },

      // resize controller
      _resizeController: function() {
        if (!this.minimized) {
          try {
            var box = domGeometry.getContentBox(this.domNode);
            var boxTools = domGeometry.getContentBox(this.toolsNode);
            var balance = (box.w - boxTools.w - 35);
            var count = Math.floor(balance / this.height);
            var w = this.height * count;
            domStyle.set(this.barNode, "width", w + 'px');
            domStyle.set(this.pagesNode, "width", w + 'px');
            this._createPages();
            domClass.remove(this.toolsNode, "dart-controller-tools-anim");
          } catch (ex) {
            console.log(ex);
          }
        }
      },

      // toggle controller
      _toggleController: function() {
        if (this.minimized) {
          this._maximizeController();
        } else {
          this._minimizeController();
        }
      },

      // maximize controller
      _maximizeController: function() {
        this.minimized = false;
        domClass.remove(this.domNode, "dart-controller-minimized");
        if (this.openedId) {
          var node = this._getIconNodeById(this.openedId);
          if (node.config.inPanel === false) {
            this._switchNodeToClose(this.openedId);
          }
        }
        setTimeout(lang.hitch(this, this._resizeController), 600);
      },

      // minimize controller
      _minimizeController: function() {
        this.minimized = true;
        domClass.add(this.domNode, "dart-controller-minimized");
        if (this.collapsed) {
          this._expand();
        }
      },

      // collapse controller
      _collapseController: function() {
        if (this.collapsed) {
          this._expand();
        } else {
          this._collapse();
        }
      },

      // collapse
      _collapse: function() {
        this.collapsed = true;
        domClass.add(this.toolsNode, "dart-controller-tools-anim");
        domClass.add(this.toolsNode, "dart-controller-tools-collapsed");
        setTimeout(lang.hitch(this, this._resizeController), 600);
      },

      // expand
      _expand: function() {
        this.collapsed = false;
        domClass.add(this.toolsNode, "dart-controller-tools-anim");
        domClass.remove(this.toolsNode, "dart-controller-tools-collapsed");
        setTimeout(lang.hitch(this, this._resizeController), 600);
      },

      // highlight
      _highLight: function(node) {
        if (this.hlDiv) {
          this._removeHighLight();
        }
        if (!node) {
          return;
        }
        var position = domGeometry.getMarginBox(node);
        var hlStyle = {
          position: 'absolute',
          left: (position.l) + 'px',
          top: (position.t) + 'px',
          width: (position.w) + 'px',
          height: (position.h) + 'px'
        };
        this.hlDiv = domConstruct.create('div', {
          "style": hlStyle,
          "class": 'icon-highlight'
        }, node, 'before');
      },

      // remove highlight
      _removeHighLight: function() {
        if (this.hlDiv) {
          domConstruct.destroy(this.hlDiv);
          this.hlDiv = null;
        }
      },

      // on attribute change
      _onAttributeChange: function(appConfig, changedData) {
        /*jshint unused: false*/
        if (changedData.title !== undefined && changedData.title !== this.appConfig.title) {
          this.titleNode.innerHTML = utils.sanitizeHTML(changedData.title ? changedData.title : '');
        }
      },

      // create icon nodes
      _createIconNodes: function() {
        html.empty(this.containerNode);
        this.openedIds = [];
        var i, iconConfig, name, allIconConfigs = this.getAllConfigs();
        var defaultSearch = true;
        var openAtStartNode;
        this.iconCount = 0;
        for (i = 0; i < allIconConfigs.length; i++) {
          iconConfig = allIconConfigs[i];
          name = iconConfig.name;
          if (name === "ZoomSlider" || name === "HomeButton" || name === "MyLocation" || name === "ExtentNavigate") {
            this._createChildWidget(iconConfig);
          } else if (name === "Search" && defaultSearch) {
            defaultSearch = false;
            this._createChildWidget(iconConfig);
          } else {
            this.iconCount += 1;
            var node = this._createIconNode(iconConfig);
            if (iconConfig.openAtStart) {
              openAtStartNode = node;
            }
          }
        }

        var containerStyle = {
          width: this.iconCount * this.height + 'px'
        };
        html.setStyle(this.containerNode, containerStyle);

        //open the first openatstart widget
        if (openAtStartNode && !this.openAtStartWidget) {
          this._onIconClick(openAtStartNode);
          this.openAtStartWidget = openAtStartNode.config.name;
        }
      },

      // create pages
      _createPages: function() {
        var visW = domGeometry.getContentBox(this.barNode).w;
        if (visW > 0) {
          var w = this.iconCount * this.height;
          var pageCount = Math.ceil(w / visW);
          var list = this.pageListNode;
          list.innerHTML = "";
          if (pageCount > 1) {
            for (var i = 0; i < pageCount; i++) {
              var id = "page" + i;
              var link = domConstruct.create("li", {
                id: id
              }, list);
              this.own(on(link, "click", lang.hitch(this, this._setPage, i)));
            }
            if (!this.page || this.page >= pageCount) {
              this.page = 0;
            }
            this._setPage(this.page);
          } else {
            domStyle.set(this.containerNode, "left", "0px");
          }
        }
      },

      // set page
      _setPage: function(num) {
        var visW = domGeometry.getContentBox(this.barNode).w;
        domClass.remove("page" + this.page, "active");
        this.page = num;
        domClass.add("page" + this.page, "active");
        var pos = 0 - (num * visW) + 'px';
        var prop = "left";
        if (window.isRTL) {
          prop = "right";
        }
        domStyle.set(this.containerNode, prop, pos);
      },

      // create child widget
      _createChildWidget: function(iconConfig) {
        this.widgetManager.loadWidget(iconConfig).then(lang.hitch(this, function(widget) {
          var name = iconConfig.name;
          switch (name) {
            case "ZoomSlider":
              domConstruct.place(widget.domNode, this.navNode);
              domAttr.set(this.navNode, "settingId", iconConfig.id);
              domStyle.set(this.navNode, "display", "block");
              break;
            case "HomeButton":
              domConstruct.place(widget.domNode, this.homeNode);
              domAttr.set(this.homeNode, "settingId", iconConfig.id);
              domStyle.set("homeNode", "display", "block");
              break;
            case "MyLocation":
              domConstruct.place(widget.domNode, this.locateNode);
              domAttr.set(this.locateNode, "settingId", iconConfig.id);
              domStyle.set("locateNode", "display", "block");
              break;
            case "ExtentNavigate":
              widget.setOrientation(false);
              domConstruct.place(widget.domNode, this.extentNavigateNode);
              domAttr.set(this.extentNavigateNode, "settingId", iconConfig.id);
              domStyle.set(this.extentNavigateDiv, "display", "block");
              break;
            case "Search":
              domConstruct.place(widget.domNode, this.searchNode);
              domAttr.set(this.searchNode, "settingId", iconConfig.id);
              domStyle.set("searchNode", "display", "block");
              break;

          }
          this.widgetManager.openWidget(widget);
        }));
      },

      // create icon node
      _createIconNode: function(iconConfig) {
        var node, iconUrl;
        iconUrl = iconConfig.icon;

        node = html.create('div', {
          'class': 'icon-node',
          title: iconConfig.label,
          settingId: iconConfig.id
        }, this.containerNode);

        html.create('img', {
          src: iconUrl
        }, node);

        node.config = iconConfig;

        on(node, 'click', lang.hitch(this, this._onIconClick, node));

        return node;
      },

      // on icon click
      _onIconClick: function(node) {
        var id = node.config.id;
        if (this.openedIds.indexOf(id) !== -1) {
          this._switchNodeToClose(id);
        } else {
          this._switchNodeToOpen(id);
        }
      },

      // switch node to open
      _switchNodeToOpen: function(id) {
        var node = this._getIconNodeById(id);
        if (!node) {
          return;
        }
        if (node.config.widgets && node.config.widgets.length > 1) {
          var interval = 0;
          array.forEach(node.config.widgets, lang.hitch(this, function(w) {
            setTimeout(lang.hitch(this, this._showIconContent), interval, w);
            interval += 600;
          }));
        } else {
          this._showIconContent(node.config);
          if (node.config.inPanel) {
            domClass.add(node, "icon-node-active");
          }
        }
      },

      // switch node to close
      _switchNodeToClose: function(id) {
        var node = this._getIconNodeById(id);
        if (!node) {
          return;
        }
        if (node.config.inPanel === false) {
          this.openedId = '';
          this.widgetManager.closeWidget(id);
        } else {
          var idx = this.openedIds.indexOf(id);
          if (idx !== -1) {
            this.openedIds.splice(idx, 1);
          }
          this._updatePanelCount(-1);
          domClass.remove(node, "icon-node-active");
          this.panelManager.closePanel(id + '_panel');
        }
      },

      // get icon node by id
      _getIconNodeById: function(id) {
        var node = query('.icon-node[settingId="' + id + '"]', this.domNode);
        if (node.length === 0) {
          return;
        }
        return node[0];
      },

      // show icon content
      _showIconContent: function(iconConfig) {
        if (iconConfig.inPanel === false) {
          var name = iconConfig.name;
          this.widgetManager.loadWidget(iconConfig).then(lang.hitch(this, function(widget) {
            this.openedId = iconConfig.id;
            html.setStyle(widget.domNode, 'zIndex', 0);
            if (name !== "OverviewMap") {
              widget.setPosition(this.wPos, window.jimuConfig.mapId);
            }
            this.widgetManager.openWidget(widget);
            domStyle.set(widget.domNode, "display", null);
            this._minimizeController();
          }));
        } else {
          var pid = iconConfig.id + '_panel';
          var panel = this.panelManager.getPanelById(pid);
          var pos = this._getNextPosition();
          if (panel) {
            pos = panel.position;
          }
          iconConfig.panel.position = pos;
          this.openedIds.push(iconConfig.id);
          this.panelManager.showPanel(iconConfig).then(lang.hitch(this, function(panel) {
            aspect.after(panel, 'onClose', lang.hitch(this, function() {
              this._switchNodeToClose(iconConfig.id);
            }));
          }));
        }
      },

      // get next position
      _getNextPosition: function() {
        this._updatePanelCount(1);
        var offset = (this.panelCount - 1) * 10 + 10;
        var pos = {
          top: offset,
          left: offset,
          width: 320,
          height: 450,
          relativeTo: 'map'
        };
        return pos;
      },

      // update panel count
      _updatePanelCount: function(value) {
        this.panelCount += value;
        if (this.panelCount < 0) {
          this.panelCount = 0;
        }
      }


    });
    return clazz;
  });