var canvas404 = document.getElementById("404-clock");
if (canvas404) {
  var ctx404 = canvas404.getContext("2d");
  var radius404 = canvas404.height / 2;
  ctx404.translate(radius404, radius404);
  radius404 = radius404 * 0.90;
  drawClock404();
  setInterval(drawClock404, 100);
}

function drawClock404() {
  drawFace404(ctx404, radius404);
  drawNumbers404(ctx404, radius404);
  drawTime404(ctx404, radius404);
}

function drawFace404(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers404(ctx, radius) {
   drawNumbers404_1jrk4r99(ctx, radius);
}

function drawNumbers404(ctx, radius) {
const zstory = ["4", "0", "4", "0", "4", "0", "4", "0", "4", "0", "🎈", "👽"];
// const zstory = ["1", "2", "3", "4", "🎈", "6", "7", "8", "9", "10", "11", "👽"];
// const zstory = ["🆘", "🆘", "🆘", "🆘", "🆘", "🆘", "🆘", "🆘", "🆘", "😻", "📞", "🆘"];
// const zstory = ["🌹", "🌹", "🌹", "🌹", "🌹", "🌹", "🌹", "🌹", "🌹", "😻", "🐈‍⬛", "🐈‍⬛"];    
// const zstory = ["🍿", "🎪", "🎟", "🦁", "🐆", "🦄", "🍿", "🎪", "🎟", "🦁", "🐆", "🦄"];    
// const zstory = ["😻", "😻", "😻", "😻", "😻", "😻", "📞", "📞", "📞", "📞", "📞", "📞"];  
// const zstory = ["💥", "💥", "💥", "🐈‍⬛", "🐈‍⬛", "🐈‍⬛", "🎈", "🎈", "🎈", "🎈", "🎈", "🌀"];  
// const zstory = ["🃏", "🃏", "🌹", "🌹", "🌹", "🌹", "😻", "😻", "😻", "😻", "😻", "😻"];
// const zstory = ["🐸", "🐸", "🏆", "🐸", "🏆", "🐸", "🏆", "🐸", "🏆", "🐸", "🏆", "🐸"];
// const zstory = ["🐬", "💫", "☎️", "🐊", "💫", "💫", "💰", "🐬", "🐬", "🐬", "☎️", "🦆"];  
//  const zstory = ["🐸", "🍿", "⛸", "📓", "💖", "🐬", "🎢", "🎈", "🐈‍⬛", "🃏", "🌹", "🔑"];
// const zstory = ["🦆", "🦆", "☎️", "🦆", "🦆", "💫", "💰", "🐬", "🐬", "🐬", "☎️", "🦆"];    

  drawNumbers404.counter = (drawNumbers404.counter || 0) + 1;
  const zhangeEvery = 33;

  if (drawNumbers404.counter % zhangeEvery === 1 || !drawNumbers404.shuffled) {
    drawNumbers404.shuffled = zstory.slice().sort(() => 0.5 - Math.random());
  }

  const symbols = drawNumbers404.shuffled;

  ctx.font = radius * 0.16 + "px arial";
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";

  for (let i = 0; i < 12; i++) {
    const ang = (i + 1) * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 0.84);
    ctx.rotate(-ang);

    ctx.fillText(symbols[i], 0, 0);

    ctx.rotate(ang);
    ctx.translate(0, radius * 0.84);
    ctx.rotate(-ang);
  }
}

function drawTime404(ctx, radius){
    var now = new Date();
    var hour = 4;
    var minute = 4;    
    var second = now.getSeconds();
    second = 60 - second;

    hour = hour%12;
    hour = (hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (0*Math.PI/(360*60));  
    drawHand404(ctx, hour, radius*0.5, radius*0.05);

    minute = (minute*Math.PI/30);
    drawHand404(ctx, minute, radius*0.75, radius*0.06);

    second = (second*Math.PI/30);
    drawHand404(ctx, second, radius*0.9, radius*0.02);

}

function drawHand404(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}