function init() {
  (loadAll = setting[0].total),
    setting.forEach((e) => {
      let n = e.imageUrl;
      (e.canvas = document.getElementById(e.className[0])),
        (e.canvas.width = vw),
        (e.canvas.height = vh),
        (e.context = e.canvas.getContext("2d", {
          alpha: !1,
          desynchronized: !0,
          powerPreference: "high-performance",
        })),
        (e.context.imageSmoothingEnabled = !0),
        (e.context.imageSmoothingQuality = "high");
      for (let a = 0; a < e.total; a++) {
        let i = `0000${a}`.slice(-4),
          o = new Image(imageW, imageH);
        (o.src = `${n}/${i}.webp`),
          (o.onload = () => {
            0 === a &&
              (isPhone
                ? e.context.drawImage(
                    o,
                    vw > imageW ? 0.5 * (vw - imageW) : 0.5 * (imageW - vw),
                    vh > imageH ? 0.5 * (vh - imageH) : 0.5 * (imageH - vh),
                    vw,
                    vh,
                    0,
                    0,
                    vw,
                    vh
                  )
                : e.context.drawImage(o, 0, 0, vw, vh));
          });
        var t = {
          id: a,
          images: o,
          y: (a + 1) * dotOffset,
        };
        e.dots.push(t);
      }
      TweenLite.set(e.className[1], {
        height: e.total * dotOffset,
      });
    }),
    window.addEventListener("resize", resize),
    isPhone
      ? document.addEventListener("touchmove", queueUpdate)
      : document.addEventListener("wheel", queueUpdate),
    TweenLite.ticker.addEventListener("tick", update);
}
function update() {
  if (dirty) {
    if (
      (sectionType != sectionNum &&
        (setting.forEach((e) => {
          e.sectionType === sectionNum && (nowSetting = e);
        }),
        (sectionType = sectionNum)),
      nowSetting)
    ) {
      var e = $(nowSetting.className[2]).scrollTop();
      (e = e || 0), nowSetting.context.clearRect(0, 0, vw, vh);
      for (var n = 0; n < nowSetting.total; n++) {
        var t = nowSetting.dots[n],
          a = t.y - e;
        a >= 0 &&
          a <= vh &&
          (nowSetting.CA.forEach((e) => {
            e.start < t.id && t.id < e.end
              ? $(e.name).addClass("active")
              : $(e.name).removeClass("active");
          }),
          isPhone
            ? nowSetting.context.drawImage(
                t.images,
                vw > imageW ? 0.5 * (vw - imageW) : 0.5 * (imageW - vw),
                vh > imageH ? 0.5 * (vh - imageH) : 0.5 * (imageH - vh),
                vw,
                vh,
                0,
                0,
                vw,
                vh
              )
            : nowSetting.context.drawImage(t.images, 0, 0, vw, vh));
      }
    }
    dirty = !1;
  }
}
function queueUpdate() {
  dirty || (dirty = !0);
}
function resize() {
  (dirty = !0),
    (vw = canvas.width = window.innerWidth),
    (vh = canvas.height = window.innerHeight);
}
var isPhone = !1;
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(
  navigator.userAgent
) && (isPhone = !0);
var vw = window.innerWidth,
  vh = window.innerHeight,
  imageW = isPhone ? 750 : 1920,
  imageH = isPhone ? 1334 : 1080,
  dirty = !0,
  sectionType = 0,
  nowSetting = null,
  setting = [
    {
      name: "人鸟兽",
      sectionType: 3,
      className: ["canvas", ".scroll-container", ".section3 .fp-scrollable"],
      canvas: null,
      context: null,
      imageUrl: isPhone ? "./img/canvas_p/rsy" : "./img/canvas/rsy",
      dots: [],
      total: isPhone ? 127 : 298,
      CA: isPhone
        ? [
            {
              name: "#videocont1-1",
              start: 47,
              end: 69,
            },
            {
              name: "#videocont-map",
              start: 47,
              end: 127,
            },
            {
              name: "#videocont1-2",
              start: 63,
              end: 69,
            },
            {
              name: "#videocont1-3",
              start: 71,
              end: 84,
            },
            {
              name: "#videocont1-4",
              start: 85,
              end: 105,
            },
            {
              name: "#videocont1-5",
              start: 107,
              end: 127,
            },
          ]
        : [
            {
              name: "#videocont1-1",
              start: 112,
              end: 158,
            },
            {
              name: "#videocont-map",
              start: 112,
              end: 298,
            },
            {
              name: "#videocont1-2",
              start: 130,
              end: 158,
            },
            {
              name: "#videocont1-3",
              start: 162,
              end: 195,
            },
            {
              name: "#videocont1-4",
              start: 196,
              end: 233,
            },
            {
              name: "#videocont1-5",
              start: 245,
              end: 298,
            },
          ],
    },
    {
      name: "金蝉玉叶",
      sectionType: 54,
      className: [
        "canvas1",
        ".scroll-container1",
        ".jinchanyuye .fp-scrollable",
      ],
      canvas: null,
      context: null,
      imageUrl: isPhone ? "./img/canvas_p/jcyy" : "./img/canvas/jcyy",
      dots: [],
      total: isPhone ? 186 : 288,
      CA: isPhone
        ? [
            {
              name: "#videocont2-1",
              start: 58,
              end: 99,
            },
            {
              name: "#videocont2-map",
              start: 58,
              end: 186,
            },
            {
              name: "#videocont2-2",
              start: 68,
              end: 99,
            },
            {
              name: "#videocont2-3",
              start: 68,
              end: 99,
            },
            {
              name: "#videocont2-4",
              start: 99,
              end: 130,
            },
            {
              name: "#videocont2-5",
              start: 139,
              end: 180,
            },
          ]
        : [
            {
              name: "#videocont2-1",
              start: 74,
              end: 116,
            },
            {
              name: "#videocont2-map",
              start: 74,
              end: 116,
            },
            {
              name: "#videocont2-2",
              start: 84,
              end: 116,
            },
            {
              name: "#videocont2-3",
              start: 84,
              end: 116,
            },
            {
              name: "#videocont2-4",
              start: 120,
              end: 181,
            },
            {
              name: "#videocont2-5",
              start: 194,
              end: 242,
            },
          ],
    },
  ],
  dotOffset = isPhone ? 50 : 500;
init();
