anchor.diff:  <div id='drawing'>
   </div>
   <script>
  +  var r = Raphael($('#drawing').offset().left, 0, 500, 500);
  +  r.rect(0, 0, 500, 500);
  +  var models = {
  +    <% @models.each do |model| %>
  +      '<%= model.id %>': {id: '<%= model.id %>', name: '<%= model.name %>'},
  +    <% end %>
  +  };
  +  var model_widgets = [];
  +
  +  $('.model').click(function(ev) {
  +    console.log('Adding model with id ' + $(ev.target).attr('data-model-id'));
  +
  +    model = models[$(ev.target).attr('data-model-id')];
  +     
  +    model_widget = {
  +      model: model,
  +      x: 60,
  +      y: 40,
  +      graphic: r.set(
  +        r.rect(60, 40, 60, 40),
  +        r.text(60 + 30, 40 + 20, model.name)
  +      )
  +    };
  +  });
     /*
     $(document).ready(function() {
       alert('hello');
     });
     */
  -    var r = Raphael($('#drawing').offset().left, 0, 500, 500);
  -    r.rect(0, 0, 500, 500);
   
   /*
       var dragger = function () {
  
positive.code:     Editing <%= @drawing.name %><br/>
    </p>
    <h3>Models</h3>
    <% @models.each do |model| %>
      <%= model.name %><br/>
    <% end %>
    <form action='/drawings/<%= @drawing.id %>' method='post'>
      <input name='name' value='<%= @drawing.name %>'/><br/>
      <input type='submit' name='Save'/>
  
negative.code:     circle.attr("stroke", "#fff");
      */
  
  /*
      window.box_attrs = {x: 10, y: 20, width:10, height: 10};
      window.box = r.rect().attr(box_attrs);
      window.box.attr(box_attrs);
  
      path_attrs = [['M', 10, 10], ['L', 100, 100]];
      var path = r.path(path_attrs);
  */
  </script>
  