function pctMeter() {
	this.pct = 0;
	this.canvas = document.createElement('canvas');
	this.canvas.width = 150;
	this.canvas.height = 150;
	this.ctx = this.canvas.getContext("2d");
	this.clear = function() {
		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  	this.ctx.fillStyle = "rgba(255,255,255,1)";
		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
	};
	this.setProgress = function(pct) {
		this.clear();
		this.ctx.beginPath();
		this.ctx.arc(75,75,35, 1.75 * Math.PI, (Math.PI * 1.25) * pct, false);
		this.ctx.lineWidth = 10;
		this.ctx.strokeStyle = "rgba(128,128,128,1)";
		this.ctx.stroke();
	};
	this.getCanvas = function() {
		return this.canvas;
	};
}

var ProgressApp = (function() {
		var meter_map = new Array();
    var container;
		return {
		  init: function() {
			},
			addPctMeter: function(pct_meter, id) {
				container = container || document.getElementById('progress_container');
				meter_map[id] = pct_meter;
				// container.appendChild(pct_meter.getCanvas());
			},
			updatePctMeter: function(id, pct) {
				meter_map[id].setProgress(pct);
			},
		};
})();