function toggle_red(map,state,zindex) {
	if(state=="on")
		document.getElementById(map).style.zIndex=zindex;
	else	
		document.getElementById(map).style.zIndex=zindex;
}
 
function toggle_basemap(map,state) {
	document.getElementById("info").innerHTML ="";
	document.getElementById("watershed_text").style.zIndex=0;
	
  	if(state=="on"){
		document.getElementById(map).style.zIndex=4;
		document.getElementById(map +'_clear').style.zIndex=5;
		document.getElementById("watershed_text").style.zIndex=4;
	}
	else{	
		document.getElementById(map).style.zIndex=0;
		document.getElementById(map +'_clear').style.zIndex=0;
		document.getElementById("watershed_text").style.zIndex=-1;
	}	
}


  
function show_info(area) { 
	document.getElementById("watershed_text").style.zIndex=-1;
  	document.getElementById("info").innerHTML =	document.getElementById(area +'_info').innerHTML;
	document.getElementById("info").style.zIndex=6;
}
  
function show_legend() {
	document.getElementById("info").innerHTML =	"";
	document.getElementById("watershed_text").style.zIndex=4;
}

function add_watershed_map(name){
	document.write('<img src="images/maps/010/' +name +'_basemap.jpg" id="' +name +'_basemap" alt="map" name="' +name +'_basemap" width="627" height="627" border="0" usemap="#' +name +'"  STYLE="z-index:0; position:absolute; top:150px; left:200px;" > ');
	document.write('<img src="images/maps/010/clear.gif"  name="' +name +'_basemap_clear" id="' +name +'_basemap_clear" width="627" height="627" border="0" usemap="#' +name +'"  STYLE="z-index:0; position:absolute; top:150px; left:200px;" > ');
	document.write('<img src="images/maps/010/watershed_' +name +'_red.gif" name="' +name +'_red" id="' +name +'_red" STYLE="z-index:0; position:absolute; top:150px; left:200px;" width="627" height="627">');
}

 
function add_watershed_coords(name,coords){
	document.write('<area shape="poly" coords="' +coords +'"');
	document.write(' onClick="location=&#39;?Content=pages/map_' +name +'.inc&#39;"' );
//	document.write(' onClick="toggle_basemap(&#39;' +name +'_basemap&#39;,&#39;on&#39;)"' );
	document.write(' onMouseOver="toggle_red(&#39;' +name +'_red&#39;,&#39;on&#39;,&#39;2&#39;)"' );  
	document.write(' onMouseOut="toggle_red(&#39;' +name +'_red&#39;,&#39;off&#39;,&#39;0&#39;)"> ');
} 

function add_catchment_coords(name,coords){ 
	document.write('<area shape="poly" coords="' +coords +'"');
	document.write(' onClick="show_info(&#39;' +name +'&#39;)"');
	document.write(' onMouseOver="toggle_red(&#39;' +name +'_red&#39;,&#39;on&#39;,&#39;4&#39;)"' );  
	document.write(' onMouseOut="toggle_red(&#39;' +name +'_red&#39;,&#39;off&#39;,&#39;0&#39;)"> ');
} 

function add_catchment_map(name){
	document.write('<img src="images/maps/010/' +name +'.gif" name="' +name +'_red" id="' +name +'_red" STYLE="z-index:0; position:absolute; top:150px; left:200px;" width="627" height="627"> ');
}

function add_return_to_watershed(name){
	document.write('<area shape="poly" onClick="location=&#39;?Content=pages/map_watersheds.inc&#39;" coords="12, 328, 108, 328, 108, 445, 12, 445, 12, 328"/>');
//	document.write('<area shape="poly" onClick="toggle_basemap(&#39;' +name +'_basemap&#39;,&#39;off&#39;)" coords="12, 328, 108, 328, 108, 445, 12, 445, 12, 328"/>');	
}

function add_info(name,text,default_img){
	document.write('<div name="' +name +'_info" id="' +name +'_info" STYLE="z-index:0; position:absolute; top:300px; left:203px;">');
	document.write('<table cellpadding=0 cellspacing=0 border=1 width=624 height=155 class="text-11ptgrey"><tr><td>');

	document.write('<a href="javascript:show_legend()">');
	document.write('<img src="images/red_x.gif" width=20 height=20 STYLE="position:absolute; top:5px; left:585px;" border=0>');
	document.write('</a>');

	document.write('<div style="overflow:auto; height:155px; width=620px;" >');

	document.write('<table class="text-11ptgrey" cellpadding=0 cellspacing=10 ><tr><td valign=top>');	
	if(default_img)
		document.write('<img src="images/maps/info/streams_default_info.jpg" height=135 align=left Hspace="0" Vspace="0">');
	else
		document.write('<img src="images/maps/info/' +name +'_info.jpg" height=135 align=left Hspace="0" Vspace="0">');
		
	document.write('</td><td>');
	document.write(text);
	document.write('</td></tr></table>');

	document.write('</div>');	
	document.write('</td></tr></table></div>');
}

// if there are multiple stream sites(multiple images and info) in a catchment area, use this function instead of add_info.
function add_info_multi(name,text,def,name2,text2,def2,name3,text3,def3,name4,text4,def4,name5,text5,def5,name6,text6,def6,name7,text7,def7,name8,text8,def8,name9,text9,def9,name10,text10,def10,name11,text11,def11,name12,text12,def12,name13,text13,def13,name14,text14,def14,name15,text15,def15,name16,text16,def16){
	var num_args = arguments.length

	document.write('<div name="' +name +'_info" id="' +name +'_info" STYLE="z-index:0; position:absolute; top:300px; left:203px;">');
	document.write('<table cellpadding=0 cellspacing=0 border=1 width=624 height=155 class="text-11ptgrey"><tr><td>');

	document.write('<a href="javascript:show_legend()">');
	document.write('<img src="images/red_x.gif" width=20 height=20 STYLE="position:absolute; top:5px; left:585px;" border=0>');
	document.write('</a>');

	document.write('<div style="overflow:auto; height:155px; width=620px;" >');
	
	for(var i=0; i < num_args; i=i+3){ 
		document.write('<table class="text-11ptgrey" cellpadding=0 cellspacing=10 ><tr><td valign=top>');	
		
		if(arguments[i+2]=="N")
			document.write('<img src="images/maps/info/streams_default_info.jpg" height=135 align=left Hspace="0" Vspace="0">');
		else
			document.write('<img src="images/maps/info/' +arguments[i] +'_info.jpg" height=135 align=left Hspace="0" Vspace="0">');
		
		document.write('</td><td>');
		document.write(arguments[i+1]);
		document.write('</td></tr></table>');

	}

	document.write('</div>');	
	document.write('</td></tr></table></div>');
}