<html>
  <head>
    <meta content="text/html; charset=windows-1252"
      http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    Hi Aline,<br>
    Could you please explain the first comment bit elaborately with
    example. It will be convenient for me to change the implementation
    accordingly.<br>
    <br>
    Thanks,<br>
    Atreyee  <br>
    <br>
    <div class="moz-cite-prefix">On 11/17/2015 11:22 PM, Aline Manera
      wrote:<br>
    </div>
    <blockquote cite="mid:564B695D.1030507@linux.vnet.ibm.com"
      type="cite">
      <meta content="text/html; charset=windows-1252"
        http-equiv="Content-Type">
      <br>
      After removing the former CSS files I was able to get a better
      view of the new navigation bar.<br>
      Thanks, Walter, for the directions!<br>
      <br>
      My overall comments (in additional to those I made in the code):<br>
      <br>
      1. Set the whole first level tab with dark blue. So it will have
      the width than the second level.<br>
      <br>
      2. The "Host" tab in light blue is overloading the "Host" tab in
      dark blue<br>
      <br>
      3. Align "localhost" text with the first tab text in the second
      level<br>
          So "localhost" would be aligned with "Host" in light blue.
      (The same applies to Kimchi tabs)<br>
      <br>
      <img src="cid:part1.09040504.09060509@linux.vnet.ibm.com" alt=""><br>
      <br>
      <div class="moz-cite-prefix">Let me know you thoughts on it.<br>
        <br>
        Regards,<br>
        Aline Manera<br>
        <br>
        <br>
        On 11/11/2015 20:34, <a moz-do-not-send="true"
          class="moz-txt-link-abbreviated"
          href="mailto:atreyee@linux.vnet.ibm.com">atreyee@linux.vnet.ibm.com</a>
        wrote:<br>
      </div>
      <blockquote
        cite="mid:1447281287-2042-2-git-send-email-atreyee@linux.vnet.ibm.com"
        type="cite">
        <pre wrap="">From: Atreyee Mukhopadhyay <a moz-do-not-send="true" class="moz-txt-link-rfc2396E" href="mailto:atreyee@linux.vnet.ibm.com">&lt;atreyee@linux.vnet.ibm.com&gt;</a>

First level navigation bar with Host and Virtualization tabs.
Second level tab navigation based on first level navigation.
---
 src/wok/plugins/gingerbase/ui/config/tab-ext.xml |  1 +
 src/wok/plugins/kimchi/ui/config/tab-ext.xml     |  1 +
 ui/css/src/modules/_toolbar.scss                 |  9 ++-
 ui/css/src/modules/_wok-variables.scss           |  7 +-
 ui/js/src/wok.main.js                            | 81 +++++++++++++++++++++---
 ui/pages/wok-ui.html.tmpl                        |  6 +-
 6 files changed, 91 insertions(+), 14 deletions(-)

diff --git a/src/wok/plugins/gingerbase/ui/config/tab-ext.xml b/src/wok/plugins/gingerbase/ui/config/tab-ext.xml
index 8366f1f..17112ef 100644
--- a/src/wok/plugins/gingerbase/ui/config/tab-ext.xml
+++ b/src/wok/plugins/gingerbase/ui/config/tab-ext.xml
@@ -7,4 +7,5 @@
         &lt;title&gt;Host&lt;/title&gt;
         &lt;path&gt;plugins/gingerbase/host.html&lt;/path&gt;
     &lt;/tab&gt;
+    &lt;functionality&gt;Host&lt;/functionality&gt;
 &lt;/tabs-ext&gt;
diff --git a/src/wok/plugins/kimchi/ui/config/tab-ext.xml b/src/wok/plugins/kimchi/ui/config/tab-ext.xml
index 415dbf1..9adabe0 100644
--- a/src/wok/plugins/kimchi/ui/config/tab-ext.xml
+++ b/src/wok/plugins/kimchi/ui/config/tab-ext.xml
@@ -1,5 +1,6 @@
 &lt;?xml version="1.0" encoding="utf-8"?&gt;
 &lt;tabs-ext&gt;
+    &lt;functionality&gt;Virtualization&lt;/functionality&gt;
     &lt;tab&gt;
         &lt;access role="admin" mode="admin"/&gt;
         &lt;access role="user" mode="byInstance"/&gt;
diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss
index 744d48d..43e48a8 100644
--- a/ui/css/src/modules/_toolbar.scss
+++ b/ui/css/src/modules/_toolbar.scss
@@ -47,7 +47,7 @@
         vertical-align: middle;
         padding: 6px 0  !important;
         margin-left: 50px  !important;
-        font-weight: 600;
+        font-weight: 400;
         width: auto;
         min-width: auto;
     }
@@ -74,4 +74,11 @@
             }
       }
     }
+}
+
+@each $tab, $bgcolor in $colors {
+
+#tabPanel.#{$tab}{
+    background-color:  map-get($colors,$tab) !important;
+   }
 }
\ No newline at end of file
diff --git a/ui/css/src/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss
index d67672d..7381335 100644
--- a/ui/css/src/modules/_wok-variables.scss
+++ b/ui/css/src/modules/_wok-variables.scss
@@ -60,10 +60,11 @@ $colors: (
     templates:         #00a6a0, 
     storage:             #feb813,
     network:           #7f1c7d,
-    administration:    #d9182d
+    administration:    #d9182d,
+    Virtualization-tab: #59930c,
+    Host-tab:          #00578c
 );

-
 //== Scaffolding
 //
 //## Settings for some of the most global styles.
@@ -978,4 +979,4 @@ $color-grey-arrow: rgb(204, 204, 204);

 $width-default: 220px;

-$zindex-select-dropdown: 1035 !default; 
\ No newline at end of file
+$zindex-select-dropdown: 1035 !default;
diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js
index 1330ac1..6043832 100644
--- a/ui/js/src/wok.main.js
+++ b/ui/js/src/wok.main.js
@@ -25,6 +25,7 @@ wok.main = function() {

     var genTabs = function(tabs) {
         var tabsHtml = [];
+        //var tabs = allTabs[$(funcItem).text()];
         $(tabs).each(function(i, tab) {
             var title = tab['title'];
             var cssClass = tab['css'];
@@ -44,10 +45,30 @@ wok.main = function() {
             }
         });
         return tabsHtml.join('');
+       //var tabElements = tabsHtml.join('')
+       //$(tabElements).appendTo($('tabPanel'));
     };

+    var genFunctTabs  = function(tabs){
+        var functionalTabHtml = [];
+        var functionalTabs = Object.keys(tabs);
+        var css ="";
+        $(functionalTabs).each(function(i, tab) {
+            functionalTabHtml.push(
+                     '&lt;li&gt;',
+                         '&lt;a class="item',' ',tab,'-tab','" href="#"&gt;',
+                         tab,
+                         '&lt;/a&gt;',
+                     '&lt;/li&gt;'
+            );
+        });
+    return functionalTabHtml.join('');
+    }
+
     var parseTabs = function(xmlData) {
         var tabs = [];
+        var functionalTabs = {};
+        var functionality = $(xmlData).find('functionality').text();
         $(xmlData).find('tab').each(function() {
             var $tab = $(this);
             var titleKey = $tab.find('title').text();
@@ -69,8 +90,17 @@ wok.main = function() {
                 document.location.href = 'login.html';
             }
         });
+        var tabsDetails = JSON.parse(wok.cookie.get('tabs'));

-        return tabs;
+        var isExisting = tabsDetails[functionality] &amp;&amp; (tabsDetails[functionality].length)&gt;0;
+
+        if(isExisting){
+            tabs.push.apply(tabs,tabsDetails[functionality]);
+        }
+
+        functionalTabs[functionality] = tabs;
+
+        return functionalTabs;
     };

     var retrieveTabs = function(url) {
@@ -89,7 +119,8 @@ wok.main = function() {
     var pluginI18nUrl = 'plugins/{plugin}/i18n.json';
     var DEFAULT_HASH;
     var buildTabs = function(callback) {
-        var tabs = [];
+        var tabs = {};
+        wok.cookie.set('tabs',JSON.stringify(tabs));
         wok.listPlugins(function(plugins) {
             $(plugins).each(function(i, p) {
                 var url = wok.substitute(pluginConfigUrl, {
@@ -101,10 +132,19 @@ wok.main = function() {
                 wok.getI18n(function(i18nObj){ $.extend(i18n, i18nObj)},
                                function(i18nObj){ //i18n is not define by plugin
                                }, i18nUrl, true);
-                tabs.push.apply(tabs, retrieveTabs(url));
+                //tabs.push.apply(tabs, retrieveTabs(url));
+                tabs =  $.extend({},tabs, retrieveTabs(url));
+                wok.cookie.set('tabs',JSON.stringify(tabs));
+            });
+
+            var orderedtabs ={};
+            Object.keys(tabs).sort().forEach(function(key){
+                orderedtabs[key]=tabs[key];
             });

-            var defaultTab = tabs[0]
+            var defaultFunctionalTab = Object.keys(orderedtabs)[0];
+
+            var defaultTab = tabs[defaultFunctionalTab][0];

             var defaultTabPath = defaultTab &amp;&amp; defaultTab['path']

@@ -116,7 +156,11 @@ wok.main = function() {
             DEFAULT_HASH = defaultTabPath &amp;&amp;
                 defaultTabPath.substring(0, defaultTabPath.lastIndexOf('.'))
             }
-            $('#nav-menu ul.navbar-nav li.hostname').after(genTabs(tabs));
+            $('#nav-menu ul.navbar-nav li.hostname').after(genFunctTabs(orderedtabs));
+            $('#nav-menu ul.navbar-nav li a.item').first().parent().addClass('active').focus();
+            $('#tabPanel').addClass(defaultFunctionalTab+'-tab');
+            $(genTabs(tabs[defaultFunctionalTab])).appendTo('#tabPanel ul');
+
             wok.getHostname();

             callback &amp;&amp; callback();
@@ -146,7 +190,7 @@ wok.main = function() {
          * point to the tab. If nothing found, inform user the URL is invalid
          * and clear location.hash to jump to home page.
          */
-        var tab = $('#nav-menu ul li a[href="' + url + '"]');
+        var tab = $('#tabPanel ul.navbar-nav li a[href="' + url + '"]');
         if (tab.length === 0 &amp;&amp; url!='wok-empty.html') {
             location.hash = '';
             return;
@@ -158,7 +202,7 @@ wok.main = function() {
         }else{
         
         // Update the visual style of tabs; focus the selected one.
-        $('#nav-menu ul li').removeClass('active');
+        $('#tabPanel ul li').removeClass('active');
         $(tab).parent().addClass('active');
         $(tab).focus();

@@ -238,7 +282,7 @@ wok.main = function() {
          * Register click listener of tabs. Replace the default reloading page
          * behavior of &lt;a&gt; with Ajax loading.
          */
-        $('#nav-menu ul li').on('click', 'a.item', function(event) {
+        $('#tabPanel ul').on('click', 'a.item', function(event) {
             var href = $(this).attr('href');
             // Remove file extension from 'href'
             location.hash = href.substring(0,href.lastIndexOf('.'))
@@ -254,6 +298,25 @@ wok.main = function() {
             event.preventDefault();
         });

+        $('#nav-menu ul li').on('click', 'a.item', function(event) {
+            var functionalTab = $(this).text();
+            var previousSelection = $('#nav-menu ul li.active a').text();
+            $('#tabPanel').removeClass(previousSelection+'-tab');
+
+            $('#nav-menu ul li').removeClass('active');
+            $(this).parent().addClass('active').focus();
+
+            $('#tabPanel').addClass(functionalTab+'-tab');
+            var tabs = JSON.parse(wok.cookie.get('tabs'));
+            $('#tabPanel ul').empty();
+            $(genTabs(tabs[functionalTab])).appendTo('#tabPanel ul');
+            var firstTab = $('#tabPanel ul.navbar-nav li').first();
+            $(firstTab).addClass('active');
+            var href= $('a.item',firstTab).attr('href');
+            location.hash = href.substring(0,href.lastIndexOf('.'));
+            event.preventDefault();
+
+        });
         // Perform logging out via Ajax request.
         $('#btn-logout').on('click', function() {
             wok.logout(function() {
@@ -392,4 +455,4 @@ wok.openHelp = function(e) {
     var url = $(tab).parent().find("input[name='helpPath']").val();
     window.open(url, "Wok Help");
     e.preventDefault();
-};
\ No newline at end of file
+};
diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl
index acfae27..d3f45ea 100644
--- a/ui/pages/wok-ui.html.tmpl
+++ b/ui/pages/wok-ui.html.tmpl
@@ -133,10 +133,14 @@
                 &lt;/button&gt;
             &lt;/div&gt;
             &lt;div class="collapse navbar-collapse" id="nav-menu"&gt;
-                &lt;ul class="nav navbar-nav"&gt;                
+                &lt;ul id="functionalTabPanel" class="nav navbar-nav"&gt;
                     &lt;li class="hostname"&gt;&lt;span class="host-location"&gt;&lt;/span&gt;&lt;/li&gt;
                 &lt;/ul&gt;
             &lt;/div&gt;
+            &lt;div class="collapse navbar-collapse" id="tabPanel"&gt;
+               &lt;ul class="nav navbar-nav"&gt;
+               &lt;/ul&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
       &lt;/nav&gt;
     &lt;/div&gt;
</pre>
      </blockquote>
      <br>
    </blockquote>
    <br>
  </body>
</html>