Finished adding buttons.

Change-Id: I9a652930e588722d93d0d789c25e459861e60e9a
diff --git a/client/query/query.html b/client/query/query.html
index 3af6fc3..c73c542 100644
--- a/client/query/query.html
+++ b/client/query/query.html
@@ -28,11 +28,14 @@
 
   <div class="container-fluid">
 
-    <div class="row full-width">
+    <div class="row">
 
-      <div class="col-sm-3 col-md-2 sidebar panel panel-default">
-        <div class="panel-body">
-          <ul id="side-menu" class="nav nav-pills nav-stacked"></ul>
+      <div class="col-sm-3 col-md-2 sidebar">
+        <div class="panel panel-default">
+          <div class="panel-heading">Filter Categories</div>
+          <div class="panel-body">
+            <ul id="side-menu" class="nav nav-pills nav-stacked"></ul>
+          </div>
         </div>
       </div>
 
@@ -57,7 +60,7 @@
           <div class="panel-heading">Results:</div>
           <div class="panel-body">
             <div class="page"></div>
-            <table class="resultTable"></table>
+            <table class="resultTable table"></table>
           </div>
         </div>
 
diff --git a/client/query/query.js b/client/query/query.js
index 852371f..59f51fc 100644
--- a/client/query/query.js
+++ b/client/query/query.js
@@ -1,7 +1,7 @@
 //{@ @todo: this need to be configured before the document load
 var catalog = "/catalog/myUniqueName";
 var face = new Face({
-  host: "atmos-csu.research-lan.colostate.edu",
+  host: "localhost",
   port: 9696
 });
 
@@ -31,8 +31,30 @@
       }
     });
   });
+  
+  $('.resultTable').on('click', '.interest-button', function(){
+    console.log('Got click', this);
+    
+    var t = $(this);
+    
+    var name = t.parent().prev().text();
+    var interest = new Interest(new Name('/retrieve' + name));
+    face.expressInterest(interest, function(){
+      var message = $('<span class="success glyphicon glyphicon-ok"></span> Success');
+      t.append(t);
+      t.fadeOut(2000);
+    }, function(){
+      var message = $('<span class="fail glyphicon glyphicon-remove"></span> Failed!');
+      t.append(t);
+      t.fadeOut(2000);
+    });
+    
+  });
+  
 });
 
+
+
 function onData(data) {
   var payloadStr = data.content.toString().split("\n")[0];
 
@@ -62,7 +84,7 @@
   dropdown = [];
   var resultTable = $(".resultTable");
   resultTable.empty();
-  resultTable.append('<tr><th>Results</th></tr>');
+  resultTable.append('<tr><th colspan="2">Results</th></tr>');
 
   var queryPrefix = new Name(prefix);
   queryPrefix.append("query");
@@ -182,7 +204,8 @@
 
 
   for (var i = startIndex; i < startIndex + 20 && i < results.length; ++i) {
-    resultTable.append('<tr><td>' + results[i] + '</td><td><button class="interest-button">Express Interest</button></td></tr>');
+    resultTable.append('<tr><td>' + results[i]
+    + '</td><td><button class="interest-button btn btn-default btn-xs">Express Interest</button></td></tr>');
   }
 
   if (results.length <= 20) {
diff --git a/client/query/query2.css b/client/query/query2.css
index 23dbe1d..b47ef9c 100644
--- a/client/query/query2.css
+++ b/client/query/query2.css
@@ -4,16 +4,16 @@
   margin: 0;
 }
 
-.full-width {
-  width: 100%;
-}
-
 .sidebar {
   height: 100%;
   max-height: 100%;
   overflow: auto;
 }
 
-.resultTable tr:nth-child(even) {
-  background-color: lightgray;
+fail {
+  color: red;
+}
+
+sucess {
+  color: green;
 }