Call a class to stop/pause slideshow on mouseenter

Question

I am adding some new code to this Mootools slideshow.

I added thumbnails and a mouseover function that scrolls thru the thumbnails.
Now I need to make the timer on the slideshow stop/pause when mouseenter. I ma trying with the code under but got a Uncaught TypeError: Object #<HTMLDivElement> has no method '_stopClock'.

spinAreaDiv.addEvent('mouseenter', function(){
this._stopClock();  
})

How can I call the class _stopClock?

var Spin = new Class({
...
...
_stopClock:function(){
    if(!this.options.timer) { 
        return false; 
    } else {
        this.timerRunning = false;
        clearInterval(this.clock);
        this.timer.pause.addClass('active');
    }
},
...

Answer 1

this is a binding issue. when an event callback from a dom event fires, this will be the element.

element.addEvent('something', function(){
    this === element; // true;
});

// save a reference
var self = this;
element.addEvent('something', function(){
    this === element; // true;
    self._stockClock(); // works.
});

// or. use Function.prototype.bind
element.addEvent('something', function(){
    this !== element; // true;
    this._stopClock(); // works.
}.bind(this));

// or even...
this.element.addEvent('something', this._stopClock.bind(this)); // works.