const canvas = document.getElementById("draw");
const ctx = canvas.getContext("2d");

var fontscale = 1;

window.addEventListener("resize", handleSizing);
window.addEventListener("load", handleSizing);

function handleSizing() {
  if (
    canvas.offsetWidth != window.innerWidth ||
    canvas.offsetHeight != window.innerHeight
  ) {
    canvas.width = 3600;
    canvas.height = 2118;
    var curwidth = canvas.offsetWidth;
    var curheight = canvas.offsetHeight;
    var destw = window.innerWidth;
    var desth = ((1.0 * destw) / (1.0 * curwidth)) * curheight;
    if (desth > curheight) {
      var desth = window.innerHeight;
      var destw = ((1.0 * desth) / (1.0 * curheight)) * curwidth;
    }
    canvas.width = destw - 10;
    canvas.height = desth - 10;

    fontscale = canvas.height / 2118.0;

    draw();
  }
}

var fontmap = {
  0: { y: 0, width: 115, height: 200 },
  1: { y: 200, width: 112, height: 200 },
  2: { y: 400, width: 177, height: 200 },
  3: { y: 600, width: 105, height: 200 },
  4: { y: 800, width: 191, height: 200 },
  5: { y: 1000, width: 156, height: 200 },
  6: { y: 1200, width: 122, height: 200 },
  7: { y: 1400, width: 125, height: 200 },
  8: { y: 1600, width: 121, height: 200 },
  9: { y: 1800, width: 111, height: 200 },
  pnd: { y: 2000, width: 296, height: 200 },
  slashinfin: { y: 2200, width: 317, height: 200 },
};
var publicKey = {
  alg: "RS256",
  e: "AQAB",
  ext: true,
  key_ops: ["verify"],
  kty: "RSA",
  n: "mxSExiVuZIhW-Y-oVSg5W9y--lKN-sWREzhwioV-xr-nqmfTSnMeiYoWIt477uDHtbH5NoHKpMozYZTYznO-8Nwxv8kI0rEkSgQsnQSLnDm1I_Q8No0aswYpZJM5ZvYEctdl9yDqyOb7_cihxxJeuLnac6w814jspVfE2DOgiw3PtX0shb4LTbz42ZHEcMiI0B5mqLKWAxNW4arANzofA49qY4rMcyhUp5I1R7FKYP6nvH0wJANYfMQIOaAOFu_duplbCqr2ecQaK80EpH-OpQGtwAmnxjf67Nxh8ZXRG_e40xS4r_GOenN4g93JRtss505qpol3iV4Z2d_HsaQcQQ",
};

var fontloaded = false;
var imageloaded = false;
var logoloaded = false;
var verified = false;
var verifyran = false;
var img = new Image();
var font = new Image();
var logo = new Image();
img.crossOrigin = "Anonymous";
font.crossOrigin = "Anonymous";
logo.crossOrigin = "Anonymous";

var draw = false;
//if(qedition && qtime && qsig)
{
  var message = JSON.stringify({ qedition: qedition, qtime: qtime });
  var signedbase64 = qsig;

  window.crypto.subtle
    .importKey(
      "jwk",
      publicKey,
      {
        name: "RSASSA-PKCS1-v1_5",
        modulusLength: 2048,
        publicExponent: new Uint8Array([1, 0, 1]),
        hash: "SHA-256",
      },
      true,
      ["verify"]
    )
    .then((key) => {
      window.crypto.subtle
        .verify(
          "RSASSA-PKCS1-v1_5",
          key,
          base64ToArrayBuffer(signedbase64),
          str2ab(message)
        )
        .then((s) => {
          if (s) {
            verified = true;
          }
          verifyran = true;
          draw();
        });
    })
    .catch((err) => {
      verifyran = true;
      draw();
      console.log("error", err);
    });
}

img.onload = function () {
  imageloaded = true;
  draw();
};
font.onload = function () {
  fontloaded = true;
  draw();
};
logo.onload = function () {
  logoloaded = true;
  draw();
};

function base64ToArrayBuffer(base64) {
  var binary_string = window.atob(base64);
  var len = binary_string.length;
  var bytes = new Uint8Array(len);
  for (var i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}

function str2ab(str) {
  var buf = new ArrayBuffer(str.length * 2); // 2 bytes for each char
  var bufView = new Uint16Array(buf);
  for (var i = 0, strLen = str.length; i < strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}
window.animatedtrait = -1;

window.draw = function () {
  if (logoloaded && fontloaded && imageloaded && verifyran) {
    var width = img.width;
    var height = img.height;
    if (verified) {
      ctx.drawImage(
        img,
        0,
        0,
        width,
        height,
        0,
        0,
        canvas.offsetWidth,
        canvas.offsetHeight
      );
      var slashinfin = fontmap["slashinfin"];
      var pnd = fontmap["pnd"];
      var shrinkfont = 1 / (fontscale / 1.5);
      var shrinkfont2 = shrinkfont * 1.5;
      var fromcorner = 5;
      var curx =
        canvas.offsetWidth - fromcorner - slashinfin.width / shrinkfont / 5.0;
      var cury =
        canvas.offsetHeight - fromcorner - slashinfin.height / shrinkfont;

      var chars = Array.from(qedition);
      for (var i = chars.length - 1; i >= 0; i--) {
        var curchar = fontmap["" + chars[i]];
        curx -= curchar.width / shrinkfont2;
        ctx.drawImage(
          font,
          0,
          curchar.y,
          curchar.width,
          curchar.height,
          curx,
          cury,
          curchar.width / shrinkfont2,
          curchar.height / shrinkfont2
        );
      }
      curx -= pnd.width / shrinkfont2;
      ctx.drawImage(
        font,
        0,
        pnd.y,
        pnd.width,
        pnd.height,
        curx,
        cury,
        pnd.width / shrinkfont2,
        pnd.height / shrinkfont2
      );
    } else {
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
      var x = (canvas.offsetWidth - canvas.offsetHeight) / 2.0;
      var y = 0;
      if (canvas.offsetHeight > canvas.offsetWidth) {
        x = 0;
        y = (canvas.offsetHeight - canvas.offsetWidth) / 2.0;
      }
      x -= canvas.offsetWidth * 0.06;
      y -= canvas.offsetHeight * 0.1;

      ctx.drawImage(
        logo,
        0,
        0,
        width,
        height,
        x,
        y,
        canvas.offsetWidth,
        canvas.offsetHeight
      );
    }
  }
};

var ordroot = "";
if (
  document.location.href.indexOf("http://localhost") == 0 ||
  document.location.href.indexOf("https://skullx") == 0
)
  ordroot = "https://ordinals.com";
font.src =
  ordroot +
  "/content/72570c37ca2b27cdeffb6ac5ca8f853ba9a76d290c3c057c4e1741176d9ed0b4i0";
img.src =
  ordroot +
  "/content/0f8a33f2d9af8de352f6729d236e22f2796f9301aa5eea6ac4bd78e8af4e625di0";
logo.src =
  ordroot +
  "/content/45e46ada0247f95a5315591b8590b8339247b5fcee8ad17e07b08cb64899473bi0";