var count = 0;
var rate = 0;
$(document).ready(function() {
    $.getJSON('json.php', null, function(settings) {
	count = Math.round(settings.start);
  	if (settings.active) {
  	    rate = settings.rate;
	    setTimeout(counterFlip, 500);
 	}
    });
});

function digits(num) {
    num = Math.round(num);
    dig = Array();
    for (i = 0; num != 0; i++) {
	d = num % 10;
	dig.push(d);
	num = Math.floor(num / 10);
    }
    return dig;
}

function counterFlip() {
    old_digs = digits(count);
    count += (rate/2);
    new_digs = digits(count);

    for (i = 0; i < new_digs.length; i++) {
	if (old_digs[i] != new_digs[i]) {
	    flipDigit(7-i, new_digs[i]);
	}
    }
    setTimeout(counterFlip, 500);
}

function flipDigit(d, val) {
    d = '#d' + d;
    $d = $(d);
    $d_kids = $(d + ' span');

    var cur = $d_kids.text();
    var h = $d.height();
    var w = $d.width();

    $d.css('height', h);
    $d.css('width', w);

    $d_kids.css('display', 'block');
    $d_kids.css('position', 'absolute');
    $d_kids.css('height', h);
    $d_kids.css('width', w);
    $d_kids.css('padding', 0);
    $d_kids.css('margin', 0);

    
    $d.prepend('<span style="display: block; position: absolute; left: 0px; top: -' + h + 'px;">' + val + '</span>');
    $(d + ' span:nth-child(1)').animate({
	'top': '0px'
    }, 300);
    $(d + ' span:nth-child(2)').animate({
	'top': h + 'px'
    }, 300, 'linear', function() { $(this).detach(); });
}