var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var Radius = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
//4月22日
const endTime = new Date(2017, 3, 22, 18, 00, 00);
var curShowTimeSeconds = 0;

var balls = [];
const colors = ["#33B5E5", "#CCC", "#caff67", "#67becf", "#ef3d61", "#f9f51a", "#a594c0", "#fa8ecc", "#f6ca29"];

window.onload = function () {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    curShowTimeSeconds = getCurrentShowTimeSeconds();
    setInterval(
        function () {
            render(context); //绘制
            update(); //改变
        },
        50
    );

}

function update() {
    var nextShowTimeSecondes = getCurrentShowTimeSeconds();

    var nexthours = parseInt(nextShowTimeSecondes / 3600);
    var nextminutes = parseInt((nextShowTimeSecondes - nexthours * 3600) / 60);
    var nextseconds = nextShowTimeSecondes % 60;

    var curhours = parseInt(curShowTimeSeconds / 3600);
    var curminutes = parseInt((curShowTimeSeconds - curhours * 3600) / 60);
    var curseconds = curShowTimeSeconds % 60;

    if (curseconds != nextseconds) {
        if (parseInt(curhours / 10) != parseInt(nexthours / 10)) {
            addBalls(MARGIN_LEFT, 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 = nextShowTimeSecondes;
    }

    updateBalls();
}

function updateBalls() {
    for (var 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.75;
        }
    }
}

function addBalls(x, y, num) {
    for (var i = 0; i < digit[num].length; i++)
        for (var j = 0; j < digit[num][i].length; j++)
            if (digit[num][i][j] == 1) {
                var 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: -10,
                    color: colors[Math.floor(Math.random() * colors.length)]
                }
                balls.push(aBall);
            }
}

function getCurrentShowTimeSeconds() {
    var curTime = new Date();
    var ret = endTime.getTime() - curTime.getTime();
    ret = Math.round(ret / 1000); //得到秒数

    return ret >= 0 ? ret : 0;
}

function render(ctx) {
    ctx.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
    var hours = parseInt(curShowTimeSeconds / 3600);
    var minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60);
    var seconds = curShowTimeSeconds % 60;

    //数字占的宽带为（2*7+1）*（Radius+1),冒号占的宽带为（2*4+1）*（Radius+1)
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), ctx);
    renderDigit(MARGIN_LEFT + 15 * (Radius + 1), MARGIN_TOP, parseInt(hours % 10), ctx);
    renderDigit(MARGIN_LEFT + 30 * (Radius + 1), MARGIN_TOP, 10, ctx);
    renderDigit(MARGIN_LEFT + 39 * (Radius + 1), MARGIN_TOP, parseInt(minutes / 10), ctx);
    renderDigit(MARGIN_LEFT + 54 * (Radius + 1), MARGIN_TOP, parseInt(minutes % 10), ctx);
    renderDigit(MARGIN_LEFT + 69 * (Radius + 1), MARGIN_TOP, 10, ctx);
    renderDigit(MARGIN_LEFT + 78 * (Radius + 1), MARGIN_TOP, parseInt(seconds / 10), ctx);
    renderDigit(MARGIN_LEFT + 93 * (Radius + 1), MARGIN_TOP, parseInt(seconds % 10), ctx);

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

function renderDigit(x, y, num, ctx) {
    ctx.fillStyle = "rgb(0,102,153)";
    for (var i = 0; i < digit[num].length; i++)
        for (var j = 0; j < digit[num][i].length; j++)
            if (digit[num][i][j] == 1) {
                ctx.beginPath();
                ctx.arc(x + j * 2 * (Radius + 1) + (Radius + 1), y + i * 2 * (Radius + 1) + (Radius + 1), Radius, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
            }
}