title: Trouble calling a JavaScript Function?
body: <p>I am testing out the Raphael javascript library and would i'm experiencing a small problem. I am drawing four shapes onto a canvas. I am then allowing an object to be the currently selected object via clicking. I then add an event handler listening for the press of the delete key. This works fine but i dont seem to be able to call a function. Below is the code to illustrate my problem.</p>
  
  <p>This is a class that represents each of the cirlces on the canvas:</p>
  
  <pre><code>var Shape = new Class({
      initialize: function(x, y, color)
      {
          this.shape = paper.circle(x, y, 25);
          this.shape.attr("fill", color);
  
          this.shape.click(function()
          {
              if(selectedObj == null)
              {
                  selectedObj = this;
                  selectedObj.attr({'stroke':'orange', 'stroke-width':'5'});
              }
              else if(selectedObj != this)
              {
                  selectedObj.attr({'stroke':'orange', 'stroke-width':'0'});
                  selectedObj = this;
                  selectedObj.attr({'stroke':'orange', 'stroke-width':'5'});
              }
              else if(selectedObj == this)
              {
                  selectedObj.attr({'stroke':'orange', 'stroke-width':'0'});
                  selectedObj = null;
              }
          });
      },
      deleteThis: function()
      {
          alert("Inside The deleteThis() Function.");
      }
  });
  </code></pre>
  
  <p>This creates a shape and the when clicked it does the following:</p>
  
  <ol>
  <li>If the <code>selectedObj</code> is null, the shape that was clicked is set to the <code>selectedObj</code> and draws a small orangle colored rim around the shape.</li>
  <li>If the <code>selectedObj</code> is not the clicked shape, it takes the small border of the previously selected object and then sets the newly clicked shape as the currently selected item.</li>
  <li>If the shape is the selected object, when clicked again, it deselects it.</li>
  </ol>
  
  <p>I then push four shapes onto the canvas:</p>
  
  <pre><code>objShapes.push(new Shape(50, 50, "red"));   
  objShapes.push(new Shape(250, 50, "blue")); 
  objShapes.push(new Shape(50, 250, "yellow"));   
  objShapes.push(new Shape(250, 250, "green"));
  </code></pre>
  
  <p>Now that i can select and deselect an object on the canvas successfully, i need to be able to call functions of the selected object. To trigger the function i am using the keyboard. The following code is what i use:</p>
  
  <pre><code>$(document).keydown(function(event)
  {
      if(event.keyCode == 46)
      {
          if(selectedObj == null)
          {
              alert("nothing to delete");
          }
          else
          {
              alert("Deleting " + selectedObj.attr('fill') + " Circle.");
              selectedObj.deleteThis();
          }
      }
  });
  </code></pre>
  
  <p>Only part of the event handler work. When i hit the delete key and nothing is selected, an alert windows tells me nothing is selected to delete, However, when i have selected an object and hit the delete key, an alert does come up and tells me what circle i am deleting but it then fails to call the <code>deleteThis()</code> function. I dont understand why it will call the <code>.attr()</code> function but not the <code>deleteThis()</code> function.</p>
  
  <p>What is the reason for not being able to call the function?</p>