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