// Default options
  var options = {
    stepTime: 100,
    impressions: "000000000",
    prints: "000000",
    leads: "0000",
    digitImages: 6,
    digitWidth: 20,
    digitHeight: 28.525,
    image: 'layout/digits.png'
  };
  var impressions = [], interval;
  var prints = [], interval;
  var leads = [], interval;
  
  var element;
  var value;
  var values_array = [];

  var createimpressions = function(where) 
  {
	c = 0;
    for (var i = options.impressions.length - 1; i >= 0; i--)
    {
		elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
		  height: options.digitHeight * options.digitImages * 10, 
		  float: 'right', 
		  background: 'url(\'' + options.image + '\')',
		  width: 20});
		impressions.push(elem);
		
		margin(impressions[c], -((parseInt(options.impressions.charAt(i)) * options.digitHeight *
						  options.digitImages)));
		
		if(c == 3 || c == 6 || c == 9){
			$("#counter").append('<div style="float:right;"> . </div>')
		}
		
		$("#counter").append(elem)
		c++;
    }
	for(var i = 10 - (options.impressions.length + 1); i >= 0; i--){
		elem = $('<div class="cntDigit" />').css({
		  height: options.digitHeight, 
		  float: 'right', 
		  background: 'url(\'layout/digits_back.png\')',
		  width: 20});
		  
		if(c == 3 || c == 6 || c == 9){
			$("#counter").append('<div style="float:right;"> . </div>')
		}
		$("#counter").append(elem)
		c++;
	}
	
	c = 0;
    for (var i = options.prints.length - 1; i >= 0; i--)
    {
		elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
		  height: options.digitHeight * options.digitImages * 10, 
		  float: 'right', 
		  background: 'url(\'' + options.image + '\')',
		  width: 20});
		prints.push(elem);
		
		margin(prints[c], -((parseInt(options.prints.charAt(i)) * options.digitHeight *  options.digitImages)));
		
		if(c == 3 || c == 6 || c == 9){
			$("#counter1").append('<div style="float:right;"> . </div>');
		}
		
		$("#counter1").append(elem);
		c++;
    }
	for(var i = 10 - (options.prints.length + 1); i >= 0; i--){
		elem = $('<div class="cntDigit" />').css({
		  height: options.digitHeight, 
		  float: 'right', 
		  background: 'url(\'layout/digits_back.png\')',
		  width: 20});
		  
		if(c == 3 || c == 6 || c == 9){
			$("#counter1").append('<div style="float:right;"> . </div>')
		}
		$("#counter1").append(elem)
		c++;
	}
	
	c = 0;
    for (var i = options.leads.length - 1; i >= 0; i--)
    {
		elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
		  height: options.digitHeight * options.digitImages * 10, 
		  float: 'right', 
		  background: 'url(\'' + options.image + '\')',
		  width: 20});
		leads.push(elem);
		
		margin(leads[c], -((parseInt(options.leads.charAt(i)) * options.digitHeight * options.digitImages)));
		
		if(c == 3 || c == 6 || c == 9){
			$("#counter2").append('<div style="float:right;"> . </div>')
		}
		
		$("#counter2").append(elem)
		c++;
    }
	for(var i = 10 - (options.leads.length + 1); i >= 0; i--){
		elem = $('<div class="cntDigit" />').css({
		  height: options.digitHeight, 
		  float: 'right', 
		  background: 'url(\'layout/digits_back.png\')',
		  width: 20});
		  
		if(c == 3 || c == 6 || c == 9){
			$("#counter2").append('<div style="float:right;"> . </div>')
		}
		$("#counter2").append(elem)
		c++;
	}
	
  };

  var moveStep = function() 
  {
	var http = false;

	if(navigator.appName == "Microsoft Internet Explorer") {
	  http = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
	  http = new XMLHttpRequest();
	}
	
	var rand = Math.floor(Math.random()*10000);
	http.open("GET", "xml.php?id="+rand);
	http.onreadystatechange=function() {
	  if(http.readyState == 4) {
		values_array=http.responseText.split("|");
	  }
	}
	http.send(null);
	
    options.impressions = String(values_array[0]);
	options.prints = String(values_array[1]);
	options.leads = String(values_array[2]);
	
	  var c = 0;
	  for (var i = options.impressions.length - 1; i >= 0; i--){
		  
			  if(impressions[c]._position != -((parseInt(options.impressions.charAt(i)) * options.digitHeight * options.digitImages))){
				  
				  margin(impressions[c], -((parseInt(options.impressions[i]) * options.digitHeight *
							  options.digitImages)));
			  }
		c++;
	  }
	  
	  c = 0;
	  for (var i = options.prints.length - 1; i >= 0; i--){
		  
			  if(prints[c]._position != -((parseInt(options.prints.charAt(i)) * options.digitHeight * options.digitImages))){
				  
				  margin(prints[c], -((parseInt(options.prints[i]) * options.digitHeight *
							  options.digitImages)));
			  }
						  
		c++;
	  }
	  
	  c = 0;
	  for (var i = options.leads.length - 1; i >= 0; i--){
		  
			  if(leads[c]._position != -((parseInt(options.leads.charAt(i)) * options.digitHeight * options.digitImages))){
				  
				  margin(leads[c], -((parseInt(options.leads[i]) * options.digitHeight *
							  options.digitImages)));
			  }
						  
		c++;
	  }
	  
	  
  };
  
  var margin = function(elem, val) 
  {
	  $(elem).animate({ 
		'marginTop': val+'px'
	  }, 500);
	  
	  $(elem)._position = val;
	  
  };
  
var http = false;

if(navigator.appName == "Microsoft Internet Explorer") {
  http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  http = new XMLHttpRequest();
}

var rand = Math.floor(Math.random()*10000);
http.open("GET", "xml.php?id="+rand);
http.onreadystatechange=function() {
  if(http.readyState == 4) {
	values_array=http.responseText.split("|");
	options.impressions = String(values_array[0]);
	options.prints = String(values_array[1]);
	options.leads = String(values_array[2]);
	createimpressions(this);
	window.setInterval(moveStep, 10000);
  }
}
http.send(null);