// JavaScript Document
var WINDOW_WIDTH=1328;
var WINDOW_HEIGHT=768;
var Radius=10;
var Margintop=60;
var Marginleft=30;
const endtime=new Date(2017,3,4,12,30,00,00); //截止时间
var curshowtimeseconds=0;//表示现在倒计时需要多少秒

var ball=[];
const colors=['#33b5e5','#0099cc','#aa66cc','#9933cc',
    '#99cc00','#669900','#ffbb33','#ff8800',"#ff8844",'#cc0000']
window.onload=function(){
	var canvas=document.getElementById("mycanvas");
	canvas.width=WINDOW_WIDTH;
	canvas.height=WINDOW_HEIGHT;

	var context=canvas.getContext("2d");
	curshowtimeseconds=getCurrentShowTimeSeconds();
	setInterval(
	  function(){
		  render(context);
		  update();
		  },50
	);
	
	}
function update(){
	var nextshowtimeseconds=getCurrentShowTimeSeconds();
	var nexthour=parseInt(nextshowtimeseconds/3600);
	var nextminutes=parseInt((nextshowtimeseconds-nexthour*3600)/60);
	var nextseconds=parseInt(nextshowtimeseconds%60);
	var curhour=parseInt(curshowtimeseconds/3600);
	var curminutes=parseInt((curshowtimeseconds-curhour*3600)/60);
	var curseconds=parseInt(curshowtimeseconds%60);
	
	if(nextseconds!=curseconds){
		curshowtimeseconds=nextshowtimeseconds;
		if(parseInt(curhour / 10)!=parseInt(nexthour/10)){
			addballs(Marginleft,Margintop,parseInt(curhour/10))
			}
		if(parseInt(curhour%10)!=parseInt(nexthour%10)){
			addballs(Marginleft+15*(Radius+1),Margintop,parseInt(curhour%10))
			}
		if(parseInt(curminutes/10)!=parseInt(nextminutes/10)){
			addballs(Marginleft+39*(Radius+1),Margintop,parseInt(curminutes/10))
			}
		if(parseInt(curminutes%10)!=parseInt(nextminutes%10)){
			addballs(Marginleft+54*(Radius+1),Margintop,parseInt(curminutes%10))
			}
		if(parseInt(curseconds/10)!=parseInt(nextseconds/10)){
			addballs(Marginleft+79*(Radius+1),Margintop,parseInt(curseconds/10))
			}
		if(parseInt(curseconds%10)!=parseInt(nextseconds%10)){
			addballs(Marginleft+95*(Radius+1),Margintop,parseInt(curseconds%10))
			}
		
		}
			    updateballs();
	}


	
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:-5,
				 color:colors[Math.floor(Math.random()*(colors.length))]
				 }
			 ball.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 updateballs(){
	for(var i=1;i<ball.length;i++){
		  ball.x+=ball.vx;
		  ball.y+=ball.vy;
		  ball.vy+=ball.g;
		  if(ball.y >WINDOW_HEIGHT-(Radius*2)){
			  ball.y =WINDOW_HEIGHT-(Radius*2);
			  ball.vy=-ball.vy*0.7;
			  }
			
			
		}
	}	

function render(cxt){
    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
	var hour=parseInt(curshowtimeseconds/3600);
	var minutes=parseInt((curshowtimeseconds-hour*3600)/60);
	var seconds=parseInt(curshowtimeseconds%60);
	renderdigit(Marginleft,Margintop,parseInt(hour/10),cxt);
	renderdigit(Marginleft+15*(Radius+1),Margintop,parseInt(hour%10),cxt);
	renderdigit(Marginleft+30*(Radius+1),Margintop,10,cxt);
	renderdigit(Marginleft+39*(Radius+1),Margintop,parseInt(minutes/10),cxt);
	renderdigit(Marginleft+54*(Radius+1),Margintop,parseInt(minutes%10),cxt);
	renderdigit(Marginleft+69*(Radius+1),Margintop,10,cxt);
	renderdigit(Marginleft+79*(Radius+1),Margintop,parseInt(seconds/10),cxt);
	renderdigit(Marginleft+95*(Radius+1),Margintop,parseInt(seconds%10),cxt);
	
		for(var i=1;i<ball.length;i++){

			cxt.fillStyle=ball[i].color;
			cxt.beginPath();
			 cxt.arc(ball[i].x,ball[i].y,Radius,0,2*Math.PI);
			 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();
			 }
	}