const COLOR_SPACE = {};
COLOR_SPACE.getWebSafeColor = function (color) {
  var rMod = color.r % 51;
  var gMod = color.g % 51;
  var bMod = color.b % 51;
  if ((rMod == 0) && (gMod == 0) && (bMod == 0)) return color;
  var wsColor = {};
  wsColor.r = (rMod <= 25 ? Math.floor(color.r / 51) * 51 : Math.ceil(color.r / 51) * 51);
  wsColor.g = (gMod <= 25 ? Math.floor(color.g / 51) * 51 : Math.ceil(color.g / 51) * 51);
  wsColor.b = (bMod <= 25 ? Math.floor(color.b / 51) * 51 : Math.ceil(color.b / 51) * 51);
  return wsColor;
};
COLOR_SPACE.rgb2hsv = function () {
  var r, g, b, h, s, v, min, delta;
  if (arguments.length === 1) {
    r = arguments[0].r;
    g = arguments[0].g;
    b = arguments[0].b;
  } else {
    r = arguments[0];
    g = arguments[1];
    b = arguments[2];
  }
  if (r > g) {
    v = Math.max(r, b);
    min = Math.min(g, b);
  } else {
    v = Math.max(g, b);
    min = Math.min(r, b);
  }
  delta = v - min;
  if (v == 0.0) {
    s = 0.0;
  } else {
    s = delta / v;
  }
  if (s == 0.0) {
    h = 0.0;
  } else {
    if (r == v) {
      h = 60.0 * (g - b) / delta;
    } else if (g == v) {
      h = 120 + 60.0 * (b - r) / delta;
    } else {
      h = 240 + 60.0 * (r - g) / delta;
    }
    if (h < 0.0) {
      h += 360.0;
    }
    if (h > 360.0) {
      h -= 360.0;
    }
  }
  h = Math.round(h);
  s = Math.round(s * 255.0);
  v = Math.round(v);
  
  if (h == 360) {
    h = 0;
  }
  return { h: h, s: s, v: v };
};
COLOR_SPACE.hsv2rgb = function () {
  var hue, saturation, value;
  if (arguments.length === 1) {
    hue = arguments[0].h;
    saturation = arguments[0].s;
    value = arguments[0].v;
  } else {
    hue = arguments[0];
    saturation = arguments[1];
    value = arguments[2];
  }
  var h, s, v, h_temp, vs;
  var f, p, q, t;
  var i;
  if (saturation === 0) {
    hue = value;
    saturation = value;
    value = value;
  } else {
    h = hue;
    s = saturation / 255.0;
    v = value / 255.0;
    if (h == 360) {
      h_temp = 0;
    } else {
      h_temp = h / 60;
    }
    i = Math.floor(h_temp);
    f = h_temp - i;
    
    vs = v * s;
    p = value - value * s;
    switch (i) {
      case 0:
        t = v - vs * (1 - f);
        hue = Math.round(value);
        saturation = Math.round(t * 255.0);
        value = Math.round(p);
        break;
      case 1:
        q = v - vs * f;
        hue = Math.round(q * 255.0);
        saturation = Math.round(value);
        value = Math.round(p);
        break;
      case 2:
        t = v - vs * (1 - f);
        hue = Math.round(p);
        saturation = Math.round(value);
        value = Math.round(t * 255.0);
        break;
      case 3:
        q = v - vs * f;
        hue = Math.round(p);
        saturation = Math.round(q * 255.0);
        value = Math.round(value);
        break;
      case 4:
        t = v - vs * (1 - f);
        hue = Math.round(t * 255.0);
        saturation = Math.round(p);
        value = Math.round(value);
        break;
      case 5:
        q = v - vs * f;
        hue = Math.round(value);
        saturation = Math.round(p);
        value = Math.round(q * 255.0);
        break;
    }
  }
  return { r: hue, g: saturation, b: value };
};
COLOR_SPACE.RGB2HEX = function (rgb) {
  function hex(c) {
    c = parseInt(c).toString(16);
    return c.length < 2 ? "0" + c : c;
  }
  return ("#" + hex(rgb.r) + hex(rgb.g) + hex(rgb.b)).toUpperCase();
};
COLOR_SPACE.HEX2RGB = function (hex) {
  let colorHex = hex.toLowerCase().trim();
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  const colorRgb = {
    r: 255,
    g: 255,
    b: 255,
  };
  if (!colorHex || !reg.test(colorHex)) {
    return colorRgb;
  }
  if (colorHex.length === 4) {
    let color = '#';
    for (let i = 1; i < colorHex.length; i += 1) {
      color += `${colorHex.slice(i, i + 1)}${colorHex.slice(i, i + 1)}`;
    }
    colorHex = color;
  }
  for (let i = 1; i < colorHex.length; i += 2) {
    if (i === 1) {
      colorRgb.r = Number.parseInt(`0x${colorHex.slice(i, i + 2)}`);
    } else if (i === 3) {
      colorRgb.g = Number.parseInt(`0x${colorHex.slice(i, i + 2)}`);
    } else if (i === 5) {
      colorRgb.b = Number.parseInt(`0x${colorHex.slice(i, i + 2)}`);
    }
  }
  return colorRgb;
};
COLOR_SPACE.parseColor = function (colorText) {
  var sType = typeof(colorText);
  if (sType == "string") {
    if (/^\#?[0-9A-F]{6}$/i.test(colorText)) {
      return {
        r: eval('0x' + colorText.substr(colorText.length == 6 ? 0 : 1, 2)),
        g: eval('0x' + colorText.substr(colorText.length == 6 ? 2 : 3, 2)),
        b: eval('0x' + colorText.substr(colorText.length == 6 ? 4 : 5, 2)),
        a: 255
      };
    }
  } else if (sType == "object") {
    if (colorText.hasOwnProperty("r") &&
      colorText.hasOwnProperty("g") &&
      colorText.hasOwnProperty("b")) {
      return colorText;
    }
  }
  return null;
};
const ColorPicker = ((element, options) => {
  class ColorCanvas {
    constructor(canvas, hueBar) {
      this.newImage = true;
      this.maxX = 255;
      this.maxY = 255;
      this.selX = 128;
      
      this.selY = 128;
      
      this.selZ = 1.0;
      this.hueBar = hueBar;
      this.image = canvas; 
      this.ImageData = null;
      this.paint();
    }
    paint() {
      var w = this.image.width,
        h = this.image.height;
      if (w == 0 || h == 0) {
        return;
      }
      var x = Math.round((this.selX * w) / this.maxX);
      var y = Math.round((this.selY * h) / this.maxY);
      if (this.newImage || !this.image) {
        this.makeImage(this.selZ, w, h);
      }
      var ctx = this.image.getContext("2d");
      ctx.putImageData(this.ImageData, 0, 0);
      var color = this.getColor();
      var l = color.r * 0.3 + color.g * 0.59 + color.b * 0.114;
      if (this.drawPointer) {
        this.drawPointer(ctx, w, h, x, y, l);
      } else {
        this.drawDefaultPointer(ctx, w, h, x, y, l);
      }
    }
    drawDefaultPointer(ctx, w, h, x, y, l, isHueBar) {
      ctx.beginPath();
      ctx.lineWidth = 1;
      if (l < 128) {
        ctx.strokeStyle = "rgb(255,255,255)";
      } else {
        ctx.strokeStyle = "rgb(0,0,0)";
      }
      var radius = 6;
      ctx.arc(x + 0.5, y + 0.5, radius, 0, Math.PI * 2, true);
      radius += 2;
      ctx.moveTo(x - radius + 0.5, y + 0.5);
      ctx.lineTo(x + radius + 0.5, y + 0.5);
      ctx.moveTo(x + 0.5, y - radius + 0.5);
      ctx.lineTo(x + 0.5, y + radius + 0.5);
      ctx.stroke();
    }
    makeImage(b, w, h) {
      if (!this.image) {
        this.image = document.createElement("canvas");
        this.image.width = w;
        this.image.height = h;
      }
      var imgData;
      if (this.hueBar) {
        imgData = this._makeHueMap(b, w, h);
      } else {
        imgData = this._makeColorMap(b, w, h);
      }
      this.newImage = false;
      this.image.getContext("2d").putImageData(imgData, 0, 0);
      this.ImageData = imgData;
    }
    _makeColorMap(b, w, h) {
      var imgData = this.image.getContext("2d").getImageData(0, 0, w, h);
      var index = 0;
      var hue = 0.0;
      var sat = 0.0;
      var bri = 0.0;
      hue = (b - Math.floor(b)) * 360;
      var x, y;
      for (y = 0; y < h; y++) {
        bri = 1 - y / h;
        for (x = 0; x < w; x++) {
          sat = x / w;
          var rgb = COLOR_SPACE.hsv2rgb(hue, sat * 255, bri * 255);
          imgData.data[index++] = rgb.r;
          imgData.data[index++] = rgb.g;
          imgData.data[index++] = rgb.b;
          imgData.data[index++] = 255;
        }
      }
      return imgData;
    }
    _makeHueMap(b, w, h) {
      var imgData = this.image.getContext("2d").getImageData(0, 0, w, h);
      var index = 0;
      var hue = 0.0;
      var sat = 1;
      var x, y;
      for (y = h - 1; y >= 0; y--) {
        hue = y / h;
        hue = (hue - Math.floor(hue)) * 360;
        for (x = 0; x < w; x++) {
          var bri = 1 - x / w;
          var rgb = COLOR_SPACE.hsv2rgb(hue, sat * 255, bri * 255);
          imgData.data[index++] = rgb.r;
          imgData.data[index++] = rgb.g;
          imgData.data[index++] = rgb.b;
          imgData.data[index++] = 255;
        }
      }
      return imgData;
    }
    setXY(x, y) {
      this.selX = x;
      this.selY = y;
      this.paint();
    }
    setColor(c) {
      var hsb = COLOR_SPACE.rgb2hsv(c.r, c.g, c.b);
      if (this.hueBar) {
        this.selZ = hsb.s / 255;
        this.setXY(255 - hsb.v, 255 - (hsb.h / 360) * 255);
      } else {
        this.selZ = hsb.h / 360;
        this.setXY(hsb.s, 255 - hsb.v);
      }
      this.repaint();
    }
    getColor() {
      var h = (this.hueBar) ? 1 - this.selY / 255 : this.selZ;
      var s = (this.hueBar) ? 255 : this.selX;
      var v = (this.hueBar) ? this.selX : this.selY;
      h = (h - Math.floor(h)) * 360;
      return COLOR_SPACE.hsv2rgb(h, s, 255 - v);
    }
    repaint() {
      this.newImage = true;
      this.paint();
    }
  }
  class ColorPicker {
    static RGB2HEX = COLOR_SPACE.RGB2HEX;
    static HEX2RGB = COLOR_SPACE.HEX2RGB;
    constructor(element, options) {
      this.currentColor = { r: 0, g: 0, b: 0 };
      options = $.extend(true, {}, settings, options);
      this.init(
        element,
        options.flat,
        options.width,
        options.height,
        options.onColorClean,
        options.onColorChange,
        options.onOK,
        options.onCancel,
        options.drawColorMapPointer,
        options.drawHueMapPointer
      )
      .setInitialColor(this.checkColor(options.color))
      .showRGB(options.showRGB)
      .showHSB(options.showHSB)
      .showColor(options.showColor)
      .showButtons(options.showButtons)
      .showPreview(options.showPreview);
    }
    checkColor(color) {
      if (typeof(color) === "object" &&
        color.hasOwnProperty("r") &&
        color.hasOwnProperty("g") &&
        color.hasOwnProperty("b")) {
        color.r = (color.r < 0) ? 0 : ((color.r > 255) ? 255 : color.r);
        color.g = (color.g < 0) ? 0 : ((color.g > 255) ? 255 : color.g);
        color.b = (color.b < 0) ? 0 : ((color.b > 255) ? 255 : color.b);
      } else {
        color = { r: 0, g: 0, b: 0 };
      }
      return color;
    }
    init(linkedElement, flat, width, height, onColorClean, onColorChange, onOK, onCancel, fnDrawPointer1, fnDrawPointer2) {
      if (typeof linkedElement == 'string') {
        linkedElement = $(linkedElement)[0];
      }
      this.onColorClean = (onColorClean) ? onColorClean : function () {
      };
      this.onColorChange = (onColorChange) ? onColorChange : function () {
      };
      this.onOK = (onOK) ? onOK : function () {
        return true;
      };
      this.onCancel = (onCancel) ? onCancel : function () {
        return true;
      };
      this.flat = (typeof flat === "boolean") ? flat : true;
      if (this.flat) {
        this._buildUI(linkedElement);
      } else {
        this.linkedElement = linkedElement;
        this._buildUI();
      }
      this.element.find("canvas").each(function () {
        var w = $(this).parent().width(),
          h = $(this).parent().height();
        $(this).attr("width", w);
        $(this).attr("height", h);
      });
      this.canvasMap = this.element.find(".color-map canvas")[0];
      this.canvasBar = this.element.find(".color-bar canvas")[0];
      this.colorMap = new ColorCanvas(this.canvasMap, false);
      this.colorBar = new ColorCanvas(this.canvasBar, true);
      if (fnDrawPointer1) {
        this.colorMap.drawPointer = fnDrawPointer1;
      }
      if (fnDrawPointer2) {
        this.colorBar.drawPointer = fnDrawPointer2;
      }
      $(this.canvasMap).data("ME", this.colorMap).data("YOU", this.colorBar);
      $(this.canvasBar).data("YOU", this.colorMap).data("ME", this.colorBar);
      if (flat) {
        this.sizeTo($(linkedElement).width(), $(linkedElement).height());
      } else {
        this.sizeTo(width, height);
      }
      this._registerEvent();
      this.setColor({ r: 64, g: 128, b: 128 });
      if (this._isInput()) {
        var val = $(this.linkedElement).val();
        if (val.length === 7 && val.charAt(0) === "#") {
          this.currentColor = COLOR_SPACE.parseColor(val);
          if (!this.currentColor) {
            this.currentColor = { r: 64, g: 128, b: 128 };
          }
        }
      }
      return this;
    }
    _isInput() {
      return (this.linkedElement && this.linkedElement.nodeName.toLowerCase() === "input" &&
        $(this.linkedElement).attr("type") === "text");
    }
    CLAMP(c, min, max) {
      min = min || 0;
      max = max || 255;
      if (c < min) {
        c = min;
      }
      if (c > max) {
        c = max;
      }
      return Math.round(c);
    }
    _restoreToInitial() {
      var color = this.initialColor;
      if (this._isInput()) {
        $(this.linkedElement).val(COLOR_SPACE.RGB2HEX(color));
      } else {
        $(this.linkedElement).css("background-color", "rgb(" + color.r + "," + color.g + "," + color.b + ")");
      }
      this.colorChanged(color);
    }
    _registerEvent() {
      var _this = this;
      this.mouseStarted = false;
      if (this._isInput()) {
        $(this.linkedElement).bind("focus", function (event) {
          _this.show();
        });
      } else {
        $(this.linkedElement).bind("mousedown", function (event) {
          _this.show();
        });
      }
      this.element.bind("click", function (e) {
        e.stopPropagation();
      })
      this.element.find(".old-color").click(function () {
        _this._restoreToInitial();
      });
      $(this.canvasBar).add(this.canvasMap)
      .bind("mousedown", function (event) {
        _this.mouseStarted = true;
        var offset = $(this).offset();
        var x = event.pageX - offset.left,
          y = event.pageY - offset.top;
        _this._trackChanging(x, y, this);
      })
      .bind("mouseup", function (event) {
        _this.mouseStarted = false;
      })
      .bind("mouseout", function (event) {
        _this.mouseStarted = false;
      })
      .bind("mousemove", function (event) {
        if (_this.mouseStarted) {
          var offset = $(this).offset();
          var x = event.pageX - offset.left,
            y = event.pageY - offset.top;
          _this._trackChanging(x, y, this);
        }
      });
      this.element.find("input[name=R],input[name=G],input[name=B]")
      .bind("keyup", function () {
        var v = $(this).val();
        if (!isNaN(parseFloat(v)) && isFinite(v)) {
          v = _this.CLAMP(v, 0, 255);
          switch (this.name) {
            case "R":
              _this.currentColor.r = v;
              break;
            case "G":
              _this.currentColor.g = v;
              break;
            case "B":
              _this.currentColor.b = v;
              break;
          }
          _this.setColor(_this.currentColor);
        } else {
          _this.setColor(_this.currentColor);
          return false;
        }
      });
      this.element.find("input[name=H],input[name=S],input[name=V]")
      .bind("keyup", function () {
        var v = $(this).val();
        if (!isNaN(parseFloat(v)) && isFinite(v)) {
          var hsv = COLOR_SPACE.rgb2hsv(_this.currentColor);
          v = parseFloat(v);
          switch (this.name) {
            case "H":
              v = _this.CLAMP(v, 0, 359);
              hsv.h = v;
              break;
            case "S":
              v = _this.CLAMP(v, 0, 100);
              hsv.s = (v * 255 / 100);
              break;
            case "V":
              v = _this.CLAMP(v, 0, 100);
              hsv.v = (v * 255 / 100);
              break;
          }
          _this.currentColor = COLOR_SPACE.hsv2rgb(hsv);
          _this.setColor(_this.currentColor);
        } else {
          _this.setColor(_this.currentColor);
        }
      });
      this.element.find("input[name=RGB]").bind("change", function () {
        var color = COLOR_SPACE.parseColor($(this).val());
        if (color) {
          _this.setColor(color);
          _this.colorChanged(color);
        }
      }).focus(function () {
        $(this).select();
      });
      this.element.find('a.picker-clean').click(function(){
        if (_this._isInput()) {
          $(_this.linkedElement).val('');
        } else {
          $(_this.linkedElement).css({
            "backgroundImage": "url(//img14.360buyimg.com/cms/jfs/t18196/333/1294142974/807/f84be69/5ac2e880Nca56064a.png)", 
            "backgroundRepeat": "repeat",
            "backgroundPosition": "center center"
          });
        }
  
        if (_this.onColorClean) {
          _this.onColorClean({r: 0, g: 0, b: 0, a: 0}, '');
        }
        _this.hide();
      })
      this.element.find("button[name=ok]")
      .click(function () {
        if (_this.onOK) {
          if (_this.onOK(_this.currentColor, COLOR_SPACE.RGB2HEX(_this.currentColor))) {
            _this.hide();
          }
        } else {
          _this.hide();
        }
      });
      this.element.find("button[name=cancel]")
      .click(function () {
        _this._restoreToInitial();
        if (_this.onCancel) {
          if (_this.onCancel(_this.initialColor, COLOR_SPACE.RGB2HEX(_this.initialColor))) {
            _this.hide();
          }
        } else {
          _this.hide();
        }
      });
    }
    setInitialColor(color) {
      this.initialColor = color;
      this.element.find(".old-color").css("backgroundColor", COLOR_SPACE.RGB2HEX(color));
      return this.setColor(color);
    }
    setColor(color) {
      this.currentColor = color;
      this.setColorText(this.currentColor);
      this.colorMap.setColor(this.currentColor);
      this.colorBar.setColor(this.currentColor);
      return this;
    }
    _trackChanging(x, y, canvas) {
      var x1 = this.CLAMP((x * 255) / canvas.width, 0, 255);
      var y1 = this.CLAMP((y * 255) / canvas.height, 0, 255);
      $(canvas).data("ME").setXY(x1, y1);
      var color = $(canvas).data("ME").getColor();
      $(canvas).data("YOU").setColor(color);
      if (color) {
        this.colorChanged(color);
      }
    }
    colorChanged(color) {
      this.currentColor = color;
      this.setColorText(color);
      if (this._isInput()) {
        $(this.linkedElement).val(COLOR_SPACE.RGB2HEX(color));
      } else {
        $(this.linkedElement).css({
          "backgroundImage": "initial",
          "backgroundColor": "rgb(" + color.r + "," + color.g + "," + color.b + ")"
        });
      }
      if (this.onColorChange) {
        this.onColorChange(color, COLOR_SPACE.RGB2HEX(color));
      }
    }
    setColorText(color) {
      this.element.find("input[name=RGB]").val(COLOR_SPACE.RGB2HEX(color));
      this.element.find("input[name=R]").val(color.r);
      this.element.find("input[name=G]").val(color.g);
      this.element.find("input[name=B]").val(color.b);
      var hsv = COLOR_SPACE.rgb2hsv(color);
      hsv.s = (hsv.s / 255 * 100).toFixed(0);
      hsv.v = (hsv.v / 255 * 100).toFixed(0);
      this.element.find("input[name=H]").val(hsv.h);
      this.element.find("input[name=S]").val(hsv.s);
      this.element.find("input[name=V]").val(hsv.v);
      this.element.find(".preview .cur-color").css("background-color", "rgb(" + color.r + "," + color.g + "," + color.b + ")");
      $(this.linkedElement).data("current_color", color);
    }
    getColor(type) {
      return type == 'hex' ? COLOR_SPACE.RGB2HEX(this.currentColor) : this.currentColor;
    }
    show() {
      if (this.element.css("visibility") === "hidden") {
        var off = $(this.linkedElement).offset();
        var left = off.left,
          top = off.top + $(this.linkedElement).outerHeight();
        if (left + this.element.width() > $(window).width() + $("body").scrollLeft()) {
          left = $(window).width() + $("body").scrollLeft() - this.element.width() - 10;
        }
        if (top + this.element.height() > $(window).height() + $(window).scrollTop()) {
          top = off.top - this.element.height() - 10;
        }
        this._mask.css("display", "");
        this.element.css({
          "visibility": "visible",
          "left": left + "px",
          "top": top + "px"
        }).animate({
          opacity: 1
        }, 300);
        var color = $(this.linkedElement).data("current_color");
        if (this.linkedElement.nodeName.toLowerCase() === "input" &&
          $(this.linkedElement).attr("type") === "text") {
          var val = $(this.linkedElement).val();
          if (val.length === 7 && val.charAt(0) === "#") {
            color = COLOR_SPACE.parseColor(val);
          }
        }
        if (color) {
          this.setInitialColor(color);
        }
      }
      return this;
    }
    hide() {
      if (this.element.css("visibility") !== "hidden") {
        this._mask.css("display", "none");
        this.element.animate({
          opacity: 0
        }, 300, function () {
          $(this).css("visibility", "hidden");
        });
      }
      return this;
    }
    _buildUI(element) {
      var idext = Math.round(Math.random() * 1000000 * (new Date()));
      var cp = this,
        css = { position: "absolute", left: "0px", top: "0px", visibility: "hidden", zIndex: 10001 };
      var e = $("body");
      var cls = " popup";
      if (element) {
        e = $(element);
        var w = e.width(),
          h = e.height();
        if (e.css("position") == "relative" || e.css("position") == "absolute") {
          css = {
            position: "absolute",
            left: "0px",
            top: "0px",
            visibility: "visible",
            width: w + "px",
            height: h + "px"
          };
        } else {
          e.css("position", "relative");
          css = {
            position: "absolute",
            left: "0px",
            top: "0px",
            visibility: "visible",
            width: w + "px",
            height: h + "px"
          };
        }
        cls = "";
      } else {
        e.append(
          $("<div></div>")
          .attr("id", "cp-mask-" + idext)
          .css({
            position: "absolute",
            left: "0px",
            top: "0px",
            width: $(document).width() + "px",
            height: $(document).height() + "px",
            zIndex: 10000,
            opacity: 0.01,
            display: "none"
          }).each(function () {
            cp._mask = $(this);
          })
          .bind("mousedown", function () {
            cp.hide();
          })
        );
      }
      e.append(
        $('<div class="canvas-color-picker' + cls + '"></div>')
        .attr("id", "cp-" + idext)
        .css(css)
        .append('<div class="color-map"><canvas name="colormap"></canvas></div>')
        .append('<div class="color-bar"><canvas name="huebar"></canvas></div>')
        .append('<div class="preview"><div class="cur-color"></div><div class="old-color"></div></div>')
        .append(
          $('<div class="form"></div>')
          .append(
            $('<div class="rgb"></div>')
            .append('<label>R:</label><input type="text" name="R" size="3" maxlength="3"/><br />')
            .append('<label>G:</label><input type="text" name="G" size="3" maxlength="3" /><br />')
            .append('<label>B:</label><input type="text" name="B" size="3" maxlength="3" />')
          )
          .append(
            $('<div class="hsb"></div>')
            .append('<label>H:</label><input type="text" name="H" size="3" maxlength="3"/><label>&deg;</label><br />')
            .append('<label>S:</label><input type="text" name="S" size="3" maxlength="3"/><label>%</label><br />')
            .append('<label>B:</label><input type="text" name="V" size="3" maxlength="3"/><label>%</label>')
          )
          .append(
            $('<div class="color"></div>')
            .append('<label>#:</label><input type="text" name="RGB" size="7" maxlength="7"/><a href="javascript:;" class="picker-clean">清除</a>')
          )
        )
        .append('<div class="buttons"><button name="cancel" class="cd-small-black-border-btn">取消</button><button name="ok" class="cd-small-red-btn">确认</button></div><br />')
        .each(function () {
          cp.element = $(this);
        })
      );
    }
    showRGB(flag) {
      var rgb = this.element.find(".form .rgb");
      if (flag) {
        rgb.show();
      } else {
        rgb.hide();
      }
      return this;
    }
    showHSB(flag) {
      var hsb = this.element.find(".form .hsb");
      if (flag) {
        hsb.show();
      } else {
        hsb.hide();
      }
      return this;
    }
    showColor(flag) {
      var clr = this.element.find(".form .color");
      if (flag) {
        clr.show();
      } else {
        clr.hide();
      }
      return this;
    }
    showButtons(flag) {
      var e = this.element.find(".buttons");
      if (flag) {
        e.show();
      } else {
        e.hide();
      }
      return this;
    }
    showPreview(flag) {
      var e = this.element.find(".preview");
      if (flag) {
        e.show();
      } else {
        e.hide();
      }
      return this;
    }
    sizeTo(w, h) {
      if (w < 60) {
        w = 60;
      }
      if (h < 30) {
        h = 30;
      }
      this.element.width(w).height(h);
      if (h < 150) {
        this.showRGB(false).showHSB(false).showButtons(false);
      }
      if (h < 100) {
        this.showPreview(false).showColor(false);
      }
      if (w < 200) {
        this.showRGB(false).showHSB(false).showPreview(false).showColor(false).showButtons(false);
      }
      this._rearrange();
      return this;
    }
    _rearrange() {
      var w = this.element.width(),
        h = this.element.height();
      if (h < 200) {
        this.showRGB(false);
        this.showHSB(false);
      }
      this.element.find("canvas[name=colormap]")
      .attr({
        "width": this.element.find(".color-map").width(),
        "height": this.element.find(".color-map").height()
      });
      this.element.find("canvas[name=huebar]").attr("height", this.element.find(".color-bar").height());
      var rgb = this.element.find(".form .rgb");
      var hsb = this.element.find(".form .hsb");
      var clr = this.element.find(".form .color");
      var btns = this.element.find(".buttons");
      var preview = this.element.find(".preview");
      if (rgb.css("display") === "none" && hsb.css("display") === "none" &&
        clr.css("display") === "none" && btns.css("display") === "none" &&
        preview.css("display") === "none") {
        this.element.find(".color-map").css("right", "30px");
        this.element.find(".color-bar").css("right", "5px");
        this.element.find("canvas[name=colormap]")
        .attr({
          "width": this.element.find(".color-map").width(),
          "height": this.element.find(".color-map").height()
        });
      }
      if (rgb.css("display") === "none" && hsb.css("display") === "none" && clr.css("display") === "none") {
        this.element.find(".form").hide();
      } else {
        this.element.find(".form").show();
      }
      if (rgb.css("display") === "none" &&
        hsb.css("display") === "none") {
        this.element.find(".buttons").css("height", "50px");
        this.element.find(".buttons button").css({ "width": "110px", 'margin-left': 0 });
      } else {
        this.element.find(".buttons").css("height", "25px");
        this.element.find(".buttons button").css("width", "50px");
      }
      this.colorMap.repaint();
      this.colorBar.repaint();
    }
  }
  const settings = {
    flat: false,
    width: 420,
    height: 260,
    showColor: true,
    showRGB: true,
    showHSB: true,
    showButtons: true,
    showPreview: true,
    color: { r: 0, g: 0, b: 0 },
    onColorChange: function (rgb, hex) {
    },
    onOK: function (rgb, hex) {
      return true;
    },
    onCancel: function (rgb, hex) {
      return true;
    },
    onColorClean: function (rgb, hex){
      return true;
    },
    drawColorMapPointer: null,
    drawHueMapPointer: null
  };
  $.fn.colorpicker = function (options) {
    return this.each(function () {
      if (!$(this).data("canvas-color-picker")) {
        var cp = new ColorPicker(this, options);
        !$(this).data("canvas-color-picker", cp)
      }
    });
  };
  return ColorPicker;
})();
export default ColorPicker;