title: Raphael Paper.setSize issue
body: <p>Hello and thank you in advance for your assistance. I've been beating my head against the keyboard all day on this one and need some help. I'm fairly new to JavaScript and Raphael so hopefully it isn't something obvious - but I have spent a good deal of time Googling, checking the docs, and searching this site for answers to no avail.</p>
  
  <p>I'm working on a project that requires elements be draggable accross the canvas in much the same way as in the example posted to the Raphael homepage: <a href="http://raphaeljs.com/graffle.html" rel="nofollow">http://raphaeljs.com/graffle.html</a>
  I've got everything working perfectly with one exception - when the user re-sizes the browser window the canvas size is not updating accordingly. Rather, despite the fact that the canvas correctly reports the new dimensions (via output to the console), I cannot drag any of the elements past the canvas' original x/y boundary. </p>
  
  <p>Here are the relevant snippets of code:</p>
  
  <p>CSS: </p>
  
  <pre><code>#canvas_container {  
  background-color: #696969;
      color: #FFFFFF;
      padding: 15px 25px;
      shadow: 1px 1px #FFFFFF;
      margin-right: 310px;
      margin-top: 75px;
      min-width: 640px;
      min-height: 640px;
      border-radius: 20px;
  }  
  </code></pre>
  
  <p>JavaScript/Raphael:</p>
  
  <pre><code>        //initialize canvas 
      fiddle.paper = new Raphael(document.getElementById("canvas_container"), $('#canvas_container').width(), $('#canvas_container').height()); 
  
      //resize handler
      $(window).resize(function() {
          if(this.resizeTO) clearTimeout(this.resizeTO);
          this.resizeTO = setTimeout(function() {$(this).trigger('resizeEnd');}, 300);            
      });
  
      $(window).bind('resizeEnd', function() {
      //resize canvas
      fiddle.paper.setSize($('#canvas_container').width(), $('#canvas_container').height());
  
      });
  </code></pre>
  
  <p>What the heck am I missing?? </p>