<!doctype html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="shortcut icon" href="/images/favicon.ico" />
	<link type="text/css" rel="stylesheet" href="styles/digi_gae.css">
	<link type="text/css" rel="stylesheet" href="styles/tanks.css">
	
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.ui.map.js"></script>
	<script type="text/javascript" src="js/yahoo/yahoo.js"></script>
	<script type="text/javascript" src="js/event/event.js"></script>
	<script type="text/javascript" src="js/dom/dom.js"></script>
	<script type="text/javascript" src="js/animation/animation.js"></script>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	
	<title>Device Cloud Tank Demo</title>
	
	<script type="text/javascript">
		google.load("visualization", "1", {packages:["corechart"]});
		google.setOnLoadCallback(initializeCharts);
		
		var valveINStatus = false;
		var valveOUTStatus = false;
		var sending = false;
		var refreshTimer = null;
		var refreshTimeValue = 15;
		var valveON = "<img src='images/valve_on.png' alt='' border='0'/>";
		var valveOFF = "<img src='images/valve_off.png' alt='' border='0'/>";
		var valveONDisabled = "<img src='images/valve_on_disabled.png' alt='' border='0'/>";
		var valveOFFDisabled = "<img src='images/valve_off_disabled.png' alt='' border='0'/>";
		var minitank = "<img src='images/minitank.png' alt='' border='0'/>";
		var minitankSelected = "<img src='images/minitank_selected.png' alt='' border='0'/>";
		var minitankDisabled = "<img src='images/minitank_disabled.png' alt='' border='0'/>";
		var LEVEL_PIXELS = 253;
		var yLevel = null;
		
		var histogramsDivHeightCollapsed = 0;
		var histogramsDivHeightExpanded = 588;
		var mainPanelDivHeightCollapsed = 560;
		var mainPanelDivHeightExpanded = 1148;
		
		var showHistogramsText = "Show histograms";
		var hideHistogramsText = "Hide histograms";
		var arrowUp = "<img src='images/arrow_up.png' alt='Refresh' border='0' align='absmiddle' width='24' height='24' />";
		var arrowDown = "<img src='images/arrow_down.png' alt='Refresh' border='0' align='absmiddle' width='24' height='24' />";
		
		var tempLevelChart;
		var tempLevelChartData;
		var tempLevelChartOptions;
		var valvesChart;
		var valvesChartData;
		var valvesChartOptions;
		
		var histogramsCollapsed = true;
		
		var gmap;
		
		$(document).ready(function() {
			yLevel = YAHOO.util.Dom.getY('tank-level');
			
			mapCanvas = $('#map_canvas');
			mapCanvas.gmap({'zoom': 17,
					  'center': '28.472886, -81.473558',
					 }
			);
			gmap = mapCanvas.gmap("get", "map");
			
			requestUpdate();
			setLevel(100);
		});
		
		function requestUpdate() {
			refreshTimer = null;
			getTankStatus();
			refreshTimer = setTimeout("requestUpdate()", refreshTimeValue * 1000);
		}
		
		function getTankStatus() {
			var refreshingDiv = document.getElementById("refreshingData");
			var refreshButton = document.getElementById("refresh-button");
			
			refreshingDiv.style.visibility = "visible";
			refreshButton.setAttribute("class", "button-little-disabled");
			refreshButton.onclick = null;
			
			disableValves();
			//disableTanks();
			
			$.get('/tankStatus?id=' + (Math.round(new Date().getTime() / 1000)).toString(), function(data) { 
				if (data != null) {
					result = eval(data);
					if (result["error"] != null && result["error"] != "undefined") {
						document.getElementById("error-text").innerHTML = result["error"];
						if (result["login"] != undefined &&
							result["login"] == "true")
							redirectToLogin(result["text"]);
					} else if (result["level"] != null && result["level"] != "undefined" &&
								result["temperature"] != null && result["temperature"] != "undefined" &&
								result["valveIN"] != null && result["valveIN"] != "undefined" &&
								result["valveOUT"] != null && result["valveOUT"] != "undefined") {
						document.getElementById("error-text").innerHTML = "";
						
						setTankValues(result);
					}
					if (result["tempLevelSamples"] != null && result["valvesSamples"] != null) {
						if (tempLevelChartData.getNumberOfRows() > 0)
							tempLevelChartData.removeRows(0, tempLevelChartData.getNumberOfRows());
						if (valvesChartData.getNumberOfRows() > 0)
							valvesChartData.removeRows(0, valvesChartData.getNumberOfRows());
						
						var tempLevelSamples = eval(result["tempLevelSamples"]);
						var valvesSamples = eval(result["valvesSamples"]);
						$.each(tempLevelSamples, function(i, measure) {
							var timestamp = measure["timestamp"];
							var temperatureSample = undefined;
							var levelSample = undefined;
							if (measure["level"] != undefined)
								levelSample = parseInt(measure["level"]);
							if (measure["temperature"] != undefined)
								temperatureSample = parseInt(measure["temperature"]);
						
							tempLevelChartData.addRow(
								[new Date(timestamp), levelSample, temperatureSample]
							);
						});
						
						$.each(valvesSamples, function(i, measure) {
							var timestamp = measure["timestamp"];
							var valveINSample = undefined;
							var valveOUTSample = undefined;
							if (measure["valveIN"] != undefined)
								valveINSample = parseInt(measure["valveIN"]);
							if (measure["valveOUT"] != undefined)
								valveOUTSample = parseInt(measure["valveOUT"]);
						
							valvesChartData.addRow(
								[new Date(timestamp), valveINSample, valveOUTSample]
							);
						});
						
						tempLevelChart.draw(tempLevelChartData, tempLevelChartOptions);
						valvesChart.draw(valvesChartData, valvesChartOptions);
					}
				}
				
				refreshingDiv.style.visibility = "hidden";
				refreshButton.setAttribute("class", "button-little");
				refreshButton.onclick = function() {getTankStatus();};
				
				enableValves();
				//enableTanks();
				
				sending = false;
			}, "text");
		}
		
		function setTankValues(result) {
			if (result["valveIN"] != null && result["valveIN"] != "undefined") {
				if (result["valveIN"] == "1") {
					document.getElementById("valve-in").innerHTML = valveOFF;
					//document.getElementById("property-valve-in-value").innerHTML = "ON";
					valveINStatus = false;
				} else {
					document.getElementById("valve-in").innerHTML = valveON;
					//document.getElementById("property-valve-in-value").innerHTML = "OFF";
					valveINStatus = true;
				}
			}
			
			if (result["valveOUT"] != null && result["valveOUT"] != "undefined") {
				if (result["valveOUT"] == "1") {
					document.getElementById("valve-out").innerHTML = valveOFF;
					//document.getElementById("property-valve-out-value").innerHTML = "ON";
					valveOUTStatus = false;
				} else {
					document.getElementById("valve-out").innerHTML = valveON;
					//document.getElementById("property-valve-out-value").innerHTML = "OFF";
					valveOUTStatus = true;
				}
			}
			
			if (result["level"] != null && result["level"] != "undefined") {
				percent = parseInt(result["level"]);
				if (percent > 100)
					percent = 100;
				if (percent < 0)
					percent = 0;
				setLevel(percent);
				document.getElementById("tank-percent").innerHTML = percent + "%";
				//document.getElementById("property-level-value").innerHTML = percent + "%";
			}
			
			if (result["temperature"] != null && result["temperature"] != "undefined") {
				document.getElementById("tank-temperature").innerHTML = result["temperature"] + " C";
				//document.getElementById("property-temperature-value").innerHTML = result["temperature"] + " C";
			}
			
			if (result["latitude"] != null && result["latitude"] != "undefined" && result["latitude"] != "" 
				&& result["longitude"] != null && result["longitude"] != "undefined" && result["longitude"] != "") {
				map = $('#map_canvas');
				// Clear the markers.
				map.gmap('clear', 'markers');
				// Generate the marker for the device.
				imageMarkerPath = "images/map_marker.png";
				var markerOptions = {'icon': imageMarkerPath, 
								 'position': (result["latitude"]).toString() + 
											 "," + 
											 (result["longitude"]).toString(),
								 'bounds': false};
				map.gmap("addMarker", markerOptions);
				if (document.getElementById("auto-center").checked == true) {
					deviceLocation = new google.maps.LatLng(result["latitude"], result["longitude"]);
					gmap.panTo(deviceLocation);
				}
			}
		}
		
		function valvePressed(valveID) {
			sending = true;
			disableValves();
			var refreshingDiv = document.getElementById("refreshingData");
			var refreshButton = document.getElementById("refresh-button");
			
			refreshButton.setAttribute("class", "button-little-disabled");
			refreshingDiv.style.visibility = "visible";
			
			var valveVar;
			var valveVal = "0";
			
			if (valveID == 1) {
				valveVar = "valveIN";
				if (!valveINStatus)
					valveVal = "0";
				else
					valveVal = "1";
			}
			
			if (valveID == 2) {
				valveVar = "valveOUT";
				if (!valveOUTStatus)
					valveVal = "0";
				else
					valveVal = "1";
			}
			
			$.post("/tankStatus", {"valve": valveVar, "valveValue": valveVal}, function(data) {
				if (data != null) {
					result = eval(data);
					status = result["status"];
					
					if (status == "error") {
						document.getElementById("error-text").innerHTML = result["text"];
						if (result["login"] != undefined &&
							result["login"] == "true")
							redirectToLogin(result["text"]);
					} else {
						document.getElementById("error-text").innerHTML = "";
						document.getElementById("refreshingData").style.visibility = "hidden";
						document.getElementById("refresh-button").setAttribute("class", "button-little");
						document.getElementById("refresh-button").onclick = function() {getTankStatus();};
						
						enableValves();
						setTankValues(result);
					}
				}
				//getTankStatus();
			}, "text");
		}
		
		function disableValves() {
			var valveINbutton = document.getElementById("valve-in");
			var valveOUTbutton = document.getElementById("valve-out");
			
			if (valveINStatus)
				valveINbutton.innerHTML = valveONDisabled;
			else
				valveINbutton.innerHTML = valveOFFDisabled;
			
			if (valveOUTStatus)
				valveOUTbutton.innerHTML = valveONDisabled;
			else
				valveOUTbutton.innerHTML = valveOFFDisabled;
			
			valveINbutton.setAttribute("class", "valve-in-disabled");
			valveOUTbutton.setAttribute("class", "valve-out-disabled");
			
			valveINbutton.onclick = null;
			valveOUTbutton.onclick = null;
		}
		
		function enableValves() {
			var valveINbutton = document.getElementById("valve-in");
			var valveOUTbutton = document.getElementById("valve-out");
			
			if (valveINStatus)
				valveINbutton.innerHTML = valveON;
			else
				valveINbutton.innerHTML = valveOFF;
			
			if (valveOUTStatus)
				valveOUTbutton.innerHTML = valveON;
			else
				valveOUTbutton.innerHTML = valveOFF;
			
			valveINbutton.setAttribute("class", "valve-in-enabled");
			valveOUTbutton.setAttribute("class", "valve-out-enabled");
			
			valveINbutton.onclick = function() {valvePressed(1);};
			valveOUTbutton.onclick = function() {valvePressed(2);};
		}
		
		function redirectToLogin(errorMessage) {
			var form = $('<form></form>');
			$(form).hide().attr('method', 'post').attr('action', 'login');
			if (errorMessage != undefined) {
				var input = $('<input type="hidden" />').attr('name','error').val(errorMessage);
				$(form).append(input);
			}
			$(form).appendTo('body').submit();
		}
		
		function selectTank(xbeeID) {
			selectedXBeeDevice = xbeeID;
			if (refreshTimer == null)
				requestUpdate();
			else 
				getTankStatus();
			setLevel(0);
		}
		
		function getHeight(percent) {
			levelHeight = percent * LEVEL_PIXELS / 100;
			return levelHeight; 
		}
		
		function setLevel(levelPercent) {
			if (yLevel == null)
				yLevel = YAHOO.util.Dom.getY('tank-level');
			if (levelPercent <= 100){
				levelHeight = getHeight(levelPercent);
				animLevel = new YAHOO.util.Motion(document.getElementById("tank-level"), { points: { to: [YAHOO.util.Dom.getX(document.getElementById("tank-level")), yLevel - levelHeight] } });
				animTop = new YAHOO.util.Motion(document.getElementById("tank-level-top"), { points: { to: [YAHOO.util.Dom.getX(document.getElementById("tank-level-top")), yLevel - 19 - levelHeight] } });
				changeLevel = new YAHOO.util.Anim(document.getElementById("tank-level"), { height: {to: levelHeight} });
				animLevel.animate();
				animTop.animate();
				changeLevel.animate();
			}
		}
		
		function handleHistogramsButton() {
			var histogramsButtonText = document.getElementById("histograms-button-text");
			var histogramsButtonArrow = document.getElementById("histograms-button-arrow");
			if (histogramsCollapsed) {
				showHistograms();
				histogramsCollapsed = false;
				histogramsButtonText.innerHTML = hideHistogramsText;
				histogramsButtonArrow.innerHTML = arrowUp;
			} else {
				hideHistograms();
				histogramsCollapsed = true;
				histogramsButtonText.innerHTML = showHistogramsText
				histogramsButtonArrow.innerHTML = arrowDown
			}
		}
		
		function showHistograms() {
			var histogramsDiv = document.getElementById("histograms");
			var mainPanelDiv = document.getElementById("mainPanel");
			var animHistograms = new YAHOO.util.Motion(histogramsDiv, { height: { to: histogramsDivHeightExpanded }}, 1, YAHOO.util.Easing.easeBoth );
			var animMainPanel = new YAHOO.util.Motion(mainPanelDiv, { height: { to: mainPanelDivHeightExpanded }}, 1, YAHOO.util.Easing.easeBoth );
			animHistograms.animate();
			animMainPanel.animate();
		}
		
		function hideHistograms() {
			var histogramsDiv = document.getElementById("histograms");
			var mainPanelDiv = document.getElementById("mainPanel");
			var animHistograms = new YAHOO.util.Motion(histogramsDiv, { height: { to: histogramsDivHeightCollapsed }}, 1, YAHOO.util.Easing.easeBoth );
			var animMainPanel = new YAHOO.util.Motion(mainPanelDiv, { height: { to: mainPanelDivHeightCollapsed }}, 1, YAHOO.util.Easing.easeBoth );
			animHistograms.animate();
			animMainPanel.animate();
		}
		
		function initializeCharts() {
			tempLevelChart = new google.visualization.LineChart(document.getElementById('temLevelChartCanvas'));
			tempLevelChartData = new google.visualization.DataTable();
			tempLevelChartOptions = {
				title: 'Level / Temperature', 
				colors: ['#0074ce', '#ce2a2a'], 
				fontName: 'Tahoma', 
				axisTitlesPosition: 'out',
				titleTextStyle: {color: '#3F4041', 
								 titlePosition: 'out',
								 fontSize: 20}, 
				displayAnnotations: true, 
				vAxes: {0: 
							{
							title: 'Level %', 
							textStyle: {color: '#3F4041', 
										fontSize: 16, 
										fontName: 'Arial', 
										margin: 0, 
									}, 
							titleTextStyle: {
										italic: false,
									},
							gridlines: {color: '#606163',
										count: 5,
										},
							minorGridlines: {color: '#9a9d9f',
											 count: 1,
											},
							logScale: false,
							maxValue: 100,
							minValue: 0,
							},
						1: {
							title: 'Temperature C', 
							textStyle: {color: '#3F4041', 
										fontSize: 16, 
										fontName: 'Arial', 
										margin: 0, 
									}, 
							titleTextStyle: {
										italic: false,
									},
							gridlines: {color: '#606163',
										count: 5,
										},
							minorGridlines: {color: '#9a9d9f',
											 count: 1,
											},
							logScale: false,
							maxValue: 45,
							},
						}, 
				hAxis: {title: null, 
						textStyle: {color: '#3F4041', 
									fontSize: 11, 
									fontName: 'Arial', 
									margin: 0, 
									},
						gridlines: {color: '#606163',
									count: 7,
									},
						minorGridlines: {color: '#9a9d9f',
										 count: 1,
										},
						format: 'MMM dd, yy - hh:mm:ss',
						},
				chartArea: {left: 80,
							top: 50,
							height: 170,
							width: 750,
							},
				backgroundColor: '#DDDDDD', 
				pointSize: 5,
				legend: {position: 'top', 
						 textStyle: {color: '#3F4041', fontSize: 12}, 
						 alignment: 'end'
						},
				animation: {duration:2,
							easing: 'linear'
							},
				series: {
							0:{targetAxisIndex:0},
							1:{targetAxisIndex:1},
						},
			};
			
			valvesChart = new google.visualization.LineChart(document.getElementById('valvesChartCanvas'));
			valvesChartData = new google.visualization.DataTable();
			valvesChartOptions = {
				title: 'Valve IN / Valve OUT', 
				colors: ['#247926', '#e5b125'], 
				fontName: 'Tahoma', 
				axisTitlesPosition: 'out',
				titleTextStyle: {color: '#3F4041', 
								 titlePosition: 'out',
								 fontSize: 20}, 
				displayAnnotations: true, 
				vAxis: {title: '0 OFF / 1 ON', 
						textStyle: {color: '#3F4041', 
									fontSize: 16, 
									fontName: 'Arial', 
									margin: 0, 
									}, 
						titleTextStyle: {
									italic: false,
									},
						gridlines: {color: '#606163',
									count: 2,
									},
						minorGridlines: {color: '#9a9d9f',
										 count: 1,
										},
						logScale: false,
						maxValue: 1,
						minValue: 0,
						}, 
				hAxis: {title: null, 
						textStyle: {color: '#3F4041', 
									fontSize: 11, 
									fontName: 'Arial', 
									margin: 0, 
									},
						gridlines: {color: '#606163',
									count: 7,
									},
						minorGridlines: {color: '#9a9d9f',
										 count: 1,
										},
						format: 'MMM dd, yy - hh:mm:ss',
						},
				chartArea: {left: 80,
							top: 50,
							height: 170,
							width: 790,
							},
				backgroundColor: '#DDDDDD', 
				pointSize: 5,
				legend: {position: 'top', 
						 textStyle: {color: '#3F4041', fontSize: 12}, 
						 alignment: 'end'
						},
				animation: {duration:2,
							easing: 'linear'
							},
			};
			
			tempLevelChartData.addColumn('datetime', 'Date');
			tempLevelChartData.addColumn('number', 'Level (%)');
			tempLevelChartData.addColumn('number', 'Temperature (C)');
			
			valvesChartData.addColumn('datetime', 'Date');
			valvesChartData.addColumn('number', 'Valve IN status');
			valvesChartData.addColumn('number', 'Valve OUT status');
			
			tempLevelChart.draw(tempLevelChartData, tempLevelChartOptions);
			valvesChart.draw(valvesChartData, valvesChartOptions);
		}
	</script>
</head>

<body>
	<jsp:include page="header.jsp" />
	<div style="width:968px; margin:0px auto;">
		<jsp:include page="navigation.jsp" />
	</div>
	<div class="main-container" style="width:968px">
		<div class="main">
			<table summary="Step">
				<tr>
					<td width="45">
						<img src="images/step3.png" alt="Step 3" border="0" />
					</td>
					<td>
						<h2>
							Monitor the tank
						</h2>
						<p class="main-text">See the tank properties and manage the valves remotely.</p>
					</td>
				</tr>
			</table>
			<div id="mainPanel" class="panel" style="height:560px; width:900px">
				<div id="controls" style="height:460px; width:900px">
					<div id="left" style="float:left; height:460px; width:450px;">
						<div id="tank-name" class="tank-name" style="height:30px; width:450px;">
							Simulated Tank
						</div>
						<div id="tank-canvas" style="float:left; height:430px; width:450px; position:relative;">
							<div id="tank-background" class="tank-background">
								<img src="images/tank_background.png" alt="" border="0" />
							</div>
							<div id="tank-level" class="tank-level">
							</div>
							<div id="tank-level-top" class="tank-level-top">
								<img src="images/tank_level.png" alt="" border="0" />
							</div>
							<div id="tank-layout" class="tank-layout">
								<img src="images/tank_layout.png" alt="" border="0" />
							</div>
							<div id="valve-in" class="valve-in-disabled">
								<img src="images/valve_off_disabled.png" alt="" border="0" />
							</div>
							<div id="valve-out" class="valve-out-disabled">
								<img src="images/valve_off_disabled.png" alt="" border="0" />
							</div>
							<div id="tank-percent" class="tank-percent">
							-
							</div>
							<div id="tank-temperature" class="tank-temperature">
							-
							</div>
						</div>
					</div>
					<div id="right" style="float:left; width:440px;">
						<div id="xbee-panel" class="xbee-panel" style="width:430px; height:30px; margin-top:-20px; margin-left:-5px;">
							<div style="width:40px; height:50px; float:left; padding-top:0px">
								<img src="images/map_32.png" alt="XBee" border="0" align="bottom" style:"margin-top:10px;"/>
							</div>
							<div style="width:370px; float:left">
								<div style="width:250px; float:left">
									<div style="width:250px; float:left; font-weight:bold; color:white; font-size:25px; padding-top:3px">
										Tank Location
									</div>
								</div>
							</div>
						</div>
						<div id="tank-properties-panel" class="tank-properties-panel" style="width:400px; height:380px;">
							<div id="map_canvas" style="height: 355px; padding:0px; margin:0px">
							</div>
							<input type="checkbox" id="auto-center" checked="true" style="padding:0px; margin:0px; float:left; margin-top:10px"/>
							<div style="float:left; margin-left:5px; margin-top:10px; color:white">
								Auto-center in map when refresh.
							</div>
						</div>
						<!-- 
						<div id="tank-properties-panel" class="tank-properties-panel" style="width:400px; height:325px;">
						 -->
						<!-- 
						<div id="tank-properties-panel" class="tank-properties-panel" style="width:400px; height:370px;">
							<div id="separator" style="width:400px; height:15px;">
							</div>
							<div id="property-level" class="property">
								<div id="property-level-image" class="property-image">
									<img src="images/icon_level.png" alt="Icon level" border="0"/>
								</div>
								<div id="property-level-name" class="property-name">
									Tank Level
								</div>
								<div id="property-level-value" class="property-value">
									-
								</div>
							</div>
							<div id="separator" style="width:400px; height:10px;">
							</div>
							<div id="property-temperature" class="property">
								<div id="property-temperature-image" class="property-image">
									<img src="images/icon_temperature.png" alt="Icon temperature" border="0"/>
								</div>
								<div id="property-temperature-name" class="property-name">
									Temperature
								</div>
								<div id="property-temperature-value" class="property-value">
									-
								</div>
							</div>
							<div id="separator" style="width:400px; height:10px;">
							</div>
							<div id="property-valve-in" class="property">
								<div id="property-valve-in-image" class="property-image">
									<img src="images/icon_valve_in.png" alt="Icon valve-in" border="0"/>
								</div>
								<div id="property-valve-in-name" class="property-name">
									Valve-In
								</div>
								<div id="property-valve-in-value" class="property-value">
									-
								</div>
							</div>
							<div id="separator" style="width:400px; height:10px;">
							</div>
							<div id="property-valve-out" class="property">
								<div id="property-valve-out-image" class="property-image">
									<img src="images/icon_valve_out.png" alt="Icon valve-out" border="0"/>
								</div>
								<div id="property-valve-out-name" class="property-name">
									Valve-Out
								</div>
								<div id="property-valve-out-value" class="property-value">
									-
								</div>
							</div>
						</div>
						 -->
					</div>
				</div>
				<div id="separator" style="height: 32px; width:900px; position:relative;">
					<div id="histograms-button" class="histograms-button" style="position: absolute; height:32px; width:215px; margin-left:330px; z-index: 99;" onclick="handleHistogramsButton()">
						<div id="histograms-button-image" class="histograms-button-image">
							<img src="images/histograms_24.png" alt="Refresh" border="0" align="absmiddle" width="24" height="24" />
						</div>
						<div id="histograms-button-text" class="histograms-button-text">
							Show Histograms
						</div>
						<div id="histograms-button-arrow" class="histograms-button-arrow">
							<img src="images/arrow_down.png" alt="Refresh" border="0" align="absmiddle" width="24" height="24" />
						</div>
					</div>
					<div id="separator-image" class="separator-image" style="position: absolute; height:10px; width:900px; margin-top:10px; z-index:97;">
					</div>
				</div>
				
				<div id="histograms" style="height:0px; overflow:hidden;">
					<div style="height:20px">
					</div>
					<div class="histogram-canvas">
						<div id="temLevelChartCanvas" style="height:250px">
						</div>
					</div>
					<div style="height:20px">
					</div>
					<div class="histogram-canvas">
						<div id="valvesChartCanvas" style="height:250px">
						</div>
					</div>
				</div>
				
				<div id="status" style="height: 55px">
					<div id="error-text" class="error-text" style="height:25px; text-align:left">
					<%
						if (request.getAttribute("error") != null) {
							String e = request.getAttribute("error").toString();
							if (e != null && e.length()>0)
								out.println(e);
						}
					%>
					</div>
					<div id="refreshingData" style="margin-top:10px; float:left" >
						<img src="images/refreshing3.gif" alt="Refreshing" border="0" align="left" style="margin-right:5px"/>
						<i>Refreshing data...</i>
					</div>
					<div id="refresh-button" class="button-little" style="float:right" onclick="getTankStatus()">
						<img src="images/refresh_24.png" alt="Refresh" border="0" align="absmiddle" width="24" height="24" />
						<p>Refresh now</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="footer.jsp" />
</body>
</html>