<!--

function format(mask, img, stateName){

	var parsedText = '';
	var curPart = '';

	for (var index = 0; index <= mask.length; index++){

		var cChar = mask.charAt(index);
		
		if (cChar == '<'){
				parsedText += curPart;
				curPart = '';
		} else if (cChar == '>') {
				parsedText += ( curPart == 'state' ? stateName : img[curPart] );
				curPart = '';
		} else
				curPart += cChar;
	}

	return (parsedText + curPart);

}

function NavBar(name, imgIdArray){


	if (!document.images)				// document.images not supported
		return;

	this._name							= name;
	this._ImgIdArray				= imgIdArray;
	this._curDownImg	 			= document.getElementById( NavBar.arguments[2] );
	this._fileNameMask			= (NavBar.arguments[3] ? NavBar.arguments[3] : 'images/<id>_<state>.png');
	this._downStateName 		= 'down';
	this._upStateName				= 'up';
	this._overStateName			= 'over';
	this._clickStateName		= 'click';
	this._overDownStateName = 'overdown';

	for (var i in imgIdArray){

		var img = document.getElementById( imgIdArray[i] );

		img[this._name] = new Object;								// Create new object for this navigation-control group
				
		// preload and store the corresponding images in the image-objects' '_name' object.

		img[this._name].downImage   = new Image(); img[this._name].downImage.src  = format(this._fileNameMask, img, this._downStateName);
		img[this._name].upImage     = new Image(); img[this._name].upImage.src    = format('images/<id>.png', img, this._upStateName);
		img[this._name].clickImage  = new Image(); img[this._name].clickImage.src = format(this._fileNameMask, img, this._clickStateName);
		img[this._name].overImage   = new Image(); img[this._name].overImage.src  = format(this._fileNameMask, img, this._overStateName);

		img.onmouseover	  = handleMouseEvent;
		img.onmouseout		= handleMouseEvent;
		img.onclick				= handleMouseEvent;
		img.onmousedown		= handleMouseEvent;
		img.curNavBar			= this;

		if (img == this._curDownImg){
			
			if (img.filters)
				img.filters(0).src = img[this._name].downImage.src;
			else 
				img.src = img[this._name].downImage.src;

		}
	}
}
																 

function handleMouseEvent(e){

	if (!e) var e = window.event;

	var sender = (e.target ? e.target : e.srcElement);	// object detection for browser-compatibility
	var eventType = e.type;
	var nb = sender.curNavBar;

	if (sender != nb._curDownImg)

		if (!sender.filters){

			if (eventType == 'mouseover')
				sender.src = sender[nb._name].overImage.src;												// change source of image to overImage
			else if (eventType == 'mouseout')
				sender.src = sender[nb._name].upImage.src;												// change source of image to upImage
			else if (eventType == 'mousedown')
				sender.src = sender[nb._name].clickImage.src;											// change source of image to clickImage
			else if (eventType == 'click'){
				nb._curDownImg.src = nb._curDownImg[nb._name].upImage.src;				// change downObject's source to upImage's source
				(nb._curDownImg = sender).src = sender[nb._name].downImage.src;		// change downObject and source of image
			}

		} else{

			if (eventType == 'mouseover')
				sender.filters(0).src = sender[nb._name].overImage.src;
			else if (eventType == 'mouseout')
				sender.filters(0).src = sender[nb._name].upImage.src;												// change source of image to upImage
			else if (eventType == 'mousedown')
				sender.filters(0).src = sender[nb._name].clickImage.src;											// change source of image to clickImage
			else if (eventType == 'click'){
				nb._curDownImg.filters(0).src = nb._curDownImg[nb._name].upImage.src;				// change downObject's source to upImage's source
				(nb._curDownImg = sender).filters(0).src = sender[nb._name].downImage.src;		// change downObject and source of image
			}

		}
	
}


//-->