Show a message box when the server can't be reached

assets/index.html

@@ -28,7 +28,12 @@
     </div>
 
     <div class="container">
+      <div id="message-box" class="icon-alert span-24" style="display: none;">
+        Lost connection to server.
+      </div>
+
       <div id="plots" class="span-16">
+
         <div id="current-bytes-used-plot" class="plot-container">
           <h3>Current residency</h3>
           <div class="plot"></div>

assets/monitor.css

@@ -46,6 +46,22 @@
     margin: 10px 0 0 10px;
 }
 
+/**
+ * Message box
+ *
+ * Taken from: http://woork.blogspot.com/2008/03/css-message-box-collection.html
+ */
+
+.icon-alert {
+    border: solid 1px #CB2026;
+    background: #F6CBCA url(cross-16-ns.png) 8px 6px no-repeat;
+    color: #D0282A;
+    padding: 4px 0;
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
 /**
  * Plots
  */

assets/monitor.js

@@ -109,14 +109,20 @@ $(document).ready(function () {
 
     function fetchData() {
         function onDataReceived(stats) {
+            $("#message-box").hide();
             for (var i = 0; i < listeners.length; i++) {
                 listeners[i](stats, stats.server_timestamp_millis);
             }
         }
 
+        function onError() {
+            $("#message-box").show();
+        }
+
         $.ajax({
             dataType: 'json',
             success: onDataReceived,
+            error: onError,
             cache: false
         });