text: /**
   * Created with JetBrains PhpStorm.
   * User: xuheng
   * Date: 12-5-22
   * Time: 上午11:38
   * To change this template use File | Settings | File Templates.
   */
  var scrawl = function (options) {
      options && this.initOptions(options);
  };
  (function () {
      var canvas = $G("J_brushBoard"),
          context = canvas.getContext('2d'),
          drawStep = [], //undo redo存储
          drawStepIndex = 0; //undo redo指针
  
      scrawl.prototype = {
          isScrawl: false, //是否涂鸦
          brushWidth: -1, //画笔粗细
          brushColor: "", //画笔颜色
  
          initOptions: function (options) {
              var me = this;
              me.originalState(options);//初始页面状态
              me._buildToolbarColor(options.colorList);//动态生成颜色选择集合
  
              me._addBoardListener(options.saveNum);//添加画板处理
              me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理
              me._addColorBarListener();//添加颜色选择处理
              me._addBrushBarListener();//添加画笔大小处理
              me._addEraserBarListener();//添加橡皮大小处理
              me._addAddImgListener();//添加增添背景图片处理
              me._addRemoveImgListenter();//删除背景图片处理
              me._addScalePicListenter();//添加缩放处理
              me._addClearSelectionListenter();//添加清楚选中状态处理
  
              me._originalColorSelect(options.drawBrushColor);//初始化颜色选中
              me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中
              me._clearSelection();//清楚选中状态
          },
  
          originalState: function (options) {
              var me = this;
  
              me.brushWidth = options.drawBrushSize;//同步画笔粗细
              me.brushColor = options.drawBrushColor;//同步画笔颜色
  
              context.lineWidth = me.brushWidth;//初始画笔大小
              context.strokeStyle = me.brushColor;//初始画笔颜色
              context.fillStyle = "transparent";//初始画布背景颜色
              context.lineCap = "round";//去除锯齿
              context.fill();
          },
          _buildToolbarColor: function (colorList) {
              var tmp = null, arr = [];
              arr.push("<table id='J_colorList'>");
              for (var i = 0, color; color = colorList[i++];) {
                  if ((i - 1) % 5 == 0) {
                      if (i != 1) {
                          arr.push("</tr>");
                      }
                      arr.push("<tr>");
                  }
                  tmp = '#' + color;
                  arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>");
              }
              arr.push("</tr></table>");
              $G("J_colorBar").innerHTML = arr.join("");
          },
  
          _addBoardListener: function (saveNum) {
              var me = this,
                  margin = 0,
                  startX = -1,
                  startY = -1,
                  isMouseDown = false,
                  isMouseMove = false,
                  isMouseUp = false,
                  buttonPress = 0, button, flag = '';
  
              margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left"));
              drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
              drawStepIndex += 1;
  
              domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) {
                  button = browser.webkit ? e.which : buttonPress;
                  switch (e.type) {
                      case 'mousedown':
                          buttonPress = 1;
                          flag = 1;
                          isMouseDown = true;
                          isMouseUp = false;
                          isMouseMove = false;
                          me.isScrawl = true;
                          startX = e.clientX - margin;//10为外边距总和
                          startY = e.clientY - margin;
                          context.beginPath();
                          break;
                      case 'mousemove' :
                          if (!flag && button == 0) {
                              return;
                          }
                          if (!flag && button) {
                              startX = e.clientX - margin;//10为外边距总和
                              startY = e.clientY - margin;
                              context.beginPath();
                              flag = 1;
                          }
                          if (isMouseUp || !isMouseDown) {
                              return;
                          }
                          var endX = e.clientX - margin,
                              endY = e.clientY - margin;
  
                          context.moveTo(startX, startY);
                          context.lineTo(endX, endY);
                          context.stroke();
                          startX = endX;
                          startY = endY;
                          isMouseMove = true;
                          break;
                      case 'mouseup':
                          buttonPress = 0;
                          if (!isMouseDown) return;
                          if (!isMouseMove) {
                              context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false);
                              context.fillStyle = context.strokeStyle;
                              context.fill();
                          }
                          context.closePath();
                          me._saveOPerate(saveNum);
                          isMouseDown = false;
                          isMouseMove = false;
                          isMouseUp = true;
                          startX = -1;
                          startY = -1;
                          break;
                      case 'mouseout':
                          flag = '';
                          buttonPress = 0;
                          if (button == 1) return;
                          context.closePath();
                          break;
                  }
              });
          },
          _addOPerateListener: function (saveNum) {
              var me = this;
              domUtils.on($G("J_previousStep"), "click", function () {
                  if (drawStepIndex > 1) {
                      drawStepIndex -= 1;
                      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
                      context.putImageData(drawStep[drawStepIndex - 1], 0, 0);
                      me.btn2Highlight("J_nextStep");
                      drawStepIndex == 1 && me.btn2disable("J_previousStep");
                  }
              });
              domUtils.on($G("J_nextStep"), "click", function () {
                  if (drawStepIndex > 0 && drawStepIndex < drawStep.length) {
                      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
                      context.putImageData(drawStep[drawStepIndex], 0, 0);
                      drawStepIndex += 1;
                      me.btn2Highlight("J_previousStep");
                      drawStepIndex == drawStep.length && me.btn2disable("J_nextStep");
                  }
              });
              domUtils.on($G("J_clearBoard"), "click", function () {
                  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
                  drawStep = [];
                  me._saveOPerate(saveNum);
                  drawStepIndex = 1;
                  me.isScrawl = false;
                  me.btn2disable("J_previousStep");
                  me.btn2disable("J_nextStep");
                  me.btn2disable("J_clearBoard");
              });
          },
          _addColorBarListener: function () {
              var me = this;
              domUtils.on($G("J_colorBar"), "click", function (e) {
                  var target = me.getTarget(e),
                      color = target.title;
                  if (!!color) {
                      me._addColorSelect(target);
  
                      me.brushColor = color;
                      context.globalCompositeOperation = "source-over";
                      context.lineWidth = me.brushWidth;
                      context.strokeStyle = color;
                  }
              });
          },
          _addBrushBarListener: function () {
              var me = this;
              domUtils.on($G("J_brushBar"), "click", function (e) {
                  var target = me.getTarget(e),
                      size = browser.ie ? target.innerText : target.text;
                  if (!!size) {
                      me._addBESelect(target);
  
                      context.globalCompositeOperation = "source-over";
                      context.lineWidth = parseInt(size);
                      context.strokeStyle = me.brushColor;
                      me.brushWidth = context.lineWidth;
                  }
              });
          },
          _addEraserBarListener: function () {
              var me = this;
              domUtils.on($G("J_eraserBar"), "click", function (e) {
                  var target = me.getTarget(e),
                      size = browser.ie ? target.innerText : target.text;
                  if (!!size) {
                      me._addBESelect(target);
  
                      context.lineWidth = parseInt(size);
                      context.globalCompositeOperation = "destination-out";
                      context.strokeStyle = "#FFF";
                  }
              });
          },
          _addAddImgListener: function () {
              var file = $G("J_imgTxt");
              if (!window.FileReader) {
                  $G("J_addImg").style.display = 'none';
                  $G("J_removeImg").style.display = 'none';
                  $G("J_sacleBoard").style.display = 'none';
              }
              domUtils.on(file, "change", function (e) {
                  var frm = file.parentNode;
                  addMaskLayer(lang.backgroundUploading);
  
                  var target = e.target || e.srcElement,
                      reader = new FileReader();
                  reader.onload = function (evt) {
                      var target = evt.target || evt.srcElement;
                      ue_callback(target.result, 'SUCCESS');
                  };
                  reader.readAsDataURL(target.files[0]);
                  frm.reset();
              });
          },
          _addRemoveImgListenter: function () {
              var me = this;
              domUtils.on($G("J_removeImg"), "click", function () {
                  $G("J_picBoard").innerHTML = "";
                  me.btn2disable("J_removeImg");
                  me.btn2disable("J_sacleBoard");
              });
          },
          _addScalePicListenter: function () {
              domUtils.on($G("J_sacleBoard"), "click", function () {
                  var picBoard = $G("J_picBoard"),
                      scaleCon = $G("J_scaleCon"),
                      img = picBoard.children[0];
  
                  if (img) {
                      if (!scaleCon) {
                          picBoard.style.cssText = "position:relative;z-index:999;" + picBoard.style.cssText;
                          img.style.cssText = "position: absolute;top:" + (canvas.height - img.height) / 2 + "px;left:" + (canvas.width - img.width) / 2 + "px;";
                          var scale = new ScaleBoy();
                          picBoard.appendChild(scale.init());
                          scale.startScale(img);
                      } else {
                          if (scaleCon.style.visibility == "visible") {
                              scaleCon.style.visibility = "hidden";
                              picBoard.style.position = "";
                              picBoard.style.zIndex = "";
                          } else {
                              scaleCon.style.visibility = "visible";
                              picBoard.style.cssText += "position:relative;z-index:999";
                          }
                      }
                  }
              });
          },
          _addClearSelectionListenter: function () {
              var doc = document;
              domUtils.on(doc, 'mousemove', function (e) {
                  if (browser.ie && browser.version < 11)
                      doc.selection.clear();
                  else
                      window.getSelection().removeAllRanges();
              });
          },
          _clearSelection: function () {
              var list = ["J_operateBar", "J_colorBar", "J_brushBar", "J_eraserBar", "J_picBoard"];
              for (var i = 0, group; group = list[i++];) {
                  domUtils.unSelectable($G(group));
              }
          },
  
          _saveOPerate: function (saveNum) {
              var me = this;
              if (drawStep.length <= saveNum) {
                  if (drawStepIndex < drawStep.length) {
                      me.btn2disable("J_nextStep");
                      drawStep.splice(drawStepIndex);
                  }
                  drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
                  drawStepIndex = drawStep.length;
              } else {
                  drawStep.shift();
                  drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
                  drawStepIndex = drawStep.length;
              }
              me.btn2Highlight("J_previousStep");
              me.btn2Highlight("J_clearBoard");
          },
  
          _originalColorSelect: function (title) {
              var colorList = $G("J_colorList").getElementsByTagName("td");
              for (var j = 0, cell; cell = colorList[j++];) {
                  if (cell.children[0].title.toLowerCase() == title) {
                      cell.children[0].style.opacity = 1;
                  }
              }
          },
          _originalBrushSelect: function (text) {
              var brushList = $G("J_brushBar").children;
              for (var i = 0, ele; ele = brushList[i++];) {
                  if (ele.tagName.toLowerCase() == "a") {
                      var size = browser.ie ? ele.innerText : ele.text;
                      if (size.toLowerCase() == text) {
                          ele.style.opacity = 1;
                      }
                  }
              }
          },
          _addColorSelect: function (target) {
              var me = this,
                  colorList = $G("J_colorList").getElementsByTagName("td"),
                  eraserList = $G("J_eraserBar").children,
                  brushList = $G("J_brushBar").children;
  
              for (var i = 0, cell; cell = colorList[i++];) {
                  cell.children[0].style.opacity = 0.3;
              }
              for (var k = 0, ele; ele = brushList[k++];) {
                  if (ele.tagName.toLowerCase() == "a") {
                      ele.style.opacity = 0.3;
                      var size = browser.ie ? ele.innerText : ele.text;
                      if (size.toLowerCase() == this.brushWidth) {
                          ele.style.opacity = 1;
                      }
                  }
              }
              for (var j = 0, node; node = eraserList[j++];) {
                  if (node.tagName.toLowerCase() == "a") {
                      node.style.opacity = 0.3;
                  }
              }
  
              target.style.opacity = 1;
              target.blur();
          },
          _addBESelect: function (target) {
              var brushList = $G("J_brushBar").children;
              var eraserList = $G("J_eraserBar").children;
  
              for (var i = 0, ele; ele = brushList[i++];) {
                  if (ele.tagName.toLowerCase() == "a") {
                      ele.style.opacity = 0.3;
                  }
              }
              for (var j = 0, node; node = eraserList[j++];) {
                  if (node.tagName.toLowerCase() == "a") {
                      node.style.opacity = 0.3;
                  }
              }
  
              target.style.opacity = 1;
              target.blur();
          },
          getCanvasData: function () {
              var picContainer = $G("J_picBoard"),
                  img = picContainer.children[0];
              if (img) {
                  var x, y;
                  if (img.style.position == "absolute") {
                      x = parseInt(img.style.left);
                      y = parseInt(img.style.top);
                  } else {
                      x = (picContainer.offsetWidth - img.width) / 2;
                      y = (picContainer.offsetHeight - img.height) / 2;
                  }
                  context.globalCompositeOperation = "destination-over";
                  context.drawImage(img, x, y, img.width, img.height);
              } else {
                  context.globalCompositeOperation = "destination-atop";
                  context.fillStyle = "#fff";//重置画布背景白色
                  context.fillRect(0, 0, canvas.width, canvas.height);
              }
              try {
                  return canvas.toDataURL("images/png").substring(22);
              } catch (e) {
                  return "";
              }
          },
          btn2Highlight: function (id) {
              var cur = $G(id);
              cur.className.indexOf("H") == -1 && (cur.className += "H");
          },
          btn2disable: function (id) {
              var cur = $G(id);
              cur.className.indexOf("H") != -1 && (cur.className = cur.className.replace("H", ""));
          },
          getTarget: function (evt) {
              return evt.target || evt.srcElement;
          }
      };
  })();
  
  var ScaleBoy = function () {
      this.dom = null;
      this.scalingElement = null;
  };
  (function () {
      function _appendStyle() {
          var doc = document,
              head = doc.getElementsByTagName('head')[0],
              style = doc.createElement('style'),
              cssText = '.scale{visibility:hidden;cursor:move;position:absolute;left:0;top:0;width:100px;height:50px;background-color:#fff;font-size:0;line-height:0;opacity:.4;filter:Alpha(opacity=40);}'
                  + '.scale span{position:absolute;left:0;top:0;width:6px;height:6px;background-color:#006DAE;}'
                  + '.scale .hand0, .scale .hand7{cursor:nw-resize;}'
                  + '.scale .hand1, .scale .hand6{left:50%;margin-left:-3px;cursor:n-resize;}'
                  + '.scale .hand2, .scale .hand4, .scale .hand7{left:100%;margin-left:-6px;}'
                  + '.scale .hand3, .scale .hand4{top:50%;margin-top:-3px;cursor:w-resize;}'
                  + '.scale .hand5, .scale .hand6, .scale .hand7{margin-top:-6px;top:100%;}'
                  + '.scale .hand2, .scale .hand5{cursor:ne-resize;}';
          style.type = 'text/css';
  
          try {
              style.appendChild(doc.createTextNode(cssText));
          } catch (e) {
              style.styleSheet.cssText = cssText;
          }
          head.appendChild(style);
      }
  
      function _getDom() {
          var doc = document,
              hand,
              arr = [],
              scale = doc.createElement('div');
  
          scale.id = 'J_scaleCon';
          scale.className = 'scale';
          for (var i = 0; i < 8; i++) {
              arr.push("<span class='hand" + i + "'></span>");
          }
          scale.innerHTML = arr.join("");
          return scale;
      }
  
      var rect = [
          //[left, top, width, height]
          [1, 1, -1, -1],
          [0, 1, 0, -1],
          [0, 1, 1, -1],
          [1, 0, -1, 0],
          [0, 0, 1, 0],
          [1, 0, -1, 1],
          [0, 0, 0, 1],
          [0, 0, 1, 1]
      ];
      ScaleBoy.prototype = {
          init: function () {
              _appendStyle();
              var me = this,
                  scale = me.dom = _getDom();
  
              me.scaleMousemove.fp = me;
              domUtils.on(scale, 'mousedown', function (e) {
                  var target = e.target || e.srcElement;
                  me.start = {x: e.clientX, y: e.clientY};
                  if (target.className.indexOf('hand') != -1) {
                      me.dir = target.className.replace('hand', '');
                  }
                  domUtils.on(document.body, 'mousemove', me.scaleMousemove);
                  e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
              });
              domUtils.on(document.body, 'mouseup', function (e) {
                  if (me.start) {
                      domUtils.un(document.body, 'mousemove', me.scaleMousemove);
                      if (me.moved) {
                          me.updateScaledElement({
                              position: {x: scale.style.left, y: scale.style.top},
                              size: {w: scale.style.width, h: scale.style.height}
                          });
                      }
                      delete me.start;
                      delete me.moved;
                      delete me.dir;
                  }
              });
              return scale;
          },
          startScale: function (objElement) {
              var me = this, Idom = me.dom;
  
              Idom.style.cssText = 'visibility:visible;top:' + objElement.style.top + ';left:' + objElement.style.left + ';width:' + objElement.offsetWidth + 'px;height:' + objElement.offsetHeight + 'px;';
              me.scalingElement = objElement;
          },
          updateScaledElement: function (objStyle) {
              var cur = this.scalingElement,
                  pos = objStyle.position,
                  size = objStyle.size;
              if (pos) {
                  typeof pos.x != 'undefined' && (cur.style.left = pos.x);
                  typeof pos.y != 'undefined' && (cur.style.top = pos.y);
              }
              if (size) {
                  size.w && (cur.style.width = size.w);
                  size.h && (cur.style.height = size.h);
              }
          },
          updateStyleByDir: function (dir, offset) {
              var me = this,
                  dom = me.dom, tmp;
  
              rect['def'] = [1, 1, 0, 0];
              if (rect[dir][0] != 0) {
                  tmp = parseInt(dom.style.left) + offset.x;
                  dom.style.left = me._validScaledProp('left', tmp) + 'px';
              }
              if (rect[dir][1] != 0) {
                  tmp = parseInt(dom.style.top) + offset.y;
                  dom.style.top = me._validScaledProp('top', tmp) + 'px';
              }
              if (rect[dir][2] != 0) {
                  tmp = dom.clientWidth + rect[dir][2] * offset.x;
                  dom.style.width = me._validScaledProp('width', tmp) + 'px';
              }
              if (rect[dir][3] != 0) {
                  tmp = dom.clientHeight + rect[dir][3] * offset.y;
                  dom.style.height = me._validScaledProp('height', tmp) + 'px';
              }
              if (dir === 'def') {
                  me.updateScaledElement({position: {x: dom.style.left, y: dom.style.top}});
              }
          },
          scaleMousemove: function (e) {
              var me = arguments.callee.fp,
                  start = me.start,
                  dir = me.dir || 'def',
                  offset = {x: e.clientX - start.x, y: e.clientY - start.y};
  
              me.updateStyleByDir(dir, offset);
              arguments.callee.fp.start = {x: e.clientX, y: e.clientY};
              arguments.callee.fp.moved = 1;
          },
          _validScaledProp: function (prop, value) {
              var ele = this.dom,
                  wrap = $G("J_picBoard");
  
              value = isNaN(value) ? 0 : value;
              switch (prop) {
                  case 'left':
                      return value < 0 ? 0 : (value + ele.clientWidth) > wrap.clientWidth ? wrap.clientWidth - ele.clientWidth : value;
                  case 'top':
                      return value < 0 ? 0 : (value + ele.clientHeight) > wrap.clientHeight ? wrap.clientHeight - ele.clientHeight : value;
                  case 'width':
                      return value <= 0 ? 1 : (value + ele.offsetLeft) > wrap.clientWidth ? wrap.clientWidth - ele.offsetLeft : value;
                  case 'height':
                      return value <= 0 ? 1 : (value + ele.offsetTop) > wrap.clientHeight ? wrap.clientHeight - ele.offsetTop : value;
              }
          }
      };
  })();
  
  //后台回调
  function ue_callback(url, state) {
      var doc = document,
          picBorard = $G("J_picBoard"),
          img = doc.createElement("img");
  
      //图片缩放
      function scale(img, max, oWidth, oHeight) {
          var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
          if (ow > max || oh > max) {
              if (ow >= oh) {
                  if (width = ow - max) {
                      percent = (width / ow).toFixed(2);
                      img.height = oh - oh * percent;
                      img.width = max;
                  }
              } else {
                  if (height = oh - max) {
                      percent = (height / oh).toFixed(2);
                      img.width = ow - ow * percent;
                      img.height = max;
                  }
              }
          }
      }
  
      //移除遮罩层
      removeMaskLayer();
      //状态响应
      if (state == "SUCCESS") {
          picBorard.innerHTML = "";
          img.onload = function () {
              scale(this, 300);
              picBorard.appendChild(img);
  
              var obj = new scrawl();
              obj.btn2Highlight("J_removeImg");
              //trace 2457
              obj.btn2Highlight("J_sacleBoard");
          };
          img.src = url;
      } else {
          alert(state);
      }
  }
  
  //去掉遮罩层
  function removeMaskLayer() {
      var maskLayer = $G("J_maskLayer");
      maskLayer.className = "maskLayerNull";
      maskLayer.innerHTML = "";
      dialog.buttons[0].setDisabled(false);
  }
  
  //添加遮罩层
  function addMaskLayer(html) {
      var maskLayer = $G("J_maskLayer");
      dialog.buttons[0].setDisabled(true);
      maskLayer.className = "maskLayer";
      maskLayer.innerHTML = html;
  }
  
  //执行确认按钮方法
  function exec(scrawlObj) {
      if (scrawlObj.isScrawl) {
          addMaskLayer(lang.scrawlUpLoading);
          var base64 = scrawlObj.getCanvasData();
          if (!!base64) {
              var options = {
                  timeout: 100000,
                  onsuccess: function (xhr) {
                      if (!scrawlObj.isCancelScrawl) {
                          var responseObj;
                          responseObj = eval("(" + xhr.responseText + ")");
                          if (responseObj.state == "SUCCESS") {
                              var imgObj = {},
                                  url = editor.options.scrawlUrlPrefix + responseObj.url;
                              imgObj.src = url;
                              imgObj._src = url;
                              imgObj.alt = responseObj.original || '';
                              imgObj.title = responseObj.title || '';
                              editor.execCommand("insertImage", imgObj);
                              dialog.close();
                          } else {
                              alert(responseObj.state);
                          }
  
                      }
                  },
                  onerror: function () {
                      alert(lang.imageError);
                      dialog.close();
                  }
              };
              options[editor.getOpt('scrawlFieldName')] = base64;
  
              var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')),
                  params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
                  url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?' : '&') + params);
              ajax.request(url, options);
          }
      } else {
          addMaskLayer(lang.noScarwl + "&nbsp;&nbsp;&nbsp;<input type='button' value='" + lang.continueBtn + "'  onclick='removeMaskLayer()'/>");
      }
  }
  
  