var SpGraph = {
    init : function(){
      SpGraph.graph = Raphael("graph", 400, 200);
      SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

      for(var x = 10; x < 110; x += 10) {
        var c = (x > 10) ? "#333" : "#f00";
        SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
      }
      SpGraph.startPath();
      SpGraph.updateGraph();
    },
    startPath : function() {
      if(SpGraph.path) {
        SpGraph.path.remove();
      }
     SpGraph.path = SpGraph.graph.path({stroke: "#0f0", "stroke-width": 5, "fill-opacity": 0}).moveTo(20, 110);
    },
    updateGraph : function() {
    if(SpGraph.updates++ < 36) {
      var perf = Math.floor(Math.random() * 100);
      SpGraph.path.lineTo(20+SpGraph.updates*10, 110-perf);
      document.getElementById('readout').innerHTML = perf+'%';
    } else {
      SpGraph.updates = 0;
      SpGraph.startPath();
    }
    SpGraph.timer = setTimeout("SpGraph.updateGraph();",1000);
  },
  updates : 0
}
window.onload = function () {
  SpGraph.init();
};