Basic AJAX GUI is now functional

app/views/Mailbox/List.html

@@ -1,5 +1,24 @@
 {{template "header.html" .}}
 {{$name := .name}}
+<script>
+  $(document).ready(function() {
+    $('.listEntry').hover(
+      function() {
+	$(this).addClass("listEntryHover")
+      },
+      function() {
+	$(this).removeClass("listEntryHover")
+      }
+    ).click(
+      function() {
+	$('.listEntry').removeClass("listEntrySelected")
+	$(this).addClass("listEntrySelected")
+	$('#emailContent').load('/mailbox/show/{{$name}}/' + this.id)
+      }
+    )
+  });
+</script>
+
 <div id="colOne">
   <div id="logo">
     <h1><a href="#">inbucket</a></h1>
@@ -7,20 +26,22 @@
   </div>
 
   {{range .messages}}
-  <div class="box listEntry">
+  <div class="box listEntry" id="{{.Id}}">
     <div class="subject">{{/*<a href="/mailbox/show/{{$name}}/{{.Id}}">*/}}{{.Subject}}</div>
     <div class="from">{{.From}}</div>
     <div class="date">{{.Date}}</div>
   </div>
   {{else}}
   <div class="box">
-    No messages!
+    <p style="height: 30px; padding-left: 10px;">No messages!</p>
   </div>
   {{end}}
 </div>
 
 <div id="colTwo">
-  <p>Select a message at left, or enter a different username into the box on upper right.</p>
+  <div id="emailContent">
+    <p>Select a message at left, or enter a different username into the box on upper right.</p>
+  </div>
 </div>
 
 {{template "footer.html" .}}

app/views/Mailbox/Show.html

@@ -1,7 +1,4 @@
-{{template "header.html" .}}
-
-<h1>{{.message.Subject}}</h1>
-<table>
+<table id="emailHeader">
 	<tr>
 		<th>From:</th>
 		<td>{{.message.From}}</td>
@@ -11,8 +8,7 @@
 		<td>{{.message.Date}}</td>
 	</tr>
 <table>
+<h3 id="emailSubject">{{.message.Subject}}</h3>
 
-<pre>{{.body}}</pre>
-
-{{template "footer.html" .}}
+<pre id="emailBody">{{.body}}</pre>