///import core
///import uicore
(function() {
  var utils = baidu.editor.utils,
    uiUtils = baidu.editor.ui.uiUtils,
    UIBase = baidu.editor.ui.UIBase;

  var TablePicker = (baidu.editor.ui.TablePicker = function(options) {
    this.initOptions(options);
    this.initTablePicker();
  });
  TablePicker.prototype = {
    defaultNumRows: 10,
    defaultNumCols: 10,
    maxNumRows: 20,
    maxNumCols: 20,
    numRows: 10,
    numCols: 10,
    lengthOfCellSide: 22,
    initTablePicker: function() {
      this.initUIBase();
    },
    getHtmlTpl: function() {
      var me = this;
      return (
        '<div id="##" class="edui-tablepicker %%">' +
        '<div class="edui-tablepicker-body">' +
        '<div class="edui-infoarea">' +
        '<span id="##_label" class="edui-label"></span>' +
        "</div>" +
        '<div class="edui-pickarea"' +
        ' onmousemove="$$._onMouseMove(event, this);"' +
        ' onmouseover="$$._onMouseOver(event, this);"' +
        ' onmouseout="$$._onMouseOut(event, this);"' +
        ' onclick="$$._onClick(event, this);"' +
        ">" +
        '<div id="##_overlay" class="edui-overlay"></div>' +
        "</div>" +
        "</div>" +
        "</div>"
      );
    },
    _UIBase_render: UIBase.prototype.render,
    render: function(holder) {
      this._UIBase_render(holder);
      this.getDom("label").innerHTML =
        "0" +
        this.editor.getLang("t_row") +
        " x 0" +
        this.editor.getLang("t_col");
    },
    _track: function(numCols, numRows) {
      var style = this.getDom("overlay").style;
      var sideLen = this.lengthOfCellSide;
      style.width = numCols * sideLen + "px";
      style.height = numRows * sideLen + "px";
      var label = this.getDom("label");
      label.innerHTML =
        numCols +
        this.editor.getLang("t_col") +
        " x " +
        numRows +
        this.editor.getLang("t_row");
      this.numCols = numCols;
      this.numRows = numRows;
    },
    _onMouseOver: function(evt, el) {
      var rel = evt.relatedTarget || evt.fromElement;
      if (!uiUtils.contains(el, rel) && el !== rel) {
        this.getDom("label").innerHTML =
          "0" +
          this.editor.getLang("t_col") +
          " x 0" +
          this.editor.getLang("t_row");
        this.getDom("overlay").style.visibility = "";
      }
    },
    _onMouseOut: function(evt, el) {
      var rel = evt.relatedTarget || evt.toElement;
      if (!uiUtils.contains(el, rel) && el !== rel) {
        this.getDom("label").innerHTML =
          "0" +
          this.editor.getLang("t_col") +
          " x 0" +
          this.editor.getLang("t_row");
        this.getDom("overlay").style.visibility = "hidden";
      }
    },
    _onMouseMove: function(evt, el) {
      var style = this.getDom("overlay").style;
      var offset = uiUtils.getEventOffset(evt);
      var sideLen = this.lengthOfCellSide;
      var numCols = Math.ceil(offset.left / sideLen);
      var numRows = Math.ceil(offset.top / sideLen);
      this._track(numCols, numRows);
    },
    _onClick: function() {
      this.fireEvent("picktable", this.numCols, this.numRows);
    }
  };
  utils.inherits(TablePicker, UIBase);
})();