GUI -- Implemented Panel Service.

Change-Id: I5e60c6ffa5676bc11f7312681af7bca85b4f8036
diff --git a/web/gui/src/main/webapp/app/fw/layer/panel.css b/web/gui/src/main/webapp/app/fw/layer/panel.css
new file mode 100644
index 0000000..f83d595
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/layer/panel.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2014,2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Panel Service -- CSS file
+ */
+
+.floatpanel {
+    position: absolute;
+    z-index: 100;
+    display: block;
+    top: 64px;
+    width: 200px;
+    right: -220px;
+    opacity: 0;
+    background-color: rgba(255,255,255,0.8);
+
+    padding: 10px;
+    color: black;
+    font-size: 10pt;
+
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    box-shadow: 0px 2px 12px #777;
+}
+
+/* TODO: light/dark themes */
+.light .floatpanel {
+
+}
+.dark .floatpanel {
+
+}
diff --git a/web/gui/src/main/webapp/app/fw/layer/panel.js b/web/gui/src/main/webapp/app/fw/layer/panel.js
index 6b85e07..2209487 100644
--- a/web/gui/src/main/webapp/app/fw/layer/panel.js
+++ b/web/gui/src/main/webapp/app/fw/layer/panel.js
@@ -20,46 +20,161 @@
 (function () {
     'use strict';
 
-    var $log;
+    var $log, fs;
 
     var defaultSettings = {
-        position: 'TR',
-        side: 'right',
-        width: 200
+        edge: 'right',
+        width: 200,
+        height: 80,
+        margin: 20,
+        xtnTime: 750
     };
 
+    var panels,
+        panelLayer;
+
+
+    function init() {
+        panelLayer = d3.select('#floatpanels');
+        panelLayer.html('');
+        panels = {};
+    }
+
+    // helpers for panel
+    function noop() {}
+
+    function margin(p) {
+        return p.settings.margin;
+    }
+    function noPx(p, what) {
+        return Number(p.el.style(what).replace(/px$/, ''));
+    }
+    function widthVal(p) {
+        return noPx(p, 'width');
+    }
+    function heightVal(p) {
+        return noPx(p, 'height');
+    }
+    function pxShow(p) {
+        return margin(p) + 'px';
+    }
+    function pxHide(p) {
+        return (-margin(p) - widthVal(p)) + 'px';
+    }
+
+    function makePanel(id, settings) {
+        var p = {
+                id: id,
+                settings: settings,
+                on: false,
+                el: null
+            },
+            api = {
+                show: showPanel,
+                hide: hidePanel,
+                empty: emptyPanel,
+                append: appendPanel,
+                width: panelWidth,
+                height: panelHeight,
+                isVisible: panelIsVisible
+            };
+
+        p.el = panelLayer.append('div')
+            .attr('id', id)
+            .attr('class', 'floatpanel')
+            .style('opacity', 0);
+
+        // has to be called after el is set
+        p.el.style(p.settings.edge, pxHide(p));
+        panelWidth(p.settings.width);
+        panelHeight(p.settings.height);
+
+        panels[id] = p;
+
+        function showPanel(cb) {
+            var endCb = fs.isF(cb) || noop;
+            p.on = true;
+            p.el.transition().duration(p.settings.xtnTime)
+                .each('end', endCb)
+                .style(p.settings.edge, pxShow(p))
+                .style('opacity', 1);
+        }
+
+        function hidePanel(cb) {
+            var endCb = fs.isF(cb) || noop;
+            p.on = false;
+            p.el.transition().duration(p.settings.xtnTime)
+                .each('end', endCb)
+                .style(p.settings.edge, pxHide(p))
+                .style('opacity', 0);
+        }
+
+        function emptyPanel() {
+            return p.el.html('');
+        }
+
+        function appendPanel(what) {
+            return p.el.append(what);
+        }
+
+        function panelWidth(w) {
+            if (w === undefined) {
+                return widthVal(p);
+            }
+            p.el.style('width', w + 'px');
+        }
+
+        function panelHeight(h) {
+            if (h === undefined) {
+                return heightVal(p);
+            }
+            p.el.style('height', h + 'px');
+        }
+
+        function panelIsVisible() {
+            return p.on;
+        }
+
+        return api;
+    }
+
+    function removePanel(id) {
+        panelLayer.select('#' + id).remove();
+        delete panels[id];
+    }
+
     angular.module('onosLayer')
-        .factory('PanelService', ['$log', function (_$log_) {
+        .factory('PanelService', ['$log', 'FnService', function (_$log_, _fs_) {
             $log = _$log_;
+            fs = _fs_;
 
-
-            function createPanel(opts) {
+            function createPanel(id, opts) {
                 var settings = angular.extend({}, defaultSettings, opts);
-
-                function renderPanel() {
-
+                if (!id) {
+                    $log.warn('createPanel: no ID given');
+                    return null;
                 }
-
-                function showPanel() {
-
+                if (panels[id]) {
+                    $log.warn('Panel with ID "' + id + '" already exists');
+                    return null;
                 }
+                $log.debug('creating panel:', id, settings);
+                return makePanel(id, settings);
+            }
 
-                function hidePanel() {
-
+            function destroyPanel(id) {
+                if (panels[id]) {
+                    $log.debug('destroying panel:', id);
+                    removePanel(id);
+                } else {
+                    $log.debug('no panel to destroy:', id);
                 }
-
-                var api = {
-                    render: renderPanel,
-                    show: showPanel,
-                    hide: hidePanel
-                };
-
-                $log.debug('creating panel with settings: ', settings);
-                return api;
             }
 
             return {
-                createPanel: createPanel
+                init: init,
+                createPanel: createPanel,
+                destroyPanel: destroyPanel
             };
         }]);
 
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index c26b8f7..beeb2d3 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -66,6 +66,7 @@
     <link rel="stylesheet" href="common.css">
     <link rel="stylesheet" href="fw/mast/mast.css">
     <link rel="stylesheet" href="fw/svg/icon.css">
+    <link rel="stylesheet" href="fw/layer/panel.css">
     <link rel="stylesheet" href="fw/nav/nav.css">
 
     <!-- This is where contributed javascript will get injected -->
diff --git a/web/gui/src/main/webapp/app/onos.js b/web/gui/src/main/webapp/app/onos.js
index b7be490..23e777c 100644
--- a/web/gui/src/main/webapp/app/onos.js
+++ b/web/gui/src/main/webapp/app/onos.js
@@ -24,12 +24,13 @@
     // define core module dependencies here...
     var coreDependencies = [
         'ngRoute',
-        'onosWidget',
+        'onosMast',
+        'onosNav',
         'onosUtil',
         'onosSvg',
         'onosRemote',
-        'onosMast',
-        'onosNav'
+        'onosLayer',
+        'onosWidget'
     ];
 
     // view IDs.. note the first view listed is loaded at startup
@@ -63,9 +64,9 @@
 
         .controller('OnosCtrl', [
             '$log', '$route', '$routeParams', '$location',
-            'KeyService', 'ThemeService', 'GlyphService',
+            'KeyService', 'ThemeService', 'GlyphService', 'PanelService',
 
-        function ($log, $route, $routeParams, $location, ks, ts, gs) {
+        function ($log, $route, $routeParams, $location, ks, ts, gs, ps) {
             var self = this;
 
             self.$route = $route;
@@ -77,6 +78,7 @@
             ts.init();
             ks.installOn(d3.select('body'));
             gs.init();
+            ps.init();
 
             $log.log('OnosCtrl has been created');
 
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
index 729f006..5addda8 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -28,7 +28,7 @@
     ];
 
     // references to injected services etc.
-    var $log, ks, zs, gs, ms, wss;
+    var $log, ks, zs, gs, ms, wss, ps;
 
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, map;
@@ -170,11 +170,12 @@
     angular.module('ovTopo', moduleDependencies)
 
         .controller('OvTopoCtrl', [
-            '$scope', '$log', '$location',
+            '$scope', '$log', '$location', '$timeout',
             'KeyService', 'ZoomService', 'GlyphService', 'MapService',
-            'WebSocketService',
+            'WebSocketService', 'PanelService',
 
-        function ($scope, _$log_, $loc, _ks_, _zs_, _gs_, _ms_, _wss_) {
+        function ($scope, _$log_, $loc, $timeout,
+                  _ks_, _zs_, _gs_, _ms_, _wss_, _ps_) {
             var self = this;
             $log = _$log_;
             ks = _ks_;
@@ -182,16 +183,18 @@
             gs = _gs_;
             ms = _ms_;
             wss = _wss_;
+            ps = _ps_;
 
             self.notifyResize = function () {
                 svgResized(svg.style('width'), svg.style('height'));
             };
 
+            // Cleanup on destroyed scope..
             $scope.$on('$destroy', function () {
                 $log.log('OvTopoCtrl is saying Buh-Bye!');
-                // TODO: cleanup when the scope is destroyed...
-                //  for example, closing the web socket.
-
+                wsock && wsock.close();
+                wsock = null;
+                ps.destroyPanel('topo-p-summary');
             });
 
             // svg layer and initialization of components
@@ -204,6 +207,12 @@
             setUpMap();
             setUpWebSocket($loc.search().wsport);
 
+            // TODO: remove this temporary code....
+            var p = ps.createPanel('topo-p-summary');
+            p.append('h1').text('Hello World');
+            p.show();
+            $timeout(function () { p.hide(); }, 2000);
+
             $log.log('OvTopoCtrl has been created');
         }]);
 }());