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();
		}
	}
}