var WINDOW_WIDTH = 1044;//定义窗口宽高
var WINDOW_HEIGHT = 768;
var RADIUS = 8;//小球的半径
var MARGIN_TOP =60;                  //小球距离上边距距离
var MARGIN_LEFT =30; //小球距离左边距距离

const endTime = new Date(2015,9,23,20,19,55);//全局变量时间，倒计时
var curShowTimeSeconds = 0;//定义当前显示时间变量

var balls =[]//掉落小球的数组；
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
window.onload = function(){
   var canvas = document.getElementById("canvas");
   var  context = canvas.getContext("2d");
   canvas.width = WINDOW_WIDTH;
   canvas.height = WINDOW_HEIGHT;//将宽高赋给画布
   //alert(canvas)
   curShowTimeSeconds = getCurrentShowTimeSeconds()
  setInterval(function(){
      render(context);//绘制函数
      update();
  },50);
}


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;
   
   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(nextSeconds%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 ){
  //alert("11")
   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),
                   x: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 ) ]

               }
               //alert(colors.length)
               balls.push( aBall )
       
   }
}

//绘制当前canvas画布的函数
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.fill();
   }


}
//绘制每一个数字函数
function  renderDigit(x,y,num,cxt){
   cxt.fillStyle = "#abcdef";//圆球的颜色

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