--- a/talosnames/templates/tbpl.html	Mon Aug 13 17:13:18 2012 -0700
+++ b/talosnames/templates/tbpl.html	Mon Aug 13 19:51:51 2012 -0700
@@ -14,6 +14,11 @@
 <script>
 var data =
 {{json | html}};
+
+function empty(selector) {
+$(selector).html('');
+}
+
 $(document).ready(function() {
 
 var reverse_mapping = {};
@@ -26,6 +31,21 @@
 var text = $(this).text()
 if (text.length && reverse_mapping[text]) {
 $(this).attr('title', reverse_mapping[text]);
+
+var that = this;
+$(this).click(function() {
+empty("#content");
+$(".selected").removeClass("selected");
+$(that).addClass('selected');
+
+var letter = $(that).text();
+var title = $(that).attr('title');
+
+var html = '<h1>' + title + '</h1>';
+
+$("#content").html(html);
+});
+
 }
 
 });
@@ -49,6 +69,16 @@
 .letter {
 color: green;
 }
+
+.selected {
+color: white;
+background-color: green;
+}
+
+h1 {
+
+}
+
 </style>
 
 </head>
@@ -72,5 +102,7 @@
 )
 </div><!-- header -->
 
+<div id="content"></div>
+
 </body>
 </html>