From a7656e01f05451e452fae33c16e10381a55ff277 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Wed, 13 Oct 2010 18:25:00 -0700
Subject: [PATCH] new UI - add highlighted class to first level menu when it's
 expanded.

---
 ui/new/index.jsp                   | 26 +++++++++++++-------------
 ui/new/scripts/cloud.core2.init.js | 17 ++++++++++-------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/ui/new/index.jsp b/ui/new/index.jsp
index 0fd257a94d9..1ab0e590e59 100644
--- a/ui/new/index.jsp
+++ b/ui/new/index.jsp
@@ -256,10 +256,10 @@ long milliseconds = new Date().getTime();
                         </div>
                     </div>
                 </div>
-                <div class="leftmenu_list">
-                    <div class="leftmenu_content highlighted">
+                <div class="leftmenu_list" id="expandable_first_level">
+                    <div class="leftmenu_content" id="expandable_first_level">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows close" id="expanded_arrow_icon">
+                            <div class="leftmenu_arrows close" id="expandable_first_level_arrow">
                             </div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/instance_leftmenuicon.png" alt="Instance" /></div>
@@ -296,9 +296,9 @@ long milliseconds = new Date().getTime();
                     </div>
                 </div>
                 <div class="leftmenu_list">
-                    <div class="leftmenu_content">
+                    <div class="leftmenu_content" id="expandable_first_level">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows close" id="expanded_arrow_icon">
+                            <div class="leftmenu_arrows close" id="expandable_first_level_arrow">
                             </div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/storage_leftmenuicon.png" alt="Storage" /></div>
@@ -342,9 +342,9 @@ long milliseconds = new Date().getTime();
                     </div>
                 </div>
                 <div class="leftmenu_list">
-                    <div class="leftmenu_content">
+                    <div class="leftmenu_content" id="expandable_first_level">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows close" id="expanded_arrow_icon">
+                            <div class="leftmenu_arrows close" id="expandable_first_level_arrow">
                             </div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/templates_leftmenuicon.png" alt="Template" /></div>
@@ -464,9 +464,9 @@ long milliseconds = new Date().getTime();
                     </div>
                 </div>
                 <div class="leftmenu_list">
-                    <div class="leftmenu_content" id="leftmenu_domain">
+                    <div class="leftmenu_content" id="expandable_first_level">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows close" id="expanded_arrow_icon">
+                            <div class="leftmenu_arrows close" id="expandable_first_level_arrow">
                             </div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/domain_leftmenuicon.png" alt="Domain" /></div>
@@ -490,9 +490,9 @@ long milliseconds = new Date().getTime();
                     </div>
                 </div>
                 <div class="leftmenu_list">
-                    <div class="leftmenu_content">
+                    <div class="leftmenu_content" id="expandable_first_level">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows close" id="expanded_arrow_icon">
+                            <div class="leftmenu_arrows close" id="expandable_first_level_arrow">
                             </div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/events_leftmenuicon.png" alt="Event" /></div>
@@ -525,9 +525,9 @@ long milliseconds = new Date().getTime();
                     </div>
                 </div>
                 <div class="leftmenu_list">
-                    <div class="leftmenu_content highlighted">
+                    <div class="leftmenu_content" id="expandable_first_level">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows open" id="expanded_arrow_icon">
+                            <div class="leftmenu_arrows open" id="expandable_first_level_arrow">
                             </div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/configuration_leftmenuicon.png" alt="System" /></div>
diff --git a/ui/new/scripts/cloud.core2.init.js b/ui/new/scripts/cloud.core2.init.js
index a667ac39f28..82a97c89d92 100644
--- a/ui/new/scripts/cloud.core2.init.js
+++ b/ui/new/scripts/cloud.core2.init.js
@@ -1,13 +1,16 @@
 $(document).ready(function() {   
-    $("#leftmenu_container").find("#expanded_arrow_icon").bind("click", function(event) {       
-        var $submenu = $(this).parent().parent().siblings(".leftmenu_expandedbox");
-        if($submenu.css("display") == "none") {
-            $(this).removeClass("close").addClass("open");
-            $submenu.show();
+    $("#leftmenu_container").find("#expandable_first_level").bind("click", function(event) {       
+        var $firstLevelMenu = $(this);
+        var $secondLevelMenu = $firstLevelMenu.siblings(".leftmenu_expandedbox");
+        if($secondLevelMenu.css("display") == "none") {
+            $firstLevelMenu.find("#expandable_first_level_arrow").removeClass("close").addClass("open");
+            $firstLevelMenu.addClass("highlighted");
+            $secondLevelMenu.show();
         }
         else {
-            $(this).removeClass("open").addClass("close");
-            $submenu.hide();  
+            $firstLevelMenu.find("#expandable_first_level_arrow").removeClass("open").addClass("close");
+            $firstLevelMenu.removeClass("highlighted");
+            $secondLevelMenu.hide();  
         }          
         return false;
     });