ONOS-3263 : Initial cut of Reference App, consolidated from UI archetype overlay sample code.

Change-Id: Ifffec2ba95de0f1386c630fdc03ed48738492257
diff --git a/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.css b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.css
new file mode 100644
index 0000000..e794fc2
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.css
@@ -0,0 +1 @@
+/* css for UI Reference App topology overlay */
diff --git a/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.html b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.html
new file mode 100644
index 0000000..eed3013
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopov.html
@@ -0,0 +1,4 @@
+<!-- partial HTML -->
+<div id="ov-ui-ref-topov">
+    <p>This is a hidden view .. just a placeholder to house the javascript</p>
+</div>
diff --git a/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovDemo.js b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovDemo.js
new file mode 100644
index 0000000..338c1d5
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovDemo.js
@@ -0,0 +1,88 @@
+/*
+ Sample Demo module. This contains the "business logic" for the topology
+ overlay that we are implementing.
+ */
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, fs, flash, wss;
+
+    // constants
+    var displayStart = 'uiRefTopovDisplayStart',
+        displayUpdate = 'uiRefTopovDisplayUpdate',
+        displayStop = 'uiRefTopovDisplayStop';
+
+    // internal state
+    var currentMode = null;
+
+
+    // === ---------------------------
+    // === Helper functions
+
+    function sendDisplayStart(mode) {
+        wss.sendEvent(displayStart, {
+            mode: mode
+        });
+    }
+
+    function sendDisplayUpdate(what) {
+        wss.sendEvent(displayUpdate, {
+            id: what ? what.id : ''
+        });
+    }
+
+    function sendDisplayStop() {
+        wss.sendEvent(displayStop);
+    }
+
+    // === ---------------------------
+    // === Main API functions
+
+    function startDisplay(mode) {
+        if (currentMode === mode) {
+            $log.debug('(in mode', mode, 'already)');
+        } else {
+            currentMode = mode;
+            sendDisplayStart(mode);
+            flash.flash('Starting display mode: ' + mode);
+        }
+    }
+
+    function updateDisplay(m) {
+        if (currentMode) {
+            sendDisplayUpdate(m);
+        }
+    }
+
+    function stopDisplay() {
+        if (currentMode) {
+            currentMode = null;
+            sendDisplayStop();
+            flash.flash('Canceling display mode');
+            return true;
+        }
+        return false;
+    }
+
+    // === ---------------------------
+    // === Module Factory Definition
+
+    angular.module('ovUiRefTopov', [])
+        .factory('UiRefTopovDemoService',
+        ['$log', 'FnService', 'FlashService', 'WebSocketService',
+
+            function (_$log_, _fs_, _flash_, _wss_) {
+                $log = _$log_;
+                fs = _fs_;
+                flash = _flash_;
+                wss = _wss_;
+
+                return {
+                    startDisplay: startDisplay,
+                    updateDisplay: updateDisplay,
+                    stopDisplay: stopDisplay
+                };
+            }]);
+}());
diff --git a/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovOverlay.js b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovOverlay.js
new file mode 100644
index 0000000..7d137a2
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefTopov/uiRefTopovOverlay.js
@@ -0,0 +1,143 @@
+// UI Reference App - topology overlay - client side
+//
+// This is the glue that binds our business logic (in uiRefTopovDemo.js)
+// to the overlay framework.
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, tov, stds;
+
+    // internal state should be kept in the service module (not here)
+
+    // our overlay definition
+    var overlay = {
+        // NOTE: this must match the ID defined in UiRefTopoOverlay
+        overlayId: 'ui-ref-overlay',
+        glyphId: '*star4',
+        tooltip: 'UI Reference Overlay',
+
+        // These glyphs get installed using the overlayId as a prefix.
+        // e.g. 'star4' is installed as 'ui-ref-overlay-star4'
+        // They can be referenced (from this overlay) as '*star4'
+        // That is, the '*' prefix stands in for 'ui-ref-overlay-'
+        glyphs: {
+            star4: {
+                vb: '0 0 8 8',
+                d: 'M1,4l2,-1l1,-2l1,2l2,1l-2,1l-1,2l-1,-2z'
+            },
+            banner: {
+                vb: '0 0 6 6',
+                d: 'M1,1v4l2,-2l2,2v-4z'
+            }
+        },
+
+        activate: function () {
+            $log.debug("UI Ref topology overlay ACTIVATED");
+        },
+        deactivate: function () {
+            stds.stopDisplay();
+            $log.debug("UI Ref topology overlay DEACTIVATED");
+        },
+
+        // detail panel button definitions
+        buttons: {
+            foo: {
+                gid: 'chain',
+                tt: 'A FOO action',
+                cb: function (data) {
+                    $log.debug('FOO action invoked with data:', data);
+                }
+            },
+            bar: {
+                gid: '*banner',
+                tt: 'A BAR action',
+                cb: function (data) {
+                    $log.debug('BAR action invoked with data:', data);
+                }
+            }
+        },
+
+        // Key bindings for traffic overlay buttons
+        // NOTE: fully qual. button ID is derived from overlay-id and key-name
+        keyBindings: {
+            0: {
+                cb: function () { stds.stopDisplay(); },
+                tt: 'Cancel Display Mode',
+                gid: 'xMark'
+            },
+            V: {
+                cb: function () { stds.startDisplay('mouse'); },
+                tt: 'Start Mouse Mode',
+                gid: '*banner'
+            },
+            F: {
+                cb: function () { stds.startDisplay('link'); },
+                tt: 'Start Link Mode',
+                gid: 'chain'
+            },
+            G: {
+                cb: buttonCallback,
+                tt: 'Uses the G key',
+                gid: 'crown'
+            },
+
+            _keyOrder: [
+                '0', 'V', 'F', 'G'
+            ]
+        },
+
+        hooks: {
+            // hook for handling escape key
+            // Must return true to consume ESC, false otherwise.
+            escape: function () {
+                // Must return true to consume ESC, false otherwise.
+                return stds.stopDisplay();
+            },
+
+            // hooks for when the selection changes...
+            empty: function () {
+                selectionCallback('empty');
+            },
+            single: function (data) {
+                selectionCallback('single', data);
+            },
+            multi: function (selectOrder) {
+                selectionCallback('multi', selectOrder);
+                tov.addDetailButton('foo');
+                tov.addDetailButton('bar');
+            },
+            mouseover: function (m) {
+                // m has id, class, and type properties
+                $log.debug('mouseover:', m);
+                stds.updateDisplay(m);
+            },
+            mouseout: function () {
+                $log.debug('mouseout');
+                stds.updateDisplay();
+            }
+        }
+    };
+
+
+    function buttonCallback(x) {
+        $log.debug('Toolbar-button callback', x);
+    }
+
+    function selectionCallback(x, d) {
+        $log.debug('Selection callback', x, d);
+    }
+
+    // invoke code to register with the overlay service
+    angular.module('ovUiRefTopov')
+        .run(['$log', 'TopoOverlayService', 'UiRefTopovDemoService',
+
+            function (_$log_, _tov_, _stds_) {
+                $log = _$log_;
+                tov = _tov_;
+                stds = _stds_;
+                tov.register(overlay);
+            }]);
+
+}());