title: Modifying object(s) from Raphael.js
body: <p>If I have a item like <a href="http://raphaeljs.com/ball.html" rel="nofollow">http://raphaeljs.com/ball.html</a>, how can I modify it via DOM, to change the color of a specific instance?</p>
  
  <p>EX:</p>
  
  <pre><code>Raphael.fn.ball = function (x, y, r, hue) {
          hue = hue || 0;
          return this.set(
              this.ellipse(x, y + r - r / 5, r, r / 2).attr({fill: "rhsb(" + hue + ", 1, .25)-hsb(" + hue + ", 1, .25)", stroke: "none", opacity: 0}),
              this.ellipse(x, y, r, r).attr({fill: "r(.5,.9)hsb(" + hue + ", 1, .75)-hsb(" + hue + ", .5, .25)", stroke: "none"}),
              this.ellipse(x, y, r - r / 5, r - r / 20).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})
          );
      };
  
  function drawBall(div_id, color) {
          var X = Raphael(div_id), x = 100, y = 80, r = 50;
          X.ball(x, y, r, color);
      }
  </code></pre>
  
  <p>I do create a "Ball" (document.write(active_div, 0.3459912) in the document, and now I want to change the color.</p>
  
  <p>Calling drawBall with the same div, just creates another "ball" in the DIV.</p>