var window_width = 1024;
var window_height = 768;
var r = 8;
var mt = 60;
var ml = 30;

const endTime = new Date(2014,12,20,15,23,56);
var currentTimeSeconds = 0

window.onload = function(){

   var canvas = document.getElementById('canvas');
   var context = canvas.getContext("2d");

   canvas.width = window_width;
   canvas.height = window_height;

   currentTimeSeconds = getCts()
   render(context)
}

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

   return ret >= 0 ? ret :0;
}
function render(cxt){

   var hours = parseInt(currentTimeSeconds/3600);
   var minutes = parseInt((currentTimeSeconds-hours*3600)/60);
   var seconds = parseInt(currentTimeSeconds%60);

   renderDigit(ml,mt,parseInt(hours/10),cxt)
   renderDigit(ml+15*(r+1),mt,parseInt(hours%10),cxt)
   renderDigit(ml+30*(r+1),mt,10,cxt)
   renderDigit(ml+39*(r+1),mt,parseInt(minutes/10),cxt)
   renderDigit(ml+54*(r+1),mt,parseInt(minutes%10),cxt)
   renderDigit(ml+69*(r+1),mt,10,cxt)
   renderDigit(ml+78*(r+1),mt,parseInt(seconds/10),cxt)
   renderDigit(ml+93*(r+1),mt,parseInt(seconds%10),cxt)
}

function renderDigit(x,y,num,cxt){

   cxt.fillStyle = "blue";

   for(var i = 0 ; i < digit[num].length ; i++)
       for(var j = 0; j < digit[num].length ; j++)
           if(digit[num][i][j] == 1 ){
               cxt.beginPath();
               cxt.arc(x+j*2*(r+1)+(r+1),y+i*2*(r+1)+(r+1),r,0,2*Math.PI)
               cxt.closePath()

               cxt.fill()
           }

}
/**
* Created by Administrator on 14-12-16.
*/