var Skimmer = Class.create({
    initialize: function(elements) {
        
        this.elements = elements;
        this.index = 0;

        elements.each( function(s, index) {
            if (index != 0) {
                s.hide();
            } else {
                s.show();
                this.setEvents(s);
            }
        }.bind(this));

    },

    setEvents: function(element) {
        
        element.observe('mousemove', this.mousemove.bind(this));
        element.observe('mouseout', this.setImage.bind(this));
    
    },

    removeEvents: function(element) {
        element.stopObserving('mousemove');
        element.stopObserving('mouseout');
    },
    
    mousemove: function(e) {
        
        var x = Event.pointerX(e);
        var index = Math.floor(x / 20) % this.elements.length;
        this.setImage(index);
    
    },

    setImage: function(index) {
        
        if (typeof(this.elements[index]) == 'undefined') {
            index = 0;
        }

        this.elements[this.index].hide();
        this.removeEvents(this.elements[this.index]);

        this.elements[index].show();
        this.setEvents(this.elements[index]);
        
        this.index = index;

    }

});

function initSkimmer() {
    
    var elements = $$('img[rel^=skimmer]');
    var skimmerElements = new Hash();
    
    elements.each( function(s) {
        var collection = s.readAttribute('rel').replace('skimmer[', '').replace(']', '');
        if (!skimmerElements.get(collection)) {
            skimmerElements.set(collection, new Array());
        }
        skimmerElements.get(collection).push(s);
    });
    
    skimmerElements.each( function(s, index) {
        new Skimmer(skimmerElements.get(s[0]));
    });

}

document.observe('dom:loaded', initSkimmer);