var WINDOW_WIDTH=980;

var WINDOW_HEIGHT=768;

var radius = 8;

var margin_top = 60;

var margin_left = 30;

const endTime=new Date(2017,3,24,18,47,52);

var curShowTimeSeconds = 0;

var balls=[];

const colors=["#428B46","#B7B56E","#D6D88B","#C7F5FE","#FCC8F8","#EAB4F8","#F3F798","#CA3E6B","#FA8383","#9DD3CC"]

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 nextShowTimeSeconds = getCurrentShowTimeSeconds();

var nexthours = parseInt(nextShowTimeSeconds/3600);

var nextminutes=parseInt((nextShowTimeSeconds - nexthours*3600)/60);

var nextseconds= nextShowTimeSeconds%60;

var curhours = parseInt(curShowTimeSeconds/3600);

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

var curseconds= curShowTimeSeconds%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));

}

curShowTimeSeconds = nextShowTimeSeconds;

}

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] == 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)]

};

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(cxt){

cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);

var hours = parseInt(curShowTimeSeconds/3600);

var minutes=parseInt((curShowTimeSeconds - hours*3600)/60);

var seconds= curShowTimeSeconds%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();

}

}

}

}