// Example usage
// window.onload = "javascript:mapRollOvers();"
//<a href='page.htm' onmouseover='ubRoll.my_nav1.over();' onmouseout='ubRoll.my_nav1.out();'><img name='my_nav1_ROLL' src='images/nav1_off.gif' width='100' height='10' border='0'></a>

var isRollLoaded = false;
ubRoll = new Object();  

function mapRollOvers(){
	var rollDescriptor = '_ROLL'
	var onExtension = '_on';
	var offExtension = '_off';
	for (var i=0; i<document.images.length; i++) {
		if (document.images[i].name.indexOf(rollDescriptor) != -1) {
			fileSrc = document.images[i].src;
			extOffset = fileSrc.lastIndexOf('.');
			stateOffset = fileSrc.lastIndexOf('_');
			fileName = fileSrc.substring(0, stateOffset);
			fileExt = fileSrc.substring(extOffset, fileSrc.length);
			rollName = document.images[i].name.substring(0, document.images[i].name.length - 5);

			ubRoll[rollName] = new rollImg(rollName + rollDescriptor, fileName + onExtension + fileExt,
				fileName + offExtension + fileExt);
			ubRoll[rollName].mapImage();
		}
	}
	isRollLoaded = true;
}

function rollImg(imageName, onSrc, offSrc, divNameArray){
	this.imageName = imageName;
	if(document.layers){
		this.layerString = ""
		if(divNameArray){
			for(var i = 0; i < divNameArray.length; i++){this.layerString += "document.layers." + divNameArray[i] + ".";}
		}
		this.layerString += "document.images." + imageName;
	}
	this.onImage = new Image();
	this.onImage.src = onSrc;
	this.offImage = new Image();
	this.offImage.src = offSrc;
}

function out(){	if(isRollLoaded) this.childImg.src = this.offImage.src; }
rollImg.prototype.out = out;

function over(){ if(isRollLoaded) this.childImg.src = this.onImage.src; }
rollImg.prototype.over = over;		

function mapImage(){
	this.childImg = (document.layers)?eval(this.layerString):document.images[this.imageName];
}	
rollImg.prototype.mapImage = mapImage;