YUI().use('node', function (Y) {

  if (window.Y.Squarespace.Utils.isInDamaskFrame()) {
    return;
  }

  // Create canvas that covers all

  const canvas = document.createElement('canvas');
  const w = window.innerWidth;
  const h = window.innerHeight;
  canvas.setAttribute('id', 'lk-load-screen');
  canvas.setAttribute('width', w*2);
  canvas.setAttribute('height', h*2);
  Object.assign(canvas.style,{
    'width':    `${w}px`,
    'height':   `${h}px`,
    'top':      '0px',
    'left':     '0px',
    'position': 'fixed',
    'z-index':  '99999999999'
  });

  // Create lines

  const drawLine = (ctx, x1, y1, x2, y2, stroke = 'black', width = 3) => {
    ctx.beginPath();
    ctx.moveTo(x1*2, y1*2);
    ctx.lineTo(x2*2, y2*2);
    ctx.strokeStyle = stroke;
    ctx.lineWidth = width*2;
    ctx.stroke();
  }

  const drawLine2 = (ctx, x1, y1, x2, y2, stroke = 'black', width = 3) => {
    ctx.beginPath();
    ctx.moveTo(x1*2, y1*2);
    ctx.quadraticCurveTo(Math.random() * w * 2, Math.random() * h * 2, x2 * 2, y2 * 2)
    ctx.strokeStyle = stroke;
    ctx.lineWidth = width * 2;
    ctx.stroke();
  }

  scale = (w * 0.3) / 256;
  offsetX = w - (scale * 128);
  offsetY = h - (scale * 128);

  const x = (val) => (val * scale) + offsetX;
  const y = (val) => (val * scale) + offsetY;
  const dx = (val) => (val * scale);
  const dy = (val) => (val * scale);

  const drawLogo = () => {
    var path = new Path2D(`M${x(194.2)},${y(112.3)}c${dx(0)},${dy(-6.3)},${dx(-5.1)},${dy(-11.3)},${dx(-11.3)},${dy(-11.3)}h${dx(-43.5)}V${y(58.8)}c${dx(0)},${dy(-6.3)},${dx(-5.1)},${dy(-11.3)},${dx(-11.3)},${dy(-11.3)}c${dx(-6.3)},${dy(0)},${dx(-11.3)},${dy(5.1)},${dx(-11.3)},${dy(11.3)}v${dy(42.1)}H${x(73.2)}c${dx(-6.3)},${dy(0)},${dx(-11.3)},${dy(5.1)},${dx(-11.3)},${dy(11.3)}c${dx(0)},${dy(6.3)},${dx(5.1)},${dy(11.3)},${dx(11.3)},${dy(11.3)}h${dx(35)}l${dx(-37.9)},${dy(73.7)}h${dx(25.4)}l${dx(32.4)}${dy(-63.2)}l${dx(32.4)},${dy(63.2)}h${dx(25.4)}l${dx(-37.9)}${dy(-73.7)}h${dx(35)}C${x(189.1)},${y(123.6)},${x(194.2)},${y(118.5)},${x(194.2)},${y(112.3)}`);
    path.moveTo(w/2, h/2);
    ctx.fillStyle = 'white';
    ctx.fill(path);
  }

  const generateRandomLine = () => {
    const startLine = Math.floor(Math.random() * 4);
    const endLine = (Math.floor(Math.random() * 3) + 1 + startLine) % 4;

    let s = [];
    let e = [];

    if (startLine % 2 === 0) {
      s = [Math.random() * (w + 100) - 50, startLine === 0 ? -50 : h + 50];
    } else {
      s = [startLine === 1 ? w + 50 : -50, Math.random() * (h + 100) - 50];
    }

    if (endLine % 2 === 0) {
      e = [Math.random() * (w + 100) - 50, endLine === 0 ? -50 : h + 50];
    } else {
      e = [endLine === 1 ? w + 50 : -50, Math.random() * (h + 100) - 50];
    }

    return [s, e];

  }

  const generateRandomLine2 = () => {
    const startLine = Math.floor(Math.random() * 2);

    let s = [];
    let e = [];

    if (startLine === 0) {
      s = [Math.random() * (w + 100) - 50, -50];
    } else {
      s = [-50, Math.random() * (h + 100) - 50];
    }

    if (startLine === 0) {
      e = [s[0], h + 50];
    } else {
      e = [w + 50, s[1]];
    }

    return [s, e];

  }

  const generateRandomLine3 = () => {

    let s = [];
    let e = [];
    let band = 0.5;

    s = [Math.random() * (w * band) + ((1 - band) * w) / 2, -200];
    e = [Math.random() * (w * band) + ((1 - band) * w) / 2, h + 200];

    return [s, e];

  }

  const generateRandomLine4 = () => {

    let s = [];
    let e = [];
    let band = 0.5;

    s = [-200, Math.random() * (h * band) + ((1 - band) * h) / 2];
    e = [w + 200, Math.random() * (h * band) + ((1 - band) * h) / 2];

    return [s, e];

  }

  window.addEventListener('DOMContentLoaded', () => {
    document.body.appendChild(canvas);
  });

  ctx = canvas.getContext('2d');
  let done = false;
  let start = 0;
  let duration = 2000;

  const drawCircle = () => {
    if (start === 0) start = Date.now();
    let now = Date.now();
    let diff = now - start;
    ctx.beginPath();
    ctx.arc(w, h, 128 * scale, Math.PI * -0.5, 1.5 * Math.PI * (diff/duration) - 0.5 * Math.PI);
    ctx.strokeStyle = 'white';
    ctx.lineWidth = 10 * scale;
    ctx.stroke();
  }

  const tick = () => {
    drawCircle();
    if (done) return;
    window.requestAnimationFrame(tick);
  }


  ctx.fillStyle = 'white';
  ctx.fillRect(-10, -10, w * 2 + 10, h * 2 + 10);
  // ctx.fillStyle = '#c6a24d99';
  ctx.fillStyle = '#00534f99';
  ctx.fillRect(-10, -10, w * 2 + 10, h * 2 + 10);
  for (let i = 9; i > 0; i--) {
    let l = generateRandomLine4();
    let c = Math.random() > 0.5 ? '#00534f99' : '#c6a24d99'
    c = '#00534f99';
    drawLine2(ctx, l[0][0], l[0][1], l[1][0], l[1][1], c, Math.floor(Math.random() * (scale * 30)) + (scale * 30));
  }

  drawLogo();
  window.requestAnimationFrame(tick);
  
});