GUI -- Implemented "Show Traffic on hover" toggle button in masthead.

 - also included sample *Instance events.

Change-Id: Ibdee2b6c54a0a192361d269dbe69128d44604838

+{
+  "event": "addInstance",
+  "payload": {
+    "id": "onos-1",
+    "online": "true"
+  }
+}

+{
+  "event": "removeInstance",
+  "payload": {
+    "id": "onos-1",
+    "online": "false"
+  }
+}

+{
+  "event": "updateInstance",
+  "payload": {
+    "id": "onos-1",
+    "online": "false"
+  }
+}

@@ -91,3 +91,47 @@
     border: 1px solid #eee;
     border: 1px solid #eee;
     color: #aaf;
     color: #aaf;
 }
 }
+
+/* Button Bar */
+
+#bb {
+    margin: 0 30px;
+    padding: 0 2px;
+}
+
+#bb .btn {
+    padding: 2px 6px;
+    font-size: 9pt;
+    cursor: pointer;
+}
+
+.light #bb .btn {
+    border: 1px solid #fff;
+    border-right-color: #444;
+    border-bottom-color: #444;
+    color: #222;
+}
+
+.light #bb .btn.active {
+    border: 1px solid #444;
+    border-right-color: #fff;
+    border-bottom-color: #fff;
+    background-color: #888;
+    color: #ddf;
+}
+
+.dark #bb .btn {
+    border: 1px solid #888;
+    border-right-color: #111;
+    border-bottom-color: #111;
+    color: #888;
+}
+
+.dark #bb .btn.active {
+    border: 1px solid #111;
+    border-right-color: #888;
+    border-bottom-color: #888;
+    background-color: #555;
+    color: #bbd;
+}
+

@@ -1385,11 +1385,33 @@
 
 
     }
     }
 
 
-
     function para(sel, text) {
     function para(sel, text) {
         sel.append('p').text(text);
         sel.append('p').text(text);
     }
     }
 
 
+    // TODO: toggle button (and other widgets in the masthead) should be provided
+    //  by the framework; not generated by the view.
+
+    var showTrafficOnHover;
+
+    function addButtonBar(view) {
+        var bb = d3.select('#mast')
+            .append('span').classed('right', true).attr('id', 'bb');
+
+        showTrafficOnHover = bb.append('div')
+            .classed('btn', true)
+            .text('Show traffic on hover')
+            .on('click', toggleShowTraffic);
+    }
+
+    function toggleShowTraffic() {
+        showTrafficOnHover.classed('active', !trafficHover());
+    }
+
+    function trafficHover() {
+        return showTrafficOnHover.classed('active');
+    }
+
     // ==============================
     // ==============================
     // View life-cycle callbacks
     // View life-cycle callbacks
 
 
@@ -1496,6 +1518,10 @@
         view.setRadio(btnSet);
         view.setRadio(btnSet);
         view.setKeys(keyDispatch);
         view.setKeys(keyDispatch);
 
 
+        // patch in our "button bar" for now
+        // TODO: implement a more official frameworky way of doing this..
+        addButtonBar(view);
+
         // Load map data asynchronously; complete startup after that..
         // Load map data asynchronously; complete startup after that..
         loadGeoJsonData();
         loadGeoJsonData();
     }
     }