var WINDOW_WIDTH;
var WINDOW_HEIGHT;
var RADIUS;
var MARGIN_TOP;
var MARGIN_LEFT;
var curShowTimeSeconds=0;
const endTime=new Date("2017-08-17 22:24:00");
var balls = [];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]

window.onload = function() {
    //屏幕自适应
     WINDOW_WIDTH=document.documentElement.clientWidth-20;
     WINDOW_HEIGHT=document.documentElement.clientHeight-20;

     MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
     RADIUS=Math.round(WINDOW_WIDTH*4/5/108)-1;

    MARGIN_TOP=Math.round(WINDOW_HEIGHT/5);
    var canvas = document.getElementById('canvas');
    var cxt = canvas.getContext("2d");
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    curShowTimeSeconds=getCurrentShowTimeSeconds();


    setInterval(function(){
        render(cxt);
        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(nextseconds%10) );
        }
        curShowTimeSeconds=nextShowTimeSeconds;
    }

    updateBalls();
    console.log(balls.length);

}

function updateBalls(){
    for(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;
        }
        //右边缘碰撞返回

         if(balls[i].x>=1050-RADIUS){
            balls[i].x=1050-RADIUS;
            balls[i].vx=-balls[i].vx;
        }


    }
    var cnt=0;//存放画布中的小球
    for(var i=0;i<balls.length;i++){
        if(balls[i].x+RADIUS>0&&balls[i].x-RADIUS<WINDOW_WIDTH){
            //小球右边缘大于0左边缘小于宽
            balls[cnt++]=balls[i];//把符合要求的小球放到前面
            
        }
    }
    while(balls.length>Math.min(550,cnt)){
        balls.pop();//删除最后一个小球
        //math.min()解决小球离开页面堆积问题
    }
}
function addBalls(x,y,num){
    for (i=0;i<digit[num].length;i++){
        for(j=0;j<digit[num][i].length;j++){
            if(digit[num][i][j]==1){
                var aBalls={
                    x:x+j*2*(RADIUS+1)+(RADIUS+1),
                    y:y+i*2*(RADIUS+1)+(RADIUS+1),
                    g:1.5+Math.random(),//速度在0-1.5
                    vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,//-4或4
                    vy:-5,//有一个向上
                    color: colors[ Math.floor( Math.random()*colors.length ) ]//向下取整
                }
                balls.push(aBalls);
            }
        }
    }
}
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();
            }
        }
    }
}