/* SPRITE STYLE IMAGE ROLLOVER
 *
 * One very wide gif image displayed as a background image which contains all 
 * map rollover variations is dynamically repositioned onmouseover. The viewport
 * is the width of one map image, meaning the remainder are off-screen.
 * The ocuID is multiplied with the ocuMapImageWidth to scroll the background image by 
 * the required amount to position it within the viewport.
 *
 *    default: [#]######
 *    ocuId=2: ##[#]####
 *    ocuId=4: ####[#]##
 *     etc..
 * 
 * Note that the background is attached to the <img> with id=ocuMap
 * and src= to a transparent GIF image. The width attribute specifies
 * the viewport width.
 * 
 * Producing one large gif of 39kb loads quicker over one http txn 
 * rather than 7 smaller gifs with a sum of 45kb.
 *
 * Dominic Winsor, IT Services, Hampshire Constabulary
*/

// map element and default width
var ocuMap;
var ocuMapImageWidth;

// initialise the rollover map variables
// called on Image.onload() like so: <img onload="ocuHighlightInit(this)"
function ocuHighlightInit(mapRef)
{
	ocuMap = mapRef;
	ocuMapImageWidth = ocuMap.width;
}


// scroll element background image x position by required amount
function ocuHighlight(ocuId)
{ 
	if(ocuMap) ocuMap.style.backgroundPosition = (ocuId) ? -(ocuMapImageWidth*ocuId)+"px 0" : "0px 0px"; 
}