function AnimateNumber(canvasId, startNumber, countdownSpeed, image, callback)
{
	this.canvasId = canvasId;
	this.startNumber = startNumber;
	this.countdownSpeed = countdownSpeed;
	this.animationSpeed = 100;
	this.currentNumber = startNumber;
	this.canvasElement = document.getElementById(this.canvasId);
	this.image = new Image();
	this.image.onload = function () { if (callback != null) { callback();}};
	this.image.src = image;
	this.centerX;
	this.centerY;
	this.startAngle;
	this.wedgeSize;
	this.startRadious;
	this.stopRadious;
	this.startAngle;
	this.stopAngle;
	this.count = 0;
	this.callback = null;
	
	this.animate = function ()
	{
		var context = this.canvasElement.getContext('2d');
		var startAngle = this.startAngle;
		var stopAngle = this.startAngle + (this.wedge * this.count++);
		var centerPointX = this.centerX;
		var centerPointY = this.centerY;
		
		var shiftDelta = Math.floor(Math.random() * 8) - 4;
		
		centerPointX += shiftDelta;
		centerPointY += shiftDelta;
		
		context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
		context.drawImage(this.image, 0, 0, this.canvasElement.width, this.canvasElement.height);
		
		// Draw our arc - order is important to ensure we start our arc at the correct place
    	context.beginPath(); // begin custom shape
    	context.moveTo(this.startRadious * Math.cos(startAngle) + centerPointX, this.startRadious * Math.sin(startAngle) + centerPointY);    	
    	context.lineTo(this.stopRadious * Math.cos(startAngle) + centerPointX, this.stopRadious * Math.sin(startAngle) + centerPointY);
    	context.arc(centerPointX, centerPointY, this.stopRadious, startAngle, stopAngle, false);
    	context.lineTo(this.startRadious * Math.cos(stopAngle) + centerPointX, this.startRadious * Math.sin(stopAngle) + centerPointY);
    	context.arc(centerPointX, centerPointY, this.startRadious, stopAngle, startAngle, true);
    	context.closePath(); // complete custom shape
    	
    	var grd = context.createLinearGradient(centerPointX + this.startRadious, centerPointY + this.startRadious, centerPointX - this.stopRadious, centerPointY - this.stopRadious);
    	grd.addColorStop(0, "#CCCCCC");
    	grd.addColorStop(1, "#333333");
    	context.fillStyle = grd;
    	context.fill();
    	
    	 // textAlign aligns text horizontally relative to placement
        context.textAlign = "center";
        // textBaseline aligns text vertically relative to font style
        context.textBaseline = "middle";
        context.font = "140pt Calibri";
        context.fillText(this.currentNumber, centerPointX, centerPointY);
    	
    	if (stopAngle < this.stopAngle)
    	{
    		var thisObj = this;
    		setTimeout(function() { thisObj.animate();}, thisObj.animationSpeed);
    	}
    	else if (this.currentNumber > 0)
    	{
    		this.currentNumber--;
    		var thisObj = this;
    		this.count = 0;
    		setTimeout(function() { thisObj.animate();}, thisObj.animationSpeed);
    	}
    	else
    	{
    		// Done issue callback
    		if (this.callback != null)
    		{
    			this.callback();
    		}
    	}
	};
	
	/*
	 * startRadious - the inner circle
	 * stopRadious - the outer circle
	 * startAngle - the beginning of the angle from 0.0 to 2.0
	 * stopAngle - the end of the angle from 0.0 to 2.0
	 * wedge - the amount between the startAngle and the end of the arc as it is created ranging from 0.0 to 2.0
	 */
	this.startAnimation = function (startRadious, stopRadious, startAngle, stopAngle, wedge, callback)
	{
		this.canvasElement.width = 800;
		this.canvasElement.height = 600;

		this.centerX = this.canvasElement.width / 2;
		this.centerY = this.canvasElement.height / 2;
		this.startRadious = startRadious;
		this.stopRadious = stopRadious;
		this.startAngle = startAngle * Math.PI;
		this.stopAngle = stopAngle * Math.PI;
		this.wedge = wedge * Math.PI;
		
		// how many stops between start and stop based on wedge?
		var angleDelta = (stopAngle - startAngle) / wedge;
		this.animationSpeed = this.countdownSpeed / angleDelta;
		this.callback = callback;
				
    	this.animate();
	};
}