var window_width = 1024;
var window_height = 768;
var radius = 8;
var margin_top = 60;
var margin_left = 30;

const endTime = new Date(2017, 3, 26 ,13,12,12);
var curShowTimeSeconds = 0;

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

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

curShowTimeSeconds = getCurrentShowTimeSeconds();

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


function getCurrentShowTimeSeconds() {
        var curTime = new Date();
        var ret = endTime.getTime() - curTime.getTime();
        ret = Math.round(ret/1000 );
        
        return ret >= 0 ? ret: 0 ;
    };
    
function update(){
    
        var nextShowTimeSeconds = getCurrentShowTimeSeconds();
        
        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){
                
                curShowTimeSeconds = nextShowTimeSeconds;
            };
    };
    
function render( context ) {
        context.beginPath();
        context.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), context );
        renderDigit( margin_left = 19*(radius+1) , margin_top , parseInt(hours%10) , context);
        renderDigit( margin_left = 34*(radius+1) , margin_top, 10 ,context);
        
        renderDigit( margin_left = 43*(radius+1) , margin_top , parseInt(minutes/10) , context);
        renderDigit( margin_left = 58*(radius+1) , margin_top , parseInt(minutes%10) , context);
        renderDigit( margin_left = 73*(radius+1) , margin_top, 10 ,context);
        
        renderDigit( margin_left = 82*(radius+1) , margin_top , parseInt(seconds/10) , context);
        renderDigit( margin_left = 97*(radius+1) , margin_top , parseInt(seconds%10) , context);
    
    
    
    };
    
function renderDigit ( x, y, num, context ){
    
    
        
        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){
                                context.beginPath();
                                context.arc( x+j*2*(radius+1)+(radius+1) , y+i*2*(radius+1)+(radius+1) , radius, 0, 2*Math.PI);
                                context.closePath();
                                
                                context.fillStyle = "pink";
                                context.fill();
                            };
                    };
            };
    };