define(['dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/on',
    'dojo/dom-style',
    'dojo/dom-class',
    'dojo/dom-construct',
    'dojo/dom-geometry',
    'dojo/_base/fx',
    'dojo/dnd/move',
    'dojox/layout/ResizeHandle',
    'jimu/utils',
    'jimu/BaseWidgetPanel',
    'dijit/_TemplatedMixin',
    'dojo/text!./Panel.html'
  ],
  function(declare, lang, on, domStyle, domClass, domConstruct, domGeometry, baseFx, Move,
    ResizeHandle, utils, BaseWidgetPanel, _TemplatedMixin, template) {
    /* global jimuConfig*/
    var borderRadius = '4px',
      DEFAULT_WIDTH = 320,
      DEFAULT_HEIGHT = 450;

    return declare([BaseWidgetPanel, _TemplatedMixin], {
      baseClass: 'dart-panel dart-bgcolor jimu-main-background shadow',
      templateString: template,
      titleHeight: 60,
      normalPosition: null,
      lastWindowState: null,
      openAnimation: 'fadeIn',
      closeAnimation: 'fadeOut',
      animationDuration: 400,
      moving: false,

      postCreate: function() {
        this.inherited(arguments);
        this._makeOriginalBox();
      },

      startup: function() {
        this.inherited(arguments);
        this.panelManager.normalizePanel(this);
      },

      _makeOriginalBox: function() {
        this._originalBox = {
          w: this.position.width || DEFAULT_WIDTH,
          h: this.position.height || DEFAULT_HEIGHT,
          l: this.position.left || 0,
          t: this.position.top || 0
        };
      },

      makeMoveable: function(handleNode, width, tolerance) {
        this.disableMoveable();
        var containerBox = domGeometry.getMarginBox(jimuConfig.layoutId);
        containerBox.l = containerBox.l - width + tolerance;
        containerBox.w = containerBox.w + 2 * (width - tolerance);

        this.moveable = new Move.boxConstrainedMoveable(this.domNode, {
          box: containerBox,
          handle: handleNode || this.handleNode,
          within: true
        });
        this.own(on(this.moveable, 'MoveStart', lang.hitch(this, this.onMoveStart)));
        this.own(on(this.moveable, 'Moving', lang.hitch(this, this.onMoving)));
        this.own(on(this.moveable, 'MoveStop', lang.hitch(this, this.onMoveStop)));
      },

      disableMoveable: function() {
        if (this.moveable) {
          this.moveable.destroy();
          this.moveable = null;
        }
      },

      makeResizable: function() {
        this.disableResizable();
        this.resizeHandle = new ResizeHandle({
          targetId: this,
          minWidth: this._originalBox.w,
          minHeight: this._originalBox.h,
          activeResize: false
        }).placeAt(this.domNode);
        this.resizeHandle.startup();
      },

      disableResizable: function() {
        if (this.resizeHandle) {
          this.resizeHandle.destroy();
          this.resizeHandle = null;
        }
      },

      onMoveStart: function(mover) {
        if (window.isRTL) {
          var containerBox = domGeometry.getMarginBox(jimuConfig.layoutId),
            domBox = domGeometry.getMarginBox(this.domNode),
            rightPx = domStyle.get(mover.node, 'right');
          domStyle.set(mover.node, 'left',
           (containerBox.w - domBox.w - parseInt(rightPx, 10)) + 'px');
          domStyle.set(mover.node, 'right', '');
        }
      },

      onMoving: function(mover) {
        domStyle.set(mover.node, 'opacity', 0.9);
        this.moving = true;
      },

      onMoveStop: function(mover) {
        domStyle.set(mover.node, 'opacity', 1);
        var panelBox = domGeometry.getMarginBox(mover.node);
        this.position.left = panelBox.l;
        this.position.top = panelBox.t;
        setTimeout(lang.hitch(this, function() {
          this.moving = false;
        }), 500);
      },

      _getLayoutBox: function() {
        var pid = jimuConfig.layoutId;
        if (this.position.relativeTo === 'map') {
          pid = jimuConfig.mapId;
        } else {
          pid = jimuConfig.layoutId;
        }
        return domGeometry.getMarginBox(pid);
      },

      _onMinClick: function(evt) {
        if (this.windowState === 'minimized') {
          this.panelManager.normalizePanel(this);
        } else {
          this.panelManager.minimizePanel(this);
        }
        evt.stopPropagation();
      },

      _onCloseClick: function(evt) {
        this.panelManager.closePanel(this, 'wipe');
        evt.stopPropagation();
      },

      _onHandleClick: function(evt) {
        if (this.windowState === 'minimized' && !this.moving) {
          this.panelManager.normalizePanel(this);
        }
        evt.stopPropagation();
      },

      _calculatePanelPosition: function() {
        if (this.windowState === 'minimized') {
          this._minimize();
        } else {
          this._normalize();
        }
      },

      _minimize: function() {
        this.disableResizable();
        domClass.add(this.closeNode, 'minimized');
        domClass.add(this.minNode, 'minimized');
        domClass.add(this.handleNode, 'minimized');
        baseFx.animateProperty({
          node: this.domNode,
          properties: {
            width: {
              start: this.normalPosition.w,
              end: this.titleHeight
            },
            height: {
              start: this.normalPosition.h,
              end: this.titleHeight
            }
          },
          duration: 400
        }).play();
      },

      _normalize: function() {
        this._onResponsible();
        domClass.remove(this.closeNode, 'minimized');
        domClass.remove(this.minNode, 'minimized');
        domClass.remove(this.handleNode, 'minimized');
        var pos;

        if (this.normalPosition) {
          pos = {
            left: this.normalPosition.x,
            top: this.normalPosition.y,
            width: this.normalPosition.w,
            bottom: 'auto',
            height: this.normalPosition.h,
            borderRadiusStyle: {
              borderTopLeftRadius: borderRadius,
              borderTopRightRadius: borderRadius,
              borderBottomLeftRadius: 0,
              borderBottomRightRadius: 0
            }
          };
          baseFx.animateProperty({
            node: this.domNode,
            properties: {
              width: {
                end: this.normalPosition.w,
                start: this.titleHeight
              },
              height: {
                end: this.normalPosition.h,
                start: this.titleHeight
              }
            },
            duration: 400
          }).play();
        } else {
          pos = lang.clone(this.position);
          if (typeof pos.width === 'undefined') {
            pos.width = DEFAULT_WIDTH;
          }
          if (typeof pos.height === 'undefined') {
            pos.height = DEFAULT_HEIGHT;
          }
          pos.borderRadiusStyle = {
            borderTopLeftRadius: borderRadius,
            borderTopRightRadius: borderRadius,
            borderBottomLeftRadius: borderRadius,
            borderBottomRightRadius: borderRadius
          };
          this._setPositionStyle(pos);
        }
      },

      _setPositionStyle: function(pos) {
        var style;

        if (this.position.zIndex) {
          pos.zIndex = this.position.zIndex;
        }
        this.position.left = pos.left;
        this.position.top = pos.top;
        this.position.width = pos.width;
        this.position.height = pos.height;

        style = utils.getPositionStyle(pos);
        lang.mixin(style, pos.borderRadiusStyle);

        if (style.zIndex === 'auto') {
          style.zIndex = 0;
        }
        domStyle.set(this.domNode, style);
      },

      /**
       * @override
       * @param {[type]} position      [description]
       * @param {[type]} containerNode [description]
       */
      setPosition: function(position, containerNode) {
        var style, box, row, col, margin = 10;

        if (!containerNode) {
          if (position.relativeTo === 'map') {
            containerNode = window.jimuConfig.mapId;
          } else {
            containerNode = window.jimuConfig.layoutId;
          }
        }

        box = domGeometry.getMarginBox(containerNode);
        if (window.appInfo.isRunInMobile) {
          position.left = 0;
          position.top = 0;
          position.width = box.w;
          position.height = box.h - 220;
        }

        if (position.left + position.width > box.w) {
          row = Math.ceil((position.left + position.width - box.w) / box.w);
          col = Math.floor((position.left + position.width - box.w * row) / position.width);
          position.left = (row + 1) * margin + col * (position.width + margin);
          position.top -= margin * row;
        }

        this.position = position;
        style = utils.getPositionStyle(this.position);
        style.position = 'absolute';
        if (window.appInfo.isRunInMobile) {
          style.width = '100%';
        }
        if (style.zIndex === 'auto') {
          style.zIndex = 0;
        }
        domConstruct.place(this.domNode, containerNode);
        domStyle.set(this.domNode, style);

        if (this.windowState === 'minimized') {
          this.panelManager.normalizePanel(this);
        }

        this._onResponsible();
      },

      /**
       * @override
       * @return {[type]} [description]
       */
      onNormalize: function() {
        this._calculatePanelPosition();
      },

      /**
       * @override
       * @return {[type]} [description]
       */
      onMinimize: function() {
        this.normalPosition = domGeometry.position(this.domNode);
        this._calculatePanelPosition();
      },

      /**
       * @override
       * @return {[type]} [description]
       */
      resize: function(tmp) {
        if (!tmp) {
          return;
        }
        var pos, style;
        var zIndex = this.position.zIndex;
        pos = {
          left: tmp.l ? tmp.l : this.position.left,
          top: tmp.t ? tmp.t : this.position.top,
          width: tmp.w ? tmp.w : this.position.width,
          height: tmp.h ? tmp.h : this.position.height
        };
        this.position = pos;
        style = utils.getPositionStyle(this.position);
        style.zIndex = zIndex;
        if(window.isRTL && 'right' in style){
          style.left = style.right;
          style.right = '';
        }
        domStyle.set(this.domNode, style);
        this._onResponsible();
        this.inherited(arguments);
      },

      _onResponsible: function() {
        if (window.appInfo.isRunInMobile) {
          this.disableMoveable();
          this.disableResizable();
        } else {
          this.makeResizable();
          this.makeMoveable(this.handleNode, this.position.w, this.position.w * 0.25);
        }
      }

    });
  });