const WINDOW_WIDTH = 1024,
	WINDOW_HEIGHT = 768,
	RADIUS = 6,
	MARGIN_LEFT = 20,
	MARGIN_TOP = 20;
var nowTime = 0,
	ball = [];
const endTime = new Date(2016, 2, 4, 22, 00, 00),
	colors = ["red", "yellow", "blue"];

window.onload = function() {
	var canvas = document.getElementById("canvas");
	var ct = canvas.getContext('2d');
	ct.width = WINDOW_WIDTH;
	ct.height = WINDOW_HEIGHT;

	nowTime = getCurTime();

	setInterval(function() {
		render(ct);
		update();
	}, 50);



	function getCurTime() {
		var time = new Date();
		var curTime = endTime.getTime() - time.getTime();
		return Math.round(curTime / 1000) > 0 ? Math.round(curTime / 1000) : 0;
	}

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


		drawDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), ct);
		drawDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), ct);
		drawDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, ct);
		drawDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), ct);
		drawDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), ct);
		drawDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, ct);
		drawDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), ct);
		drawDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), ct);

		for (var i = 0; i < ball.length; i++) {
		ct.fillStyle = ball[i].color;

		ct.beginPath();
		ct.arc(ball[i].x, ball[i].y, RADIUS, 0, 2 * Math.PI, true);
		ct.closePath();

		ct.fill();
	}
	}

	function drawDigit(x, y, num, ct) {
		ct.fillStyle = "#058";
		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) {
					ct.beginPath();
					ct.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
					ct.fill();
					ct.closePath();
				}
			}
		}
	}

	function update() {
		var nextTime = getCurTime();
		var nextHours = parseInt(nextTime / 3600);
		var nextMinutes = parseInt((nextTime - nextHours * 3600) / 60);
		var nextSeconds = parseInt(nextTime % 60);

		var curHours = parseInt(nowTime / 3600);
		var curMinutes = parseInt((nowTime - curHours * 3600) / 60);
		var curSeconds = parseInt(nowTime % 60);

		if (nextSeconds != curSeconds) {
			if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
				addBall(MARGIN_LEFT, MARGIN_TOP, parseInt(curHours / 10));
			};
			if (parseInt(curHours % 10) != parseInt(nextHours % 10)) {
				addBall(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours % 10));
			};
			//分钟加小球
			if (parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
				addBall(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes / 10));
			};
			if (parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
				addBall(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes % 10));
			};
			//秒钟加小球
			if (parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
				addBall(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds / 10));
			};
			if (parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
				addBall(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds % 10));
			};

			nowTime = nextTime;
		}
		updateBall()
	}



	function addBall(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 addOne = {
						x: x + j * 2 * (RADIUS + 1),
						y: y + i * 2 * (RADIUS + 1),
						r: RADIUS,
						g: 1.5 + Math.random(),
						vx: Math.pow(-1, Math.round(Math.random() * 1000)) * 4,
						vy: -10,
						color: colors[Math.floor(Math.random() * colors.length)]
					};
					ball.push(addOne);
				}
			}
		}
	}

	function updateBall() {
		for (var i = 0; i < ball.length; i++) {
			ball[i].x += ball[i].vx;
			ball[i].y += ball[i].vy;
			ball[i].vy += ball[i].g;
			if (ball[i].y <= 748) {
				ball[i].y = 748;
				ball[i].vy = -ball[i].vy * 0.75;

			}
		}
	}

	function drawColorBall(ct) {
		for (var i = 0; i < ball.length; i++) {
			ct.beginPath();
			ct.fillStyle = ball[i].color;
			ct.arc(ball[i].x, ball[i].y, ball[i].r, 0, 2 * Math.PI);
			ct.fill();
			ct.closePath();
		}
	}
}