title: Storing Raphael objects inside another object for later manipulation
body: <p>Soo... pretty much a noob, have pity on me for any obvious mistakes.</p>
  
  <p>I'm trying to use Raphaël to create some clickable (or not) shapes. </p>
  
  <p>However, since I want to be flexible in how the actual rendering I wan't it to be objects containing raphael shapes, not just an array of raphael shapes.</p>
  
  <p>Basically trying to separate the drawing from the object properties.</p>
  
  <p>My non-working attempt below:</p>
  
  <pre><code>var Box = function (where, type, id) {
      // This is the object containing rendering info
  
      this.id = id
  
      this.posx = coords.topLeft.x;
      this.posy = coords.topLeft.y;
  
      this.width = type.w; // length 
      this.height = type.h; // height 
  
      this.color = baseColors.black;
      this.line = baseColors.white;
  
      this.paper = where;
  
      this.raphShp = this.drawMe()
      this.clickMe()  
  }
  
  Box.prototype.drawMe = function () {
      // Function to be called for drawing the shape 
      var box = this.paper.rect(this.posx, this.posy, this.width, this.height);
      box.attr({fill: this.color,stroke: this.line,'stroke-width': '1','stroke-opacity': '1'}).data('name', 'box' + this.id);
  
      // trying to pass the raphael shape back to the object
      return this.paper.getById(box.id)
  }
  
  Box.prototype.clickMe = function () {
      // trying to add clickable property to the shape
          this.raphShp.click(function(evt) {
              this.rotate(45);
              console.log('rotate')
          }); 
  }
  </code></pre>
  
  <p>Adding the clickable property in the drawMe works of course. But I want to be able to do it separately. </p>
  
  <p>What painfully obvious thing am I missing?</p>