var RADIUS = 10;
var TOP = 60;
var LEFT = 30;
const endTime = new Date(2016,6,27,22,0,0);
var WIDTH = 1324;
var HEIGHT = 786;
var dur = 0;

window.onload = function(){

var oC = document.getElementById("canvas");
var oContext = oC.getContext("2d");
oC.width = WIDTH;
oC.height = HEIGHT;
dur = getDuration();
 setInterval(function(){
            render( oContext );
            update();
        } , 50
    );

}

function getDuration(){
var curTime = new Date();
    var ret = endTime.getTime() - curTime.getTime();
    ret = Math.round( ret/1000 );

    return ret >= 0 ? ret : 0;
}
function update(){
var nextTimeDur = getDuration();
var nextHours = parseInt( nextTimeDur / 3600);
    var nextMinutes = parseInt( (nextTimeDur - nextHours * 3600)/60 );
    var nextSeconds = nextTimeDur % 60;

    var curHours = parseInt( dur / 3600);
    var curMinutes = parseInt( (dur - curHours * 3600)/60 );
    var curSeconds = dur % 60;

    if( nextSeconds != curSeconds ){
        dur = nextTimeDur;
    }
//end = new Date().getTime();
}
function render(oContext){
//start = new Date().getTime();
oContext.clearRect(0,0,WIDTH,HEIGHT);

var hour = parseInt(dur/3600);
var min = parseInt((dur-hour*3600)/60);
var sec = parseInt(dur%60);

draw(TOP, LEFT, oContext, parseInt(hour/10));
draw(TOP+15*(RADIUS+1), LEFT, oContext, parseInt(hour%10));

draw(TOP+30*(RADIUS+1), LEFT, oContext, 10);

draw(TOP+39*(RADIUS+1), LEFT, oContext, parseInt(min/10));
draw(TOP+54*(RADIUS+1), LEFT, oContext, parseInt(min%10));

draw(TOP+69*(RADIUS+1), LEFT, oContext, 10);

draw(TOP+78*(RADIUS+1), LEFT, oContext, parseInt(sec/10));
draw(TOP+93*(RADIUS+1), LEFT, oContext, parseInt(sec/10));

}
function draw(TOP, LEFT, oContext, num){
oContext.fillStyle = "blue";
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){
oContext.beginPath();

oContext.arc(TOP+RADIUS+1+j*2*(RADIUS+1), LEFT+RADIUS+1+i*2*(RADIUS+1), RADIUS, 0, 2*Math.PI);
oContext.closePath();
oContext.fill();
}
}
}
}