function RollableImage(theDocument, rootDir, name) {
    this.theDocument  = theDocument;
    this.rootDir      = rootDir;// the directory in which the images are found, if it is the same directory that the web page is, use '.'
    if(this.rootDir.charAt(this.rootDir.length - 1) != '/')
        this.rootDir += '/';
    this.name         = name;// the name and/or id value for the <img> tag
    // the following are optional fields
    this.prefix           = (arguments.length >= 4) ? arguments[3] : '';// the pre fix if any such as btn-<image name> this field may be an empty string
    this.ovrId            = (arguments.length >= 5) ? arguments[4] : '-ovr';// this whatever you wnat to use for an ID for the over image, it must be in the for of <image name><over-id> if you leave it blank it will be <image name>-ovr
    this.sufix             = (arguments.length == 6) ? arguments[5] : '.gif';// self explanitory
    
    this.offImage       = new Image();
    this.offImage.src  = this.rootDir + this.prefix + this.name + this.sufix;
    this.ovrImage      = new Image();
    this.ovrImage.src = this.rootDir + this.prefix + this.name + this.ovrId + this.sufix;
    this.isOff = true;
}
// just for debugging
RollableImage.prototype.showImages = function() {
                                        var s = '';
                                        for(var i=0;i<this.theDocument.images.length;i++)
                                            s += this.theDocument.images[i].name + '\n';
                                        alert(s);
                                    }

RollableImage.prototype.getOffStateSrc = function(){return this.offImage.src;}
RollableImage.prototype.getOvrStateSrc = function(){return this.ovrImage.src;}

RollableImage.prototype.setOffStateSrc = function(src){this.offImage.src = src;}
RollableImage.prototype.setOvrStateSrc = function(src){this.ovrImage.src = src;}

RollableImage.prototype.matchName      = function(name) {return this.name == name;}
// this is a "smart function" that knows the current state and rolls accordingly
RollableImage.prototype.roll           = function () {//alert(this.getOvrStateSrc());
                                             document.getElementById(this.name + '_img').src = (this.isOff) ? 
                                                                                         this.getOvrStateSrc() : 
                                                                                         this.getOffStateSrc();
                                             this.isOff = !this.isOff;
                                         }