<!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">
	
	<title>Device Cloud Tank Demo</title>
	
	<script type="text/javascript">
		function login() {
			document.getElementById("loginButton").setAttribute("class", "button-big-disabled");
			document.getElementById("loginButton").disabled = true;
			document.forms["loginform"].submit();
		}
		
		function logout() {
			document.getElementById("logoutButton").setAttribute("class", "button-big-disabled");
			document.getElementById("logoutButton").disabled = true;
			document.forms["logoutform"].submit();
		}
	</script>
</head>

<body>
	<%
		String userName = (String)session.getAttribute(com.etherios.gae.connector.tank.BaseServlet.SESSION_USER);
	%>
	<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">
			<img src="images/tank.png" alt="XBee" border="0" align="left" width="96" height="96" hspace="15" vspace="12" style="padding-bottom: 10px"/>
			<h1>
				Welcome to the Device Cloud Tank Demo
			</h1>
			<p>This application allows you to monitor a tank, see its properties and change the satus of its valves remotely using 
			<a href="http://www.etherios.com/devicecloud" target="_blank">Device Cloud</a> and <a href="http://www.etherios.com/products/devicecloud/connector" target="_blank">
			Cloud Connector</a>. To achieve this, the Tank Demo application must be running in your device.</p>
			<p>Follow the provided steps to get started.<br/><br/></p>
			<table summary="Step">
				<tr>
					<td width="45">
						<img src="images/step1.png" alt="Step 1" border="0" />
					</td>
					<td>
						<h2>
							Log in Device Cloud
						</h2>
						<p class="main-text">Log in using your Device Cloud credentials.</p>
					</td>
				</tr>
			</table>
			<div class="panel">
				<div class="credentials-form">
					<h2 style="margin-bottom: 5px; margin-top: 5px;">
						Device Cloud Account Information
					</h2>
					<% 
						if (userName == null) {
					%>
					<form action="/login" method="post" id="loginform">
						<div>
							Device Cloud server:
							<select name="servers-combo" id="servers-combo" class="servers-list">
								<option selected>login.etherios.com (US)</option>
								<option>login.etherios.co.uk (EU)</option>
							</select>
						</div>
						<div>
							Username:
							<input name="username" id="username" class="line-field" type="text">
						</div>
						<div>
							Password:
							<input name="password" id="password" class="line-field" type="password">
						</div>
						<div>
							<a href="https://myaccount.etherios.com/">Are you a new user?</a>
						</div>
						<div style="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="loginButton" style="float:right" onclick="login()">
								<img src="images/send_32.png" alt="Send" border="0" align="absmiddle" width="32" height="32" />
								<p>Login</p>
							</div>
							<input type="submit" style="visibility: hidden; width:0px; height:0px; margin:0px; padding:0px" />
						</div>
					</form>
					<% 
						} else {
					%>
					<p style="font-size:12px">You are already logged in as
					<span style="color:black; font-weight:bold;"><%= userName %></span></p>
					
					<div style="height:45px; margin:0 auto">
						<div class="button-big" id="logoutButton" style="float:right" onclick="logout()">
							<img src="images/back_32.png" alt="Logout" border="0" align="absmiddle" width="32" height="32" />
							<p>Logout</p>
						</div>
					</div>
					<form action="/logout" method="post" id="logoutform">
					</form>
					<% 
						}
					%>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="footer.jsp" />
</body>
</html>