// JavaScript Document
var pet, petOdometer, agua, aguaOdometer;

$(document).ready(function(e) {
	pet = parseInt($("#pet-odometer").attr("rel"));
	agua = parseInt($("#agua-odometer").attr("rel"));

	var divPet = document.getElementById("pet-odometer");
	var divAgua = document.getElementById("agua-odometer");

	petOdometer = new Odometer(divPet, {
		value		: pet,
		digits		: 7,
		digitHeight : 20,
		digitWidth	: 16,
		bustedness	: 1,
		fontStyle	: 'font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; line-height:20px; color:#4B7B3D; width:15px;'
	});

	aguaOdometer = new Odometer(divAgua, {
		value		: agua,
		digits		: 9,
		digitHeight : 20,
		digitWidth	: 16,
		bustedness	: 1,
		fontStyle	: 'font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; line-height:20px; color:#093a7c; width:15px;'
	});

	function renumberPet() {
		var $timer = setInterval(function(){
			pet = pet + 0.1;
			petOdometer.set(pet);
		},50);
		window.setTimeout(function(){
			clearInterval($timer);
			pet = Math.round(pet);
			petOdometer.set(pet);
		},525);
	}

	/*
	function renumberAgua() {
		var $timer = setInterval(function(){
			agua = agua + 0.335;
			aguaOdometer.set(agua);
		},50);
		window.setTimeout(function(){
			clearInterval($timer);
			agua = Math.round(agua);
			aguaOdometer.set(agua);
		},10000);
	}
	*/

	function renumberAgua() {
		var $timer = setInterval(function(){
			agua = agua + 0.5;
			aguaOdometer.set(agua);
		},50);
		window.setTimeout(function(){
			clearInterval($timer);
			agua = Math.round(agua);
			aguaOdometer.set(agua);
		},6725);
	}

	function refillPet() {
		// Setup
		var pet = $('#garrafa-timer');
		pet.css('background-position', '0px 0px');
		pet.animate({
			backgroundPosition: '0px 30px'
		}, 10000, 'linear', function() {
			refillPet();
			renumberPet();
		});
	}

	function refillAgua() {
		// Setup
		var pet = $('#agua-timer');
		pet.css('background-position', '0px 30px');
		pet.animate({
			backgroundPosition: '0px 0px'
		}, 10000, 'linear', function() {
			refillAgua();
			renumberAgua();
		});
	}

	refillPet();
	refillAgua();
});

