// ==UserScript==
// @name         mark
// @namespace
// @version      0.1.1
// @description  none
// @author       szhlol
// @match        *://game.granbluefantasy.jp/*
// @match        *://www.baidu.com
// @match        *://gbf.game.mbga.jp/*
// @run-at       document-start
// @supportURL   修改自 感谢 https://github.com/biuuu/gbf-bookmark
// @license MIT
// @namespace https://greasyfork.org/users/685724
// @downloadURL https://update.greasyfork.cloud/scripts/439704/mark.user.js
// @updateURL https://update.greasyfork.cloud/scripts/439704/mark.meta.js
// ==/UserScript==
(function () {
  'use strict';

  var list = [
  	{
  		url: "#mypage",
  		name: "首页",
  		index: 1,
  		background: "#297fc8"
  	},
  	{
  		url: "#quest/assist",
  		name: "副本列表",
  		index: 2,
  		background: "#c96883"
  	},
  	{
  		url: "back",
  		name: "后退",
  		index: 3,
  		background: "#FFEB3B"
  	},
  	{
  		url: "reload",
  		name: "刷新",
  		index: 4,
  		background: "#de3a7c"
  	}
  ];

  var data = {
    list: list
  };

  var getLocalData = function getLocalData() {
    try {
      var str = localStorage.getItem('gbf-bookmark:data');

      if (str) {
        var obj = JSON.parse(str);

        if (obj && obj.length) {
          data.list = obj.sort(function (prev, next) {
            var prevParent = (prev.parent | 0) * 100;
            var nextParent = (next.parent | 0) * 100;
            return prev.index + prevParent - (next.index + nextParent);
          });
        }
      }
    } catch (e) {}
  };

  getLocalData();

  var config = {
    position: 'left',
    hideDelay: -1,
    animation: false,
    margin: 4,
    size: 2,
    align: 'left',
    mixed: 'yes'
  };

  var getLocalConfig = function getLocalConfig() {
    try {
      var _config = JSON.parse(localStorage.getItem('gbf-bookmark:config'));

      if (_config) {
        if (_config.hideDelay) {
          _config.hideDelay = _config.hideDelay | 0;
        }

        if (_config.margin) {
          _config.margin = _config.margin | 0;
        }

        Object.assign(config, _config);
      }
    } catch (e) {}
  };

  getLocalConfig();

  var applyConfig = function applyConfig() {
    var cont = document.getElementById('gbf-bookmark-lacia');

    if (config.position === 'left') {
      cont.classList.remove('bookmark-right');
    } else {
      cont.classList.add('bookmark-right');
    }

    if (config.mixed === 'yes') {
      cont.classList.remove('not-mixed-bookmark');
    } else {
      cont.classList.add('not-mixed-bookmark');
    }

    cont.classList.remove('align-left-bookmark', 'align-center-bookmark', 'align-right-bookmark');
    cont.classList.add("align-".concat(config.align, "-bookmark"));
    cont.classList.remove('autohide-bookmark', 'keep-bookmark', 'full-bookmark');
    cont.classList.remove('keep-bookmark');

    if (config.hideDelay === 0) {
      cont.classList.add('autohide-bookmark');
    } else if (config.hideDelay === -1) {
      cont.classList.add('keep-bookmark');
    } else if (config.hideDelay === -2) {
      cont.classList.add('full-bookmark');
    }

    cont.style.opacity = null;

    if (!config.animation) {
      cont.classList.add('bookmark-remove-anime');
    } else {
      cont.classList.remove('bookmark-remove-anime');
    }

    cont.classList.remove('size-1', 'size-2', 'size-3');
    cont.classList.add("size-".concat(config.size));
    var styleTag = document.getElementById('style-gbf-bookmark');

    if (!styleTag) {
      styleTag = document.createElement('style');
      styleTag.id = 'style-gbf-bookmark';
      document.body.appendChild(styleTag);
    }

    
    styleTag.innerHTML = "\n  body #gbf-bookmark-lacia".concat(config.position === 'right' ? '.bookmark-right' : '', " {\n    ").concat(config.position, ": -").concat(left, "px;\n  }\n  ");
  };

  var initIpt = function initIpt() {
    var iptPosition = document.getElementById('ipt-position-bookmark');
    var iptHidedelay = document.getElementById('ipt-hidedelay-bookmark');
    var iptMargin = document.getElementById('ipt-margin-bookmark');
    var iptAnimation = document.getElementById('ipt-animation-bookmark');
    var iptSize = document.getElementById('ipt-size-bookmark');
    var iptAlign = document.getElementById('ipt-align-bookmark');
    var iptMixed = document.getElementById('ipt-mixed-bookmark');
    iptPosition.value = config.position;
    iptHidedelay.value = config.hideDelay;
    iptMargin.value = config.margin;
    iptAnimation.value = config.animation ? 'open' : 'close';
    iptSize.value = config.size;
    iptAlign.value = config.align;
    iptMixed.value = config.mixed;
  };

  var saveConfig = function saveConfig() {
    try {
      localStorage.setItem('gbf-bookmark:config', JSON.stringify(config));
    } catch (e) {}
  };

  function _slicedToArray(arr, i) {
    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
  }

  function _toConsumableArray(arr) {
    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
  }

  function _arrayWithoutHoles(arr) {
    if (Array.isArray(arr)) {
      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

      return arr2;
    }
  }

  function _arrayWithHoles(arr) {
    if (Array.isArray(arr)) return arr;
  }

  function _iterableToArray(iter) {
    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
  }

  function _iterableToArrayLimit(arr, i) {
    var _arr = [];
    var _n = true;
    var _d = false;
    var _e = undefined;

    try {
      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
        _arr.push(_s.value);

        if (i && _arr.length === i) break;
      }
    } catch (err) {
      _d = true;
      _e = err;
    } finally {
      try {
        if (!_n && _i["return"] != null) _i["return"]();
      } finally {
        if (_d) throw _e;
      }
    }

    return _arr;
  }

  function _nonIterableSpread() {
    throw new TypeError("Invalid attempt to spread non-iterable instance");
  }

  function _nonIterableRest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance");
  }

  var fontColor = function fontColor(rgb) {
    var str = rgb.slice(1);
    var r, g, b;

    if (str.length === 6) {
      r = parseInt(str.slice(0, 2), 16);
      g = parseInt(str.slice(2, 4), 16);
      b = parseInt(str.slice(4, 6), 16);
    } else {
      r = str.slice(0, 1);
      r = parseInt("".concat(r).concat(r), 16);
      g = str.slice(1, 2);
      g = parseInt("".concat(g).concat(g), 16);
      b = str.slice(2, 3);
      b = parseInt("".concat(b).concat(b), 16);
    }

    var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

    if (luminance > 0.7) {
      return '#000';
    } else {
      return '#fff';
    }
  };

  var colors = ['#ff972d', '#297fc8', '#5fc829', '#FFEB3B', '#c96883', '#8dc3dd', '#ffffff', '#eee3c8', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#607D8B'];

  var randomColor = function randomColor() {
    return colors[Math.floor(Math.random() * colors.length)];
  };

  var tagList = function tagList(list) {
    var _list = [];

    var temp = _toConsumableArray(list);

    temp.forEach(function (item, index) {
      item._index = index;
    });
    var sl = temp.sort(function (prev, next) {
      return prev.index - next.index;
    });
    var pList = sl.filter(function (item) {
      return !item.parent;
    });

    _list.push(pList);

    var sList = sl.filter(function (item) {
      return item.parent;
    }).sort(function (prev, next) {
      return prev.parent - next.parent;
    });
    var subMap = new Map();
    sList.forEach(function (item) {
      var pid = parseInt(item.parent, 10);

      if (!subMap.has(pid)) {
        var pItem = pList.find(function (pitem) {
          return pitem.index === pid;
        }) || {};
        var bg = pItem.background || '#9E9E9E';
        var fc = fontColor(bg);
        subMap.set(pid, {
          index: _list.length,
          color: fc,
          bg: bg
        });

        _list.push([item]);
      } else {
        var _subMap$get = subMap.get(pid),
            index = _subMap$get.index;

        _list[index].push(item);
      }
    });
    return [_list, subMap];
  };

  var tagHtml = function tagHtml(item, index) {
    var bg = item.background || '#297fc8';
    var color = item.color || fontColor(bg);
    return "<div style=\"background-color:".concat(bg, ";color:").concat(color, "\"\n  class=\"paper-shadow2 bookmark-tag\"><div class=\"idx-tag\"><span>").concat(item.index, "</span></div>\n  <span class=\"edit-tag\" data-index=\"").concat(item._index, "\">\u6539</span><span class=\"delete-tag\" data-index=\"").concat(item._index, "\">\u5220</span>\n  ").concat(item.name || 'NoName', "</div>");
  };

  var renderTag = function renderTag() {
    var html = '';

    var _tagList = tagList(data.list),
        _tagList2 = _slicedToArray(_tagList, 2),
        list = _tagList2[0],
        subMap = _tagList2[1];

    list[0].forEach(function (item, index) {
      html += "".concat(tagHtml(item, index));
    });
    html = "<div class=\"box-tag\">".concat(html, "</div>");
    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;

    try {
      var _loop = function _loop() {
        var _step$value = _slicedToArray(_step.value, 2),
            pid = _step$value[0],
            obj = _step$value[1];

        var index = obj.index,
            color = obj.color,
            bg = obj.bg;
        html += "<div class=\"box-tag\" style=\"border-color:".concat(bg, "\"><span class=\"sub-index\" style=\"color:").concat(color, ";background:").concat(bg, "\">").concat(pid, "</span>");
        list[index].forEach(function (item) {
          html += "".concat(tagHtml(item, index));
        });
        html += "</div>";
      };

      for (var _iterator = subMap[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
        _loop();
      }
    } catch (err) {
      _didIteratorError = true;
      _iteratorError = err;
    } finally {
      try {
        if (!_iteratorNormalCompletion && _iterator.return != null) {
          _iterator.return();
        }
      } finally {
        if (_didIteratorError) {
          throw _iteratorError;
        }
      }
    }

    return html;
  };

  var renderList = function renderList() {
    var html = '';
    var parentIds = [];
    var bookmarks = data.list;

    if (bookmarks.length) {
      var childBookmarks = bookmarks.filter(function (item) {
        return !!item.parent;
      });
      var parentList = bookmarks.filter(function (item) {
        return !item.parent;
      });
      var childList = new Map();
      childBookmarks.forEach(function (item) {
        if (!childList.has(item.parent)) {
          childList.set(item.parent, []);
        }

        childList.get(item.parent).push(item);
      });
      childList.forEach(function (list, pid) {
        var item = parentList.find(function (obj) {
          return obj.index === pid;
        });
        if (item) list.unshift(item);
      });
      parentIds = _toConsumableArray(childList.keys());

      var makeList = function makeList(bkmks) {
        var indexList = bkmks.map(function (item) {
          return item.index;
        });
        var maxIndex = Math.max.apply(Math, _toConsumableArray(indexList));
        if (maxIndex > 100) maxIndex = 100;
        if (maxIndex < 30) maxIndex = 30;
        var list = new Array(maxIndex).fill({});
        indexList.forEach(function (tag, idx) {
          list[tag - 1] = bkmks[idx];
        });
        return list;
      };

      var renderHtml = function renderHtml(list, parent) {
        var str = '';
        list.forEach(function (item) {
          if (item.url) {
            var bg = item.background || '#297fc8';
            var color = item.color || fontColor(bg);
            var className = "bookmark-item-lacia";

            if (parent && (!item.parent || item.index === parent)) {
              className += ' bookmark-item-parent';
            }

            if (item.url === 'reload') {
              str += "<a style=\"background-color:".concat(bg, ";color:").concat(color, "\" class=\"").concat(className, "\" onclick=\"location.reload()\"><div>").concat(item.name || 'NoName', "</div></a>");
            } else if (item.url === 'back') {
              str += "<a style=\"background-color:".concat(bg, ";color:").concat(color, "\" class=\"").concat(className, "\" onclick=\"history.back()\"><div>").concat(item.name || 'NoName', "</div></a>");
            } else if (item.url === 'back&forward') {
              str += "<a style=\"background-color:".concat(bg, ";color:").concat(color, "\" class=\"").concat(className, "\" onclick=\"history.back();setTimeout(() => history.forward(), 100)\"><div>").concat(item.name || 'NoName', "</div></a>");
            } else if (item.url === 'none') {
              str += "<a style=\"background-color:".concat(bg, ";color:").concat(color, "\" class=\"").concat(className, "\"><div>").concat(item.name || 'NoName', "</div></a>");
            } else if (item.url === 'forward') {
              str += "<a style=\"background-color:".concat(bg, ";color:").concat(color, "\" class=\"").concat(className, "\" onclick=\"history.forward()\"><div>").concat(item.name || 'NoName', "</div></a>");
            } else {
              str += "<a style=\"background-color:".concat(bg, ";color:").concat(color, "\" class=\"").concat(className, "\" href=\"").concat(item.url, "\"><div>").concat(item.name || 'NoName', "</div></a>");
            }
          } else {
            str += "<div class=\"bookmark-item-lacia\"></div>";
          }
        });
        return "<div style=\"display:flex;height:20px\">".concat(str, "</div>");
      };

      childList.forEach(function (list, parent) {
        html += renderHtml(makeList(list), parent);
      });
      html += renderHtml(makeList(parentList), 0);
    }

    var css = '';
    parentIds.forEach(function (id) {
      css += ".bookmark-container-".concat(id, " {display:none}\n    .bookmark-container-");
    });
    html = "<style>".concat(css, "</style>").concat(html);
    return html;
  };

  var setIndex = function setIndex() {
    var index = 1;
    data.list.forEach(function (item) {
      if (item.index === index) {
        index = item.index + 1;
      }
    });
    return index;
  };

  var renderAll = function renderAll() {
    document.getElementById('bookmark-cont').innerHTML = renderTag();
    document.getElementById('gbf-bookmark-lacia').innerHTML = renderList();
  };

  var saveData = function saveData() {
    try {
      localStorage.setItem('gbf-bookmark:data', JSON.stringify(data.list));
    } catch (e) {}
  };

  var tryDownload = function tryDownload(content, filename) {
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    var blob = new Blob([content], {
      type: 'text/csv'
    });
    eleLink.href = URL.createObjectURL(blob);
    document.body.appendChild(eleLink);
    eleLink.click();
    document.body.removeChild(eleLink);
  };

  var css = "\n#gbf-bookmark-lacia {\n  position: fixed;\n  left: 0;\n  top: 97%;\n  width: 2px;\n  height: 100%;\n  z-index: 9999999;\n  left:0px;\n  pointer-events: none;\n  display: flex;\n}\n#gbf-bookmark-lacia.align-left-bookmark .bookmark-item-lacia {\n  text-align: left;\n}\n#gbf-bookmark-lacia.align-center-bookmark .bookmark-item-lacia {\n  text-align: center;\n}\n#gbf-bookmark-lacia.align-right-bookmark .bookmark-item-lacia {\n  text-align: right;\n}\n.bookmark-container {\n  position: absolute;\n top:90%; left: 100px;\n  right: 0;\n  z-index: 1;display:flex;\n}\n.bookmark-container-sub {\n  z-index: 2;\n}\n.bookmark-container-sub .bookmark-item-lacia {\n  opacity: 0;\n  pointer-events: none;\n}\n.bookmark-container-sub .bookmark-item-lacia.bookmark-item-parent {\n  pointer-events: auto;\n}\n.bookmark-item-lacia {\n  opacity: 1;\n  pointer-events: auto;\n}\n .bookmark-container {\n  opacity: 0;\n}.bookmark-container-sub {\n  pointer-events: none;\n  display: none;\n}\n.bookmark-container-sub .bookmark-item-lacia:not(a) {\n  width: 15px;\n  padding: 0;\n}\n#gbf-bookmark-lacia.size-1 .bookmark-container-sub .bookmark-item-lacia:not(a) {\n  width: 20px;\n  padding: 0;\n}\n#gbf-bookmark-lacia.size-3 .bookmark-container-sub .bookmark-item-lacia:not(a) {\n  width: 10px;\n  padding: 0;\n}\n#show-setting-bookmark {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 10px;\n  height: 10px;\n  z-index: 1000000;\n  cursor: pointer;\n}\n#gbf-bookmark-lacia.bookmark-remove-anime,\n#gbf-bookmark-lacia.bookmark-remove-anime a.bookmark-item-lacia {\n  transition: none;\n}\n#gbf-bookmark-lacia.autohide-bookmark {\n  opacity: 0;\n}\n#gbf-bookmark-lacia.full-bookmark a.bookmark-item-lacia:nth-child(2n) {\n  padding-right: 10px;\n}\n#gbf-bookmark-lacia.not-mixed-bookmark a.bookmark-item-lacia:nth-child(2n){\n  padding-right: 8px;\n}\n#gbf-bookmark-lacia.not-mixed-bookmark:hover a.bookmark-item-lacia:nth-child(2n){\n  padding-right: 8px;\n}\n\n#gbf-bookmark-lacia.autohide-bookmark:hover {\n  opacity: 1;\n}\n#gbf-bookmark-lacia:hover .bookmark-item-lacia {\n  box-shadow: none;\n}\n#gbf-bookmark-lacia.size-1 .bookmark-item-lacia {\n  width: 26px;\n  height: 30px;\n  line-height: 30px;\n  padding-left: 11px;\n}\n#gbf-bookmark-lacia.size-1 .bookmark-item-lacia {\n  width: 69px;\n  font-size: 11px;\n}\n#gbf-bookmark-lacia.size-3 .bookmark-item-lacia {\n  width: 18px;\n  height: 20px;\n  line-height: 20px;\n  padding-left: 6px;\n}\n#gbf-bookmark-lacia.size-3 .bookmark-item-lacia {\n  width: 44px;\n  font-size: 7px;\n}\n.bookmark-item-lacia {\n  line-height: 24px;\n  padding-left: 8px;\n  padding-right: 8px;\n  box-sizing: content-box;\n  display: block;\n  position: relative;\n  pointer-events: auto;\n}\n.bookmark-item-child {\n  display: none;\n}\na.bookmark-item-lacia:focus {\n  outline: 0;\n}\na.bookmark-item-lacia {\n  width: 52px;\n  background-color: #fff;\n  text-decoration: none;\n  white-space: nowrap;\n  color: #000;\n  font-size: 9px;\n  font-family: -apple-system, -apple-system-font, \"Microsoft JHengHei\", HelveticaNeue, \"Helvetica Neue\", Helvetica, sans-serif;\n  font-weight: 100;\n  cursor: pointer;\n  pointer-events: auto;\n  z-index: 1;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);\n  transition: left 0.3s, right 0.3s, box-shadow 0.3s, filter 0.3s;\n}\n.bookmark-item-lacia>div {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 100%;\n}\na.bookmark-item-lacia:hover {\n  filter: brightness(0.9);\n}\na.bookmark-item-lacia:active {\n  filter: brightness(0.8);\n  mix-blend-mode: multiply;\n}\na.bookmark-item-lacia:active:before, a.bookmark-item-lacia:active:after {\n  display: none;\n}\n.paper-shadow:before, .paper-shadow:after {\n\tcontent: '';\n  position: absolute;\n  z-index: 1;\n\tleft: 0;\n\tbox-shadow: 0 0 10px rgba(0,0,0,0.35);\n\tborder-radius: 50%;\n\twidth: 100%;\n\theight: 20px;\n\tdisplay: none;\n}\n.paper-shadow:before {\n\tdisplay: block;\n\ttop: 0px;\n\tclip: rect(-40px auto 0 auto);\n}\n.paper-shadow:after {\n\tdisplay: block;\n\tbottom: 0px;\n\tclip: rect(20px auto 40px auto);\n}\n#gbf-bookmark-lacia.bookmark-right {\n  left: auto;\n  right: -65px;\n}\n#gbf-bookmark-lacia.bookmark-right:not(.full-bookmark):hover {\n  right: 0;\n  left: auto;\n}\n#gbf-bookmark-lacia.bookmark-right .bookmark-item-lacia {\n  float: right;\n}\n.paper-shadow.dark-shadow:before,.paper-shadow.dark-shadow:after {\n  box-shadow: 0 0 10px rgb(0, 0, 0, 0.5);\n}\n#gbf-bookmark-setting {\n  position: fixed;\n  z-index: 9999999;\n  width: 280px;\n  padding-bottom: 30px;\n  min-height: 290px;\n  max-height: calc(100% - 200px);\n  top: 60px;\n  left: 20px;\n  background: #fffbe1;\n  font-family: -apple-system, -apple-system-font, \"Microsoft JHengHei\", HelveticaNeue, \"Helvetica Neue\", Helvetica, sans-serif;\n  font-weight: 100;\n  display: none;\n}\n#gbf-bookmark-setting.show-setting {\n  display: block;\n}\n#gbf-bookmark-setting .s-paper {\n  position: absolute;\n  bottom: -2px;\n  width: calc(100% - 2px);\n  left: 1px;\n  height: 2px;\n  background: #e8e4cb;\n}\n.tab-bookmark-setting {\n  position: absolute;\n  height: 24px;\n  line-height: 24px;\n  background: #e8e4cb;\n  top: -24px;\n  left: 1px;\n  padding: 0 20px;\n  font-size: 10px;\n  z-index: 0;\n  letter-spacing: 0.2em;\n  cursor: pointer;\n}\n.tab-bookmark-setting:after {\n  display: none;\n}\n.option-bookmark {\n  left: 76px;\n}\n.option-bookmark.active-bookmark {\n  left: 75px;\n}\n.active-bookmark {\n  z-index: 2;\n  background: #fffbe1;\n  height: 25px;\n  line-height: 25px;\n  padding: 0 21px;\n  left: 0px;\n}\n.footer-bookmark-setting {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  left: 0;\n  padding: 10px 0;\n  text-align: center;\n}\n.footer-bookmark-setting .btn-bookmark {\n  margin: 0 10px;\n}\n.btn-bookmark {\n  padding: 4px 12px;\n  font-size: 8px;\n  cursor: pointer;\n  display: inline-block;\n  box-shadow: 0 0 1px rgba(0,0,0,0.05);\n  background-color: #FFEB3B;\n}\n.btn-bookmark:hover {\n  background-color: #fff280;\n}\n.btn-bookmark:active {\n  background-color: #fff492;\n}\n.btn-bookmark.btn-add {\n  padding: 2px 8px;\n  color: #fff;\n  background-color: #8BC34A;\n  box-shadow: 0 1px 2px rgba(0,0,0,0.2);\n}\n.btn-bookmark.btn-add:after,.btn-bookmark.btn-add:before {\n  display: none;\n}\n.btn-bookmark.btn-add:hover {\n  filter: brightness(0.95);\n}\n.btn-bookmark.btn-add:active {\n  filter: brightness(0.9);\n}\n.toolbar-bookmark {\n  display: flex;\n  justify-content: space-between;\n}\n.toolbar-bookmark .toolbar-right {\n  display: flex;\n}\n.toolbar-bookmark .toolbar-right .btn-bookmark.btn-add {\n  background: #03A9F4;\n  margin-left: 10px;\n}\n.setting-box-bookmark {\n  padding: 10px;\n  display: none;\n}\n.setting-box-bookmark.box-active {\n  display: block;\n}\n#bookmark-cont {\n  margin: 4px 0;\n  margin-right: -4px;\n  overflow-y: auto;\n  max-height: 320px;\n}\n#bookmark-cont .box-tag {\n  border: 1px solid #9E9E9E;\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: 8px;\n  margin-right: 4px;\n  padding: 4px;\n}\n#bookmark-cont .sub-index {\n  font-size: 10px;\n  box-shadow: 0 0 2px rgba(0,0,0,0.1);\n  width: 16px;\n  height: 16px;\n  display: flex;\n  z-index: 1;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  right: -1px;\n  top: -1px;\n}\n#bookmark-cont::-webkit-scrollbar {\n  display: block;\n  width: 4px;\n  background: #e4eaa4;\n  border-radius: 2px;\n}\n#bookmark-cont::-webkit-scrollbar-thumb {\n  background: #8BC34A;\n  border-radius: 2px;\n}\n.setting-box-bookmark .bookmark-tag {\n  padding: 4px 12px;\n  margin: 4px;\n  font-size: 10px;\n}\n.setting-box-bookmark .idx-tag {\n  position: absolute;\n  left: 2px;\n  top: 2px;\n  font-size: 6px;\n  padding: 0 2px;\n}\n.setting-box-bookmark .idx-tag-parent {\n  position: absolute;\n  right: 2px;\n  bottom: 2px;\n  font-size: 6px;\n  padding: 0 2px;\n  text-decoration: underline;\n}\n.setting-box-bookmark .edit-tag, .setting-box-bookmark .delete-tag {\n  position: absolute;\n  height: 100%;\n  font-size: 8px;\n  top: 0;\n  right: 0;\n  background: #FF9800;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  width: 20px;\n  color: #fff;\n  cursor: pointer;\n}\n.setting-box-bookmark .edit-tag:hover, .setting-box-bookmark .delete-tag:hover {\n  filter: brightness(0.9);\n}\n.setting-box-bookmark .edit-tag {\n  right: 20px;\n  background: #2196F3;\n}\n.bookmark-tag:hover .edit-tag, .bookmark-tag:hover .delete-tag {\n  display: inline-flex;\n}\n.paper-shadow2 {\n  position: relative;\n}\n.paper-shadow2:before, .paper-shadow2:after {\n  z-index: -1;\n  position: absolute;\n  content: '';\n  bottom: 5px;\n  width: calc(50% - 1px);\n  height: 8px;\n  background: rgb(0, 0, 0, 0);\n  box-shadow: 0px 5px 2px 0px rgba(0, 0, 0, 0.38);\n}\n.paper-shadow2:before {\n  transform: rotate(-3deg);\n  left: 1px;\n}\n.paper-shadow2:after {\n  transform: rotate(3deg);\n  right: 1px;\n}\n#gbf-bookmark-tagmodal {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 200px;\n  background-color: #03A9F4;\n  font-size: 9px;\n  padding: 0 10px;\n  box-shadow: 0 0 1px 0.1px rgba(0,0,0,0.2);\n  display: none;\n}\n#gbf-bookmark-tagmodal.bookmark-active {\n  display: block;\n}\n#gbf-bookmark-tagmodal > div {\n  margin: 10px 0;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n}\n#gbf-bookmark-tagmodal .btn-bookmark {\n  margin: 0 10px;\n  background: #fff;\n}\n#gbf-bookmark-tagmodal .btn-bookmark:hover {\n  background: #f3f3f3;\n}\n.setting-option-bookmark {\n  font-size: 9px;\n  max-height: 320px;\n  overflow: auto;\n}\n.setting-option-bookmark>div {\n  margin: 10px 0;\n  padding: 0 10px;\n}\n.setting-option-bookmark .btn-bookmark {\n  background: #03A9F4;\n  color: #fff;\n}\n#gbf-bookmark-setting .label-setting, #gbf-bookmark-setting .label-tagmodal {\n  background: #fff;\n  height: 20px;\n  line-height: 20px;\n  padding: 0 8px;\n  width: 40px;\n  display: inline-block;\n  margin-right: 10px;\n}\n#gbf-bookmark-setting .label-setting,\n#gbf-bookmark-setting .ipt-setting-bookmark {\n  height: 18px;\n  line-height: 18px;\n}\n.ipt-setting-cont, .ipt-tagmodal-cont {\n  display: inline-block;\n}\n.setting-option-bookmark .hint-bookmark {\n  display: block;\n  margin-top: 10px;\n  color: #777;\n  width: 188px;\n  font-weight: normal;\n}\n#gbf-bookmark-setting .ipt-setting-bookmark, #gbf-bookmark-setting .ipt-tagmodal {\n  background: #fff;\n  height: 20px;\n  line-height: 20px;\n  padding: 0 0 0 8px;\n  margin: 0;\n  border: 0;\n  width: 112px;\n  color: #666;\n}\n#gbf-bookmark-setting .ipt-setting-bookmark::placeholder, .ipt-tagmodal::placeholder {\n  color: #aaa;\n}\n#gbf-bookmark-setting .ipt-setting-bookmark:focus, .ipt-tagmodal:focus {\n  outline: 0;\n}\n";

  function tempalte() {
    var html = "\n  <style>".concat(css, "</style>\n  <div id=\"show-setting-bookmark\"></div>\n  <div id=\"gbf-bookmark-lacia\">").concat(renderList(), "</div>\n  <div id=\"gbf-bookmark-setting\" class=\"paper-shadow dark-shadow\">\n  <div class=\"tab-bookmark-setting active-bookmark paper-shadow\">\u4E66\u7B7E</div>\n  <div class=\"tab-bookmark-setting option-bookmark paper-shadow\">\u9009\u9879</div>\n  <div class=\"setting-box-bookmark box-active\">\n    <div class=\"toolbar-bookmark\">\n    <div id=\"btn-add-bookmark\" class=\"btn-bookmark btn-add paper-shadow2\">\u6DFB\u52A0</div>\n    <div class=\"toolbar-right\">\n    <input type=\"file\" style=\"display:none\" id=\"ipt-import-bookmark\" accept=\".json\">\n    <label for=\"ipt-import-bookmark\" id=\"btn-import-bookmark\" class=\"btn-bookmark btn-add paper-shadow2\">\u5BFC\u5165</label>\n    <div id=\"btn-export-bookmark\" class=\"btn-bookmark btn-add paper-shadow2\">\u5BFC\u51FA</div>\n    </div>\n    </div>\n    <div id=\"bookmark-cont\">").concat(renderTag(), "</div>\n  </div>\n  <div class=\"setting-box-bookmark setting-option-bookmark\">\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u4F4D\u7F6E</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n        <select id=\"ipt-position-bookmark\" class=\"ipt-setting-bookmark\">\n        <option value=\"left\">\u5DE6\u8FB9</option>\n        <option value=\"right\">\u53F3\u8FB9</option>\n        </select>\n      </div>\n    </div>\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u8FB9\u8DDD</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n        <input id=\"ipt-margin-bookmark\" class=\"ipt-setting-bookmark\" value=\"2\" type=\"number\" min=\"0\" max=\"100\">\n      </div>\n    </div>\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u6587\u5B57</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n      <select id=\"ipt-align-bookmark\" class=\"ipt-setting-bookmark\">\n        <option value=\"left\">\u5DE6\u5BF9\u9F50</option>\n        <option value=\"center\">\u5C45\u4E2D</option>\n        <option value=\"right\">\u53F3\u5BF9\u9F50</option>\n      </select>\n      </div>\n    </div>\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u52A8\u753B</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n      <select id=\"ipt-animation-bookmark\" class=\"ipt-setting-bookmark\">\n        <option value=\"open\">\u542F\u7528</option>\n        <option value=\"close\">\u7981\u6B62</option>\n      </select>\n      </div>\n    </div>\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u5C3A\u5BF8</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n      <select id=\"ipt-size-bookmark\" class=\"ipt-setting-bookmark\">\n        <option value=\"1\">\u5927</option>\n        <option value=\"2\">\u4E2D</option>\n        <option value=\"3\">\u5C0F</option>\n      </select>\n      </div>\n    </div>\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u5BF9\u9F50\u4E66\u7B7E</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n      <select id=\"ipt-mixed-bookmark\" class=\"ipt-setting-bookmark\">\n        <option value=\"no\">\u662F</option>\n        <option value=\"yes\">\u5426</option>\n      </select>\n      </div>\n    </div>\n    <div>\n      <span class=\"label-setting paper-shadow2\">\u81EA\u52A8\u9690\u85CF</span>\n      <div class=\"paper-shadow2 ipt-setting-cont\">\n        <input id=\"ipt-hidedelay-bookmark\" class=\"ipt-setting-bookmark\" value=\"10\" type=\"number\" min=\"-2\" max=\"60\">\n      </div>\n      <span class=\"hint-bookmark\">\u7B49\u5F85\u6307\u5B9A\u79D2\u6570\u540E\u81EA\u52A8\u9690\u85CF\uFF0C\u8BBE\u4E3A0\u76F4\u63A5\u9690\u85CF\uFF0C\u8BBE\u4E3A-1\u5219\u59CB\u7EC8\u663E\u793A\u3002\u5982\u9700\u59CB\u7EC8\u5F39\u51FA\u4E66\u7B7E\u680F\uFF0C\u628A\u81EA\u52A8\u9690\u85CF\u8BBE\u4E3A-2\uFF0C\u5E76\u628A\u8FB9\u8DDD\u8C03\u5230100\u3002</span>\n    </div>\n    <div><div class=\"btn-bookmark paper-shadow2\" id=\"btn-save-setting\">\u4FDD\u5B58</div></div>\n  </div>\n  <div class=\"footer-bookmark-setting\">\n    <div class=\"btn-bookmark paper-shadow2\" id=\"btn-close-bookmark\">\u5173\u95ED</div>\n  </div>\n  <div id=\"gbf-bookmark-tagmodal\" class=\"paper-shadow\">\n    <div>\n    <span class=\"label-tagmodal paper-shadow2\">\u4E66\u7B7E\u540D</span>\n    <div class=\"paper-shadow2 ipt-tagmodal-cont\"><input id=\"ipt-name-bookmark\" class=\"ipt-tagmodal\" placeholder=\"\u8BF7\u8F93\u5165\u4E66\u7B7E\u7684\u540D\u5B57\" type=\"text\"></div>\n    </div>\n    <div>\n    <span class=\"label-tagmodal paper-shadow2\">\u7F51\u5740</span>\n    <div class=\"paper-shadow2 ipt-tagmodal-cont\"><input id=\"ipt-url-bookmark\" class=\"ipt-tagmodal\" placeholder=\"\u8BF7\u8F93\u5165\u4E66\u7B7E\u5730\u5740\" type=\"text\"></div>\n    </div>\n    <div>\n    <span class=\"label-tagmodal paper-shadow2\">\u989C\u8272</span>\n    <div class=\"paper-shadow2 ipt-tagmodal-cont\"><input id=\"ipt-bgcolor-bookmark\" class=\"ipt-tagmodal\" value=\"#00BCD4\" type=\"color\"></div>\n    </div>\n    <div>\n    <span class=\"label-tagmodal paper-shadow2\">\u5E8F\u53F7</span>\n    <div class=\"paper-shadow2 ipt-tagmodal-cont\"><input id=\"ipt-index-bookmark\" class=\"ipt-tagmodal\" min=\"1\" max=\"100\" type=\"number\"></div>\n    </div>\n    <div>\n    <span class=\"label-tagmodal paper-shadow2\">\u7236\u4E66\u7B7E</span>\n    <div class=\"paper-shadow2 ipt-tagmodal-cont\"><input id=\"ipt-parent-bookmark\" class=\"ipt-tagmodal\" min=\"0\" max=\"100\" type=\"number\"></div>\n    </div>\n    <div>\n    <div class=\"btn-bookmark paper-shadow2\" id=\"btn-save-tagmodal\">\u4FDD\u5B58</div>\n    <div class=\"btn-bookmark paper-shadow2\" id=\"btn-close-tagmodal\">\u53D6\u6D88</div>\n    </div>\n  </div>\n  <div class=\"s-paper\"></div>\n  </div>\n  ");
    return html;
  }

  function event () {
    var tabs = document.querySelectorAll('#gbf-bookmark-setting .tab-bookmark-setting');
    var boxes = document.querySelectorAll('#gbf-bookmark-setting .setting-box-bookmark');
    
    var setting = document.querySelector('#gbf-bookmark-setting');
    var closeBtn = document.querySelector('#btn-close-bookmark');
    var bookmark = document.querySelector('#gbf-bookmark-lacia');
    var btnShowSetting = document.querySelector('#show-setting-bookmark');

    bookmark.oncontextmenu = function (e) {
      e.preventDefault();
    };

    bookmark.addEventListener('mouseup', function (e) {
      if (e.button === 2) {
        showSetting();
      }
    });
    btnShowSetting.addEventListener('click', function () {
      showSetting();
    });

    var hideSetting = function hideSetting() {
      setting.classList.remove('show-setting');
    };

    var showSetting = function showSetting() {
      return setting.classList.toggle('show-setting');
    };

    closeBtn.addEventListener('click', hideSetting);
    var btnModalClose = document.querySelector('#btn-close-tagmodal');
    var tagModal = document.querySelector('#gbf-bookmark-tagmodal');
    var btnAddBookmark = document.querySelector('#btn-add-bookmark');
    var btnSaveTag = document.querySelector('#btn-save-tagmodal');
    var iptName = document.querySelector('#ipt-name-bookmark');
    var iptUrl = document.querySelector('#ipt-url-bookmark');
    var iptBgcolor = document.querySelector('#ipt-bgcolor-bookmark');
    var iptIndex = document.querySelector('#ipt-index-bookmark');
    var iptParent = document.querySelector('#ipt-parent-bookmark');
    
    var tagModalStatus = {
      type: 'add',
      index: 1
    };
    btnAddBookmark.addEventListener('click', function () {
      tagModal.classList.add('bookmark-active');
      iptName.value = '';
      iptUrl.value = location.hash || '';
      iptBgcolor.value = randomColor();
      iptIndex.value = setIndex();
      iptParent.value = 0;
      tagModalStatus.type = 'add';
    });
    btnSaveTag.addEventListener('click', function () {
      var url = iptUrl.value;
      var name = iptName.value || url.replace(/^#/, '');
      if (!url.trim()) return alert('缺少书签地址');
      var background = iptBgcolor.value;
      var index = iptIndex.value | 0;
      var parent = iptParent.value | 0;

      if (tagModalStatus.type === 'add') {
        data.list.push({
          name: name,
          url: url,
          background: background,
          index: index,
          parent: parent
        });
      } else {
        data.list[tagModalStatus.index] = {
          name: name,
          url: url,
          background: background,
          index: index,
          parent: parent
        };
      }

      tagModal.classList.remove('bookmark-active');
      renderAll();
      saveData();
    });
    var bookmarkCont = document.querySelector('#bookmark-cont');
    bookmarkCont.addEventListener('click', function (e) {
      var elemt = e.target;

      if (elemt.classList.contains('edit-tag')) {
        tagModalStatus.type = 'edit';
        var index = tagModalStatus.index = elemt.dataset.index | 0;
        var item = data.list[index];
        tagModal.classList.add('bookmark-active');
        iptName.value = item.name || '';
        iptUrl.value = item.url || '';
        iptBgcolor.value = item.background || randomColor();
        iptIndex.value = item.index || setIndex();
        iptParent.value = item.parent | 0;
      } else if (elemt.classList.contains('delete-tag')) {
        if (!confirm('确定要删除这个书签吗？')) return;

        var _index = elemt.dataset.index | 0;

        data.list.splice(_index, 1);
        renderAll();
        saveData();
      }
    });
    var btnSaveSetting = document.querySelector('#btn-save-setting');
    var iptPosition = document.getElementById('ipt-position-bookmark');
    var iptHidedelay = document.getElementById('ipt-hidedelay-bookmark');
    var iptMargin = document.getElementById('ipt-margin-bookmark');
    var iptAnimation = document.getElementById('ipt-animation-bookmark');
    var iptSize = document.getElementById('ipt-size-bookmark');
    var iptAlign = document.getElementById('ipt-align-bookmark');
    var iptMixed = document.getElementById('ipt-mixed-bookmark');
    btnSaveSetting.addEventListener('click', function () {
      config.position = iptPosition.value;
      config.hideDelay = iptHidedelay.value | 0;
      config.margin = iptMargin.value | 0;
      config.animation = iptAnimation.value === 'open';
      config.size = iptSize.value | 0;
      config.align = iptAlign.value;
      config.mixed = iptMixed.value;
      applyConfig();
      saveConfig();
      alert('保存成功');
    });
    var btnImport = document.getElementById('btn-import-bookmark');
    var btnExport = document.getElementById('btn-export-bookmark');
    var iptImport = document.getElementById('ipt-import-bookmark');
    iptImport.addEventListener('change', function () {
      var files = this.files;

      if (files.length) {
        var reader = new FileReader();

        reader.onload = function (e) {
          try {
            var obj = JSON.parse(e.target.result);
            data.list = obj.data;
            Object.assign(config, obj.config);
            applyConfig();
            initIpt();
            saveConfig();
            renderAll();
            saveData();
            alert('导入成功');
          } catch (err) {
            console.error(err);
            alert("\u5BFC\u5165\u5931\u8D25 ".concat(err.message));
          }
        };

        reader.readAsText(files[0]);
      }
    });
    btnExport.addEventListener('click', function () {
      try {
        var obj = {
          data: data.list,
          config: config
        };
        tryDownload(JSON.stringify(obj, null, 2), 'GBF-Bookmark-Config.json');
      } catch (e) {
        console.error(e);
      }
    });
  }

  var recordTime = function recordTime() {
    localStorage.setItem('gbf-bookmark:time', Date.now());
  };

  var getTime = function getTime() {
    var time = 0;

    try {
      var _time = parseInt(localStorage.getItem('gbf-bookmark:time'), 10);

      if (_time) time = _time;
    } catch (e) {}

    return time;
  };

  var parentElmt = function parentElmt() {
    // let elmt = document.getElementById('mobage-game-container')
    // if (!elmt) elmt = document.body
    // return elmt
    return document.body;
  };

  var main = function main() {
    try {
      var html = tempalte(data.list);
      parentElmt().insertAdjacentHTML('beforeend', html);
      var container = document.getElementById('gbf-bookmark-lacia');
      var time = getTime();
      var hideTimer;
      event();
      initIpt();
      //applyConfig();

      if (Date.now() - time > config.hideDelay * 1000 && config.hideDelay > 0) {
        container.style.opacity = 0;
      } else {
        delayHide();
      }

      setTimeout(function () {
        try {
          var elemt1 = document.getElementById('show-setting-bookmark');
          var elemt2 = document.getElementById('gbf-bookmark-lacia');
          var elemt3 = document.getElementById('gbf-bookmark-setting');
          elemt1.style.zoom = deviceRatio;
          elemt2.style.zoom = deviceRatio;
          elemt3.style.zoom = deviceRatio;
        } catch (e) {
          console.error(e);
        }
      });
    } catch (e) {
      console.error(e);
    }
  };

  var win = window.unsafeWindow || window;

  if (win.document.readyState != 'loading') {
    main();
  } else {
    win.addEventListener('DOMContentLoaded', main);
  }

}());