var window_width=1024;
var window_height=768;

var radius=8;
var margin_left=30
var margin_top=60;

const endTime = new Date(2016,8,21,23,22,52);
var curShowTimeSeconds = 0;
function getTimeSeconds(){
	var now=new Date();
	var ret=parseInt(endTime.getTime()-now.getTime());
	ret = Math.round( ret/1000 );
	return ret;
}


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);
	
}
function renderDigit(x,y,num,cxt){
	cxt.fillStyle="rgb(0,102,233)";

	 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+2*j*(radius)+(radius+1),y+2*i*(radius+1)+(radius+1),radius,0,2*Math.PI);
				cxt.closePath();
				cxt.fill();
			}
		}
	}
}
function update(){
	var nextTimeShow=getTimeSeconds();

	var nextHours=parseInt( nextTimeShow / 3600);
	var nextMinutes=parseInt((nextTimeShow - nextHours * 3600)/60);
	var nextSeconds=nextTimeShow % 60;

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

	if(nextSeconds != curSeconds){
		curSeconds=nextSeconds;
	}
}	
window.onload=function(){
	var canvas=document.getElementById('canvas');
	var context = canvas.getContext("2d");

	canvas.width=window_width;
	canvas.height=window_height;
	curShowTimeSeconds = getTimeSeconds();
	setInterval(function(){
		render(context)
		update()
	},50);
	
}