generic.img = Class.create(
{
    initialize: function(/* Object */imgNode, /* Array */states) {
        //console.log("generic.img: called on imgNode "+imgNode.id);
        this.node = imgNode;
        this.preloaded = {};
        // get filename bits 
        var src = this.node.src;
        var bits = src.match(/^(.*)_(on|off|sel|dis)\.(.*?)$/);
        if ( bits == null ) { return false; }
        this.srcBase = bits[1];
        this.srcExt = bits[3];
        if (!this.srcExt) return false;
        this.states = states;
        this.preload();
    },
    preload: function() {
        // note: version arg must correspond to suffix of image, i.e.:
        // if default image name is image_name_off.jpg, arg value "on" looks for image_name_on.jpg
        if (!this.states) return;
        for (var i=0;i<this.states.length;i++) {
            var state = this.states[i];
            var separator = (state !== "" ? "_" : "");
            var preloadSrc = this.srcBase + separator + state + '.' + this.srcExt;
            var pl = new Image();               
            pl.src = preloadSrc; 
            this.preloaded[state] = pl;
        }
    },
    changeSrc: function(state) {
        var p = (this.preloaded ? this.preloaded[state] : null);
        if (!this.srcBase) return;
        // use preloaded src ref
        if (p) {
            this.node.src = p.src;
            
        // else load img via path
        } else {
            this.node.src = this.srcBase + '_' + state + '.' + this.srcExt;
        }
    }
});


generic.rollover = Class.create( 
{
    initialize: function(/* Object */imgNode,/* Object */triggerNode){
        var trigger = (triggerNode == null ? imgNode : trigger);
        this.img = new generic.img(imgNode, ["off","on"]);
        trigger.observe("mouseover", this.onMouseOver.bind(this));
        trigger.observe("mouseout", this.onMouseOut.bind(this));
    },
    onMouseOver: function(e) {
        if (!e.target.hasClassName("disable_rollover")) {
            this.img.changeSrc("on");
        }
    },
    onMouseOut: function(e) {
        if (!e.target.hasClassName("disable_rollover")) {
            this.img.changeSrc("off");
        }
    }
});