<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Coffee House</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- Le styles -->
		<link href="css/bootstrap.css" rel="stylesheet">
		<style>
			body {
				padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
			}
		</style>
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
		<link href="css/styles.css" rel="stylesheet">
		<script src="js/mustache.js"></script>
	
		<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<!-- Le fav and touch icons -->

			</head>
	<body onload="CoffeeShopClient.viewOrders()">
		<div class="container">
			<div class="row">
				<div class="span12">
					<span class="logo"><img src="img/logo.jpg" alt=""/> Coffee House</span>
					<p class="pull-right help-block notice">
						A REST Sample written in Jaggery
					</p>
				</div>
			</div>
			<hr>
			<div class="row">
				<div class="span12">
					<span class="operations-main">
						<button class="btn btn-success"  data-toggle="modal" href="#addOrder">
							New Order
						</button></span>
				</div>
				<div class="modal hide fade" id="addOrder">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							�
						</button>
						<h3>Add New Order</h3>
					</div>
					<div class="modal-body">
						<p> 
						  <form action="" id="addNewOrderForm" name="addNewOrderForm">
								<label>Type of Beverage</label>
								<select id="beverage-type">
									<option>Espresso</option>
									<option>Percolator</option>
									<option>Colombian Coffee</option>
									<option>Hawaiian Kona</option>
								</select>
							</form>
						</p>
					</div>
					<div class="modal-footer">
						<a href="#" class="btn" data-dismiss="modal">Cancel</a>
						<a href="#" class="btn btn-primary" onclick="CoffeeShop.addNewOrder();">Add Order</a>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="span12">
					<div id="order-window">
						
					</div>
				</div>
			</div>
		</div>
		<!-- /container -->
		<div class="container-collapse container">
			<div class="row">
				<div class="span12">
					<div class="header-max">
						<span class="label label-success">Message Trace</span><span class="help-inline">Click to toggle</span>
						<span class="pull-right minimize-button" style="padding:0px 10px;"><i class="icon-chevron-down"></i></span>
					</div>
					<div class="message-trace">
						<div class="request-text">
							<h4>Request</h4>
							<textarea rows="" cols="" id="request-textarea"></textarea>
						</div>
						<div class="response-text">
							<h4>Response</h4>
							<textarea rows="" cols="" id="response-textarea"></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal hide fade" id="addition">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					�
				</button>
				<h3>Additional</h3>
			</div>
			<div class="modal-body">
				<p>
					order number : <span id="modal-order-no"></span>
					<form action="" id="addition-form" >
						<input id="orderAdditionId" name="orderAdditionId" type="hidden">
						<label>Select an addition for this order</label>
						<select class="additional-toppings" id="additional-toppings">
							<option>Peppermint</option>
							<option>Whip Cream</option>
							<option>Caramel</option>
							<option>Milk</option>
						</select>
					</form>
				</p>
			</div>
			<div class="modal-footer">
				<a href="#" class="btn" data-dismiss="modal">Cancel</a>
				<a href="#" class="btn btn-primary" onclick="CoffeeShop.addAddition();">Save changes</a>
			</div>
		</div>
		<!-- Le javascript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
     <script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/util.js"></script>
		<script src="js/coffeeshopclient.js"></script>
		<script src="js/coffeeshop.js"></script>
	
	</body>
</html>
