// JavaScript Document
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var max_rows = 15; var threshold = 30;
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function msOvr(src,clrOver)
{ 
	src.bgColor = clrOver;
} 
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function msOut(src,clrIn)
{ 
	src.bgColor = clrIn;
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function loginmenu()
{
	var content = ""; var oObj = document.getElementById("main_content"); oObj.innerHTML = "";
	content = "<table width='840px;' height='700px;'><tr><td height='100px;'></td></tr><tr><td align='center' valign='top'><form action='.' method='post'><table border='0'> \
					<tr><td rowspan='4' width='100px;'><img src='images/key.png'  width='80px;' height='80px;'></td><td colspan='2' align='left'><b>Sign In</b></td></tr> \
					<tr><td width='80px;' align='left'>Username: </td><td width='200px;' align='left'><input type='text' id='username' name='username' value='' id='lguser' name='lguser' size='25'></td></tr> \
					<tr><td align='left'>Password: </td><td align='left'><input type='password' id='password' name='password' value='' id='lgpass' name='lgpass' size='25'></td></tr> \
					<tr><td>&nbsp;</td><td align='left'><input type='submit' id='lgbutton' name='lgbutton' value='OK' style='width:60px;'></td></tr> \
					</table></form></td></tr><tr><td><div align='center'><img src='images/gallery.png' width='800px;' height='250px;'></div></td></tr></table>";	
	oObj.style.background = "url('images/member.jpg')"; oObj.innerHTML = content;
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function station_overview(stationid)
{
	var oObj = document.getElementById('main_content'); 
	if (oObj)  
	{
		var xmlhttp = null; if(window.ActiveXObject) {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} else if(window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else{}			
		var url = "req/getinfo.php?sid=" + stationid; xmlhttp.open("GET", url, true);
		xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4)
			{
				var xml = xmlhttp.responseXML; var info = xml.documentElement.getElementsByTagName("station");
				var permission = (xml.getElementsByTagName("station"))[0].getAttribute("permission"); 
				if(info.length > 0) 
				{
					var r1hdata = ""; var mystatus = "online";
					var stationname = info[0].getAttribute("name"); var stationdesc = info[0].getAttribute("description"); var zoneid = info[0].getAttribute("zoneid"); var latitude = info[0].getAttribute("latitude");
					var longitude = info[0].getAttribute("longitude"); var ipaddr = info[0].getAttribute("ipaddr"); var camaddr = info[0].getAttribute("camaddr"); var ctrladdr = info[0].getAttribute("ctrladdr");
					var numgate = info[0].getAttribute("numgate"); var gearstep = info[0].getAttribute("gearstep"); var uszero = info[0].getAttribute("uszero"); var dszero = info[0].getAttribute("dszero");
					var usbriverlv = info[0].getAttribute("usbriverlv"); var dsbriverlv = info[0].getAttribute("dsbriverlv"); var usdata = info[0].getAttribute("usdata"); var dsdata = info[0].getAttribute("dsdata");
					var usdate = info[0].getAttribute("usdate"); var dsdate = info[0].getAttribute("dsdate"); var ustime = info[0].getAttribute("ustime"); var dstime = info[0].getAttribute("dstime");						
					var usid = info[0].getAttribute("usid"); var dsid = info[0].getAttribute("dsid"); var usstatus= info[0].getAttribute("usstatus"); var dsstatus= info[0].getAttribute("dsstatus"); 
					var rainid= info[0].getAttribute("rainid"); var rstatus= info[0].getAttribute("rstatus"); var zonename= info[0].getAttribute("zonename"); var rdata= info[0].getAttribute("rdata"); 
					var rdate= info[0].getAttribute("rdate"); var rtime= info[0].getAttribute("rtime"); var maxusdata = info[0].getAttribute("maxusdata"); var maxdsdata = info[0].getAttribute("maxdsdata");
					var qdata = info[0].getAttribute("qdata"); var zusdata = info[0].getAttribute("zusdata"); var zdsdata = info[0].getAttribute("zdsdata"); var mzusdata = info[0].getAttribute("mzusdata");
					var mzdsdata = info[0].getAttribute("mzdsdata"); var gdata = info[0].getAttribute("gdata"); var gdate = info[0].getAttribute("gdate"); var gtime = info[0].getAttribute("gtime"); 
					var uswarnlv = info[0].getAttribute("uswarnlv"); var dswarnlv = info[0].getAttribute("dswarnlv"); var uscrilv = info[0].getAttribute("uscrilv"); var dscrilv = info[0].getAttribute("dscrilv");
					var r1ddata = info[0].getAttribute("r1ddata"); var intrdata = info[0].getAttribute("intrdata"); var camctrl = info[0].getAttribute("camctrl"); var gatectrl = info[0].getAttribute("gatectrl");
					gdata = gdata.replace(/,/gi,"|"); 
					
					if(rainid != "")
					{
						if((parseInt(dsstatus) > parseInt(threshold)) && (parseInt(usstatus) > parseInt(threshold)) && (parseInt(rstatus) > parseInt(threshold))) {mystatus = "offline";}
						else if((parseInt(dsstatus) > parseInt(threshold)) || (parseInt(usstatus) > parseInt(threshold)) || (parseInt(rstatus) > parseInt(threshold))) {mystatus = "warning";}				
					}else
					{
						if((parseInt(dsstatus) > parseInt(threshold)) && (parseInt(usstatus) > parseInt(threshold))) {mystatus = "offline";}
						else if((parseInt(dsstatus) > parseInt(threshold)) || (parseInt(usstatus) > parseInt(threshold))) {mystatus = "warning";}			
					}

					
					if(usdata == "") {zusdata = "-9999";} if(dsdata == "") {zdsdata = "-9999";} if(rdata == "") {rdata = "-9999";}

					var wlvdatetime = ""; if(usdate != "") {wlvdatetime = usdate + " " + ustime;}else  {if(dsdate != "") {wlvdatetime = dsdate + " " + dstime;}}
					var content = "<form action='.' method='post'><div style='border: 1px #D6EDBC solid;'><table border='0' style='border-spacing:0;'><tr style='background:url(images/bgs3.png);'><td wdith='40px;' align='left'><img src='images/hstation.png' width='30px;'></td><td width='550px;' align='left'><a href='javascript:station_overview(\"" + stationid + "\");'><font style='font-size:20px; font-weight:bold;'>" + stationname + "</font></a></td><td align='right' width='320px;'><a href='javascript:click_overview();' style='font-size:13px; font-weight:bold;'>Project Overview</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:click_report(\"" + stationid + "\");' style='font-size:13px; font-weight:bold;'>Historical Report</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:click_tracking(\"" + stationid + "\",1);' style='font-size:13px; font-weight:bold;'>Tracking</a>&nbsp;</td></tr></table></div>";
					
					var browser=navigator.userAgent;  
					if((browser.indexOf('MSIE')>0) || (browser.indexOf('Firefox')>0))
					{  
						content = content + "<div id='sub_content' name='sub_content'><div><table style='border: 1px #D6EDBC solid;'><tr><td align='left' rowspan='2' width='450px;' style='background:url(pics/" + stationid +".gif); background-repeat:no-repeat; background-position:center;' id='tag_content'><div style='position:relative; width:450px; height:340px; border:1px #D6EDBC solid;' id='cam_content'>" + station_scape(stationid,mystatus,gdata,zusdata,zdsdata) + "</div></td><td align='left' width='420px;' height='170px;'><div style='position:relative; width:385px; height:165px; border:1px #D6EDBC solid;'>" + station_xcross(stationid,1,uswarnlv,dswarnlv,uscrilv,dscrilv,zusdata) + "</div></td></tr><tr><td align='left' height='170px;'><div style='position:relative; width:385px; height:165px; border:1px #D6EDBC solid;'>" + station_xcross(stationid,2,uswarnlv,dswarnlv,uscrilv,dscrilv,zdsdata)  + "</div></td></tr></table></div>";
					} else
					{
						content = content + "<div id='sub_content' name='sub_content'><div><table style='border: 1px #D6EDBC solid;'><tr><td align='left' rowspan='2' width='450px;' style='background:url(pics/" + stationid +".jpg); background-repeat:no-repeat; background-position:center;' id='tag_content'><div style='position:relative; width:450px; height:340px; border:1px #D6EDBC solid;' id='cam_content'>" + station_scape(stationid,mystatus,gdata,zusdata,zdsdata) + "</div></td><td align='left' width='420px;' height='170px;'><div style='position:relative; width:385px; height:165px; border:1px #D6EDBC solid;'>" + station_xcross(stationid,1,uswarnlv,dswarnlv,uscrilv,dscrilv,zusdata) + "</div></td></tr><tr><td align='left' height='170px;'><div style='position:relative; width:385px; height:165px; border:1px #D6EDBC solid;'>" + station_xcross(stationid,2,uswarnlv,dswarnlv,uscrilv,dscrilv,zdsdata)  + "</div></td></tr></table></div>";
					}
					
					
					if(rainid == "") 
					{
						rdata = "not set"; r1hdata = "not set"; r1ddata = "not set";
						if((stationid == "C35") || (stationid == "C40") || (stationid == "C67") || (stationid == "C76") || (stationid == "C98"))
						{
							content = content + "<div style='border: 1px #D6EDBC solid;'><table border='0' style='border-spacing:0;'><tr style='background:url(images/bgs3.png);'><td align='left' width='150px;'>&nbsp;<img src='images/swater.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>ระดับน้ำ</font></td><td width='300px;' align='left'>&nbsp;<font id='wlv_dt_" + stationid + "' name='wlv_dt_" + stationid + "' class='upd_datetime'>" + wlvdatetime + "</font></td><td align='left' width='150px;'>&nbsp;</td><td width='300px;' align='left'>&nbsp;</td></tr> \
														<tr><td align='left' width='150px;'>&nbsp;ระดับน้ำปัจจุบัน</td><td align='left'>U/S:&nbsp;<input type='text' id='wlv_us_" + stationid + "' name='wlv_us_" + stationid + "' value='" + zusdata+ "' size='13' readonly style='background-color:black;'>&nbsp;D/S:&nbsp;<input type='text' id='wlv_ds_" + stationid + "' name='wlv_ds_" + stationid + "' value='" + zdsdata + "' size='13' readonly>&nbsp;m. msl</td><td align='left' width='150px;'>&nbsp;</td><td align='left'>&nbsp;</td></tr> \
														<tr><td align='left'>&nbsp;ระดับน้ำสูงสุดวันนี้</td><td align='left'>U/S:&nbsp;<input type='text' id='wlv_mus_" + stationid + "' name='wlv_mus_" + stationid + "' value='" + mzusdata + "' size='13' readonly style='background-color:black;'>&nbsp;D/S:&nbsp;<input type='text' id='wlv_mds_" + stationid + "' name='wlv_mds_" + stationid + "' value='" + mzdsdata + "' size='13' readonly>&nbsp;m. msl</td><td align='left'>&nbsp;</td><td align='left'>&nbsp;</td></tr> \
														<tr><td align='left'>&nbsp;อัตราการไหล</td><td align='left'><input type='text' id='q_" + stationid + "' value='" + qdata + "' size='30' readonly style='background-color:black;'>&nbsp;m<sup>3</sup>/s</td><td align='left'>&nbsp;</td><td align='left'>&nbsp;</td></tr></table></div>";
						}else if((stationid == "DR15_8_1") || (stationid == "DR15_8_2") || (stationid == "DR2_8"))
						{
							content = content + "<div style='border: 1px #D6EDBC solid;'><table border='0' style='border-spacing:0;'><tr style='background:url(images/bgs3.png);'><td align='left' width='150px;'>&nbsp;<img src='images/swater.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>ระดับน้ำ</font></td><td width='300px;' align='left'>&nbsp;<font id='wlv_dt_" + stationid + "' name='wlv_dt_" + stationid + "' class='upd_datetime'>" + wlvdatetime + "</font></td><td align='left' width='150px;'>&nbsp;</td><td width='300px;' align='left'>&nbsp;</td></tr> \
														<tr><td align='left' width='150px;'>&nbsp;ระดับน้ำปัจจุบัน</td><td align='left'>U/S:&nbsp;<input type='text' id='wlv_us_" + stationid + "' name='wlv_us_" + stationid + "' value='" + zusdata+ "' size='13' readonly>&nbsp;D/S:&nbsp;<input type='text' id='wlv_ds_" + stationid + "' name='wlv_ds_" + stationid + "' value='" + zdsdata + "' size='13' readonly>&nbsp;m. msl</td><td align='left' width='150px;'>&nbsp;</td><td align='left'>&nbsp;</td></tr> \
														<tr><td align='left'>&nbsp;ระดับน้ำสูงสุดวันนี้</td><td align='left'>U/S:&nbsp;<input type='text' id='wlv_mus_" + stationid + "' name='wlv_mus_" + stationid + "' value='" + mzusdata + "' size='13' readonly>&nbsp;D/S:&nbsp;<input type='text' id='wlv_mds_" + stationid + "' name='wlv_mds_" + stationid + "' value='" + mzdsdata + "' size='13' readonly>&nbsp;m. msl</td><td align='left'>&nbsp;</td><td align='left'>&nbsp;</td></tr> \
														<tr><td align='left'>&nbsp;อัตราการไหล</td><td align='left'><input type='text' id='q_" + stationid + "' value='" + qdata + "' size='30' readonly style='background-color:black;'>&nbsp;m<sup>3</sup>/s</td><td align='left'>&nbsp;</td><td align='left'>&nbsp;</td></tr></table></div>";
						}else
						{
							content = content + "<div style='border: 1px #D6EDBC solid;'><table border='0' style='border-spacing:0;'><tr style='background:url(images/bgs3.png);'><td align='left' width='150px;'>&nbsp;<img src='images/swater.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>ระดับน้ำ</font></td><td width='300px;' align='left'>&nbsp;<font id='wlv_dt_" + stationid + "' name='wlv_dt_" + stationid + "' class='upd_datetime'>" + wlvdatetime + "</font></td><td align='left' width='150px;'>&nbsp;</td><td width='300px;' align='left'>&nbsp;</td></tr> \
														<tr><td align='left' width='150px;'>&nbsp;ระดับน้ำปัจจุบัน</td><td align='left'>U/S:&nbsp;<input type='text' id='wlv_us_" + stationid + "' name='wlv_us_" + stationid + "' value='" + zusdata+ "' size='13' readonly>&nbsp;D/S:&nbsp;<input type='text' id='wlv_ds_" + stationid + "' name='wlv_ds_" + stationid + "' value='" + zdsdata + "' size='13' readonly>&nbsp;m. msl</td><td align='left' width='150px;'>&nbsp;</td><td align='left'>&nbsp;</td></tr> \
														<tr><td align='left'>&nbsp;ระดับน้ำสูงสุดวันนี้</td><td align='left'>U/S:&nbsp;<input type='text' id='wlv_mus_" + stationid + "' name='wlv_mus_" + stationid + "' value='" + mzusdata + "' size='13' readonly>&nbsp;D/S:&nbsp;<input type='text' id='wlv_mds_" + stationid + "' name='wlv_mds_" + stationid + "' value='" + mzdsdata + "' size='13' readonly>&nbsp;m. msl</td><td align='left'>&nbsp;</td><td align='left'>&nbsp;</td></tr> \
														<tr><td align='left'>&nbsp;อัตราการไหล</td><td align='left'><input type='text' id='q_" + stationid + "' value='" + qdata + "' size='30' readonly>&nbsp;m<sup>3</sup>/s</td><td align='left'>&nbsp;</td><td align='left'>&nbsp;</td></tr></table></div>";
						}
					}else
					{
						content = content + "<div style='border: 1px #D6EDBC solid;'><table border='0' style='border-spacing:0;'><tr style='background:url(images/bgs3.png);'><td align='left' width='150px;'>&nbsp;<img src='images/swater.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>ระดับน้ำ</font></td><td width='300px;' align='left'>&nbsp;<font id='wlv_dt_" + stationid + "' name='wlv_dt_" + stationid + "' class='upd_datetime'>" + wlvdatetime + "</font></td><td align='left' width='150px;'>&nbsp;<img src='images/srain.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>น้ำฝน</font>&nbsp;&nbsp;</td><td width='300px;' align='left'>&nbsp;<font id='rain_dt_" + stationid + "' name='rain_dt_" + stationid + "' class='upd_datetime'>" + rdate + " " + rtime + "</font></td></tr> \
													<tr><td align='left' width='150px;'>&nbsp;ระดับน้ำปัจจุบัน</td><td align='left'>U/S:&nbsp;<input type='text' id='wlv_us_" + stationid + "' name='wlv_us_" + stationid + "' value='" + zusdata+ "' size='13' readonly>&nbsp;D/S:&nbsp;<input type='text' id='wlv_ds_" + stationid + "' name='wlv_ds_" + stationid + "' value='" + zdsdata + "' size='13' readonly>&nbsp;m. msl</td><td align='left' width='150px;'>&nbsp;ปริมาณฝน 15 นาที</td><td align='left'><input type='text' id='rain_15m_" + stationid + "' name='rain_15m_" + stationid + "' value='" + rdata + "' size='30' readonly>&nbsp;mm.</td></tr> \
													<tr><td align='left'>&nbsp;ระดับน้ำสูงสุดวันนี้</td><td align='left'>U/S:&nbsp;<input type='text' id='wlv_mus_" + stationid + "' name='wlv_mus_" + stationid + "' value='" + mzusdata + "' size='13' readonly>&nbsp;D/S:&nbsp;<input type='text' id='wlv_mds_" + stationid + "' name='wlv_mds_" + stationid + "' value='" + mzdsdata + "' size='13' readonly>&nbsp;m. msl</td><td align='left'>&nbsp;ปริมาณฝนสะสมรายวัน</td><td align='left'><input type='text' id='rain_1d_" + stationid + "' value='" + r1ddata + "' size='30' readonly>&nbsp;mm.</td></tr> \
													<tr><td align='left'>&nbsp;อัตราการไหล</td><td align='left'><input type='text' id='q_" + stationid + "' value='" + qdata + "' size='30' readonly>&nbsp;m<sup>3</sup>/s</td><td align='left'>&nbsp;ความเข้มฝนเฉลี่ย 24 ชม.</td><td align='left'><input type='text' id='rain_int_" + stationid + "' value='" + intrdata + "' size='30' readonly>&nbsp;mm./hr</td></tr></table></div>";
					}

//////////////////////////////////////////////////////////////////////////////////////////
					if(camaddr != "")
					{
						if((permission != "admin") && (permission != "system"))
						{
							content = content + "<div class='highslide-gallery'><table border='0'><tr><td align='left' rowspan='7' width='290px;' height='200px;'><a href='pics/stations/" + stationid + "/01.jpg' class='highslide' id='thumb1'  onclick='return hs.expand(this,miniGalleryOptions1);' title='" + stationname + "'><img src='pics/stations/" + stationid + "/01.jpg' width='290px;' height='200px;'></a><div class='hidden-container'><a href='pics/stations/" + stationid + "/02.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/02.jpg' width='290px;' height='200px;'></a><a href='pics/stations/" + stationid + "/03.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/03.jpg' width='290px;' height='200px;'></a></td><td align='left' colspan='4' style='background:url(images/bgs3.png);'>&nbsp;<img src='images/hstation.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>รายละเอียดสถานี</font>&nbsp;&nbsp;&nbsp;<a href='javascript:cam_click(\"" + stationid + "\");'><img src='images/hcamera.png' width='25px;' height='25px;' title='IP Cam'></a></td></tr> \
														<tr><td align='left' colspan='4'>&nbsp;โครงการ:&nbsp;&nbsp;" + zonename + "</td></tr><tr><td align='left' colspan='4'>&nbsp;ชื่อสถานี:&nbsp;&nbsp;" + stationname + "</td></tr><tr><td align='left' width='145px;'>&nbsp;พิกัด Latitude: \
														</td><td align='left' width='160px;'><input type='text' value='" + latitude + "' readonly></td><td width='145px;' align='left'>&nbsp;พิกัด Longitude:</td><td align='left' width='160px;'> \
														<input type='text' value='" + longitude + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage เหนือน้ำ:</td><td align='left'><input type='text' value='" + uszero + "' readonly></td> \
														<td align='left'>&nbsp;ระดับตลิ่งเหนือน้ำ:</td><td align='left'><input type='text' value='" + usbriverlv + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage ท้ายน้ำ:</td><td align='left'> \
														<input type='text' value='" + dszero + "' readonly></td><td align='left'>&nbsp;ระดับตลิ่งท้ายน้ำ:</td><td align='left'><input type='text' value='" + dsbriverlv + "' readonly></td></tr> \
														<tr><td align='left'>&nbsp;จำนวนประตู:</td><td align='left'><input type='text' value='" + numgate + "' readonly></td><td align='left'>&nbsp;IP Address:</td><td align='left'>" + ipaddr + "</td></tr></table></div></div>";
						}else
						{
							if((permission == "admin") && (camctrl != 1))
							{
								content = content + "<div class='highslide-gallery'><table border='0'><tr><td align='left' rowspan='7' width='290px;' height='200px;'><a href='pics/stations/" + stationid + "/01.jpg' class='highslide' id='thumb1'  onclick='return hs.expand(this,miniGalleryOptions1);' title='" + stationname + "'><img src='pics/stations/" + stationid + "/01.jpg' width='290px;' height='200px;'></a><div class='hidden-container'><a href='pics/stations/" + stationid + "/02.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/02.jpg' width='290px;' height='200px;'></a><a href='pics/stations/" + stationid + "/03.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/03.jpg' width='290px;' height='200px;'></a></td><td align='left' colspan='4' style='background:url(images/bgs3.png);'>&nbsp;<img src='images/hstation.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>รายละเอียดสถานี</font>&nbsp;&nbsp;&nbsp;<a href='javascript:cam_click(\"" + stationid + "\");'><img src='images/hcamera.png' width='25px;' height='25px;' title='IP Cam'></a></td></tr> \
															<tr><td align='left' colspan='4'>&nbsp;โครงการ:&nbsp;&nbsp;" + zonename + "</td></tr><tr><td align='left' colspan='4'>&nbsp;ชื่อสถานี:&nbsp;&nbsp;" + stationname + "</td></tr><tr><td align='left' width='145px;'>&nbsp;พิกัด Latitude: \
															</td><td align='left' width='160px;'><input type='text' value='" + latitude + "' readonly></td><td width='145px;' align='left'>&nbsp;พิกัด Longitude:</td><td align='left' width='160px;'> \
															<input type='text' value='" + longitude + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage เหนือน้ำ:</td><td align='left'><input type='text' value='" + uszero + "' readonly></td> \
															<td align='left'>&nbsp;ระดับตลิ่งเหนือน้ำ:</td><td align='left'><input type='text' value='" + usbriverlv + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage ท้ายน้ำ:</td><td align='left'> \
															<input type='text' value='" + dszero + "' readonly></td><td align='left'>&nbsp;ระดับตลิ่งท้ายน้ำ:</td><td align='left'><input type='text' value='" + dsbriverlv + "' readonly></td></tr> \
															<tr><td align='left'>&nbsp;จำนวนประตู:</td><td align='left'><input type='text' value='" + numgate + "' readonly></td><td align='left'>&nbsp;IP Address:</td><td align='left'>" + ipaddr + "</td></tr></table></div></div>";
							}else
							{
								content = content + "<div class='highslide-gallery'><table border='0'><tr><td align='left' rowspan='7' width='290px;' height='200px;'><a href='pics/stations/" + stationid + "/01.jpg' class='highslide' id='thumb1'  onclick='return hs.expand(this,miniGalleryOptions1);' title='" + stationname + "'><img src='pics/stations/" + stationid + "/01.jpg' width='290px;' height='200px;'></a><div class='hidden-container'><a href='pics/stations/" + stationid + "/02.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/02.jpg' width='290px;' height='200px;'></a><a href='pics/stations/" + stationid + "/03.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/03.jpg' width='290px;' height='200px;'></a></td><td align='left' colspan='4' style='background:url(images/bgs3.png);'>&nbsp;<img src='images/hstation.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>รายละเอียดสถานี</font>&nbsp;&nbsp;&nbsp;<a href='javascript:cam_click(\"" + stationid + "\");'><img src='images/hcamera.png' width='25px;' height='25px;' title='IP Cam'></a>&nbsp;&nbsp;&nbsp;<a href='control.php?sid=" + stationid + "' target='_blank'><img src='images/control.png' width='25px;' height='25px;' title='Control Cam'></a></td></tr> \
															<tr><td align='left' colspan='4'>&nbsp;โครงการ:&nbsp;&nbsp;" + zonename + "</td></tr><tr><td align='left' colspan='4'>&nbsp;ชื่อสถานี:&nbsp;&nbsp;" + stationname + "</td></tr><tr><td align='left' width='145px;'>&nbsp;พิกัด Latitude: \
															</td><td align='left' width='160px;'><input type='text' value='" + latitude + "' readonly></td><td width='145px;' align='left'>&nbsp;พิกัด Longitude:</td><td align='left' width='160px;'> \
															<input type='text' value='" + longitude + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage เหนือน้ำ:</td><td align='left'><input type='text' value='" + uszero + "' readonly></td> \
															<td align='left'>&nbsp;ระดับตลิ่งเหนือน้ำ:</td><td align='left'><input type='text' value='" + usbriverlv + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage ท้ายน้ำ:</td><td align='left'> \
															<input type='text' value='" + dszero + "' readonly></td><td align='left'>&nbsp;ระดับตลิ่งท้ายน้ำ:</td><td align='left'><input type='text' value='" + dsbriverlv + "' readonly></td></tr> \
															<tr><td align='left'>&nbsp;จำนวนประตู:</td><td align='left'><input type='text' value='" + numgate + "' readonly></td><td align='left'>&nbsp;IP Address:</td><td align='left'>" + ipaddr + "</td></tr></table></div></div>";
							}
						}
					}else
					{
						content = content + "<div class='highslide-gallery'><table border='0'><tr><td align='left' rowspan='7' width='290px;' height='200px;'><a href='pics/stations/" + stationid + "/01.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this,miniGalleryOptions1);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/01.jpg' width='290px;' height='200px;'></a><div class='hidden-container'><a href='pics/stations/" + stationid + "/02.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/02.jpg' width='290px;' height='200px;'></a><a href='pics/stations/" + stationid + "/03.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/03.jpg' width='290px;' height='200px;'></a></div></td><td align='left' colspan='4' style='background:url(images/bgs3.png);'>&nbsp;<img src='images/hstation.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>รายละเอียดสถานี</font></td></tr> \
													<tr><td align='left' colspan='4'>&nbsp;โครงการ:&nbsp;&nbsp;" + zonename + "</td></tr><tr><td align='left' colspan='4'>&nbsp;ชื่อสถานี:&nbsp;&nbsp;" + stationname + "</td></tr><tr><td align='left' width='145px;'>&nbsp;พิกัด Latitude: \
													</td><td align='left' width='160px;'><input type='text' value='" + latitude + "' readonly></td><td width='145px;' align='left'>&nbsp;พิกัด Longitude:</td><td align='left' width='160px;'> \
													<input type='text' value='" + longitude + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage เหนือน้ำ:</td><td align='left'><input type='text' value='" + uszero + "' readonly></td> \
													<td align='left'>&nbsp;ระดับตลิ่งเหนือน้ำ:</td><td align='left'><input type='text' value='" + usbriverlv + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage ท้ายน้ำ:</td><td align='left'> \
													<input type='text' value='" + dszero + "' readonly></td><td align='left'>&nbsp;ระดับตลิ่งท้ายน้ำ:</td><td align='left'><input type='text' value='" + dsbriverlv + "' readonly></td></tr> \
													<tr><td align='left'>&nbsp;จำนวนประตู:</td><td align='left'><input type='text' value='" + numgate + "' readonly></td><td align='left'>&nbsp;IP Address:</td><td align='left'>" + ipaddr + "</td></tr></table></div></div>";
					}

/*
					if((permission != "anonymous") && (camaddr != ""))
					{
						content = content + "<div class='highslide-gallery'><table border='0'><tr><td align='left' rowspan='7' width='290px;' height='200px;'><a href='pics/stations/" + stationid + "/01.jpg' class='highslide' id='thumb1'  onclick='return hs.expand(this,miniGalleryOptions1);' title='" + stationname + "'><img src='pics/stations/" + stationid + "/01.jpg' width='290px;' height='200px;'></a><div class='hidden-container'><a href='pics/stations/" + stationid + "/02.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/02.jpg' width='290px;' height='200px;'></a><a href='pics/stations/" + stationid + "/03.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/03.jpg' width='290px;' height='200px;'></a></td><td align='left' colspan='4' style='background:url(images/bgs3.png);'>&nbsp;<img src='images/hstation.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>รายละเอียดสถานี</font>&nbsp;&nbsp;&nbsp;<a href='http://" + camaddr + "' target='_blank'><img src='images/hcamera.png' width='25px;' height='25px;' title='IP Cam'></a></td></tr> \
													<tr><td align='left' colspan='4'>&nbsp;โครงการ:&nbsp;&nbsp;" + zonename + "</td></tr><tr><td align='left' colspan='4'>&nbsp;ชื่อสถานี:&nbsp;&nbsp;" + stationname + "</td></tr><tr><td align='left' width='145px;'>&nbsp;พิกัด Latitude: \
													</td><td align='left' width='160px;'><input type='text' value='" + latitude + "' readonly></td><td width='145px;' align='left'>&nbsp;พิกัด Longitude:</td><td align='left' width='160px;'> \
													<input type='text' value='" + longitude + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage เหนือน้ำ:</td><td align='left'><input type='text' value='" + uszero + "' readonly></td> \
													<td align='left'>&nbsp;ระดับตลิ่งเหนือน้ำ:</td><td align='left'><input type='text' value='" + usbriverlv + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage ท้ายน้ำ:</td><td align='left'> \
													<input type='text' value='" + dszero + "' readonly></td><td align='left'>&nbsp;ระดับตลิ่งท้ายน้ำ:</td><td align='left'><input type='text' value='" + dsbriverlv + "' readonly></td></tr> \
													<tr><td align='left'>&nbsp;จำนวนประตู:</td><td align='left'><input type='text' value='" + numgate + "' readonly></td><td align='left'>&nbsp;IP Address:</td><td align='left'>" + ipaddr + "</td></tr></table></div></div>";
					}else
					{
						content = content + "<div class='highslide-gallery'><table border='0'><tr><td align='left' rowspan='7' width='290px;' height='200px;'><a href='pics/stations/" + stationid + "/01.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this,miniGalleryOptions1);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/01.jpg' width='290px;' height='200px;'></a><div class='hidden-container'><a href='pics/stations/" + stationid + "/02.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/02.jpg' width='290px;' height='200px;'></a><a href='pics/stations/" + stationid + "/03.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/03.jpg' width='290px;' height='200px;'></a></div></td><td align='left' colspan='4' style='background:url(images/bgs3.png);'>&nbsp;<img src='images/hstation.png' width='25px;' height='25px;'>&nbsp;<font class='middle_menu'>รายละเอียดสถานี</font></td></tr> \
													<tr><td align='left' colspan='4'>&nbsp;โครงการ:&nbsp;&nbsp;" + zonename + "</td></tr><tr><td align='left' colspan='4'>&nbsp;ชื่อสถานี:&nbsp;&nbsp;" + stationname + "</td></tr><tr><td align='left' width='145px;'>&nbsp;พิกัด Latitude: \
													</td><td align='left' width='160px;'><input type='text' value='" + latitude + "' readonly></td><td width='145px;' align='left'>&nbsp;พิกัด Longitude:</td><td align='left' width='160px;'> \
													<input type='text' value='" + longitude + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage เหนือน้ำ:</td><td align='left'><input type='text' value='" + uszero + "' readonly></td> \
													<td align='left'>&nbsp;ระดับตลิ่งเหนือน้ำ:</td><td align='left'><input type='text' value='" + usbriverlv + "' readonly></td></tr><tr><td align='left'>&nbsp;Zerogage ท้ายน้ำ:</td><td align='left'> \
													<input type='text' value='" + dszero + "' readonly></td><td align='left'>&nbsp;ระดับตลิ่งท้ายน้ำ:</td><td align='left'><input type='text' value='" + dsbriverlv + "' readonly></td></tr> \
													<tr><td align='left'>&nbsp;จำนวนประตู:</td><td align='left'><input type='text' value='" + numgate + "' readonly></td><td align='left'>&nbsp;IP Address:</td><td align='left'>" + ipaddr + "</td></tr></table></div></div>";
					}
*/					
					oObj.style.background = ""; oObj.innerHTML = content;
				}					
			}else
			{
				content = "<div align='center'><table><tr><td height='500px;' align='center' valign='middle'><img src='images/loading.gif' width='30px;' height='30px;'></td></tr></table></div>";
				oObj.style.background = ""; oObj.innerHTML = content;
			}
		}
		xmlhttp.send(null);
	}
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function click_tracking(stationid,page)
{
	var oObj = document.getElementById('sub_content'); 
	if(oObj)
	{
		var xmlhttp = null; if(window.ActiveXObject) {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} else if(window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else{}			
		var url = "req/getinfo.php?sid=" + stationid; xmlhttp.open("GET", url, true); var curdate = new Date(); var str_year = curdate.getFullYear();
		//var url = "req/gettrack.php?sid=" + stationid; xmlhttp.open("GET", url, true);
		xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4)
			{
				// display query menu
				var xml = xmlhttp.responseXML; var info = xml.documentElement.getElementsByTagName("station");
				var permission = (xml.getElementsByTagName("station"))[0].getAttribute("permission"); 
				if(info.length > 0)
				{
					var r1hdata = ""; var r1ddata = "";
					var stationname = info[0].getAttribute("name"); var stationdesc = info[0].getAttribute("description"); var zoneid = info[0].getAttribute("zoneid"); var latitude = info[0].getAttribute("latitude");
					var longitude = info[0].getAttribute("longitude"); var ipaddr = info[0].getAttribute("ipaddr"); var camaddr = info[0].getAttribute("camaddr"); var ctrladdr = info[0].getAttribute("ctrladdr");
					var numgate = info[0].getAttribute("numgate"); var gearstep = info[0].getAttribute("gearstep"); var uszero = info[0].getAttribute("uszero"); var dszero = info[0].getAttribute("dszero");
					var usbriverlv = info[0].getAttribute("usbriverlv"); var dsbriverlv = info[0].getAttribute("dsbriverlv"); var usdata = info[0].getAttribute("usdata"); var dsdata = info[0].getAttribute("dsdata");
					var usdate = info[0].getAttribute("usdate"); var dsdate = info[0].getAttribute("dsdate"); var ustime = info[0].getAttribute("ustime"); var dstime = info[0].getAttribute("dstime");						
					var usid = info[0].getAttribute("usid"); var dsid = info[0].getAttribute("dsid"); var usstatus= info[0].getAttribute("usstatus"); var dsstatus= info[0].getAttribute("dsstatus"); 
					var rainid= info[0].getAttribute("rainid"); var rstatus= info[0].getAttribute("rstatus"); var zonename= info[0].getAttribute("zonename"); var rdata= info[0].getAttribute("rdata"); 
					var rdate= info[0].getAttribute("rdate"); var rtime= info[0].getAttribute("rtime"); var maxusdata = info[0].getAttribute("maxusdata"); var maxdsdata = info[0].getAttribute("maxdsdata");
					var qdata = info[0].getAttribute("qdata"); var zusdata = info[0].getAttribute("zusdata"); var zdsdata = info[0].getAttribute("zdsdata"); var mzusdata = info[0].getAttribute("mzusdata");
					var mzdsdata = info[0].getAttribute("mzdsdata"); 

					var content = "<div style='border: 1px #D6EDBC solid;'><table border='0' style='border-spacing:0;'> \
													<tr><td rowspan='4' width='180px;'><a href='pics/stations/" + stationid + "/01.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this,miniGalleryOptions1);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/01.jpg' width='180px;' height='120px;'></a><div class='hidden-container'><a href='pics/stations/" + stationid + "/02.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/02.jpg' width='180px;' height='120px;'></a><a href='pics/stations/" + stationid + "/03.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/03.jpg' width='180px;' height='120px;'></div></td><td align='left' width='150px;'>&nbsp;พิกัด Latitude:</td><td align='left' width='200px;'><input type='text' value='" + latitude + "' size='30' readonly></td><td align='left' width='150px;'>&nbsp;พิกัด Longitude:</td><td align='left' width='200px;'><input type='text' value='" + longitude + "' size='30' readonly></td></tr> \
													<tr><td align='left'>&nbsp;Zerogage เหนือน้ำ:</td><td align='left'><input type='text' value='" + uszero + "' size='30' readonly></td><td align='left'>&nbsp;ระดับตลิ่งเหนือน้ำ:</td><td align='left'><input type='text' value='" + usbriverlv + "' size='30' readonly></td></tr> \
													<tr><td align='left'>&nbsp;Zerogage ท้ายน้ำ:</td><td align='left'><input type='text' value='" + dszero + "' size='30' readonly></td><td align='left'>&nbsp;ระดับตลิ่งท้ายน้ำ:</td><td align='left'><input type='text' value='" + dsbriverlv + "' size='30' readonly></td></tr> \
													<tr><td align='left'>&nbsp;จำนวนประตู:</td><td align='left'><input type='text' value='" + numgate + "' size='30' readonly></td><td></td><td></td></tr></table></div>";
													
					content = content + "<div align='center'><table border='0'><tr><td width='100px;' align='right'><img src='images/calendar.png' width='25px;' height='25px;'></td><td width='160px;' align='left'><font class='middle_menu'>Tracking</font></td><td align='left' width='600px;'>&nbsp;<label for='year'>Year</label>&nbsp;<input type='text' id='from' name='from' value='" + str_year + "' onMouseOver='tdate_click();'>&nbsp;<img src='images/calendar.gif' width='15px;' height='15px;'>&nbsp;<input type='button' value='Query' style='width:80px;' onclick='fetch_track(\"" + stationid + "\");'></td></tr></table></div>";
					content = content + "<div id='section_report' name='section_report' style='width:100%; height:500px;'>";
					content = content + "<div align='center'><table border='0'><tr><td width='400px;' align='left'>&nbsp;</td><td width='400px;' align='right'><img src='images/no.png' width='20px;' height='20px;'>&nbsp;Total:&nbsp;0&nbsp;</td></tr></table></div>"; 
					content = content + "<div align='center' style='max-height:480px; overflow:auto;'><table style='border: 1px #D6EDBC solid;'><tr style='background:url(images/bgs2.png);'><td width='100px;' align='center'>DATE</td><td width='100px;' align='center'>TIME</td><td width='530px;' align='center'>DETAIL</td><td width='60px;' align='center'>ACTION</td></tr>";
					content = content + "<tr><td align='left' colspan='4'><img src='images/sinfo.png' width='25px;' height='25px;' title='information'>&nbsp;No data</td></tr></table></div></div>";	
													
					oObj.style.background = ""; oObj.innerHTML = content; 
					fetch_track(stationid);
				}
			}else
			{
				content = "<div align='center'><table><tr><td height='500px;' align='center' valign='middle'><img src='images/loading.gif' width='30px;' height='30px;'></td></tr></table></div>";
				oObj.style.background = ""; oObj.innerHTML = content;
			}
		}					
		xmlhttp.send(null);
	}
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function click_overview()
{
	var oObj = document.getElementById("main_content"); 
	if(oObj)
	{
		var content = "<div style='height:370px; background:url(images/main.jpg); background-repeat:no-repeat;' align='left'><table border='0'><tr><td width='425px;' height='30px;' align='center'>&nbsp;</td><td width='425px;' align='center'>&nbsp;</td></tr><td align='center'><object style='height: 250px; width: 400px'><param name='movie' value='http://www.youtube.com/v/-hmMsfoI0io?version=3&feature=player_profilepage'><param name='allowFullScreen' value='true'><param name='allowScriptAccess' value='always'><embed src='http://www.youtube.com/v/-hmMsfoI0io?version=3&feature=player_profilepage' type='application/x-shockwave-flash' allowfullscreen='true' allowScriptAccess='always' width='400' height='250'></object></td><td align='center' rowspan='2'><marquee direction='up' scrollAmount='2' style='height:220px; width:300px; font-size:16px;' onmouseover='this.stop();' onmouseout='this.start();'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ความร่วมมือทางวิชาการระหว่างกรมชลประทานและมหาวิทยาลัยเกษตรศาสตร์ โครงการพัฒนาการจัดการชลประทานให้ทันสมัยโดยใช้เทคโนโลยีสารสนเทศและการสื่อสาร<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ในพื้นที่โครงการพัฒนาเกษตรชลประทานพิษณุโลก (เขื่อนนเรศวร พลายชุมพล ดงเศรษฐี และท่าบัว) สำนักชลประทานที่ 3</marquee></td></tr><tr><td align='left' valign='top'>&nbsp;&nbsp;&nbsp;<a href='http://www.youtube.com/v/shqrQYzVZJw?version=3&feature=player_profilepage' target='_blank' title='Youtube'><img src='images/youtube.png' width='30px;' height='30px;'></a>&nbsp;<a target='_blank' href='http://www.youtube.com/v/shqrQYzVZJw?version=3&feature=player_profilepage' style='color:green; font-size:16px; font-weight: bold;'>Video Project Introduction - English</a></td></tr></table></div><div style='height:350px; background:url(images/profile.jpg); background-repeat:no-repeat; background-position:center top; padding:0px; border:none;' align='left'><div id='section_profile' name='section_profile' style='height:350px; border:none;'><script>vprofile()</script></div></div>";
		oObj.innerHTML = content; 
	}
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function qdate_click()
{
	var dates = $( "#from, #to" ).datepicker({
		//defaultDate: "+1w",
		changeMonth: true,
		changeYear: true,
		numberOfMonths: 2,
		dateFormat: "yy-mm-dd",
		showButtonPanel: true,
		//dateFormat: "dd-mm-yy",
		onSelect: function( selectedDate ) {
			var option = this.id == "from" ? "minDate" : "maxDate",
				instance = $( this ).data( "datepicker" ),
				date = $.datepicker.parseDate(
					instance.settings.dateFormat ||
					$.datepicker._defaults.dateFormat,
					selectedDate, instance.settings );
			dates.not( this ).datepicker( "option", option, date );
		}
	});
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function tdate_click()
{
	var dates = $( "#from, #to" ).datepicker({
		//defaultDate: "+1w",
		changeMonth: true,
		changeYear: true,
		dateFormat: "yy",
		showButtonPanel: true
	});
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function click_report(stationid)
{
	var oObj = document.getElementById('sub_content'); var content = "";
	if(oObj)
	{
		var xmlhttp = null; if(window.ActiveXObject) {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} else if(window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else{}			
		var url = "req/getinfo.php?sid=" + stationid; xmlhttp.open("GET", url, true); 
		var curdate = new Date(); var str_month = curdate.getMonth()+1; if(str_month <= 9) str_month = "0" + str_month; var str_day = curdate.getDate(); if(str_day <=9) str_day = "0" + str_day;
		var str_curdate = curdate.getFullYear() + "-" + str_month + "-" + str_day;
		xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4)
			{
				var xml = xmlhttp.responseXML; var info = xml.documentElement.getElementsByTagName("station");
				var permission = (xml.getElementsByTagName("station"))[0].getAttribute("permission"); 
				if(info.length > 0) 
				{
					var r1hdata = ""; var r1ddata = "";
					var stationname = info[0].getAttribute("name"); var stationdesc = info[0].getAttribute("description"); var zoneid = info[0].getAttribute("zoneid"); var latitude = info[0].getAttribute("latitude");
					var longitude = info[0].getAttribute("longitude"); var ipaddr = info[0].getAttribute("ipaddr"); var camaddr = info[0].getAttribute("camaddr"); var ctrladdr = info[0].getAttribute("ctrladdr");
					var numgate = info[0].getAttribute("numgate"); var gearstep = info[0].getAttribute("gearstep"); var uszero = info[0].getAttribute("uszero"); var dszero = info[0].getAttribute("dszero");
					var usbriverlv = info[0].getAttribute("usbriverlv"); var dsbriverlv = info[0].getAttribute("dsbriverlv"); var usdata = info[0].getAttribute("usdata"); var dsdata = info[0].getAttribute("dsdata");
					var usdate = info[0].getAttribute("usdate"); var dsdate = info[0].getAttribute("dsdate"); var ustime = info[0].getAttribute("ustime"); var dstime = info[0].getAttribute("dstime");						
					var usid = info[0].getAttribute("usid"); var dsid = info[0].getAttribute("dsid"); var usstatus= info[0].getAttribute("usstatus"); var dsstatus= info[0].getAttribute("dsstatus"); 
					var rainid= info[0].getAttribute("rainid"); var rstatus= info[0].getAttribute("rstatus"); var zonename= info[0].getAttribute("zonename"); var rdata= info[0].getAttribute("rdata"); 
					var rdate= info[0].getAttribute("rdate"); var rtime= info[0].getAttribute("rtime"); var maxusdata = info[0].getAttribute("maxusdata"); var maxdsdata = info[0].getAttribute("maxdsdata");
					var qdata = info[0].getAttribute("qdata"); var zusdata = info[0].getAttribute("zusdata"); var zdsdata = info[0].getAttribute("zdsdata"); var mzusdata = info[0].getAttribute("mzusdata");
					var mzdsdata = info[0].getAttribute("mzdsdata"); 

					var content = "<div style='border: 1px #D6EDBC solid;'><table border='0' style='border-spacing:0;'> \
													<tr><td rowspan='4' width='180px;'><a href='pics/stations/" + stationid + "/01.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this,miniGalleryOptions1);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/01.jpg' width='180px;' height='120px;'></a><div class='hidden-container'><a href='pics/stations/" + stationid + "/02.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/02.jpg' width='180px;' height='120px;'></a><a href='pics/stations/" + stationid + "/03.jpg' class='highslide' id='thumb1' onclick='return hs.expand(this);' title='" + stationname + "' alt=''><img src='pics/stations/" + stationid + "/03.jpg' width='180px;' height='120px;'></div></td><td align='left' width='150px;'>&nbsp;พิกัด Latitude:</td><td align='left' width='200px;'><input type='text' value='" + latitude + "' size='30' readonly></td><td align='left' width='150px;'>&nbsp;พิกัด Longitude:</td><td align='left' width='200px;'><input type='text' value='" + longitude + "' size='30' readonly></td></tr> \
													<tr><td align='left'>&nbsp;Zerogage เหนือน้ำ:</td><td align='left'><input type='text' value='" + uszero + "' size='30' readonly></td><td align='left'>&nbsp;ระดับตลิ่งเหนือน้ำ:</td><td align='left'><input type='text' value='" + usbriverlv + "' size='30' readonly></td></tr> \
													<tr><td align='left'>&nbsp;Zerogage ท้ายน้ำ:</td><td align='left'><input type='text' value='" + dszero + "' size='30' readonly></td><td align='left'>&nbsp;ระดับตลิ่งท้ายน้ำ:</td><td align='left'><input type='text' value='" + dsbriverlv + "' size='30' readonly></td></tr> \
													<tr><td align='left'>&nbsp;จำนวนประตู:</td><td align='left'><input type='text' value='" + numgate + "' size='30' readonly></td><td></td><td></td></tr></table></div>";

					content = content + "<div align='center'><table border='0'><tr><td width='70px;' align='right'><img src='images/history.png' width='25px;' height='25px;'></td><td width='160px;' align='left'><font class='middle_menu'>Historical Report</font></td><td align='left' width='630px;'>&nbsp;<label for='from'>From</label>&nbsp;<input type='text' id='from' name='from' value='" + str_curdate + "' onMouseOver='qdate_click();'>&nbsp;<img src='images/calendar.gif' width='15px;' height='15px;'>&nbsp;<label for='to'>To</label>&nbsp;<input type='text' id='to' name='to' value='' onMouseOver='qdate_click();'>&nbsp;<img src='images/calendar.gif' width='15px;' height='15px;'>&nbsp;<input type='checkbox' id='ongraph'>Graph&nbsp;&nbsp;&nbsp;<input type='button' value='Query' style='width:80px;' onclick='fetch_report(\"" + stationid + "\");'></td></tr></table></div>";
					
					content = content + "<div id='section_report' name='section_report' style='width:100%; height:500px;'></div>";
					oObj.style.background = ""; oObj.innerHTML = content; 
					first_report(stationid,str_curdate);
				}
			}else
			{
				content = "<div align='center'><table border='0'><tr><td height='500px;' align='center' valign='middle'><img src='images/loading.gif' width='30px;' height='30px;'></td></tr></table></div>";
				oObj.style.background = ""; oObj.innerHTML = content;
			}
		}
		if(xmlhttp) {xmlhttp.send(null);} 
	}
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function first_report(stationid,cusdate)
{
	var fdate = cusdate; 
	var oObj = document.getElementById('section_report'); var content = "";
	if(oObj)
	{
		var xmlhttp = null; if(window.ActiveXObject) {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} else if(window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else{}			
		var url = "req/getreport.php?sid=" + stationid + "&fdate=" + fdate; xmlhttp.open("GET", url, true); 
		xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4)
			{
				var xml = xmlhttp.responseXML; var info = xml.documentElement.getElementsByTagName("idata");
				if(info.length > 0)
				{
					var permission = (xml.getElementsByTagName("idata"))[0].getAttribute("permission"); 
					content = "<div align='center'><table border='0'><tr><td width='400px;' align='left'>&nbsp;</td><td width='400px;' align='right'><img src='images/no.png' width='20px;' height='20px;'>&nbsp;Total:&nbsp;" + info.length + "&nbsp;</td></tr></table></div>"; var tcdate = "";
				
					content = content + "<div align='center' style='max-height:450px; overflow:auto;'><table style='border: 1px #D6EDBC solid;'><tr style='background:url(images/bgs2.png);'><td width='150px;' align='center'>DATE</td><td width='150px;' align='center'>TIME</td><td width='120px;' align='center'>U/S (m. msl)</td><td width='120px;' align='center'>D/S (m. msl)</td><td width='120px;' align='center'>RAIN (mm.)</td><td width='120px;' align='center'>Q (m<sup>3</sup>/s)</td></tr>";
					for(var i =0; i < info.length; i++)
					{																		
						var usdata = ""; usdata = info[i].getAttribute("usdata"); var dsdata = ""; dsdata = info[i].getAttribute("dsdata"); var rdata = info[i].getAttribute("rdata"); var qdata = info[i].getAttribute("qdata"); 
						var gdata = info[i].getAttribute("gdata"); var cdate = info[i].getAttribute("cdate"); var ctime = info[i].getAttribute("ctime"); var opt = info[i].getAttribute("opt"); 
						var zusdata = info[i].getAttribute("zusdata"); var zdsdata = info[i].getAttribute("zdsdata"); 
						
						if(usdata == "") {zusdata = "-9999";} if(dsdata == "") {zdsdata = "-9999";} if(rdata == "") {rdata = "-9999";}
						if(tcdate != cdate)
						{
							tcdate = cdate;
							content = content + "<tr onMouseOver='msOvr(this,\"#B3F0B4\");' onMouseOut='msOut(this,\"#FFFFFF\");'><td align='center'>" + cdate + "</td><td align='center'>" + ctime + "</td><td align='center'>" + zusdata + "</td><td align='center'>" + zdsdata + "</td><td align='center'>" + rdata + "<td align='center'>" + qdata + "</td></tr>";
						}else
						{
							content = content + "<tr onMouseOver='msOvr(this,\"#B3F0B4\");' onMouseOut='msOut(this,\"#FFFFFF\");'><td align='center'>&nbsp;</td><td align='center'>" + ctime + "</td><td align='center'>" + zusdata + "</td><td align='center'>" + zdsdata + "</td><td align='center'>" + rdata + "</td><td align='center'>" + qdata + "</td></tr>";
						}						
					}
					content = content + "</table></div>";

					if(permission != "" && permission != "anonymous")
					{
						// for export data
						content = content + "<div align='center'><table border='0' width='810px;'><tr><td align='right'><img src='images/xls.png'  width='30px;' height='30px;' title='xls file'></td><td width='80px;' align='right'><input type='button' style='width:80px;' value='XLS' onclick='location.href=\"req/getexport.php?sid=" + stationid + "&fdate=" + fdate + "&type=1\"'></td><td width='50px;' align='right'><img src='images/csv.png'  width='30px;' height='30px;' title='csv file'></td><td width='80px;' align='right'><input type='button' style='width:80px;' value='CSV' onclick='location.href=\"req/getexport.php?sid=" + stationid + "&fdate=" + fdate + "&type=2\"'></td></tr></table></div>";
					}										
					oObj.innerHTML = content;
				}else
				{
					content = "<div align='center'><table border='0'><tr><td width='400px;' align='left'>&nbsp;</td><td width='400px;' align='right'><img src='images/no.png' width='20px;' height='20px;'>&nbsp;Total:&nbsp;" + info.length + "&nbsp;</td></tr></table></div>"; 
					content = content + "<div align='center' style='max-height:500px; overflow:auto;'><table style='border: 1px #D6EDBC solid;'><tr style='background:url(images/bgs2.png);'><td width='150px;' align='center'>DATE</td><td width='150px;' align='center'>TIME</td><td width='120px;' align='center'>U/S (m. msl)</td><td width='120px;' align='center'>D/S (m. msl)</td><td width='120px;' align='center'>RAIN (mm.)</td><td width='120px;' align='center'>Q (m<sup>3</sup>/s)</td></tr>";
					content = content + "<tr><td align='left' colspan='6'><img src='images/sinfo.png' width='25px;' height='25px;' title='information'>&nbsp;No data</td></tr></table></div>";
					oObj.innerHTML = content;
				}
			}else
			{
				content = "<div align='center'><table border='0'><tr><td height='500px;' align='center' valign='middle'><img src='images/loading.gif' width='30px;' height='30px;'></td></tr></table></div>";
				oObj.innerHTML = content;
			}
		}
		if(xmlhttp) {xmlhttp.send(null);} 
	}
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function fetch_report(stationid)
{
	var fdate = document.getElementById('from').value; var tdate = document.getElementById('to').value; var ongraph = document.getElementById('ongraph').checked;
	if(!ongraph)
	{
		var oObj = document.getElementById('section_report'); var content = "";
		if(oObj)
		{
			var xmlhttp = null; if(window.ActiveXObject) {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} else if(window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else{}			
			var url = "req/getreport.php?sid=" + stationid + "&fdate=" + fdate + "&tdate=" + tdate; xmlhttp.open("GET", url, true); var d = new Date(); 
			xmlhttp.onreadystatechange = function()
			{
				if(xmlhttp.readyState == 4)
				{
					var xml = xmlhttp.responseXML; var info = xml.documentElement.getElementsByTagName("idata");
					if(info.length > 0)
					{
						var permission = (xml.getElementsByTagName("idata"))[0].getAttribute("permission"); 
						content = "<div align='center'><table border='0'><tr><td width='400px;' align='left'>&nbsp;</td><td width='400px;' align='right'><img src='images/no.png' width='20px;' height='20px;'>&nbsp;Total:&nbsp;" + info.length + "&nbsp;</td></tr></table></div>"; var tcdate = "";
					
						content = content + "<div align='center' style='max-height:450px; overflow:auto;'><table style='border: 1px #D6EDBC solid;'><tr style='background:url(images/bgs2.png);'><td width='150px;' align='center'>DATE</td><td width='150px;' align='center'>TIME</td><td width='120px;' align='center'>U/S (m. msl)</td><td width='120px;' align='center'>D/S (m. msl)</td><td width='120px;' align='center'>RAIN (mm.)</td><td width='120px;' align='center'>Q (m<sup>3</sup>/s)</td></tr>";
						for(var i =0; i < info.length; i++)
						{																		
							var usdata = ""; usdata = info[i].getAttribute("usdata"); var dsdata = ""; dsdata = info[i].getAttribute("dsdata"); var rdata = info[i].getAttribute("rdata"); var qdata = info[i].getAttribute("qdata"); 
							var gdata = info[i].getAttribute("gdata"); var cdate = info[i].getAttribute("cdate"); var ctime = info[i].getAttribute("ctime"); var opt = info[i].getAttribute("opt"); 
							var zusdata = info[i].getAttribute("zusdata"); var zdsdata = info[i].getAttribute("zdsdata"); 
							
							if(usdata == "") {zusdata = "-9999";} if(dsdata == "") {zdsdata = "-9999";} if(rdata == "") {rdata = "-9999";}
							if(tcdate != cdate)
							{
								tcdate = cdate;
								content = content + "<tr onMouseOver='msOvr(this,\"#B3F0B4\");' onMouseOut='msOut(this,\"#FFFFFF\");'><td align='center'>" + cdate + "</td><td align='center'>" + ctime + "</td><td align='center'>" + zusdata + "</td><td align='center'>" + zdsdata + "</td><td align='center'>" + rdata + "<td align='center'>" + qdata + "</td></tr>";
								//content = content + "<tr onMouseOver='msOvr(this,\"#B3F0B4\");' onMouseOut='msOut(this,\"#FFFFFF\");'><td align='center'>" + cdate + "</td><td align='center'>" + ctime + "</td><td align='center'>" + usdata + "</td><td align='center'>" + dsdata + "</td><td align='center'>" + rdata + "<td>" + qdata + "</td></tr>";
							}else
							{
								content = content + "<tr onMouseOver='msOvr(this,\"#B3F0B4\");' onMouseOut='msOut(this,\"#FFFFFF\");'><td align='center'>&nbsp;</td><td align='center'>" + ctime + "</td><td align='center'>" + zusdata + "</td><td align='center'>" + zdsdata + "</td><td align='center'>" + rdata + "</td><td align='center'>" + qdata + "</td></tr>";
								//content = content + "<tr onMouseOver='msOvr(this,\"#B3F0B4\");' onMouseOut='msOut(this,\"#FFFFFF\");'><td align='center'>&nbsp;</td><td align='center'>" + ctime + "</td><td align='center'>" + usdata + "</td><td align='center'>" + dsdata + "</td><td align='center'>" + rdata + "</td><td>" + qdata + "</td></tr>";
							}						
						}
						content = content + "</table></div>";
	
						if(permission != "" && permission != "anonymous")
						{
							// for export data
							content = content + "<div align='center'><table border='0' width='810px;'><tr><td align='right'><img src='images/xls.png'  width='30px;' height='30px;' title='xls file'></td><td width='80px;' align='right'><input type='button' style='width:80px;' value='XLS' onclick='location.href=\"req/getexport.php?sid=" + stationid + "&fdate=" + fdate + "&tdate=" + tdate + "&type=1\"'></td><td width='50px;' align='right'><img src='images/csv.png'  width='30px;' height='30px;' title='csv file'></td><td width='80px;' align='right'><input type='button' style='width:80px;' value='CSV' onclick='location.href=\"req/getexport.php?sid=" + stationid + "&fdate=" + fdate + "&tdate=" + tdate + "&type=2\"'></td></tr></table></div>";
						}										
						oObj.innerHTML = content;
					}else
					{
						content = "<div align='center'><table border='0'><tr><td width='400px;' align='left'>&nbsp;</td><td width='400px;' align='right'><img src='images/no.png' width='20px;' height='20px;'>&nbsp;Total:&nbsp;" + info.length + "&nbsp;</td></tr></table></div>"; 
						content = content + "<div align='center' style='max-height:500px; overflow:auto;'><table style='border: 1px #D6EDBC solid;'><tr style='background:url(images/bgs2.png);'><td width='150px;' align='center'>DATE</td><td width='150px;' align='center'>TIME</td><td width='120px;' align='center'>U/S (m. msl)</td><td width='120px;' align='center'>D/S (m. msl)</td><td width='120px;' align='center'>RAIN (mm.)</td><td width='120px;' align='center'>Q (m<sup>3</sup>/s)</td></tr>";
						content = content + "<tr><td align='left' colspan='6'><img src='images/sinfo.png' width='25px;' height='25px;' title='information'>&nbsp;No data</td></tr></table></div>";
						oObj.innerHTML = content;
					}
				}else
				{
					content = "<div align='center'><table border='0'><tr><td height='500px;' align='center' valign='middle'><img src='images/loading.gif' width='30px;' height='30px;'></td></tr></table></div>";
					oObj.innerHTML = content;
				}
			}
			if(xmlhttp) {xmlhttp.send(null);} 
		}
	}else
	{
		graph_report(stationid);
	}
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function fetch_track(stationid)
{
	var year = document.getElementById('from').value; var oObj = document.getElementById('section_report'); var content = "";
	if(oObj)
	{
		var xmlhttp = null; if(window.ActiveXObject) {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} else if(window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else{}			
		var url = "req/gettrack.php?sid=" + stationid + "&year=" + year; xmlhttp.open("GET", url, true); var d = new Date(); 
		xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4)
			{
				var xml = xmlhttp.responseXML; var info = xml.documentElement.getElementsByTagName("station");
				if(info.length > 0)
				{
					content = "<div align='center'><table border='0'><tr><td width='400px;' align='left'>&nbsp;</td><td width='400px;' align='right'><img src='images/no.png' width='20px;' height='20px;'>&nbsp;Total:&nbsp;" + info.length + "&nbsp;</td></tr></table></div>"; var tcdate = "";
				
					content = content + "<div align='center' style='max-height:450px; overflow:auto;'><table style='border: 1px #D6EDBC solid;'><tr style='background:url(images/bgs2.png);'><td width='100px;' align='center'>DATE</td><td width='100px;' align='center'>TIME</td><td width='530px;' align='center'>DETAIL</td><td width='60px;' align='center'>ACTION</td></tr>";
					for(var i =0; i < info.length; i++)
					{
						var action = info[i].getAttribute("action"); var detail = info[i].getAttribute("detail"); var cdate = info[i].getAttribute("cdate"); var ctime = info[i].getAttribute("ctime"); 
						if(action == "add") {action = "<img src='images/sadd.png' width='20px;' height='20px;' title='add' onclick='track_dialog(\"" + detail + "<br><hr><b>Date/Time:</b> " + cdate + " " + ctime + "\");'>";} 
						else if(action == "delete") {action = "<img src='images/sremove.png' width='20px;' height='20px;' title='delete' onclick='track_dialog(\"" + detail +  "<br><hr><b>Date/Time:</b> " + cdate + " " + ctime + "\");'>";}
						else if(action == "modify") {action = "<img src='images/sedit.png' width='20px;' height='20px;' title='modify' onclick='track_dialog(\"" + detail +  "<br><hr><b>Date/Time:</b> " + cdate + " " + ctime + "\");'>";} 
						else if(action == "alert") {action = "<img src='images/salert.png' width='20px;' height='20px;' title='alert' onclick='track_dialog(\"" + detail +  "<br><hr><b>Date/Time:</b> " + cdate + " " + ctime + "\");'>";}
						else if(action == "info") {action = "<img src='images/sinfo.png' width='20px;' height='20px;' title='info' onclick='track_dialog(\"" + detail +  "<br><hr><b>Date/Time:</b> " + cdate + " " + ctime + "\");'>";}
						else if(action == "warn") {action = "<img src='images/swarn.png' width='20px;' height='20px;' title='warning' onclick='track_dialog(\"" + detail +  "<br><hr><b>Date/Time:</b> " + cdate + " " + ctime + "\");'>";}
						if(tcdate != cdate)
						{
							tcdate = cdate;
							content = content + "<tr onMouseOver='msOvr(this,\"#B3F0B4\");' onMouseOut='msOut(this,\"#FFFFFF\");' title='" + detail + "'><td align='center'>" + cdate + "</td><td align='center'>" + ctime + "</td><td align='left'>" + detail + "</td><td align='center'>" + action + "</td></tr>";
						}else
						{
							content = content + "<tr onMouseOver='msOvr(this,\"#B3F0B4\");' onMouseOut='msOut(this,\"#FFFFFF\");' title='" + detail + "'><td align='center'>&nbsp;</td><td align='center'>" + ctime + "</td><td align='left'>" + detail + "</td><td align='center'>" + action + "</td></tr>";
						}						
					}
					content = content + "</table></div>";
					oObj.innerHTML = content;
				}else
				{
					content = "<div align='center'><table border='0'><tr><td width='400px;' align='left'>&nbsp;</td><td width='400px;' align='right'><img src='images/no.png' width='20px;' height='20px;'>&nbsp;Total:&nbsp;0&nbsp;</td></tr></table></div>"; 
					content = content + "<div align='center' style='max-height:450px; overflow:auto;'><table style='border: 1px #D6EDBC solid;'><tr style='background:url(images/bgs2.png);'><td width='100px;' align='center'>DATE</td><td width='100px;' align='center'>TIME</td><td width='530px;' align='center'>DETAIL</td><td width='60px;' align='center'>ACTION</td></tr>";
					content = content + "<tr><td align='left' colspan='4'><img src='images/sinfo.png' width='25px;' height='25px;' title='information'>&nbsp;No data</td></tr></table></div></div>";	

					oObj.innerHTML = content;
				}
			}else
			{
				content = "<div align='center'><table border='0'><tr><td height='500px;' align='center' valign='middle'><img src='images/loading.gif' width='30px;' height='30px;'></td></tr></table></div>";
				oObj.innerHTML = content;
			}
		}
		if(xmlhttp) {xmlhttp.send(null);} 
	}
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function station_scape(stationid,status,value,usdata,dsdata)
{
	var msg = ""; var gdata = value.split("|");
	if(stationid == "C1_0_075")
	{
		msg ="<img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 150px; top: 180px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 220px; top: 180px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 285px; top: 180px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 200px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 50px; top: 290px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: black; position: absolute; z-index: 0; left: 285px; top: 220px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: black; position: absolute; z-index: 0; left: 215px; top: 220px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: black; position: absolute; z-index: 0; left: 145px; top: 220px;'>" + gdata[2] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 80px; top: 70px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 280px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 120px; top: 70px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 320px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_10_620")
	{
		msg ="<img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 100px; top: 170px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 190px; top: 170px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 285px; top: 170px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 250px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 50px; top: 290px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 285px; top: 210px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 185px; top: 210px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 95px; top: 210px;'>" + gdata[2] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 80px; top: 60px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 280px; top: 270px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 120px; top: 60px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 320px; top: 270px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_25_020")
	{
		msg ="<img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 130px; top: 200px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 220px; top: 200px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 310px; top: 200px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 250px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 30px; top: 290px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 305px; top: 240px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 210px; top: 240px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 120px; top: 240px;'>" + gdata[2] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 60px; top: 60px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 280px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 100px; top: 60px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 320px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_40_720")
	{
		msg ="<img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 120px; top: 180px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 210px; top: 180px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 300px; top: 180px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 180px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 350px; top: 290px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 295px; top: 220px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 220px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 110px; top: 220px;'>" + gdata[2] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 320px; top: 50px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 70px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 360px; top: 50px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 110px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_52_120")
	{
		msg ="<img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 120px; top: 180px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 210px; top: 180px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 300px; top: 180px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 180px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 30px; top: 290px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 295px; top: 220px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 220px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 110px; top: 220px;'>" + gdata[2] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 320px; top: 50px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 150px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 360px; top: 50px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 190px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_58_800")
	{
		msg ="<img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 100px; top: 190px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 210px; top: 190px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 320px; top: 190px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 300px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 30px; top: 290px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 310px; top: 230px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 205px; top: 230px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 95px; top: 230px;'>" + gdata[2] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 40px; top: 30px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 270px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 80px; top: 30px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 310px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_72_500")
	{
		msg ="<img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 100px; top: 180px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 190px; top: 180px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 280px; top: 180px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 80px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 340px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 275px; top: 230px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 185px; top: 230px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 90px; top: 230px;'>" + gdata[2] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 220px; top: 30px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 260px; top: 30px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_80_020")
	{
		msg ="<img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 150px; top: 180px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 260px; top: 180px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 60px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 340px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 255px; top: 220px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 145px; top: 220px;'>" + gdata[1] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 220px; top: 30px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 80px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 260px; top: 30px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 120px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_88_075")
	{
		msg ="<img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 80px; top: 180px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 210px; top: 180px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 340px; top: 180px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 60px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 340px; top: 310px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 330px; top: 240px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 240px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 70px; top: 240px;'>" + gdata[2] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 200px; top: 20px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 80px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 240px; top: 20px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 120px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_96_900")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 200px; top: 150px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 190px; top: 210px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 200px; top: 5px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 270px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 240px; top: 10px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 270px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_106_270")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 200px; top: 150px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 190px; top: 210px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 200px; top: 5px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 270px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 240px; top: 10px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 270px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_110_970")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 210px; top: 150px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 320px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 205px; top: 190px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 100px; top: 5px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 200px; top: 270px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 140px; top: 10px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 240px; top: 270px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_121_140")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 180px; top: 190px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 40px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 170px; top: 230px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 290px; top: 90px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 270px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 330px; top: 90px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 270px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_126_340")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 205px; top: 160px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 195px; top: 200px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 280px; top: 30px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 270px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 320px; top: 30px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 270px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_132_820")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 180px; top: 190px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 170px; top: 230px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 330px; top: 50px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 150px; top: 280px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 370px; top: 50px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 190px; top: 280px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_139_060")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 230px; top: 160px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 220px; top: 200px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 150px; top: 20px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 200px; top: 280px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 190px; top: 20px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 240px; top: 280px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_145_560")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 230px; top: 160px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 310px; top: 10px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 220px; top: 200px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 80px; top: 10px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 200px; top: 280px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 120px; top: 10px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 240px; top: 280px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_149_480")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 220px; top: 150px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 40px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 340px; top: 250px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 210px; top: 190px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 220px; top: 10px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 200px; top: 270px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 260px; top: 10px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 240px; top: 270px;'>" + dsdata + "</font>";
	}else if(stationid == "C1_155_700")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 200px; top: 150px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 40px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 40px; top: 280px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 190px; top: 190px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 280px; top: 10px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 180px; top: 270px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 320px; top: 10px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 220px; top: 270px;'>" + dsdata + "</font>";
	}else if(stationid == "PL0")
	{
		msg ="<img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 120px; top: 140px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 200px; top: 140px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 280px; top: 140px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 270px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 275px; top: 175px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 190px; top: 175px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 110px; top: 175px;'>" + gdata[2] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 335px; top: 50px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 250px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 375px; top: 50px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 250px;'>" + dsdata + "</font>";
	}else if(stationid == "PL1")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 230px; top: 160px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 350px; top: 50px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 40px; top: 280px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 220px; top: 190px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 30px; top: 40px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 190px; top: 270px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 70px; top: 40px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 230px; top: 270px;'>" + dsdata + "</font>";
	}else if(stationid == "DR15_8_1")
	{
		msg ="<img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 150px; top: 160px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 260px; top: 160px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 30px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 340px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 255px; top: 210px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 145px; top: 210px;'>" + gdata[1] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 270px; top: 5px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 80px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 310px; top: 5px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 120px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "DR15_8_2")
	{
		msg ="<img src='images/5.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 60px; top: 140px;' title='Gate5'><img src='images/4.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 130px; top: 140px;' title='Gate4'><img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 195px; top: 140px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 260px; top: 140px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 330px; top: 140px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 60px; top: 20px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 60px; top: 290px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;"; gdata[3] = "&nbsp;"; gdata[4] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 325px; top: 190px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 255px; top: 190px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 185px; top: 190px;'>" + gdata[2] + "</font><font id='gif_g4_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 120px; top: 190px;'>" + gdata[3] + "</font><font id='gif_g5_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 50px; top: 190px;'>" + gdata[4] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 30px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 30px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "DR2_8")
	{
		msg ="<img src='images/4.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 70px; top: 180px;' title='Gate4'><img src='images/3.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 140px; top: 180px;' title='Gate3'><img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 210px; top: 180px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 280px; top: 180px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 150px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;"; gdata[2] = "&nbsp;"; gdata[3] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 275px; top: 220px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 220px;'>" + gdata[1] + "</font><font id='gif_g3_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 130px; top: 220px;'>" + gdata[2] + "</font><font id='gif_g4_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 60px; top: 220px;'>" + gdata[3] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 5px; top: 80px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 290px;'>";
		msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 45px; top: 80px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C35")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 223px; top: 130px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 216px; top: 180px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 270px;'>";
		//msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 280px; top: 20px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 270px;'>";
		msg = msg + "<font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 270px;'>" + dsdata + "</font>";
		//msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 320px; top: 20px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 270px;'>" + dsdata + "</font>";
	}else if(stationid == "C40")
	{
		msg ="<img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 150px; top: 180px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 280px; top: 180px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 270px; top: 220px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 140px; top: 220px;'>" + gdata[1] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 290px;'>";
		//msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 280px; top: 10px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 290px;'>";
		msg = msg + "<font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 290px;'>" + dsdata + "</font>";
		//msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 320px; top: 10px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C67")
	{
		msg ="<img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 150px; top: 180px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 280px; top: 180px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 270px; top: 220px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 140px; top: 220px;'>" + gdata[1] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 290px;'>";
		//msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 30px; top: 70px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 290px;'>";
		msg = msg + "<font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 290px;'>" + dsdata + "</font>";
		//msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 70px; top: 70px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C76")
	{
		msg ="<img src='images/2.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 150px; top: 180px;' title='Gate2'><img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 280px; top: 180px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 320px; top: 30px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 300px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;"; gdata[1] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 270px; top: 220px;'>" + gdata[0] + "</font><font id='gif_g2_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 140px; top: 220px;'>" + gdata[1] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 290px;'>";
		//msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 20px; top: 80px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 160px; top: 290px;'>";
		msg = msg + "<font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 290px;'>" + dsdata + "</font>";
		//msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 60px; top: 80px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 200px; top: 290px;'>" + dsdata + "</font>";
	}else if(stationid == "C98")
	{
		msg ="<img src='images/1.png' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 240px; top: 170px;' title='Gate1'>";
		msg = msg + "<font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 300px; top: 10px;'>เหนือน้ำ</font><font style='font-size:24px; font-weight: bold; color: yellow; position: absolute; z-index: 0; left: 20px; top: 280px;'>ท้ายน้ำ</font>";		
		if(gdata == "") {gdata[0] = "&nbsp;";}
		msg = msg + "<font id='gif_g1_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 230px; top: 210px;'>" + gdata[0] + "</font>";
		msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 200px; top: 280px;'>";
		//msg = msg + "<img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 60px; top: 40px;'><img src='images/wlv.gif' width='40px;' height='40px;' style='position: absolute; z-index: 0; left: 200px; top: 280px;'>";
		msg = msg + "<font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 240px; top: 280px;'>" + dsdata + "</font>";
		//msg = msg + "<font id='gif_us_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 100px; top: 40px;'>" + usdata + "</font><font id='gif_ds_" + stationid + "' style='font-size:24px; font-weight: bold; color: white; position: absolute; z-index: 0; left: 240px; top: 280px;'>" + dsdata + "</font>";
	}
	msg = msg + "<img src='images/" +  status + ".gif' id='img_status_" + stationid + "' width='35px;' height='35px;' style='position: absolute; z-index: 0; left: 410px; top: 5px;' title='" + status + "'>";
	return msg;
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function station_xcross(stationid,type,uswarnlv,dswarnlv,uscrilv,dscrilv,value)
{
	var msg = ""; var max = ""; var min = ""; var pixel = 165; var wlv = pixel; var min_briver = ""; var left_briver = ""; var ymax = ""; var ymin = ""; var xwidth = ""; var xleft = "";
	
	if(stationid == "C1_0_075")
	{
		if(type == 1) {max = 56; min = 44; ymax = 52.8; ymin = 51.5; xwidth = 265; xleft = 60;}else {max = 53; min = 41; xwidth = 385; ymax = 0; ymin = 0; xwidth = 385; xleft = 0;}
	}else if(stationid == "C1_10_620")
	{
		if(type == 1) {max = 52; min = 40; ymax = 0; ymin = 0; xwidth = 385; xleft = 0;}else {max = 52; min = 40; ymax = 48; ymin = 47.3; xwidth = 250; xleft = 80;}
	}else if(stationid == "C1_25_020")
	{
		if(type == 1) {max = 51; min = 39; ymax = 47; ymin = 45.5; xwidth = 245; xleft = 70;}else {max = 51; min = 39; ymax = 47; ymin = 46; xwidth = 215; xleft = 100;}
	}else if(stationid == "C1_40_720")
	{
		if(type == 1) {max = 49; min = 37; ymax = 45.2; ymin = 43.5; xwidth = 220; xleft = 100;}else {max = 50; min = 38; ymax = 44.8; ymin = 43.6; xwidth = 220; xleft = 100;}
	}else if(stationid == "C1_52_120")
	{
		if(type == 1) {max = 49; min = 37; ymax = 44.3; ymin = 42.6; xwidth = 200; xleft = 100;}else {max = 49; min = 37; ymax = 44.4; ymin = 43.4; xwidth = 250; xleft = 100;}
	}else if(stationid == "C1_58_800")
	{
		if(type == 1) {max = 47; min = 35; ymax = 43.8; ymin = 42.4; xwidth = 250; xleft = 90;}else {max = 47; min = 35; ymax = 41.7; ymin = 40.2; xwidth = 290; xleft = 95;}
	}else if(stationid == "C1_72_500")
	{
		if(type == 1) {max = 46; min = 34; ymax = 0; ymin = 0; xwidth = 385; xleft = 0;}else {max = 45; min = 33; ymax = 42; ymin = 41.6; xwidth = 335; xleft = 50;}
	}else if(stationid == "C1_80_020")
	{
		if(type == 1) {max = 46; min = 34; ymax = 41; ymin = 39.4; xwidth = 300; xleft = 78;}else {max = 45; min = 33; ymax = 40.6; ymin = 39.5; xwidth = 220; xleft = 100;}
	}else if(stationid == "C1_88_075")
	{
		if(type == 1) {max = 45; min = 33; ymax = 39.8; ymin = 39.1; xwidth = 225; xleft = 85;}else {max = 45; min = 33; ymax = 39.9; ymin = 37.5; xwidth = 210; xleft = 110;}
	}else if(stationid == "C1_96_900")
	{
		if(type == 1) {max = 45; min = 33; ymax = 38.8; ymin = 37; xwidth = 200; xleft = 110;}else {max = 43; min = 31; ymax = 37.6; ymin = 36.1; xwidth = 210; xleft = 110;}
	}else if(stationid == "C1_106_270")
	{
		if(type == 1) {max = 44; min = 32; ymax = 37.2; ymin = 35.4; xwidth = 145; xleft = 145;}else {max = 43; min = 31; ymax = 36.5; ymin = 35.1; xwidth = 160; xleft = 140;}
	}else if(stationid == "C1_110_970")
	{
		if(type == 1) {max = 43; min = 31; ymax = 36.4; ymin = 35.1; xwidth = 160; xleft = 120;}else {max = 43; min = 31; ymax = 35.9; ymin = 34.6; xwidth = 150; xleft = 130;}
	}else if(stationid == "C1_121_140")
	{
		if(type == 1) {max = 42; min = 30; ymax = 35.5; ymin = 34.1; xwidth = 150; xleft = 135;}else {max = 42; min = 30; ymax = 35; ymin = 34; xwidth = 160; xleft = 120;}
	}else if(stationid == "C1_126_340")
	{
		if(type == 1) {max = 41; min = 29; ymax = 34.7; ymin = 32.1; xwidth = 140; xleft = 140;}else {max = 41; min = 29; ymax = 34.4; ymin = 33; xwidth = 150; xleft = 140;}
	}else if(stationid == "C1_132_820")
	{
		if(type == 1) {max = 41; min = 29; ymax = 34; ymin = 33; xwidth = 150; xleft = 140;}else {max = 40; min = 28; ymax = 33.3; ymin = 31.8; xwidth = 150; xleft = 130;}
	}else if(stationid == "C1_139_060")
	{
		if(type == 1) {max = 40; min = 28; ymax = 33; ymin = 31.6; xwidth = 140; xleft = 140;}else {max = 40; min = 28; ymax = 32.8; ymin = 30.3; xwidth = 140; xleft = 140;}
	}else if(stationid == "C1_145_560")
	{
		if(type == 1) {max = 39; min = 27; ymax = 32.4; ymin = 31.1; xwidth = 130; xleft = 150;}else {max = 40; min = 28; ymax = 32.2; ymin = 30.1; xwidth = 150; xleft = 130;}
	}else if(stationid == "C1_149_480")
	{
		if(type == 1) {max = 39; min = 27; ymax = 31.9; ymin = 30.4; xwidth = 160; xleft = 130;}else {max = 39; min = 27; ymax = 31.7; ymin = 30; xwidth =140; xleft = 130;}
	}else if(stationid == "C1_155_700")
	{
		if(type == 1) {max = 39; min = 27; ymax = 31.4; ymin = 30.1; xwidth = 150; xleft = 120;}else {max = 39; min = 27; ymax = 31.1; ymin = 29.9; xwidth = 110; xleft = 150;}
	}else if(stationid == "PL0")
	{
	}else if(stationid == "PL1")
	{
	}else if(stationid == "DR15_8_1")
	{
	}else if(stationid == "DR15_8_2")
	{
	}else if(stationid == "DR2_8")
	{
	}else if(stationid == "C35")
	{
	}else if(stationid == "C40")
	{
	}else if(stationid == "C67")
	{
	}else if(stationid == "C76")
	{
	}else if(stationid == "C98")
	{
	}
	
	if((max != "") && (min != ""))
	{
		if(parseFloat(value) > parseInt(min))
		{
			if(parseFloat(value) < parseFloat(max)) {wlv = (parseInt(value)-parseInt(min))*132/12;}	
			if((ymin != 0) && (ymax != 0)) {if(!((parseFloat(value) > parseFloat(ymin)) && (parseFloat(value) < parseFloat(ymax)))) {xwidth = 385; xleft = 0;}}else {xwidth=xwidth-2; xleft = xleft-2;}
			msg = "<img src='images/wlv_cross.gif' width='" + xwidth + "px;' height='" + (parseInt(wlv)+25) + "px;' style='position:absolute; z-index: 0; left: " + xleft + "px; top: " + (pixel-parseInt(wlv)-25) + "px;'>";
		}
	}
	
	if(stationid.substr(0,3) == "C1_")
	{
		msg = msg + "<img src='pics/xcross/" + stationid + "_" + type + ".png' width='385px;' height='165px;' style='position:absolute; z-index: 0; left: 0px; top: 0px;'>";
	}else
	{
		msg = msg + "<img src='pics/xcross/unknow_" + type + ".png' width='385px;' height='165px;' style='position:absolute; z-index: 0; left: 0px; top: 0px;'>";
	}
	if((stationid != "C35") && (stationid != "C40") && (stationid != "C67") && (stationid != "C76") && (stationid != "C98"))
	{
		msg = msg + "<img src='images/swater.png' width='25px;' height='25px;' style='position:absolute; z-index: 0; left: 60px; top: 5px;'><font id='xcross_" + stationid + "_" + type + "' style='font-size:14px; color: black; font-weight: bold; position: absolute; z-index: 0; left: 90px; top: 10px;'>" + value + "&nbsp; m.(msl)</font>";	
	}else
	{
		if(type != "1")
		{
			msg = msg + "<img src='images/swater.png' width='25px;' height='25px;' style='position:absolute; z-index: 0; left: 60px; top: 5px;'><font id='xcross_" + stationid + "_" + type + "' style='font-size:14px; color: black; font-weight: bold; position: absolute; z-index: 0; left: 90px; top: 10px;'>" + value + "&nbsp; m.(msl)</font>";	
		}
	}
	return msg;
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function cam_click(stationid)
{
	var oObj = document.getElementById('tag_content');
	if(oObj)
	{
		oObj.style.background = ""; var curdate = new Date(); var strtime = curdate.getHours() + ":" + curdate.getMinutes() + curdate.getSeconds();
		tObj = document.getElementById('cam_content'); if(tObj) {tObj.innerHTML = "<img src='http://rid3-hydro.dyndns.org/req/getimage.php?sid=" + stationid + "&time=" + strtime + "' width='450px;' height='340px;' id='cam_img_" + stationid + "'>";}				
	}
	setTimeout("cam_reload('"  + stationid + "')",5000);
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function cam_reload(stationid)
{
	var curdate = new Date(); var strtime =  curdate.getFullYear() + "-" + curdate.getMonth() + "-" + curdate.getDay() + " " + curdate.getHours() + ":" + curdate.getMinutes() + ":" + curdate.getSeconds();
	var mytag = "cam_img_" + stationid; tObj = document.getElementById(mytag); if(tObj) {tObj.src = "http://rid3-hydro.dyndns.org/req/getimage.php?sid=" + stationid + "&time=" + strtime; setTimeout("cam_reload('" + stationid + "')",5000);}		
}
// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------

