+
−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);
+
−    }
+
−}
+
−