function Statistic(canvas) {
   this.canvas = canvas;  // Canvas Element
   this.ctx = null;  // 2D-Grafikkontext vom Canvas
   this.border = 10;	
   this.values = this.getValues();  // Angezeigte Werte
   this.barWidth = 5;  // Breite der Balken
   this.barFill = null; // Farbverlauf für Säulen
   this.backgroundFill = null; // Farbverlauf für Hintergrund
   this.factorHeight = 1;
};

Statistic.prototype.init = function() {
	if (typeof(G_vmlCanvasManager) != 'undefined') {
        this.canvas = G_vmlCanvasManager.initElement(this.canvas);
	}
	if(this.canvas && this.canvas.getContext) {
 	   this.ctx = this.canvas.getContext('2d');
        // Farbverläufe
        this.barFill = this.ctx.createLinearGradient( 0, 0, 0, 120);
        this.barFill.addColorStop(0.0, '#fccdb6');
        this.barFill.addColorStop(1.0, '#FF8040');

        this.backgroundFill = this.ctx.createLinearGradient( 0, 0, 0, this.canvas.height);
        this.backgroundFill.addColorStop(0.0, '#808080');
        this.backgroundFill.addColorStop(1.0, '#e8e5e3');
        this.calculateFactorHeight();
        this.draw();
    }
};

Statistic.prototype.getValues = function() {
	var val = $(this.canvas).attr('values');
	return val.split(',');
};

Statistic.prototype.getMaxValue = function() {
	var max = 1;
	for(var z=0;z<this.values.length;z++) {
		var val = parseInt(this.values[z]);
		if( val > max) {
			max = val;
		}
	}
	return max;	
};

Statistic.prototype.calculateFactorHeight = function() {
	var max = this.getMaxValue();
	this.factorHeight = (this.canvas.height- 2* this.border) / max;
};
  
Statistic.prototype.getHeight = function(value) {
	if(value==0) {
		return 2;
	}
	return this.factorHeight * value;
};

Statistic.prototype.draw = function() {
     // Hintergrund zeichnen
     // this.ctx.fillStyle = this.backgroundFill;
     //this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

     // Status retten und Ursprung nach unten verschieben
     // sowie Koordinaten an der x-Achse spiegeln
     this.ctx.save();

     this.ctx.translate(this.border, this.canvas.height - this.border);
     this.ctx.scale(1, -1);

     // zeichnen
     for(var i = 0; i < this.values.length; i++) {
       this.ctx.fillStyle = this.barFill;
  	   this.ctx.fillRect(i * (this.barWidth + 3), 0, this.barWidth, this.getHeight(this.values[i]) );
     }

     // Alten Status wiederherstellen
     this.ctx.restore();
};