var?WINDOW_WIDTH?=?1024;
var?WINDOW_HEIGHT?=768;
var?RADIUS?=?6;
var?MARGIN_TOP?=?30;
var?MARGIN_LEFT?=?60;

const?endTime?=?new?Date(2016,1,27,12,30,30);
var?curShowTime?=?0;

var?balls?=?[];?
const?colors?=?["#073155","#FFCE43","#DD5044","#00D2DC","#9C642D","#FFB439","#A6E22E","#FF1B2D"];

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

	curShowTime?=?getCurShowTime();
	setInterval(function(){
		render(context);
		update();
	},50);
}

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


function?update(){
	var?nextShowTime?=?getCurShowTime();

	var?nextHours?=?parseInt(nextShowTime/3600);
	var?nextMinutes?=?parseInt(nextShowTime/60%60);
	var?nextSeconds?=?parseInt(nextShowTime%60);

	var?curHours?=?parseInt(curShowTime/3600);
	var?curMinutes?=?parseInt(curShowTime/60%60);
	var?curSeconds?=?parseInt(curShowTime%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(curSeconds%10));
		}
		curShowTime?=?nextShowTime;
	}

	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.5;
		}
	}
}

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]?==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:-5,
					color:colors[Math.floor(Math.randm()*colors.length)]
				};
				balls.push(aBall);
			}
			
		}
	}
}

function?render(cxt){

	cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);?//刷新矩形

	var?hours?=?parseInt(curShowTime/3600);
	var?minutes?=?parseInt(curShowTime/60%60);
	var?seconds?=?parseInt(curShowTime%60);

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

	for?(var?i?=?0;?i?<?balls.length;?i++)?{
		cxt.fillStyle?=?balls[i].color;

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

		cxt.fill();
	}
}



function?renderDigit(x,?y,?num,?cxt){
	cxt.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){
				cxt.beginPath();
				cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1),?y+i*2*(RADIUS+1)+(RADIUS+1),?RADIUS,?0,?2*Math.PI?);
				cxt.closePath();

				cxt.fill();
			}
		}
	}
}