let window_width;
let window_height;

let radius;
let margin_top;
let margin_left;

var endTime = new Date();
endTime.setTime( endTime.getTime() + 3600 * 1000);
var curShowTimeSeconds = 0

const balls = []
const colors = [
  '#33b5e5',
  '#0099cc',
  '#aa66cc',
  '#9933cc',
  '#99cc00',
  '#669900',
  '#ffbb33',
  '#ff8800',
  '#ff4444',
  '#cc0000'
]

window.onload = function() {
  window_width = document.body.clientWidth;
  window_height = document.body.clientHeight;

  margin_left = Math.round(window_width / 10);
  radius = Math.round(window_width * 4 / 5 / 108) - 1;
  margin_top = Math.round(window_height / 5);

  const canvas = document.getElementById('canvas')
  const context = canvas.getContext('2d')

  canvas.width = window_width
  canvas.height = window_height
  curShowTimeSeconds = getCurrenShowTimeSeconds()
  // render(context);
  setInterval(function() {
    render(context)
    update()
  }, 50)
}

function render(context) {
  // 清除掉之前的动画
  context.clearRect(0, 0, window_width, window_height)

  const hours = parseInt(curShowTimeSeconds / 3600)
  const minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60)
  const seconds = curShowTimeSeconds % 60
  // 绘制小时
  renderDigit(margin_left, margin_top, parseInt(hours / 10), context)
  renderDigit(
    margin_left + 15 * (radius + 1),
    margin_top,
    parseInt(hours % 10),
    context
  )
  // 绘制冒号
  renderDigit(margin_left + 30 * (radius + 1), margin_top, 10, context)
  // 绘制分钟
  renderDigit(
    margin_left + 39 * (radius + 1),
    margin_top,
    parseInt(minutes / 10),
    context
  )
  renderDigit(
    margin_left + 54 * (radius + 1),
    margin_top,
    parseInt(minutes % 10),
    context
  )
  // 绘制冒号
  renderDigit(margin_left + 69 * (radius + 1), margin_top, 10, context)
  // 绘制秒数
  renderDigit(
    margin_left + 78 * (radius + 1),
    margin_top,
    parseInt(seconds / 10),
    context
  )
  renderDigit(
    margin_left + 93 * (radius + 1),
    margin_top,
    parseInt(seconds % 10),
    context
  )

  for (let i = 0; i < balls.length; i++) {
    context.fillStyle = balls[i].color
    context.beginPath()
    context.arc(balls[i].x, balls[i].y, radius, 0, 2 * Math.PI, true)
    context.closePath()
    context.fill()
  }
}

function renderDigit(x, y, num, context) {
  context.fillStyle = 'rgb(0, 102, 153)'
  for (let i = 0; i < digit[num].length; i++) {
    for (let j = 0; j < digit[num][i].length; j++) {
      if (digit[num][i][j] === 1) {
        context.beginPath()
        context.arc(
          x + j * 2 * (radius + 1) + (radius + 1),
          y + i * 2 * (radius + 1) + (radius + 1),
          radius,
          0,
          2 * Math.PI
        )
        context.closePath()

        context.fill()
      }
    }
  }
}
function getCurrenShowTimeSeconds() {
  const curTime = new Date()
  var ret = endTime.getTime() - curTime.getTime()
  ret = Math.round(ret / 1000)
  return ret >= 0 ? ret : 0
}
function update() {
  const nextShowTimeSeconds = getCurrenShowTimeSeconds()

  const nextHours = parseInt(nextShowTimeSeconds / 3600)
  const nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60)
  const nextSeconds = nextShowTimeSeconds % 60

  const curHours = parseInt(curShowTimeSeconds / 3600)
  const curMinutes = parseInt((curShowTimeSeconds - curHours * 3600) / 60)
  const curSeconds = curShowTimeSeconds % 60

  if (nextSeconds != curSeconds) {
    if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
      addBalls(margin_left + 0, margin_top, parseInt(curHours / 10))
    }
    if (parseInt(curHours % 10) != parseInt(nextHours % 10)) {
      addBalls(
        margin_left + 15 * (radius + 1),
        margin_top,
        parseInt(curHours % 10)
      )
    }
    if (parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
      addBalls(
        margin_left + 39 * (radius + 1),
        margin_top,
        parseInt(curMinutes / 10)
      )
    }
    if (parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
      addBalls(
        margin_left + 54 * (radius + 1),
        margin_top,
        parseInt(curMinutes % 10)
      )
    }
    if (parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
      addBalls(
        margin_left + 78 * (radius + 1),
        margin_top,
        parseInt(curSeconds / 10)
      )
    }
    if (parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
      addBalls(
        margin_left + 93 * (radius + 1),
        margin_top,
        parseInt(nextSeconds % 10)
      )
    }
    curShowTimeSeconds = nextShowTimeSeconds
  }
  updateBalls()
}

function updateBalls() {
  for (let i = 0; i < balls.length; i++) {
    balls[i].x += balls[i].vx
    balls[i].y += balls[i].vy
    balls[i].vy += balls[i].g

    if (balls[i].y >= window_height - radius) {
      balls[i].y = window_height - radius
      balls[i].vy = -balls[i].vy * 0.6
    }
  }
  let count = 0;
  for(let j = 0; j < balls.length; j++) {
    if(balls[j].x + radius > 0 && balls[j].x + radius < window_width) {
      balls[count++] = balls[j];
    }
  }
  while(balls.length > Math.min(300, count)) {
    balls.pop();
  }
}

function addBalls(x, y, num) {
  for (let i = 0; i < digit[num].length; i++) {
    for (let j = 0; j < digit[num][i].length; j++) {
      if (digit[num][i][j] === 1) {
        const aBall = {
          x: x + j * 2 * (radius + 1) + (radius + 1),
          y: y + i * 2 * (radius + 1) + (radius + 1),
          g: 1.5 + Math.random(),
          vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
          vy: -5,
          color: colors[Math.floor(Math.random() * colors.length)]
        }
        balls.push(aBall)
      }
    }
  }
  //   console.log('balls', balls);
}