= getutcMilliSeconds();

setInterval(
function() {
render(context);
update();
},
50
)

}

function getutcMilliSeconds() {
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret / 1000);
return ret >= 0 ? ret : 0;

}

function update() {

var nextShowTimeSeconds = getutcMilliSeconds();

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 + 14 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours % 10));
}

if(parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
addBalls(MARGIN_LEFT + 40 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes / 10));
}
if(parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
addBalls(MARGIN_LEFT + 55 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes % 10));
}
if(parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
addBalls(MARGIN_LEFT + 80 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds / 10));
}
if(parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
addBalls(MARGIN_LEFT + 95* (RADIUS + 1), MARGIN_TOP, parseInt(nextseconds % 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, x, num) {
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) {
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 + 40 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
renderDigit(MARGIN_LEFT + 55 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
renderDigit(MARGIN_LEFT + 70 * (RADIUS + 1), MARGIN_TOP, 10, cxt);

renderDigit(MARGIN_LEFT + 80 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
renderDigit(MARGIN_LEFT + 95 * (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,255,255)";

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, false);
cxt.closePath();
cxt.fill();

}
}
}

}