class/function scope problem

[Matt Thomson]

Hi, I have about 5 scrollbars on my page, so I would rather have one
class, than the five repeated bits of code I use currently. I have
tried the below code, but the this.container is not available inside
the onChange function. I am new to OOP in mootools, is there a way to
fix this, or am I doing OOP the wrong way?

var scrollBarClass = new Class
({
initialize: function(container,scrollBarBack,handle)
{

this.container = container;
this.scrollBarBack = scrollBarBack;
this.handle = handle;

this.SizeArray = $(this.container).getSize();
this.ScrollLength = this.SizeArray.scrollSize.y;
this.BoxLength = this.SizeArray.size.y;

if(this.ScrollLength > this.BoxLength)
{

$(this.scrollBarBack).setStyle('display', 'block');
$(this.handle).setStyle('display', 'block');

this.ScrollBarSlider = new Slider(this.scrollBarBack, this.handle,
{
steps: 100,
offset: 0,
mode: 'vertical',

onChange: function(step)
{
       //this is the problem part, the this.container is not available
inside this function
        $(this.container).scrollTo(step * ( (this.ScrollLength -
this.BoxLength) /100),0 );
},
onTick: function(pos)
{
        this.knob.setStyle(\'top\', pos);
}

});
}
else
{
$(this.scrollBarBack).setStyle(\'display\', \'none\');
$(this.handle).setStyle(\'display\', \'none\');
};
}

});