// Array to hold each digit's starting background-position Y value
var initialPos = [0, -618, -1236, -1854, -2472, -3090, -3708, -4326, -4944, -5562];
// Anination frames
var animationFrames = 5;
// Frame shift
var frameShift = 103;

// Time for update in milliseconds
var pace = 2000;
 
// Initializing variables
var digitsOld = [], digitsNew = [], subStart, subEnd, x, y;
 
// This checks the old count value vs. new value, to determine how many digits
// have changed and need to be animated.
function digitCheck(x,y){
	if (y.length > x.length) addDigit(y.length);
	var digitsOld = splitToArray(x),
	digitsNew = splitToArray(y);
	for (var i = 0, c = digitsNew.length; i < c; i++){
		if (digitsNew[i] != digitsOld[i]){
			animateDigit(i, digitsOld[i], digitsNew[i]);
		}
	}
}
 
// Animation function
function animateDigit(n, oldDigit, newDigit){
	var speed;
	switch (n){
		case 0:
			speed = pace/8;
			break;
		case 1:
			speed = pace/4;
			break;
		default:
			speed = pace/2;
			break;
	}
	// Cap on slowest animation can go
	speed = (speed > 100) ? 100 : speed;
	// Get the initial Y value of background position to begin animation
	var pos = initialPos[oldDigit];
	// Each animation is 5 frames long, and 103px down the background image.
	// We delay each frame according to the speed we determined above.
	for (var k = 0; k < animationFrames; k++){
		pos = pos - frameShift;
		if (k == (animationFrames - 1)){
			jQuery("#counter-wrap #d" + n).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0, function(){
				// At end of animation, shift position to new digit.
				jQuery("#counter-wrap #d" + n).css({'background-position': '0 ' + initialPos[newDigit] + 'px'}, 0);
			});
		}
		else{
			jQuery("#counter-wrap #d" + n).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0);
		}
	}
}
 
// Splits each value into an array of digits
function splitToArray(input){
	var digits = new Array();
	for (var i = 0, c = input.length; i < c; i++){
		var subStart = input.length - (i + 1),
		subEnd = input.length - i;
		digits[i] = input.substring(subStart, subEnd);
	}
	return digits;
}
 
// Adds new digit
function addDigit(len){
	var li = Number(len) - 1;
	if (li % 3 == 0) jQuery("#counter-wrap ul").prepend('<li class="separator"></li>');
	jQuery("#counter-wrap ul").prepend('<li id="d' + li + '"></li>');
	jQuery("#counter-wrap #d" + li).css({'background-position': '0 ' + initialPos[1] + 'px'});
}
 
// Sets the correct digits on load
function initialDigitCheck(initial){
	// Creates the right number of digits
	var count = initial.toString().length;
	var bit = 1;
	for (var i = 0; i < count; i++){
		jQuery("#counter-wrap ul").prepend('<li id="d' + i + '"></li>');
		if (bit != (count) && bit % 3 == 0) jQuery("#counter-wrap ul").prepend('<li class="separator"></li>');
		bit++;
	}
	// Sets them to the right number
	var digits = splitToArray(initial.toString());
	for (var i = 0, c = digits.length; i < c; i++){
		jQuery("#counter-wrap #d" + i).css({'background-position': '0 ' + initialPos[digits[i]] + 'px'});
	}
}
 
// Function that controls counting
function update(number){
	x = theNumber.toString();
	theNumber = number;
	y = theNumber.toString();
	digitCheck(x,y);
}

jQuery(document).ready(function(){
  jQuery.get("/mpcount/", cache=false, function(data){
    counter = Number(data);
    if (!isNaN(counter)) {
      theNumber = counter;
      initialDigitCheck(theNumber);
    }

    // Automatic updates
    setInterval(function() { 
      jQuery.get("/mpcount/", async=false, function(data){ 
        counter = Number(data);
        if (!isNaN(counter)) update(counter);
      }); 
    }, pace);
  });
});