text: /**
   * rect.
   */
  
  var window = global.window,
      $ = window.$,
      mass = global.mass,
      _ = window._,
      document = window.document,
      console = window.console;
  
  var main = {
    // 画热区
    drawMap: function () {
      var cache = mass.cache,
          imgCover = $('#J-image-process-cover'),
          imgItem = imgCover.parent(),
          newRect = $('<div class="rect"></div>'),
          _drawMove = false,
          _drawMoving = false,
          scrollTop = 0,
          scrollLeft = 0,
          imgWidth, imgHeight,
          left, top, distX, distY, rect, rectCreated;
  
      var _rectMove = false,
          _rectMoving = false,
          rectAddX = 0,
          rectAddY = 0,
          currentRectId, trueLeft, trueTop, currentRect;
  
      var _rectResize = false,
          _rectResizing = false,
          trueWidth, trueHeight;
  
      // 点击层或resize时，将焦点放在当前的层，同时赋值基础数据
      var focusCurrentBlock = function (e, id) {
        main.focus(id);
        currentRect = cache.rect[cache.focusRectId];
  
        left = e.clientX - cache.minusX + imgItem.scrollLeft();
        top = e.clientY - cache.minusY + imgItem.scrollTop();
        distX = e.clientX - cache.minusX + scrollLeft;
        distY = e.clientY - cache.minusY + scrollTop;
        imgWidth = cache.img.width;
        imgHeight = cache.img.height;
        rectAddX = left - currentRect.left;
        rectAddY = top - currentRect.top;
  
        var $curRect = $('#' + id);
        if ($curRect.hasClass('rect-error')) {
          $curRect.removeClass('rect-error');
        }
      };
  
      imgCover.mousedown(function (e) {
        // 右键不触发
        if (e.button === 2) return;
  
        if (cache.drawMap) {
          _drawMove = true;
          left = e.clientX - cache.minusX + imgItem.scrollLeft();
          top = e.clientY - cache.minusY + imgItem.scrollTop();
          distX = left;
          distY = top;
  
          imgWidth = cache.img.width;
          imgHeight = cache.img.height;
        }
      });
  
      $(document).mousemove(function (e) {
        if (_drawMove || _rectMove || _rectResize) {
          scrollLeft = imgItem.scrollLeft();
          scrollTop = imgItem.scrollTop();
          distX = e.clientX - cache.minusX + scrollLeft;
          distY = e.clientY - cache.minusY + scrollTop;
  
          distX = Math.min(distX, imgWidth - 2);
          distY = Math.min(distY, imgHeight - 2);
  
          var $currentRect = $('#' + currentRectId);
        }
  
        if (_drawMove) {
          if (!rectCreated) {
            rect = newRect.clone().attr('id', 'rect-' + cache.rectuuid);
            imgCover.append(rect);
            rectCreated = true;
            main.focus('rect-' + cache.rectuuid);
  
            cache.rectuuid++;
            cache.rectNum++;
          }
  
          rect.css({
            left: left,
            top: top,
            width: distX - left,
            height: distY - top
          });
  
          _drawMoving = true;
        }
        else if (_rectMove) {
          trueLeft = distX - rectAddX;
          trueTop = distY - rectAddY;
          //cacheRect = cache.rect[currentRectId];
  
          // 子欲拖出图片区域之外，我偏不让
          // 拖到图像区域外松手时，将left值替换成边界值
          if (trueLeft > imgWidth - currentRect.width - 2) {
            trueLeft = imgWidth - currentRect.width - 2;
          } else if (trueLeft < 0) {
            trueLeft = 0;
          }
  
          if (trueTop > imgHeight - currentRect.height - 2) {
            trueTop = imgHeight - currentRect.height - 2;
          } else if (trueTop < 0) {
            trueTop = 0;
          }
  
          $currentRect.css({
            left: trueLeft,
            top: trueTop
          });
  
          _rectMoving = true;
        }
        else if (_rectResize) {
          trueWidth = distX - currentRect.left;
          trueHeight = distY - currentRect.top;
  
          // 子欲拖出图片区域之外，我偏不让
          if (trueWidth > imgWidth - currentRect.left - 2) {
            trueWidth = imgWidth - currentRect.left - 2;
          } else if (trueWidth < 10) {
            trueWidth = 10;
          }
          if (trueHeight > imgHeight - currentRect.top - 2) {
            trueHeight = imgHeight - currentRect.top - 2;
          } else if (trueHeight < 10) {
            trueHeight = 10;
          }
  
          $currentRect.css({
            width: trueWidth,
            height: trueHeight
          });
  
          // 热区设置层同步赋值
          if (!$currentRect.find('.setting-area').hasClass('hide')) {
            $currentRect.find('input[data-type="width"]').val(trueWidth);
            $currentRect.find('input[data-type="height"]').val(trueHeight);
          }
  
          _rectResizing = true;
        }
      }).mouseup(function () {
        if (_drawMove) {
          if (_drawMoving) {
            if (distX < left || distY < top) {
              main.delete(cache.focusRectId);
            }
            else {
              // 超出图片区域之外，将dist值替换成边界值
              if (distX > imgWidth - 2) {
                distX = imgWidth - 2;
              }
              if (distY > imgHeight - 2) {
                distY = imgHeight - 2;
              }
  
              cache.rect[cache.focusRectId] = {
                left: left,
                top: top,
                width: Math.max(distX - left, 10),
                height: Math.max(distY - top, 10),
                url: '#',
                open: false
              };
  
              rect.css('cursor', 'move')
                  .append($('#J-template-rect-setting').clone().removeAttr('id'))
                  .append('<div class="setting"><span class="glyphicon glyphicon-cog"></span></div><div class="resize"></div>');
            }
          }
  
          _drawMove = false;
          _drawMoving = false;
          rectCreated = false;
        }
  
        if (_rectMove) {
          if (_rectMoving) {
            cache.rect[currentRectId].left = trueLeft;
            cache.rect[currentRectId].top = trueTop;
  
            _rectMoving = false;
          }
          _rectMove = false;
        }
  
        if (_rectResize) {
          if (_rectResizing) {
            cache.rect[currentRectId].width = trueWidth;
            cache.rect[currentRectId].height = trueHeight;
  
            _rectResizing = false;
          }
          _rectResize = false;
  
          if (cache.drawMap) {
            imgCover.removeClass('resizing');
          }
        }
      });
  
      // 热区移动
      imgCover.delegate('.rect', 'mousedown', function (e) {
        e.stopPropagation();
        //if (e.button === 2) return;
        currentRectId = this.id;
        focusCurrentBlock(e, currentRectId);
  
        _rectMove = true;
      });
  
      // 热区收缩
      imgCover.delegate('.resize', 'mousedown', function (e) {
        e.stopPropagation();
  
        currentRectId = this.parentNode.id;
        focusCurrentBlock(e, currentRectId);
  
        if (cache.drawMap) {
          imgCover.addClass('resizing');
        }
  
        _rectResize = true;
      });
  
      // 热区设置
      imgCover.delegate('.setting', 'mousedown', function (e) {
        e.stopPropagation();
        var that = $(this),
            area = that.prev(),
            rectId = that.parent().attr('id'),
            rect = cache.rect[rectId];
  
        if (area.hasClass('hide')) {
          area.removeClass('hide');
          area.find('input').each(function () {
            var curInput = $(this),
                type = curInput.data('type');
            if (curInput.is(':checkbox')) {
              if (rect[type]) {
                curInput.attr('checked', true);
              } else {
                curInput.removeAttr('checked');
              }
            } else {
              rect[type] && curInput.val(rect[type]);
            }
          });
        } else {
          area.addClass('hide');
        }
      }).delegate('.setting-area', 'mousedown', function (e) {
        e.stopPropagation();
      }).delegate('.rect-setting-column input', 'change', function (e) {
        var that = $(this),
            value = that.val(),
            type = that.data('type'),
            rectId = that.parents('.rect').attr('id'),
            curRect = $('#' + rectId),
            rect = cache.rect[rectId];
  
        if (type === 'open') {
          value = that.is(':checked');
        }
        else if (type === 'width') {
          value = parseInt(value);
          if (value > cache.img.width - rect.left - 2) {
            value = cache.img.width - rect.left - 2;
          }
          curRect.width(value)
        }
        else if (type === 'height') {
          value = parseInt(value);
          if (value > cache.img.height - rect.top - 2) {
            value = cache.img.height - rect.top - 2;
          }
          curRect.height(value)
        }
  
        rect[type] = value;
        that.val(value);
  
        e.stopPropagation();
      });
    },
    reset: function () {
      // 清除旧的热区
      $('#J-image-process-cover').find('.rect').remove();
  
      $.extend(true, mass.cache, {
        rectuuid: 1,
        rectNum: 0,
        focusRectId: null
      });
  
      mass.cache.rect = {};
    },
    /*
     * option:
     * {
     *     left: Number,
     *     top: Number,
     *     width: Number,
     *     height: Number,
     *     url: String,
     *     open: Boolean
     * }
     * */
    add: function (option) {
      var cache = mass.cache,
          rectuuid = cache.rectuuid,
          rectId = 'rect-' + rectuuid,
          imgCover = $('#J-image-process-cover'),
          rectEntry = $('<div class="rect"></div>'),
          settingArea = $('<div class="setting-area hide"></div>'),
          resizeZone = $('<div class="setting"><span class="glyphicon glyphicon-cog"></span></div><div class="resize"></div>'),
          currentStyles;
  
      currentStyles = {
        left: option.left,
        top: option.top,
        width: option.width,
        height: option.height,
        cursor: 'move'
      };
  
      settingArea.append($('#J-template-rect-setting').html());
      rectEntry.attr('id', rectId).css(currentStyles).append(settingArea).append(resizeZone);
      imgCover.append(rectEntry);
  
      cache.rectuuid++;
      cache.rectNum++;
      cache.rect[rectId] = option;
    },
    focus: function (rectId) {
      var cache = mass.cache,
          imgCover = $('#J-image-process-cover');
  
      cache.focusRectId = rectId;
      cache.focusLineId = null;
      cache.focusTextAreaId = null;
      imgCover.find('.lineX, .lineY').removeClass('line-focus');
      imgCover.find('.textzone').removeClass('textzone-focus');
      imgCover.find('.rect').removeClass('rect-focus');
      $('#' + rectId).addClass('rect-focus');
    },
    delete: function (rectId) {
      var cache = mass.cache,
          curRect = $('#' + rectId);
  
      cache.rectNum--;
  
      delete mass.cache.rect[rectId];
      cache.focusRectId = null;
  
      curRect.remove();
    },
    // 批量导入热区
    import: function (rectObj, callback) {
      _.each(rectObj, function (rect) {
        main.add(rect);
      });
  
      if (callback) {
        callback();
      }
    },
    // 检查热区位置
    check: function () {
      var cache = mass.cache,
          lines = cache.line,
          rects = cache.rect,
          isBig2 = !!(cache.img.width > 990 && cache.lineY > 1),
          critical = {
            X: {},
            Y: {}
          },
          rectInBlock = {},
          blocks,
          res = true;
  
      if (!cache.rectNum) return res;
  
      $('.rect').removeClass('rect-error');
  
      $.each(rects, function (rectId, rect) {
        critical.Y.x = rect.left;
        critical.Y.y = rect.left + rect.width;
        critical.X.x = rect.top;
        critical.X.y = rect.top + rect.height;
        $.each(lines, function (lineId, line) {
          var type = line.type,
              pos = line.pos;
  
          if (pos > critical[type].x && pos < critical[type].y) {
            res = false;
            console.log(rectId, type, critical);
            console.log(lineId, pos);
            console.log('--------');
            $('#' + rectId).addClass('rect-error');
          }
        });
      });
  
      if (res) {
        if (isBig2) {
          blocks = mass.getChildBlocks();
  
          $.each(blocks, function (i, block) {
            var blockParentIndex = block.parentBlockIndex;
            $.each(rects, function (rectId, rect) {
              var topAndSelfHeight = block.y + block.height,
                  leftAndSelfWidth = block.x + block.width;
  
              if (block.width > rect.width && block.x < rect.left && block.y < rect.top && (topAndSelfHeight > rect.top + rect.height) && (leftAndSelfWidth > rect.left + rect.width)) {
                rectInBlock[blockParentIndex] = rectInBlock[blockParentIndex] || [];
                rectInBlock[blockParentIndex].push({
                  rect: rect,
                  left: rect.left - block.x,
                  top: rect.top - block.y,
                  belongBlockIndex: block.index
                });
              }
            });
          });
        }
        else {
          blocks = mass.getCutBlocks();
  
          $.each(blocks, function (i, block) {
            $.each(rects, function (rectId, rect) {
              var topAndSelfHeight = block.y + block.height,
                  leftAndSelfWidth = block.x + block.width;
  
              if (block.width > rect.width && block.x < rect.left && block.y < rect.top && (topAndSelfHeight > rect.top + rect.height) && (leftAndSelfWidth > rect.left + rect.width)) {
                rectInBlock[i] = rectInBlock[i] || [];
                rectInBlock[i].push({
                  rect: rect,
                  left: rect.left - block.x,
                  top: rect.top - block.y
                });
              }
            });
          });
        }
      }
      cache.rectInBlock = rectInBlock;
  
      return res;
      //return false;
    }
  };
  module.exports = main;