$(document).ready(function() {
    function updateTime() {
        today = new Date();
        if (today.getHours() > 12) {
            if (today.getHours() < 22) {
                var first = 0;
                var second = (today.getHours() - 12).toString().substring(0,1);
            } else {
                var first = (today.getHours() - 12).toString().substring(0,1);
                var second = (today.getHours() - 12).toString().substring(1,2);
            }
        } else {
            if (today.getHours() > 9) {
                var first = today.getHours().toString().substring(0,1);
                var second = today.getHours().toString().substring(1,2);
            } else {
                var first = 0;
                var second = today.getHours().toString().substring(0,1);
            }
        }
        if (today.getMinutes() > 9) {
            var third = today.getMinutes().toString().substring(0,1);
            var fourth = today.getMinutes().toString().substring(1,2);
        } else {
            var third = 0;
            var fourth = today.getMinutes().toString().substring(0,1);
        }
        
        var offset = 12;
        
        var firstImg = $('<div></div>');
        firstImg.css('background', 'url(/i/clock_num.png) -'+(offset*parseFloat(first))+'px 0 no-repeat');
        
        var secondImg = $('<div></div>');
        secondImg.css('background', 'url(/i/clock_num.png) -'+(offset*parseFloat(second))+'px 0 no-repeat');
        
        var thirdImg = $('<div></div>');
        thirdImg.css('background', 'url(/i/clock_num.png) -'+(offset*parseFloat(third))+'px 0 no-repeat');
        
        var fourthImg = $('<div></div>');
        fourthImg.css('background', 'url(/i/clock_num.png) -'+(offset*parseFloat(fourth))+'px 0 no-repeat');
        
        var sep = $('<div></div>');
        sep.css('background', 'url(/i/clock_sep.gif) top left no-repeat');
        sep.css('width', '2px');
        
        $('#ClockFace').html('');
        $('#ClockFace').append(firstImg);
        $('#ClockFace').append(secondImg);
        $('#ClockFace').append(sep);
        $('#ClockFace').append(thirdImg);
        $('#ClockFace').append(fourthImg);
    }
    updateTime();
    setInterval(function() { 
        updateTime();
    }, 5000);
});