/*************
* Simple Javascript image-swapping button 
* Just set up for a normal button image using <a> wrapping <img>
* Make sure you create three states:
*   myImage-up.gif
*   myImage-over.gif
*   myImage-down.gif
* And set the initial image src to the 'up' version.
* Give the img tag an id attribute.
* Then call jbutton_make(id), where id is the id attribute you gave to the image.
* It should all Just Work.
* 
* Ian 20/04/2007
*/
function jsb_makeImageButton(id)
{
	if (!document.images)
		return;
		
	var button=document.getElementById(id);
		
	var exp = new RegExp(/^(.*)(\-.*)(\..*)$/);
	var match = exp.exec(button.src);
	var origSrc=match[0];
	var path=match[1];
	var ext=match[3];
		
	var over=new Image();
	var down=new Image();
	var up=new Image();
	up.src=origSrc;
	down.src=path+"-down"+ext;
	over.src=path+"-over"+ext;
	
	button.onmouseover=function(){button.src=over.src;}
	button.onmouseout=function(){button.src=up.src;}
	button.onmousedown=function(){button.src=down.src;}
	button.onmouseup=function(){button.src=over.src;}
}

/*************
* Does the same as the above, but uses a table cell's background.
* 
* Ian 20/04/2007
*/
function jsb_makeCellButton(id)
{
	if (!document.images)
		return;
		
	var cell=document.getElementById(id);
		
	var exp = new RegExp(/^url\(((.*)(\-.*)(\..*))\)$/);
	var match = exp.exec(cell.style.backgroundImage);
	var origSrc=match[1];
	var path=match[2];
	var ext=match[4];
		
	var over=new Image();
	var down=new Image();
	var up=new Image();
	up.src=origSrc;
	down.src=path+"-down"+ext;
	over.src=path+"-over"+ext;
	
	cell.onmouseover=function(){cell.style.backgroundImage="url('"+over.src+"')";}
	cell.onmouseout=function(){cell.style.backgroundImage="url('"+up.src+"')";}
	cell.onmousedown=function(){cell.style.backgroundImage="url('"+down.src+"')";}
	cell.onmouseup=function(){cell.style.backgroundImage="url('"+over.src+"')";}
}