var WINDOW_WIDTH=1333;
var WINDOW_HEIGHT=768;
var RADIUS=8;
var MARGIN_TOP=80;
var MARGIN_LEFT=185;

const endTime=new Date(2016, 5, 9, 12, 59, 59);
var curShowTimeSeconds=0;

var balls=[];
const colors=["#09C","#93C","#690","#9C0","#F80","#F44","#CC000C","#A6C","#058","000"];

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

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

function update(){
 
 var nextShowTimeSeconds=getCurrentShowTimeSeconds();
 
 var nextHours=parseInt(nextShowTimeSeconds/3600);
 var nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60);
 var nextSeconds=nextShowTimeSeconds%60;/*next时间*/
 
 var curHours=parseInt(curShowTimeSeconds/3600);
 var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
 var curSeconds=curShowTimeSeconds%60;/*cur时间 */
 
 
 
 if(nextSeconds!=curSeconds){
  if(parseInt(nextHours/10)!=parseInt(curHours/10))
    {addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));}
 
  if(parseInt(nextHours%10)!=parseInt(curHours%10))
    {addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));}
  
  if(parseInt(nextMinutes/10)!=parseInt(curMinutes/10))
    {addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));}
  
  if(parseInt(nextMinutes%10)!=parseInt(curMinutes%10))
    {addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));}
  
  if(parseInt(nextSeconds/10)!=parseInt(curSeconds/10))
    {addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));}
  
  if(parseInt(nextSeconds%10)!=parseInt(curSeconds%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][j]==1)
   {
     var aBall={
    x:x+2*j*(RADIUS+1)+(RADIUS+1),
     y:y+2*i*(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 render(ctx){/*时间总体绘图 */
 ctx.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);/*canvas内画面刷新 */
 var hours=parseInt(curShowTimeSeconds/3600);
 var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
 var seconds=curShowTimeSeconds%60;
 
 renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10), ctx)/*小时的十位数*/
 renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,hours-10*parseInt(hours/10),ctx)/*小时的个位数*/
  renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx)/*冒号*/
  renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx)/*分钟十位数*/
  renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx)/*分钟个位数*/
  renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx)/* */
  renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx)
  renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx)
   

for(var i=0;i<=balls.length;i++){
 ctx.fillStyle=balls[i].color;
 ctx.beginPath();
 ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
 ctx.closePath();
 
 ctx.fill();
 
}

}

function renderDigit(x,y,num,ctx){/*时间点阵内绘图 */
 
 ctx.fillStyle="blueviolet";
 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){
     ctx.beginPath()
     ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI)
     ctx.closePath()
    
     ctx.fill()
    }
}
}
}