function subnav(changeit, over)
{	var change1 = changeit + '1';
	var change2 = changeit + '2';
	
	if (over == 1)
	{	imgadd = "vr";
		document.getElementById(changeit).style.color='#083077';
	} else {
		imgadd = "";
		document.getElementById(changeit).style.color='#999999';
	}
	
	document.getElementById(change1).src='images/subnav/' + changeit + '1' + imgadd + '.gif';
	document.getElementById(change2).src='images/subnav/' + changeit + '2' + imgadd + '.gif';
}



function subnav2(changeit, over)
{	if (over == 1)
	{	imgadd = "vr";
		document.getElementById(changeit+"t").style.color='#083077';
	} else {
		imgadd = "";
		document.getElementById(changeit+"t").style.color='#999999';
	}
	
	document.getElementById(changeit).src='images/subnav/' + changeit + imgadd + '.gif';
}



function nav(onnav)
{	url = "http://www.ceawater.com/";
	document.writeln("<table border='0' cellpadding='0' cellspacing='0'>");

	if (onnav == 1)
	{	document.writeln("		<td><img src='images/nav/nav1vr.gif' name='nav1' border='0'></td>");
	} else {
		document.writeln("	<tr><td><a href='"+url+"' onmouseover=\"document.nav1.src='images/nav/nav1vr.gif';\" ");
		document.writeln("				onmouseout=\"document.nav1.src='images/nav/nav1.gif';\"><img src='images/nav/nav1.gif' ");
		document.writeln("				name='nav1' border='0'></a></td>");
	}
	
	if (onnav == 2)
	{	document.writeln("		<td><img src='images/nav/nav2vr.gif' name='nav2' border='0'></td>");
	} else {
		document.writeln("		<td><a href='"+url+"about.htm' onmouseover=\"document.nav2.src='images/nav/nav2vr.gif';\" ");
		document.writeln("				onmouseout=\"document.nav2.src='images/nav/nav2.gif';\"><img src='images/nav/nav2.gif' ");
		document.writeln("				name='nav2' border='0'></a></td>");
	}
	
	if (onnav == 3)
	{	document.writeln("		<td><img src='images/nav/nav3vr.gif' name='nav3' border='0'></td>");
	} else {
		document.writeln("		<td><a href='"+url+"rates_services.cgi' onmouseover=\"document.nav3.src='images/nav/nav3vr.gif';\" ");
		document.writeln("				onmouseout=\"document.nav3.src='images/nav/nav3.gif';\"><img src='images/nav/nav3.gif' ");
		document.writeln("				name='nav3' border='0'></a></td>");
	}
	
	if (onnav == 4)
	{	document.writeln("		<td><img src='images/nav/nav4vr.gif' name='nav4' border='0'></td>");
	} else {
		document.writeln("		<td><a href='"+url+"faq.htm' onmouseover=\"document.nav4.src='images/nav/nav4vr.gif';\" ");
		document.writeln("				onmouseout=\"document.nav4.src='images/nav/nav4.gif';\"><img src='images/nav/nav4.gif' ");
		document.writeln("				name='nav4' border='0'></a></td>");
	}
	
	if (onnav == 5)
	{	document.writeln("		<td><img src='images/nav/nav5vr.gif' name='nav5' border='0'></td>");
	} else {
		document.writeln("		<td><a href='"+url+"environmental.cgi' onmouseover=\"document.nav5.src='images/nav/nav5vr.gif';\" ");
		document.writeln("				onmouseout=\"document.nav5.src='images/nav/nav5.gif';\"><img src='images/nav/nav5.gif' ");
		document.writeln("				name='nav5' border='0'></a></td>");
	}
	
	if (onnav == 6)
	{	document.writeln("		<td><img src='images/nav/nav6vr.gif' name='nav6' border='0'></td>");
	} else {
		document.writeln("		<td><a href='"+url+"wastewater.cgi' onmouseover=\"document.nav6.src='images/nav/nav6vr.gif';\" ");
		document.writeln("				onmouseout=\"document.nav6.src='images/nav/nav6.gif';\"><img src='images/nav/nav6.gif' ");
		document.writeln("				name='nav6' border='0'></a></td>");
	}
	
	if (onnav == 7)
	{	document.writeln("		<td><img src='images/nav/nav7vr.gif' name='nav7' border='0'></td>");
	} else {
		document.writeln("		<td><a href='"+url+"construction.cgi' onmouseover=\"document.nav7.src='images/nav/nav7vr.gif';\" ");
		document.writeln("				onmouseout=\"document.nav7.src='images/nav/nav7.gif';\"><img src='images/nav/nav7.gif' ");
		document.writeln("				name='nav7' border='0'></a></td>");
	}
	
	if (onnav == 9)
	{	document.writeln("		<td><img src='images/nav/nav9vr.gif' name='nav9' border='0'></td>");
	} else {
		document.writeln("		<td><a href='"+url+"cust_info.cgi' onmouseover=\"document.nav9.src='images/nav/nav9vr.gif';\" ");
		document.writeln("				onmouseout=\"document.nav9.src='images/nav/nav9.gif';\"><img src='images/nav/nav9.gif' ");
		document.writeln("				name='nav9' border='0'></a></td>");
	}
	
	if (onnav == 8)
	{	document.writeln("		<td><img src='images/nav/nav8vr.gif' name='nav8' border='0'></td>");
	} else {
		document.writeln("		<td><a href='"+url+"contact.htm' onmouseover=\"document.nav8.src='images/nav/nav8vr.gif';\" ");
		document.writeln("				onmouseout=\"document.nav8.src='images/nav/nav8.gif';\"><img src='images/nav/nav8.gif' ");
		document.writeln("				name='nav8' border='0'></a></td></tr>");
	}
	
	document.writeln("</table>");
}



function createsubnav(but1id, but2id, but3id, but4id, butover)
{
	document.writeln("<table border='0' width='1024' cellpadding='0' cellspacing='0'>");
	document.writeln("	<tr><td><img src='images/spacer.gif' border=0 height='81'></td></tr>");
	document.writeln("	<tr><td><table border='0' width='1024' cellpadding='0' cellspacing='0'>");
	document.writeln("				<tr><td><img src='images/spacer.gif' border=0 width='100' height='1px'></td>");
	document.writeln("					<td valign='bottom'><img src='images/shadowL1.gif'></td>");
	document.writeln("					<td><img src='images/spacer.gif' border=0 width='179' height='1px'></td>");
		subnavbuttons(but1id, butover)
	document.writeln("					<td><img src='images/spacer.gif' border=0 width=20 height='1px'></td>");
		subnavbuttons(but2id, butover)
	document.writeln("					<td><img src='images/spacer.gif' border=0 width=20 height='1px'></td>");
		subnavbuttons(but3id, butover)
	document.writeln("					<td><img src='images/spacer.gif' border=0 width=20 height='1px'></td>");
		subnavbuttons(but4id, butover)
	document.writeln("					<td><img src='images/spacer.gif' border=0 width=179 height='1px'></td>");
	document.writeln("					<td valign='bottom'><img src='images/shadowR1.gif'></td>");
	document.writeln("					<td><img src='images/spacer.gif' border=0 width=101 height='1px'></td></tr>");
	document.writeln("			</table></td></tr>");
	document.writeln("</table></td></tr>");
}



function subnavbuttons(buttonid, overid)
{	//  1 - PAYMENT OPTIONS
	//  2 - RATES & SERVICES
	//  3 - CUSTOMER INFORMATION
	//  4 - ABOUT US
	//  5 - STAFF & BOARD
	//  6 - CONTACT US
	//  7 - LINKS
	//  8 - CAREER OPPORTUNITIES
	//  9 - WATER QUALITY REPORTS
	// 10 - PORTABLE RESTROOM & PUMP TRUCK SERVICES
	// 11 - EASY PAY
	// 12 - PAY BILL ONLINE
	// 13 - DID YOU KNOW
	// 14 - KID KONNECTION
	// 15 - CUSTOMER RESPONSIBILITIES
	// 16 - CONSTRUCTION
	// 17 - COMMUNITY BENEFITS
	// 18 - BOTTLED VS TAP
	
	url = "http://www.ceawater.com/";
	if (buttonid == 12) { url = "https://www.ceawater.com/"; }
	urlarray = new Array("", "pay_bills.htm", "rates_services.cgi", "cust_info.cgi", "about.htm", "staff.htm", "contact.htm", 
					"links.htm", "career.cgi", "water_reports.htm", "environmental.cgi", "EasyPay.pdf", "pay_online.cgi", 
					"did_you_know.htm", "kids.htm", "cust_respon.htm", "construction.cgi", "community.htm", "bottlewater.htm");
	textarray = new Array("", "PAYMENT OPTIONS", "RATES &amp; SERVICES", "CUSTOMER<br>INFORMATION", "ABOUT CEA", 
					"STAFF &amp; BOARD", "CONTACT US", "LINKS", "CAREER<br>OPPORTUNITIES", "WATER QUALITY<br>REPORTS", 
					"PORTABLE<br>RESTROOM &amp; PUMP<br>TRUCK SERVICES", "EASY PAY", "PAY BILL ONLINE", "DID YOU KNOW", 
					"KID KONNECTION", "CUSTOMER<br>RESPONSIBILITIES", "CONSTRUCTION", "COMMUNITY<br>BENEFITS", 
					"BOTTLED<br>VS. TAP");
	linkurl = urlarray[buttonid];
	linktext = textarray[buttonid];

	document.writeln("<td><table border=0 width=96 cellpadding=0 cellspacing=0>");
	if (buttonid == overid)
	{	document.writeln("		<tr><td align='center'><img border=0 src='images/subnav/sub"+buttonid+"vr.gif'></a></td></tr>");
		document.write("		<tr><td height=40 align='center' style='font: 8pt Tahoma; color: #083077;'>"+linktext+"</a></td></tr>");
	} else {
		document.write("		<tr><td align='center'><a href='"+url+linkurl+"' onmouseover=\"subnav2('sub"+buttonid+"', 1);\" ");
		document.write("onmouseout=\"subnav2('sub"+buttonid+"', 0)\"><img border=0 src='images/subnav/sub"+buttonid+".gif' ");
		document.writeln("id='sub"+buttonid+"'></a></td></tr>");
		document.write("		<tr><td height=40 align='center'><a href='"+linkurl+"' id='sub"+buttonid+"t' ");
		document.write("onmouseover=\"subnav2('sub"+buttonid+"', 1);\" onmouseout=\"subnav2('sub"+buttonid+"', 0)\" ");
		document.writeln("style='font: 8pt Tahoma; color: #999999; text-decoration: none;'>"+linktext+"</a></td></tr>");
	}	
	document.writeln("	</table></td>");
}