mooTools Binding All Classes - mootools

Question

I am not used to using mooTools, it looks a lot like Prototype JS. Can anyone tell me how to bind this to every class?
// This grabs all the classes
var mousy = $$('.hf-item-images');
// I don't think this is correct to apply this scroller to all the above classes
var scroll = new Scroller(mousy, {area: 100, velocity: 1});
// Mousemove
mousy.addEvent('mouseover', scroll.start.bind(scroll));
mousy.addEvent('mouseout', scroll.stop.bind(scroll));

Answer 1

you need to be smarter about this, looping through nnnn items to make scollers can be expensive. so is attaching pairs of events on each one.
given markup like so:
<div id="container">
<div class="hf-item-images">...</div>
<div class="hf-item-images">...</div>
</div>
you can delegate stuff on the parent and only instantiate a scroller instance on elements that need it, reusing it afterwards.
var container = document.id('container'),
settings = {
area: 100,
velocity: 1
};
container.addEvents({
'mouseover:relay(.hf-item-images)': function(e, el){
var scroll = el.retrieve('scroller');
if (!scroll){
// create instance the first mouseenter and store for later
scroll = new Scroller(el, settings);
el.store('scroller', scroll);
}
scroll.start();
},
'mouseout:relay(.hf-item-images)': function(e, el){
el.retrieve('scroller').stop();
}
});