var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

const endTime = new Date(2016,7,10,23,30,30);
var curShowTimeSeconds = 0;

var Balls = [];
var 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;

    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 + 0, MARGIN_TOP, parseInt(curMinutes/10));
        }
        if(parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
            addBalls(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10));
        }

        //控制‘秒钟’的时间变换效果
        if(parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
            addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curSeconds/10));
        }
        if(parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
            addBalls(MARGIN_LEFT + 15*(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].lengt; i++)
        for (var j=0; j<digit[num].lengt; j++) 
            if( digit[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)]
                }
                Balls.push(aBall);
            }
}

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