function ImageMap ( id, imageFile, height, width ) {
	this.init( id, imageFile, height, width );
}

ImageMap.prototype.init = function ( id, imageFile, width, height ) {
	this.imageID = id;
	this.imageFile = imageFile;
	this.imageHeight = height;
	this.imageWidth = width;

	this.mouseover = new Array();
	this.maps = new Array();
	this.names = new Array();
	this.urls = new Array();
	this.shapes = new Array();
	this.coords = new Array();
}

ImageMap.prototype.setDefault = function ( def ) {
	this.def = def;
}

ImageMap.prototype.addMap = function ( id, name, url, mo, shape, coords ) {
	var string="";
	var total = this.maps.length

	this.mouseover [ total ] = mo;
	this.maps[ total ] = id;
	this.names[ total ] = name;
	this.urls[ total ] = url;
	this.shapes[ total ] = shape;
	this.coords [ total ] = coords;
}

ImageMap.prototype.toHTML = function () {

	var string="";

	// write the images in a DIV series
	string+="<div style=\"position:relative; text-align:left; width:"+ this.imageWidth +"px\";\">";

	// this div keeps the height & width
	string+="<div style=\"height:"+ (parseInt(this.imageHeight)+59) +"px; width:"+ this.imageWidth +"px\">&nbsp;</div>";

	// mouse up/over/down images
	string+="<img style=\"position:absolute; top:0px; visibility:visible\" id="+ this.imageID +"Up usemap=#"+ this.imageID +" src="+ this.imageFile + "_" + this.def + ".png width="+ this.imageWidth +" height="+ this.imageHeight +" border=0>"
	string+="<img style=\"position:absolute; top:0px; visibility:hidden\" id="+ this.imageID +"Over usemap=#"+ this.imageID +" src="+ this.imageFile + "_Over.png width="+ this.imageWidth + " height="+ this.imageHeight +" border=0>"
	string+="<img style=\"position:absolute; top:0px; visibility:hidden\" id="+ this.imageID +"Down usemap=#"+ this.imageID +" src="+ this.imageFile + "_" + this.def + ".png width="+ this.imageWidth + " height="+ this.imageHeight +" border=0>"

	// span below
	string+="<span style=\"font: italic 10pt Times New Roman, Times Roman, Times, Serif; position:absolute; width:"+ this.imageWidth +"; top:"+ (parseInt(this.imageHeight)) +"px; left:0px; text-align:center\"> click a component of the<br>wellness logo for more<br>information on that topic  </span>";
	string+="</div>";

	// write the map
	string+="<map id='"+ this.imageID +"' name='"+ this.imageID +"'>"
	for( x=0; x<this.maps.length; x++ ) {
		string+="<area id='"+ this.maps[x] +"' shape="+ this.shapes[x] +" href='"+ this.urls[x] +"' alt='"+ this.names[x] +"' coords='" + this.coords[x] + "'>"
	}
	string+="</map>"
	return string;
}

ImageMap.prototype.attachEvents = function () {
	var i, j, areas;
	if (document.getElementById) {

		areas = document.getElementById(this.imageID).getElementsByTagName("area");
		for (j = 0; j < areas.length; j++) {
			if( this.mouseover[j] == "1" ) {
				areas[j].onmousedown = swap;
				areas[j].onmouseout = swap;
				areas[j].onmouseover = swap;
				areas[j].onmouseup = swap;
			}
		}
	}

}

function swap(evt) {

	evt = (evt) ? evt : event;
	var elem = (evt.target) ? evt.target : evt.srcElement;
	var imgClass = elem.parentNode.name;
	var imgStyle;
	if ( elem.shape == "RECT" ) {
		var coords = elem.coords.split(","); // convert coords to clip
		var clipVal = "rect(" + coords[1] + "px " + coords[2] + "px " + coords[3] + "px " + coords[0] + "px)";

		switch (evt.type) {

			case "mousedown" :
				imgStyle = document.getElementById(imgClass + "Down").style;
				imgStyle.clip = clipVal;
				imgStyle.visibility = "visible";
				break;

			case "mouseout" :
				document.getElementById(imgClass + "Over").style.visibility = "hidden";
				document.getElementById(imgClass + "Down").style.visibility = "hidden";
				break;

			case "mouseover" :
				imgStyle = document.getElementById(imgClass + "Over").style;
				imgStyle.clip = clipVal;
				imgStyle.visibility = "visible";
				break;

			case "mouseup" :
				document.getElementById(imgClass + "Down").style.visibility = "hidden";
				// guarantee click in IE
				if (elem.click) {
					elem.click();
				}
				break;
		}

		evt.cancelBubble = true;
		return false;
	}

}




// new imageMap ( name, width, height )
var Nav = new ImageMap("mapfile", "/hrb/images/ww/ww_withoutouter",  "175", "175");
// addMap ( id, name, url, shape, coords )
Nav.addMap("guy", "Workplace Wellness", "/hrb/hw/index.htm", "0", "poly", "75,59, 2,76, 68,82, 68,91, 35,153, 37,154, 87,115, 139,155, 105,91, 105,82, 171,76,  98,59, 104,45, 104,34, 97,25, 88,22, 80,24, 72,29, 69,37, 69,45");
Nav.addMap("physical", "Physical Wellness", "/hrb/hw/physical/index.htm", "0", "poly", "43,11, 75,59, 1,75, 15,36");
Nav.addMap("social", "Social Wellness", "/hrb/hw/social/index.htm", "0", "poly", "46,11, 69,45, 69,32, 77,24, 87,21, 99,26, 104,34, 104,46, 128,12, 105,1, 70,1");
Nav.addMap("spiritual", "Spiritual Wellness", "/hrb/hw/spiritual/index.htm", "0", "poly", "130,14, 99,59, 171,75, 162,43, 137,16");
Nav.addMap("emotional", "Emotional Wellness", "/hrb/hw/emotional/index.htm", "0", "poly", "171,76, 105,82, 105,91, 139,155, 165,126, 173,98, 173,76");
Nav.addMap("environmental", "Environmental Wellness", "/hrb/hw/environmental/index.htm", "0", "poly", "36,155, 87,115, 137,154, 115,169, 86,173, 55,167");
Nav.addMap("intellectual", "Intellectual Wellness", "/hrb/hw/intellectual/index.htm", "0", "poly", "2,76, 69,82, 69,80, 35,154, 17,137, 3,111");