/*********************************
 *  17 May 2005 -- REVISED
 * This set of scripts handles rollovers for images. This
 * script has been tested for MSIE 6.0, Mozilla 1.2, Firefox
 * 1.0, Safari 1.2, OmniWeb 5.1.
 *
 * It relies on a consistent naming scheme which you partially 
 * define.
 *
 * The basic naming scheme is this:
 * 
 * <atom>-<state>.<format>
 * 
 * Where atom is the unique identifier for the family of
 * images, and state is the particular state of that image.
 * Example:
 * 
 * home-roll.gif
 * 
 * 'home' is the atom, 'roll' is the state and 'gif' is the
 * format. There are probably two other images named something
 * like:
 * 
 * home-sel.gif     // show this icon when we're on the home page
 * home-unsel.gif   // show this icon when we're not on the home page
 * 
 * You can define the actual name of the roll state by
 * assigning values to the kRoll variable somewhere in your
 * script. The script does not care what the name of the
 * non-rollover state is as long as the basic naming scheme is
 * followed. Note that the atom particle can itself contain
 * hyphens; the regular expression that matches the image name
 * only looks for the last part of the filename to be preceded
 * by a hyphen.
 * 
 * 
 * Calling The Rollover Script
 * 
 * You should call buildRollovers() after the page has loaded.
 * It is assumed that these image elements exist at the
 * time that buildRollovers is called. 
 * 
 * buildRollovers() iterates through every image of the
 * document (document.images) looking for images that have a
 * class of kRollClass (default="hasRolloverImg"). Upon finding
 * such an image, it adds properties to that element, the
 * rollover image and the source image. These properties are
 * attached to the image element itself, obviating the need for
 * a dedicated array or object to keep track of all images in
 * the document. Each image keeps track of its own rollovers.
 * The rollover image is determined based upon the naming
 * scheme mentioned above, using a regexp to figure everything
 * out. Finally, handler functions are assigned directly.
 * 
 * The only things you need to do to implement the rollovers
 * are:
 * 
 * 1. Name your unselected, selected, and rollover images with
 *    the same consistent scheme (and make sure it is reflected 
 *    in the defaults).
 * 2. Give each image that has a rollover the class of 
 *    "hasRolloverImg" (or whatever you decide to call the class) 
 * 3. Call buildRollovers after the page has loaded.
 *
 * Hope that makes sense.
 * DavidK@hob.com
 *
 */

ColorSuffixes = Array("4C",  "2C", "GR", "BW", "4R","WB");

/****************************************************************** Defaults */
if (!kRoll)          var kRoll = "on"; 
if (!kSelected)      var kSelected = "sel"; 
if (!kUnselected)    var kUnselected = "off"; 
if (!kRollClass)     var kRollClass = "hasRolloverImg";
if (!kDownloadSetId) var kDownloadSetId = "Downloads";
                     var kState = "state";
                     var kRegexImg = "^(.+)([^\/]+)-([a-zA-Z0-9]+)\.(gif|jpg)$";

/***************************************************************** Functions */
function showHoverImg (img) {
	img.src = img[kRoll].src;
}

function showStateImg (img) {
	img.src = img[kState].src;
}

// addRolloverHandlers generates the appropriate rollover image names
// and adds the rollover handlers that make a rollover work.
function buildRollovers (  ) {
	var mouseOverHandler = new Function("showHoverImg(this);");
	var mouseOutHandler = new Function("showStateImg(this);");
	
	// look through every image in the document
	for (var i = 0; i < document.images.length; i++) {
		var img = document.images[i];
		
		// if the class includes the rollover class, start adding rollover code
		if (img.className.indexOf( kRollClass ) != -1) {
			// each rollover image has two keys: the named rollover state
			// and the named non-rollover state
			img[kRoll]  = new Image();
			img[kState] = new Image();
		
			// using a regexp to get the name of the image file, 
			// generate (guess) the name of the rollover image.
			// store both in a property of the image itself
			var re = new RegExp( kRegexImg );
			if (re.test(img.src)) {
				// RegExp.test returns true if the regexp matched the string you sent it
				img[kRoll].src  = 
					img.src.replace( re, "$1$2-" + kRoll + ".$4");
				img[kState].src = 
					img.src;
			}
			
			// Add handler functions to enable rollover switching
			img.onmouseover = mouseOverHandler;
			img.onmouseout = mouseOutHandler;
		}
	}
}

function switchColorSet ( idStub, activeSuffix, suffixList ) {
	// use for switching out sets of downloads for the logo color variations.
 	
 	// Switch the representational image;
 	// all related images should have a two-character ID;
 	// Use the activeSuffix to replace this ID. 
 	var img = document.getElementById ( idStub );
	var re = new RegExp ("^(.+)(" + ColorSuffixes.join('|') +  ")\.(gif|jpg)$"); 
	var replaceString = "$1" + activeSuffix + ".$3";
	img.src = img.src.replace (re, replaceString);

	// Switch download set; sets are all contained in HTML document; all but
	// one are hidden by the stylesheet using display=none
	for (var i = 0; i < suffixList.length; i++) {
		var obj = document.getElementById( idStub + kDownloadSetId + suffixList[i] );
		if ( -1 == activeSuffix.indexOf( suffixList[i] ) ) {
			obj.style.display = "none";
		} else {
			obj.style.display = "";
		}
	}
	
	
}

function switchWidgetSet ( clickedWidget ) {
 	// IN: clickedWidget, an img element
 	//
 	// This will toggle the img element to a selected version of the widget,
 	// and turns any other selected widget to an unselected state.
 	// Actually, it does this in reverse. 
 	// This is highly dependent on the structure of the HTML document.
 	// We're assuming that the img is siblings with all other widgets. 
 	var p = clickedWidget.parentNode;
 	var re = new RegExp( kRegexImg );
 	
 	for (var i=0; i < p.childNodes.length; i++)
 	{
 		var el = p.childNodes[i];
 		
 		if ( el.nodeName == clickedWidget.nodeName ) { // if same type of node as clickedwidget
 			if ( el.nodeName.toLowerCase() == 'img' ) { // change p.childNodes[i] to unselected state
 				if (re.test(el.src)) { // change state value to unselected state
					el.src  = 
						el.src.replace( re, "$1$2-" + kUnselected + ".$4");
					el[kState].src  = 
						el.src.replace( re, "$1$2-" + kUnselected + ".$4");
				}
			}
 		}
 		
 	}
 	if ( clickedWidget.nodeName.toLowerCase() == 'img' ) {
 		if (re.test(clickedWidget.src)) {
 			clickedWidget.src  = 
				clickedWidget.src.replace( re, "$1$2-" + kSelected + ".$4");
 			clickedWidget[kState].src  = 
				clickedWidget[kState].src.replace( re, "$1$2-" + kSelected + ".$4");
		}
	}
 }