<!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/devices.css">
	<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
	
	<title>Device Cloud Tank Demo</title>
	
	<script type="text/javascript">
		var devices = [];
		
		var selectedImgHTML = "<img src='images/ok.png' width='32' height='32'>";
		
		var selectedDevice = null;
		
		var refreshingDivHTML = "<div id='refreshingData' style='margin-top:10px; color:#DDDDDD' >" +
					"<img src='images/refreshing2.gif' alt='Refreshing' border='0' align='left' style='margin-right:5px'/>" +
					"<i>Refreshing devices...</i>" +
					"</div>";
		
		$(document).ready(function() {
			getDevices();
		});
		
		function getDevices() {
			$('#devices-container').html(refreshingDivHTML);
			
			var refreshButton = document.getElementById("refreshButton");
			var saveButton = document.getElementById("saveButton");
			var refreshingDiv = document.getElementById("refreshingData");
			
			refreshButton.setAttribute("class", "button-big-disabled");
			saveButton.setAttribute("class", "button-big-disabled");
			refreshButton.onclick = null;
			saveButton.onclick = null;
			refreshingDiv.style.visibility = "visible";
			
			$.getJSON('/getDevices?id=' + (Math.round(new Date().getTime() / 1000)).toString(), function(data) {
				// Clear the devices list.
				$('#devices-container').html("");
				devices = [];
				
				if (data["error"] != undefined) {
					$('#errorLabel').html(data["error"]);
					if (data["login"] != undefined &&
						data["login"] == "true")
						redirectToLogin(data["error"]);
				} else { 
					
					
					$.each(data, function(i, device) {
						deviceURL = "/deviceInfo?name=" + device["name"] + "&deviceID=" + device["deviceID"] + 
											"&vendorID=" + device["vendorID"] + "&status=" + device["status"] +
											"&selected=false";
						devices.push(device);
						$.get(deviceURL, 
							function(result){
								$('#devices-container').append(result.toString());
								if (selectedDevice == device["deviceID"])
									selectDevice(device["deviceID"]);
								if (device["selected"] == "true") {
									if (selectedDevice == null)
										selectDevice(device["deviceID"]);
									showSelectedSavedDevice(device);
								}
						});
						
						
					});
					
					if (devices.length == 0)
						$('#devices-container').html("<p style='color:white; font-size:14px;'>There is not any device registered in this account.</p>");
				}
				
				refreshButton.setAttribute("class", "button-big");
				refreshButton.onclick = function() {getDevices();};
			});
		}
		
		function showSelectedSavedDevice(device) {
			deviceURL = "/deviceInfo?name=" + device["name"] + "&deviceID=" + device["deviceID"] + 
						"&vendorID=" + device["vendorID"] + "&status=" + device["status"] +
						"&selected=true";
			$.get(deviceURL, 
				function(result){
					$('#selected-device-container').html(result.toString());
			});
		}
		
		function selectDevice(deviceID) {
			unselectDevices();
			if (document.getElementById(deviceID) != null){
				document.getElementById(deviceID).setAttribute("class", "device-selected");
			}
			if (document.getElementById(deviceID + "-selection") != null)
				document.getElementById(deviceID + "-selection").innerHTML = selectedImgHTML;
			selectedDevice = deviceID;
			for (var i=0; i<devices.length;i++) {
				device = devices[i];
				if (device["deviceID"] == deviceID) {
					document.getElementById("formLatitude").value = device["latitude"];
					document.getElementById("formLongitude").value = device["longitude"];
				}
			}
			document.getElementById("formSelectedDevice").value = selectedDevice;

			
			var saveButton = document.getElementById("saveButton");
			
			saveButton.setAttribute("class", "button-big");
			saveButton.onclick = function() {saveSelectedDevice();};
		}
		
		function unselectDevices() {
			for (i=0; i<devices.length; i++) {
				device = devices[i];
				if (document.getElementById(device["deviceID"]) != null)
					document.getElementById(device["deviceID"]).setAttribute("class", "device");
				if (document.getElementById(device["deviceID"]+"-selection") != null){
					document.getElementById(device["deviceID"]+"-selection").innerHTML = "";
				}
			}
		}
		
		function saveSelectedDevice() {
			document.getElementById("saveButton").setAttribute("class", "button-big-disabled");
			document.getElementById("refreshButton").setAttribute("class", "button-big-disabled");
			document.getElementById("saveButton").disabled = true;
			document.getElementById("refreshButton").disabled = true;
			document.forms["saveform"].submit();
		}
		
		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();
		}
	</script>
</head>

<body>
	<jsp:include page="header.jsp" />
	<div style="width:600px; margin:0px auto;">
		<jsp:include page="navigation.jsp" />
	</div>
	<div class="main-container">
		<div class="main">
			<table summary="Step">
				<tr>
					<td width="45">
						<img src="images/step2.png" alt="Step 1" border="0" />
					</td>
					<td>
						<h2>
							Select your device
						</h2>
						<p class="main-text">Select your device from the list and click Save to continue.</p>
					</td>
				</tr>
			</table>
			<div class="panel">
				<h2 style="margin-bottom: 5px; margin-top: 5px;">
					Saved device
				</h2>
				<div id="selected-device-container" class="selected-device-container">
				</div>
				<h2 style="margin-bottom: 5px; margin-top: 10px;">
					List of devices
				</h2>
				<div id="devices-container" class="devices-container">
				</div>
				<div style="width:500px; height:65px; margin:0 auto">
					<div id="errorLabel" class="error-text" style="height:25px">
					<%
						if (request.getAttribute("error") != null) {
							String e = request.getAttribute("error").toString();
							if (e != null && e.length()>0)
								out.println(e);
						}
					%>
					</div>
					<div class="button-big" id="refreshButton" style="float:right" onclick="getDevices()">
						<img src="images/refresh_32.png" alt="Refresh" border="0" align="absmiddle" width="32" height="32" />
						<p>Refresh</p>
					</div>
					<div class="button-big" id="saveButton" style="float:right" onclick="saveSelectedDevice()">
						<img src="images/save_32.png" alt="Save" border="0" align="absmiddle" width="32" height="32" />
						<p>Save</p>
					</div>
					<form action="/devices" method="post" id="saveform">
						<input type="hidden" name="selectedDevice" id="formSelectedDevice" value=""></input>
						<input type="hidden" name="latitude" id="formLatitude" value=""></input>
						<input type="hidden" name="longitude" id="formLongitude" value=""></input>
					</form>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="footer.jsp" />
</body>
</html>