GUI -- Added new icons to glyphs library.
- Edited glyph-spec and icon-spec to test the changes.

Change-Id: I23472b7f6699a46da1728c49a9d72f826244c739
diff --git a/web/gui/src/main/webapp/_sdh/checkmark-xmark-icon.html b/web/gui/src/main/webapp/_sdh/checkmark-xmark-icon.html
new file mode 100644
index 0000000..bb94ad0
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/checkmark-xmark-icon.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<!--
+  ~ Copyright 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 -- Embedded checkmarks and xmarks in table page
+
+  @author Bri Prebilic Cole
+  -->
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Embedded Check and X Marks</title>
+
+    <script src="../tp/d3.js"></script>
+
+    <link rel="stylesheet" href="../app/common.css">
+
+    <style>
+        html,
+        body {
+            background-color: #fff;
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 9pt;
+        }
+
+        svg .icon .glyph {
+            stroke: none;
+            fill: white;
+            fill-rule: evenodd;
+        }
+
+        svg .icon.deviceOnline {
+            fill: green;
+        }
+
+        svg .icon.deviceOffline {
+            fill: darkred;
+        }
+
+        svg .icon rect {
+            stroke: white;
+            stroke-width: 3px;
+        }
+
+    </style>
+</head>
+<body class="light">
+<!-- minimal framework to access glyphs library module -->
+<script>
+    var libs = {};
+    var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
+
+
+</script>
+
+<!-- Test HTML -->
+
+<div>
+    <table class="summary-list">
+        <tr> <th></th> <th>Two</th> <th>Three</th> </tr>
+        <tr>
+            <td>
+                <div icon icon-id="deviceOnline">
+
+                    <!-- icon directive needs to inject the following structure -->
+                    <!-- ------------------------------------------------ -->
+                    <svg width="20" height="20" viewBox="0 0 50 50">
+                        <g class="icon deviceOnline">
+                            <rect width="50" height="50" rx="10"></rect>
+                            <use class="glyph" xlink:href="#checkmark" width="50" height="50"></use>
+                        </g>
+                    </svg>
+                    <!-- ------------------------------------------------ -->
+
+                </div>
+            </td>
+            <td>Some text</td>
+            <td>Some text</td>
+        </tr>
+        <tr>
+            <td>
+                <div icon icon-id="deviceOffline">
+
+                    <!-- icon directive needs to inject the following structure -->
+                    <!-- ------------------------------------------------ -->
+                    <svg width="20" height="20" viewBox="0 0 50 50">
+                        <g class="icon deviceOffline">
+                            <rect width="50" height="50" rx="10"></rect>
+                            <use class="glyph" xlink:href="#xmark" width="50" height="50"></use>
+                        </g>
+                    </svg>
+                    <!-- ------------------------------------------------ -->
+
+
+                </div>
+            </td>
+            <td>Some text</td>
+            <td>Some Other text</td>
+        </tr>
+    </table>
+</div>
+
+<!-- common definitions for other SVG elements to use -->
+<svg width="0" height="0">
+    <defs>
+        <symbol id="checkmark" viewBox="0 0 10 10">
+            <path d="M2.644,4.531c0,0,0.719-0.422,1.172,0.281l1.047,1.797c0,0,
+            2.675-5.449,2.781-5.719c0,0,0.547-0.859,1.359-0.094
+	c0,0,0.484,0.484,0,1.297S6.775,7.305,5.557,9.211c0,0-0.413,0.461-1.194,
+	0.086S2.222,5.375,2.222,5.375S2.159,4.734,2.644,4.531z">
+            </path>
+        </symbol>
+
+        <symbol id="xmark" viewBox="0 0 10 10">
+            <path d="M8.967,7.196C8.172,6.852,7.37,6.058,6.672,5.189c0.385-0.463,
+            0.665-0.834,0.764-1.008C7.825,3.5,9.382,1.553,8.068,1.067
+	C6.754,0.58,6.585,1.723,6.585,1.723C6.41,2.129,5.955,2.722,5.386,3.371C4.865,
+	2.544,4.541,1.918,4.541,1.918
+	S3.812,0.24,2.863,0.654C1.915,1.067,2.304,2.283,2.304,2.283c0.349,1.122,
+	0.834,2.082,1.368,2.898
+	C2.456,6.396,1.331,7.415,1.331,7.415S0.82,7.829,0.844,8.072C0.869,8.315,
+	0.917,9.556,2.4,9.067
+	C3.084,8.843,4.122,7.933,5.083,6.95c1.306,1.348,2.498,1.949,2.498,1.949s0.535,
+	0.51,1.386-0.244
+	C9.819,7.902,8.967,7.196,8.967,7.196z">
+            </path>
+        </symbol>
+
+    </defs>
+</svg>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/app/fw/svg/glyph.js b/web/gui/src/main/webapp/app/fw/svg/glyph.js
index b2afea3..4f020ee 100644
--- a/web/gui/src/main/webapp/app/fw/svg/glyph.js
+++ b/web/gui/src/main/webapp/app/fw/svg/glyph.js
@@ -18,6 +18,7 @@
  ONOS GUI -- SVG -- Glyph Service
 
  @author Simon Hunt
+ @author Bri Prebilic Cole
  */
 (function () {
     'use strict';
@@ -116,7 +117,24 @@
             uiAttached: "M2,2.5a.5,.5,0,0,1,.5-.5h5a.5,.5,0,0,1,.5,.5v3" +
             "a.5,.5,0,0,1-.5,.5h-5a.5,.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1," +
             ".3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4" +
-            "a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z"
+            "a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z",
+
+            checkMark: "M2.644,4.531c0,0,0.719-0.422,1.172,0.281l1.047," +
+            "1.797c0,0,2.675-5.449,2.781-5.719c0,0,0.547-0.859,1.359-0.094c0," +
+            "0,0.484,0.484,0,1.297S6.775,7.305,5.557,9.211c0,0-0.413," +
+            "0.461-1.194,0.086S2.222,5.375,2.222,5.375S2.159,4.734,2.644,4.531z",
+
+            xMark: "M8.967,7.196C8.172,6.852,7.37,6.058,6.672,5.189c0.385-0.463," +
+            "0.665-0.834,0.764-1.008C7.825,3.5,9.382,1.553,8.068,1.067" +
+            "C6.754,0.58,6.585,1.723,6.585,1.723C6.41,2.129,5.955,2.722,5.386," +
+            "3.371C4.865,2.544,4.541,1.918,4.541,1.918" +
+            "S3.812,0.24,2.863,0.654C1.915,1.067,2.304,2.283,2.304,2.283c0.349," +
+            "1.122,0.834,2.082,1.368,2.898" +
+            "C2.456,6.396,1.331,7.415,1.331,7.415S0.82,7.829,0.844,8.072C0.869," +
+            "8.315,0.917,9.556,2.4,9.067" +
+            "C3.084,8.843,4.122,7.933,5.083,6.95c1.306,1.348,2.498,1.949,2.498," +
+            "1.949s0.535,0.51,1.386-0.244" +
+            "C9.819,7.902,8.967,7.196,8.967,7.196z"
         };
 
     // ----------------------------------------------------------------------
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index deb1522..aade3a7 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -18,6 +18,7 @@
  ONOS GUI -- SVG -- Icon Service
 
  @author Simon Hunt
+ @author Bri Prebilic Cole
  */
 (function () {
     'use strict';
@@ -31,10 +32,8 @@
     // maps icon id to the glyph id it uses.
     // note: icon id maps to a CSS class for styling that icon
     var glyphMapping = {
-            deviceOnline: 'crown',
-            deviceOffline: 'chain'
-            //deviceOnline: 'checkMark',
-            //deviceOffline: 'xMark'
+            deviceOnline: 'checkMark',
+            deviceOffline: 'xMark'
         };
 
     function ensureIconLibDefs() {
diff --git a/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js b/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
index 64e8a02..c0cbf67 100644
--- a/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
@@ -22,7 +22,7 @@
 describe('factory: fw/svg/glyph.js', function() {
     var $log, fs, gs, d3Elem;
 
-    var numBaseGlyphs = 11,
+    var numBaseGlyphs = 13,
         vbBird = '352 224 113 112',
         vbGlyph = '0 0 110 110',
         vbBadge = '0 0 10 10',
@@ -38,6 +38,8 @@
             chain: 'M60.4,77.6c-',
             crown: 'M99.5,21.6c0,',
             uiAttached: 'M2,2.5a.5,.5',
+            checkMark: 'M2.644,4.531c0',
+            xMark: 'M8.967,7.196C8.172',
 
             // our test ones..
             triangle: 'M.5,.2',
@@ -140,6 +142,14 @@
         gs.init();
         verifyGlyphLoadedInCache('uiAttached', vbBadge);
     });
+    it('should load the checkMark glyph', function() {
+        gs.init();
+        verifyGlyphLoadedInCache('checkMark', vbBadge);
+    });
+    it('should load the xMark glyph', function() {
+        gs.init();
+        verifyGlyphLoadedInCache('xMark', vbBadge);
+        });
 
     // define some glyphs that we want to install