// how many of the headers are Cool Tools? The rest are Hot Topics; used when building table of links
var tmphref = "/sunsafe/cooltools/coloring/creative.htm#topic=1&page=1";
var lastTool = 6; // index of last Cool Tool, then Hot Topics begin
var headers = [
	[["Songs", "/sunsafe/cooltools/song1.htm#topic=0&page=0"],
		 ["Are You Covered", "Javascript: _blurLinks(); launchTool('song', 1)"],
		 ["Fun in the Sun", "Javascript: _blurLinks(); launchTool('song', 2)"],
		 ["I Need Sunscreen", "Javascript: _blurLinks(); launchTool('song', 3)"],
		 ["Shady Fun", "Javascript: _blurLinks(); launchTool('song', 4)"],
		 ["This Smart Child", "Javascript: launchTool('song', 5)"]],
	[["Coloring Activities", "/sunsafe/cooltools/coloring1.htm#topic=1&page=0"],
		 ["Creative Coloring", "/sunsafe/cooltools/coloring/creative.htm#topic=1&page=1"],
		 ["Connect-the-Dots", "/sunsafe/cooltools/coloring/connect.htm#topic=1&page=2"],
		 ["Which Is More Sun Safe?", "/sunsafe/cooltools/coloring/moresunsafe.htm#topic=1&page=3"],
		 ["Which Doesn't Belong?", "/sunsafe/cooltools/coloring/notbelong.htm#topic=1&page=4"],
		 ["Sun Safe Numbers", "/sunsafe/cooltools/coloring/numbers.htm#topic=1&page=5"],
		 ["Masks", "/sunsafe/cooltools/coloring/masks.htm#topic=1&page=6"],
		 ["Puppets", "/sunsafe/cooltools/coloring/puppets.htm#topic=1&page=7"],
		 ["Stickers", "/sunsafe/cooltools/coloring/stickers.htm#topic=1&page=8"]],
	[["Indoor Activities", "/sunsafe/cooltools/indoor1.htm#topic=2&page=0"],
		 ["Flannel Board", "/sunsafe/cooltools/indoor/flannel.htm#topic=2&page=1"],
		 ["Posters", "/sunsafe/cooltools/indoor/posters.htm#topic=2&page=2"],
		 ["Board Games", "/sunsafe/cooltools/indoor/boardgames.htm#topic=2&page=3"],
		 ["Hands-On Activities", "/sunsafe/cooltools/indoor/handson.htm#topic=2&page=5"]],
	[["Outdoor Activities", "/sunsafe/cooltools/outdoor1.htm#topic=3&page=0"],
		 ["What Is Shade?", "Javascript: _blurLinks(); launchTool('outdoor', 1)"],
		 ["Homemade Sundial", "Javascript: _blurLinks(); launchTool('outdoor', 2)"],
		 ["Shade & Shadows", "Javascript: _blurLinks(); launchTool('outdoor', 3)"]],
	[["Fact Sheets", "/sunsafe/cooltools/fact1.htm#topic=4&page=0"],
		 ["Stay in the Shade", "Javascript: _blurLinks(); launchTool('fact', 1)"],
		 ["Dress for Sun", "Javascript: _blurLinks(); launchTool('fact', 2)"],
		 ["Use Sunscreen", "Javascript: _blurLinks(); launchTool('fact', 3)"],
		 ["Learn About Sun", "Javascript: _blurLinks(); launchTool('fact', 4)"]],
	[["How Do I...?", "/sunsafe/cooltools/howdo1.htm#topic=5&page=0"],
		 ["Find Related Info", "Javascript: _blurLinks(); launchTool('howdo', 1)"],
		 ["Test For Reactions", "Javascript: _blurLinks(); launchTool('howdo', 2)"],
		 ["Check Cancer Risk", "Javascript: _blurLinks(); launchTool('howdo', 3)"],
		 ["Track My Shade", "Javascript: _blurLinks(); launchTool('howdo', 4)"],
		 ["Find More Shade", "Javascript: _blurLinks(); launchTool('howdo', 5)"],
		 ["Lobby For Shade", "Javascript: _blurLinks(); launchTool('howdo', 6)"]],
	[["Child Care Forms", "/sunsafe/cooltools/forms1.htm#topic=6&page=0"],
		 ["Parents' Questions", "Javascript: _blurLinks(); launchTool('forms', 1)"],
		 ["Sun Safety Policymaker", "Javascript: _blurLinks(); launchTool('forms', 2)"],
		 ["Field Trip Permission", "Javascript: _blurLinks(); launchTool('forms', 3)"]],
	[["Stay in the Shade", "/sunsafe/hottopics/ss1.htm#topic=7&page=0"],
		 ["Avoid midday sun", "/sunsafe/hottopics/ss2.htm#topic=7&page=1"],
		 ["Use existing shade", "/sunsafe/hottopics/ss3.htm#topic=7&page=2"],
		 ["Create shade", "/sunsafe/hottopics/ss4.htm#topic=7&page=3"],
		 ["Seek shade", "/sunsafe/hottopics/ss5.htm#topic=7&page=4"],
		 ["Lobby for shade", "/sunsafe/hottopics/ss6.htm#topic=7&page=5"]],
	[["Dress for Sun", "/sunsafe/hottopics/dfs1.htm#topic=8&page=0"],
		 ["Wear a wide hat", "/sunsafe/hottopics/dfs2.htm#topic=8&page=1"],
		 ["Wear long clothes", "/sunsafe/hottopics/dfs3.htm#topic=8&page=2"],
		 ["Choose safe fabrics", "/sunsafe/hottopics/dfs4.htm#topic=8&page=3"],
		 ["Wear sunglasses", "/sunsafe/hottopics/dfs5.htm#topic=8&page=4"],
		 ["Protect the feet", "/sunsafe/hottopics/dfs6.htm#topic=8&page=5"]],
	[["Use Sunscreen", "/sunsafe/hottopics/su1.htm#topic=9&page=0"],
		 ["Apply year-round", "/sunsafe/hottopics/su2.htm#topic=9&page=1"],
		 ["Use SPF 15-30", "/sunsafe/hottopics/su3.htm#topic=9&page=2"],
		 ["Cover exposed skin", "/sunsafe/hottopics/su4.htm#topic=9&page=3"],
		 ["Apply indoors", "/sunsafe/hottopics/su5.htm#topic=9&page=4"],
		 ["Apply a lot & reapply", "/sunsafe/hottopics/su6.htm#topic=9&page=5"],
		 ["Wear SPF lip balm", "/sunsafe/hottopics/su7.htm#topic=9&page=6"],
		 ["Use UVA/UVB sunscreen", "/sunsafe/hottopics/su8.htm#topic=9&page=7"],
		 ["Know the ingredients", "/sunsafe/hottopics/su9.htm#topic=9&page=8"],
		 ["Be aware of problems", "/sunsafe/hottopics/su10.htm#topic=9&page=9"]],
	[["Learn about Sun", "/sunsafe/hottopics/las1.htm#topic=10&page=0"],
		 ["Enjoy sun's benefits", "/sunsafe/hottopics/las2.htm#topic=10&page=1"],
		 ["Know sun's harms", "/sunsafe/hottopics/las3.htm#topic=10&page=2"],
		 ["Learn about UV", "/sunsafe/hottopics/las4.htm#topic=10&page=3"],
		 ["Use the UV Index", "/sunsafe/hottopics/las5.htm#topic=10&page=4"],
		 ["Identify cancer risk", "/sunsafe/hottopics/las6.htm#topic=10&page=5"],
		 ["Watch for cancer", "/sunsafe/hottopics/las7.htm#topic=10&page=6"]]
	];



// get parameter from query of URL
function getUrl(paramName) {
	var tmpstr = location.hash.toString();
	tmpstr = tmpstr.substring(tmpstr.indexOf('#')+1, tmpstr.length);
	var a = tmpstr.split("&");
	for (s=0; s<a.length; s++) {
		var tmp = "";
		tmp = a[s] + '&'; // guarantee separator
		var i = tmp.indexOf(paramName);
		if (i>-1) {
			tmp = tmp.substring(i+paramName.length+1); // jump to param value
			return(tmp.substring(0, tmp.indexOf('&'))); // if found, return the result
			}
		}
	return(""); // if no match, return nothing
	}

// -------------------------------------
// Functions for toggling menus
function _getElement(eName) {
	if (document.all) {
		return(eval("document.all." + eName));
		}
	else {
		return(document.getElementById(eName));
		}
	}

function rollOn(obj) {
	obj.style.backgroundColor = "#FFFFBB";
	}
function rollOff(obj) {
	obj.style.backgroundColor = "";
	}

function toggleMenu(menuIndex) {

	if (menuIndex == null || menuIndex == "") { // url does not have hash, no menuIndex passed
		// close all subMenus
		for (x=0; x<headers.length; x++) {
			mObj = _getElement("_subMenu"+x);
			if(mObj) {
				mObj.style.display="none";
				}
			}
		}
	else {
		var mObj = null;
		// first close all menus / but toggle this one.
		var mi = 0;
		mObj = _getElement("_subMenu"+mi);
	
		while (mObj!=null) {
			if (mObj.style.display!=null) {
				if (mi!=menuIndex) mObj.style.display="none";
				else mObj.style.display="block"; // stays open, no toggling because it displays a page, too
				}
			mi++;
			mObj = _getElement("_subMenu"+mi);
			}
		toggleMenuHighlight(menuIndex)
		_blurLinks();
//		return(false);    // stop std browser action -- don't think we need to do this, since we do go to a new page
		}
	}

function toggleMenuHighlight(menuIndex) {
	var mObj = null;
	var mObjTic = null;
	var mObjLine = null;
	var mi = menuIndex;
	// turn OFF all Menu highlights
	for (x=0; x<headers.length; x++) {
		mObj = _getElement("_menuItem"+x);
		mObjTic = _getElement("_menuTic"+x);
		if(mObj) {
			mObj.style.backgroundColor = "";
			mObj.style.borderBottomColor="#FFFFFF";
			mObjTic.style.backgroundColor = "";
			mObjTic.style.borderBottomColor="#FFFFFF";
			}
		}
	// turn ON the one we want
	mObj = _getElement("_menuItem"+mi);
	mObjTic = _getElement("_menuTic"+mi);
	mObjLine = _getElement("_menuItemLine"+mi);
	if (mObj) {
		mObjLine.style.borderBottomColor="#000000";
		mObjTic.style.borderBottomColor="#000000";
		//	mObjTic.style.backgroundColor = "#FFFFBB";
		//	mObj.style.backgroundColor = "#FFFFBB";
		}
	}

function toggleSubHighlight(topic, subMenuIndex) {
	var mObj = null;
	var mObjTic = null;
	var mi;
	var t;
	// turn OFF all submenu highlights
	for (x=0; x<headers.length; x++) {
		if (headers[x].length > 1) {
			mi = 1;
			for (z=1; z<headers[x].length; z++) {
				mObj = _getElement("_subMenuItem"+x+"_"+mi);
				mObjTic = _getElement("_tic"+x+"_"+mi);
				if(mObj) {
					mObj.style.backgroundColor = "";
					mObj.style.borderBottomColor="#FFFFFF";
					}
				if(mObjTic) {
					mObjTic.style.backgroundColor = "";
					mObjTic.style.borderBottomColor="#FFFFFF";
					}
				mi++;
				}
			}
		}
	// turn ON the one we want
	mi = subMenuIndex;
	t = topic;
	mObj = _getElement("_subMenuItem"+t+"_"+mi);
	if(mObj) {
		mObj.style.borderBottomColor="#000000";
		//	mObj.style.backgroundColor = "#FFFFBB";
		}
	mObjTic = _getElement("_tic"+t+"_"+mi);
	if(mObj) {
		mObjTic.style.borderBottomColor="#000000";
		//	mObjTic.style.backgroundColor = "#FFFFBB";
		}
	_blurLinks();
	}

// if using below, add to cells [onclick="goClick('+ h +', '+ r +')"] and [onclick="goClick('+ h +',0)"]
function goClick(h, r) {
	location = headers[h][r][1];
	}

function hover(obj) {
	obj.style.cursor = "hand";
	}
// below here not used; remove when done if still not needed
function _displayAltText() {

   var aObj = _getElement("_altText");
   if (document.all && aObj!=null) {
      aObj.style.top = (parseInt(event.clientY-event.offsetY)-15) + "px";
      aObj.style.left = (parseInt(event.clientX-event.offsetX)+20) + "px";
      aObj.style.visibility = "visible";
      }
   }

function _hideAltText() {

   var aObj = _getElement("_altText");
   if (aObj!=null) {
      aObj.style.visibility = "hidden";
      }
   }



// write out a menu table, starting with Cool Tools
document.writeln('<div id="ctlogo" style="position: relative; top: 0">');
document.writeln('<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="/sunsafe/images/ctools.gif" alt="Cool Tools Menu" width="214" height="96"></td></tr></table>');
document.writeln('</div>');
document.writeln('<div id="ctmenu" style="position: relative; top: 0">');
document.writeln('<table width="100%" border="0" cellspacing="0" cellpadding="0">');

var stripe = "toolsbg.gif";
for (h=0; h<headers.length; h++) {
	document.writeln('<tr><td>');
		document.writeln('<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>');
			document.writeln('<td width="28" class="boxfont" background="/sunsafe/images/'+stripe+'">&nbsp;</td>');
			document.writeln('<td width="6" id="_menuTic'+h+'" class="boxfont" style="border-bottom: #FFFFFF solid 1px">&nbsp;</td>');
			// enclose next cell with table so it can be variable size
			document.writeln('<td id="_menuItemLine'+h+'" class="boxfont" style="border-bottom: #FFFFFF solid 1px"><table cellpadding="0" cellspacing="0" border="0"><tr>');
				document.writeln('<td id="_menuItem'+h+'" class="boxfont" style="border-bottom: #FFFFFF solid 1px" onMouseover="rollOn(this)" onMouseout="rollOff(this)">');
				// Probably won't be used, but in case we want script links, it's here
				if (headers[h][0][1].indexOf("javascript:")>=0) {
			//		if (bd.is_nav4) document.write("<a href='javascript:void 0' class='leftmenhdr' onMouseover='status=\" \"; return true;'>" + headers[h][0][0] + "</a>");
			//		else {
						document.write('<a href="#" class="menulink" onClick="' + headers[h][0][1] + '">');
						document.write(headers[h][0][0] + '</a></td>');
			//			}
					}
				else {
			//		if (bd.is_nav4) out.print("<a href='" + headers[h][0][1] + "' class='leftmenhdr'>" + headers[h][0][0] + "</a>");
			//		else {
						document.write('<a href="' + headers[h][0][1] + '" class="menulink">');
						document.write(headers[h][0][0] + '</a></td>');
			//			}
					}
			//finish up the variable table here
			document.writeln('</tr></table></td>');
		document.writeln('</tr></table>');
	document.writeln('</td></tr>');
// if the item has a submenu of items, they'll write out here; if there is not submenu, a blank row will be created
	document.writeln('<tr><td align="left" background="/sunsafe/images/'+stripe+'">');
		document.write('<div id="_subMenu' + h + '">');
		document.write('<table width="100%" cellpadding="0" cellspacing="0" border="0">');
			for (r=1; r<headers[h].length; r++) {
					document.writeln('<tr>');
					document.writeln('<td width="28" class="boxfont">&nbsp;</td>');
					document.writeln('<td width="6" class="boxfont">&nbsp;</td>');
					document.writeln('<td width="6" class="boxfont" background="/sunsafe/images/menubead_left.gif">&nbsp;</td>');
					document.writeln('<td id="_tic'+h+'_'+r+'" width="4" background="/sunsafe/images/menubead_right.gif" class="boxfont" style="border-bottom: #FFFFFF solid 1px">&nbsp;</td>');
					// enclose next cell with table so it can be variable size
					document.writeln('<td class="boxfont"><table cellpadding="0" cellspacing="0" border="0"><tr>');
					if (headers[h].length>1) {
						document.writeln('<td id="_subMenuItem'+h+'_'+r+'" style="border-bottom: #FFFFFF solid 1px" onMouseover="rollOn(this)" onMouseout="rollOff(this)"><a href="' + headers[h][r][1] + '" class="menulink">' + headers[h][r][0] + '</a></td>');
						}
					else {
						document.writeln('<td>&nbsp;</td>');
						}
					//finish up the variable table here
					document.writeln('</tr></table></td>');
					document.writeln('</tr>');
				}
		document.writeln('</table></div>');
		document.writeln('</td></tr>');
		if (h==lastTool) {
			stripe = "topicbg.gif";
			document.writeln('</table>');
			document.writeln('</div>');
			document.writeln('<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="/sunsafe/images/htopic.gif" alt="Hot Topics Menu" width="208" height="94"></td></tr></table>');
			document.writeln('<table width="100%" border="0" cellspacing="0" cellpadding="0">');
			}
	}

document.writeln('</table>');

// whenever page is loaded, toggle the current menu and highlight the selected item
toggleMenu(getUrl('topic'));
toggleSubHighlight(getUrl('topic'), getUrl('page'));
/*
			// need mouseover stuff
			<td id="cell4"><a href="#" class="menulink" onMouseOver="onCell('cell4')" onMouseOut="offCell('cell4')">Connect-the-dots</a></td>

*/