title: Mootools - how to destroy a class instance
body: <p>What I'm trying to do is create a class that I can quickly attach to links, that will fetch and display a thumbnail preview of the document being linked to.  Now, I am focusing on ease of use and portability here, I want to simply add a mouseover event to links like this:</p>
  
  <p><code>&lt;a href="some-document.pdf" onmouseover="new TestClass(this)"&gt;Testing&lt;/a&gt;</code></p>
  
  <p>I realize there are other ways I can go about this that would solve my issue here, and I may end up having to do that, but right now my goal is to implement this as above.  I don't want to manually add a mouseout event to each link, and I don't want code anywhere other than within the class (and the mouseover event creating the class instance).</p>
  
  <p>The code:</p>
  
  <pre><code>TestClass = new Class({
      initialize: function(anchor) {
          this.anchor = $(anchor);
          if(!this.anchor) return;
  
          if(!window.zzz) window.zzz = 0;
          this.id = ++window.zzz;
  
          this.anchor.addEvent('mouseout', function() {
              // i need to get a reference to this function
              this.hide();
          }.bind(this));
  
          this.show();
  
      },
      show: function() {
          // TODO: cool web 2.0 stuff here!
      },
      hide: function() {
          alert(this.id);
  
          //this.removeEvent('mouseout', ?);  // need reference to the function to remove
  
          /*** this works, but what if there are unrelated mouseout events? and the class instance still exists! ***/
          //this.anchor.removeEvents('mouseout');
  
          //delete(this);  // does not work !
          //this = null; // invalid assignment!
          //this = undefined; // invalid assignment!
  
      }
  });
  </code></pre>
  
  <p>What currently happens with the above code:</p>
  
  <ul>
  <li>1st time out: alerts 1</li>
  <li>2nd time out: alerts 1, 2</li>
  <li>3rd time out: alerts 1, 2, 3</li>
  <li>etc</li>
  </ul>
  
  <p>Desired behavior:</p>
  
  <ul>
  <li>1st time out: alerts 1</li>
  <li>2nd time out: alerts 2</li>
  <li>3rd time out: alerts 3</li>
  <li>etc</li>
  </ul>
  
  <p>The problem is, each time I mouse over the link, I'm creating a new class instance and appending a new mouseout event for that instance.  The class instance also remains in memory indefinitely.</p>
  
  <p>On mouseout I need to remove the mouseout event and destroy the class instance, so on subsequent mouseovers we are starting fresh.</p>
  
  <p>I could create a helper function for this to make sure that the class is only created once for each link, something like this:</p>
  
  <pre><code>function TestClassHelper(anchor) {
      anchor = $(anchor);
      if(!anchor) return;
  
      if(!anchor.retrieve('TestClass')) anchor.store('TestClass', new TestClass(anchor));
      anchor.retrieve('TestClass').show();
  }
  </code></pre>
  
  <p><code>&lt;a href="some-document.pdf" onmouseover="TestClassHelper(this)"&gt;Testing&lt;/a&gt;</code></p>
  
  <p>I may end up implementing it this way if I have to, but I'm curious as to how I can fix the other method.</p>