anchor.diff:  
   <body>
   	<div id="menu">
  -		<span id="statusSpan"><button type="button" id="status"></button></span>
  -		<span id="tickettypes"></span>
  -		<button type="button">+</button>
  -		<button type="button">Restaurant Info</button>
  -		<button type="button" id="accountButton">Account Info</button>
  -		<button type="button">Sign Out</button>
  +		<span id=showtickets><button disabled>Show Tickets</button></span>
  +		<button disabled>Distribute Tickets</button><button id="status"></button>
  +		<button disabled>Modify Info</button><button title="Modify restaurant information">Restaurant</button><button title="Modify account information">Account</button>
  +		<button>Sign Out</button>
   	</div>
   	<div>
  -		
  -		<table class="content" id="waitinglist">
  -			<tr>
  -				<th>No.</th>
  -				<th>Size</th>
  -				<th>Get</th>
  -				<th>Call</th>
  -				<th></th>
  -			</tr>
  -		</table>
  +		<h2></h2>
  +		<div class="content" id="waitinglist">
  +			<select id="add" title="Select party size to add a new ticket" style="width:92px"></select>
  +			<button id="call" title="Call the next ticket">Call Ticket</button>
  +			<table>
  +				<tr>
  +					<th>Ticket No.</th>
  +					<th>Party Size</th>
  +					<th>Get Time</th>
  +					<th>Call Time</th>
  +					<th></th>
  +				</tr>
  +				<tbody id="waitinglistbody"></tbody>
  +			</table>
  +		</div>
   	</div>
   </body>
   </html>
positive.code: <%@ page language="java" contentType="text/html; charset=UTF-8"
  	pageEncoding="UTF-8"%>
  <%!
  	int id = 2;
  %>
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  
negative.code: <script
  	src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
  	var id = <%=id%>, type;
  	function showTickets(){
  		$("#waitinglistbody").empty();
  		$.ajax({
  			url : "http://<%=request.getServerName()%>:7001/rms/tickets",
  			data: {id: <%=id%>, type: type},
  			cache: false,
  			success: function(data) {
  				for (i = 0; i < data.length; i++){
  					str = "<tr>"
  						+ "<td>" + data[i].number + "<td>"
  						+ "<td>" + data[i].size + "<td>"
  						+ "<td>" + toTime(data[i].getTime) + "<td>"
  						+ "<td>";
  					if (data[i].callTime != null){
  						str += toTime(data[i].callTime);
  					}
  					str += "</td></tr>";
  					$("#waitinglistbody").append(str);
  				}
  			}
  		});
  	}
  	
  	function changeStatus(availability){ 
  		if (availability == false){
  			$("#status").val("true");
  			$("#status").text("Start");
  			$("#status").attr({"title" : "Start distributing tickets"});
  		}
  		else{
  			$("#status").val("false");
  			$("#status").text("Stop");
  			$("#status").attr({"title" : "Stop distributing tickets"});
  		}
  	}
  	
  	var date = new Date();
  	function toTime(timestamp){
  		date.setTime(timestamp);
  		return ("00" + date.getHours()).slice(-2) + ":" + ("00" + date.getMinutes()).slice(-2);
  	}
  	
  	$(document).ready(function() {
  