WIP:: Initial stab at regions demo for Europe.

Change-Id: I80402aea2b3d57bf104db0c0fba68bebda0cae9e
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css b/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
index 6523a66..bb26930 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
@@ -170,15 +170,12 @@
 
 /* note: device without the 'online' class is offline */
 #ov-topo2 svg .node.device rect {
-    /* TODO: theme */
     fill: #f0f0f0;
 }
 #ov-topo2 svg .node.device text {
-    /*TODO: theme*/
     fill: #bbb;
 }
 #ov-topo2 svg .node.device use {
-    /*TODO: theme*/
     fill: #777;
 }
 
@@ -198,6 +195,10 @@
     fill: #ffffff;
 }
 
+#ov-topo2 svg .node.sub-region text {
+    stroke: #000000;
+}
+
 #ov-topo2 svg .node.sub-region use {
     /* NOTE: this gets overridden programatically */
     fill: #454545;
@@ -605,6 +606,10 @@
     fill: #525660;
 }
 
+.dark #ov-topo2 svg .node.sub-region text {
+    stroke: #eeeeee;
+}
+
 .dark #ov-topo2 svg .node.sub-region use {
     /* NOTE: this gets overridden programatically */
     fill: #eeeeee;
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.js b/web/gui/src/main/webapp/app/view/topo2/topo2.js
index 06e0a8d..fc7d9ae 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.js
@@ -32,7 +32,7 @@
 
     // Internal state
     var zoomer,
-        currentLayoutId = '_default_';  // NOTE: see UiTopoLayoutId.DEFAULT_STR
+        currentLayoutId = 'root';  // NOTE: see UiTopoLayoutId.DEFAULT_STR
 
 
     // --- Glyphs, Icons, and the like -----------------------------------
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Background.js b/web/gui/src/main/webapp/app/view/topo2/topo2Background.js
index f83d921..7aee3ed 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Background.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Background.js
@@ -65,14 +65,26 @@
                     },
                     addLayout: function (data) {
 
+                        var oldBgType = this.bgType,
+                            oldBgId = this.bgId;
+
                         this.background = data;
                         this.bgType = data.bgType;
+                        this.bgId = data.bgId;
                         this.zoomData = data.bgZoom;
 
                         var _this = this,
                             pan = zoomPan(this.zoomData),
                             scale = zoomScale(this.zoomData);
 
+                        // TODO: test for same background... avoid reload on same
+
+                        //  Avoid re-loading the background / sprite layer
+                        //  if the type and ID are same as last time.
+
+                        //  For example, europe map can be panned/zoomed to
+                        //   focus on different countries
+
                         if (this.bgType === 'geo') {
 
                             // Hide Sprite Layer and show Map
@@ -101,6 +113,8 @@
                             // No background type - Tell the region the background is ready for placing nodes
                             t2ms.hide();
                             t2sls.hide();
+
+                            // TODO: don't just use previous layout's pan/zoom settings!
                             // _this.region.loaded('bgRendered', true);
                             // t2zs.panAndZoom(pan, _this.background.bgZoomScale, 1000);
                         }
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2D3.js b/web/gui/src/main/webapp/app/view/topo2/topo2D3.js
index e036020..6a3964a 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2D3.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2D3.js
@@ -36,7 +36,7 @@
         function (_is_) {
             return {
                 nodeEnter: nodeEnter,
-                nodeExit: nodeExit,
+                nodeExit: nodeExit
             };
         }
     ]
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js b/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
index 94a4ef9..ccedaff 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
@@ -33,16 +33,21 @@
 
     // note: these are the device icon colors without affinity (no master)
     var dColTheme = {
-        light: {
-            online: '#444444',
-            offline: '#cccccc'
+            light: {
+                online: '#444444',
+                offline: '#cccccc'
+            },
+            dark: {
+                // TODO: theme
+                online: '#444444',
+                offline: '#cccccc'
+            }
         },
-        dark: {
-            // TODO: theme
-            online: '#444444',
-            offline: '#cccccc'
-        }
-    };
+        // and here are the stroke colors of the glyph, per theme
+        dUseTheme = {
+            light: 'white',
+            dark: 'black'
+        };
 
     angular.module('ovTopo2')
     .factory('Topo2NodeModel', [
@@ -258,7 +263,7 @@
                     // Icon
                     glyph = is.addDeviceIcon(node, glyphId, devIconDim);
                     glyph.attr(this.iconBox(devIconDim, 0));
-                    glyph.style('fill', 'white');
+                    glyph.style('fill', dUseTheme[ts.theme()]);
 
                     node.attr('transform',
                         sus.translate(-halfDevIcon, -halfDevIcon));