function ProgressBar() {

    this.budget = 100;

    this.todo = 100;

    this.done = 100;

    this.color_done = "green";

    this.color_budget = "blue";

    this.color_todo = "#cccccc"; //  grey

    this.height = 16;

    this.middle = this.height/2;

    this.radius = 4;

}

ProgressBar.prototype.draw_one_rect = function(ctx, pos, color, fill) {

    ctx.beginPath();

    ctx.lineWidth = 1;

    ctx.strokeStyle = color;

    if (fill) {

	ctx.fillStyle = color;

	ctx.fillRect(0,0,pos,this.middle*2);

    } else {

	ctx.lineWidth = 2;

	ctx.strokeStyle = "black";

	ctx.moveTo(pos,0);

	ctx.lineTo(pos,this.middle*2);

	ctx.stroke();

    }

};

ProgressBar.prototype.draw_one_circ = function(ctx, pos, color) {

    ctx.beginPath();

    ctx.lineWidth = 2;

    ctx.strokeStyle = color;

    ctx.moveTo(0,this.middle);

    ctx.lineTo(pos,this.middle);

    ctx.arc(pos,this.middle,this.radius,0,Math.PI*2,true);

    ctx.stroke();

};

ProgressBar.prototype.draw_circ = function(ctx) {

    this.draw_one_circ(ctx,this.budget,this.color_budget);

    this.draw_one_circ(ctx,this.todo,this.color_todo);

    this.draw_one_circ(ctx,this.done,this.color_done);

};

ProgressBar.prototype.draw_rect = function(ctx) {

    this.draw_one_rect(ctx,this.todo,this.color_todo,true);

    this.draw_one_rect(ctx,this.done,this.color_done,true);

    this.draw_one_rect(ctx,this.budget,this.color_budget,false);

};

function draw_progressbar(cid, done, todo, budget, color) {

    var canvas = document.getElementById(cid);

    if (canvas.getContext) {

        var ctx = canvas.getContext("2d");

	var bar = new ProgressBar();

	bar.budget = budget;

	bar.todo = todo;

	bar.done = done;

        bar.color_done = color;

	bar.draw_rect(ctx);

    }

}