Basic AJAX GUI is now functional

app/views/Application/Index.html

@@ -3,13 +3,10 @@
 {{template "menu.html" .}}
 
 <div id="colTwo">
-  <h1>Inbucket</h1>
-
-  <form action="/mailbox" method="GET">
-    <b>Enter a username to view their mailbox</b>
-    <input type="text" name="name">
-    <input type=submit value="Go">
-  </form>
+  <p>Inbucket is an email testing service; it will accept email for any email
+  address and make it available to view without a password.</p>
+  <p>To view email for a particular address, enter the username portion
+  of the address into the box on the upper right and click <em>go</em>.</p>
 </div>
 
 {{template "footer.html" .}}

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>
 

app/views/header.html

@@ -10,7 +10,7 @@ Released for free under a Creative Commons Attribution 2.5 License
 <title>{{.title}}</title>
 <link href="/public/stylesheets/main.css" rel="stylesheet" type="text/css" />
 <link rel="shortcut icon" type="image/png" href="/public/images/favicon.png">
-<script src="/public/javascripts/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="/public/js/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
 {{range .moreStyles}}
   <link rel="stylesheet" type="text/css" href="/public/{{.}}">
 {{end}}
@@ -22,7 +22,7 @@ Released for free under a Creative Commons Attribution 2.5 License
 <div id="header">
 	<ul id="menu">
 		<li><a href="/" accesskey="1" title="">Home</a></li>
-		<li><a href="/about" accesskey="2" title="">About</a></li>
+		<li><a href="/" accesskey="2" title="">About</a></li>
 	</ul>
 	<form id="search" action="/mailbox" method="GET">
 		<fieldset>