var graph = {
  ctx: null,
  canvas: null,
  buffer: {},
  init: function(id) {
    this.canvas = document.getElementById(id);
    this.ctx = this.canvas.getContext("2d");
  },

  newGraph: function(name, color) {
    this.buffer[name] = {};
    this.buffer[name].color = color;
    this.buffer[name].vector = [];
    this.buffer[name].min = 1;
  },

  update: function(name, val) {
    this.buffer[name].vector.push(val);
    if (val < this.buffer[name].min)
      this.buffer[name].min = val;
    if (this.buffer[name].vector.length > 200) {
      this.buffer[name].vector.shift();
    }
  },

  draw: function() {
    this.ctx.clearRect(0, 0, 200, 200);

    for (var name in this.buffer) {
      this.ctx.beginPath();
      var vector = this.buffer[name].vector;
      var color = this.buffer[name].color;
      var min = this.buffer[name].min;
      this.ctx.moveTo(0, 200 - vector[0]);

      for (var i = 1; i < vector.length; i++) {
        var val = vector[i] * 200;
        this.ctx.lineTo(i, 200 - val);
      }
      this.ctx.lineTo(vector.length, 200);
      this.ctx.lineTo(0, 200);
      this.ctx.closePath();
      this.ctx.fillStyle = utils.buildAColor(color, 0.5);
      this.ctx.fill();
      this.ctx.strokeStyle = utils.buildColor(color);
      this.ctx.stroke();

      this.ctx.beginPath();
      this.ctx.moveTo(0, 200 - min * 200);
      this.ctx.lineTo(200, 200 - min * 200);
      this.ctx.stroke();
    }

  }
};