Topo2Link - Fixed width of rectangle and centered text
Topo2Layout/Link - Added port number on link hover
Topo2Layout/Select - Added Drag functionality
Topo2SubRegion - Added onClick event to node
Topo2Device - Added Color Theme
TopoForce - Removed console.log

Change-Id: Icd85d92c8f3c5f96cb896068fe9375c250717f5f
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
index c8478cf..6e48b83 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
@@ -30,6 +30,7 @@
 
     // configuration
     var devIconDim = 36,
+        labelPad = 10,
         hostRadius = 14,
         badgeConfig = {
             radius: 12,
@@ -43,7 +44,8 @@
             i: 'badgeInfo',
             w: 'badgeWarn',
             e: 'badgeError'
-        };
+        },
+        deviceLabelIndex = 0;
 
     function createDeviceCollection(data, region) {
 
@@ -81,13 +83,25 @@
         }
     }
 
-    function deviceGlyphColor(d) {
+    // note: these are the device icon colors without affinity (no master)
+    var dColTheme = {
+        light: {
+            online: '#444444',
+            offline: '#cccccc'
+        },
+        dark: {
+            // TODO: theme
+            online: '#444444',
+            offline: '#cccccc'
+        }
+    };
 
+    function deviceGlyphColor(d) {
         var o = this.node.online,
             id = this.node.master, // TODO: This should be from node.master
             otag = o ? 'online' : 'offline';
         return o ? sus.cat7().getColor(id, 0, ts.theme())
-                 : '#ff0000';
+                 : dColTheme[ts.theme()][otag];
     }
 
     function setDeviceColor() {