From 97cda5f9754ea0465fe80c675646255ea8894964 Mon Sep 17 00:00:00 2001
From: will <will@cloud.com>
Date: Tue, 19 Oct 2010 18:19:13 -0700
Subject: [PATCH] Adding animation to the left navigation for 2.2 UI

---
 ui/new/index.jsp              | 14 +++++++-------
 ui/new/scripts/cloud.core2.js | 18 ++++++++++++------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/ui/new/index.jsp b/ui/new/index.jsp
index 35d8513aca4..2e395cde813 100644
--- a/ui/new/index.jsp
+++ b/ui/new/index.jsp
@@ -324,7 +324,7 @@ long milliseconds = new Date().getTime();
                 <div class="leftmenu_list">
                     <div class="leftmenu_content_flevel" id="leftmenu_instances">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
+                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/instance_leftmenuicon.png" alt="Instance" /></div>
                             <%=t.t("instance")%>
@@ -350,7 +350,7 @@ long milliseconds = new Date().getTime();
                 <div class="leftmenu_list">
                     <div class="leftmenu_content_flevel" id="leftmenu_storage">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
+                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/storage_leftmenuicon.png" alt="Storage" /></div>
                             <%=t.t("storage")%>
@@ -384,7 +384,7 @@ long milliseconds = new Date().getTime();
                 <div class="leftmenu_list">
                     <div class="leftmenu_content_flevel" id="leftmenu_network">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
+                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/network_leftmenuicon.png" alt="Network" /></div>
                             <%=t.t("Network")%>
@@ -406,7 +406,7 @@ long milliseconds = new Date().getTime();
                 <div class="leftmenu_list">
                     <div class="leftmenu_content_flevel" id="leftmenu_templates">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
+                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/templates_leftmenuicon.png" alt="Template" /></div>
                             <%=t.t("template")%>
@@ -519,7 +519,7 @@ long milliseconds = new Date().getTime();
                 <div class="leftmenu_list">
                     <div class="leftmenu_content_flevel" id="leftmenu_domain">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
+                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/domain_leftmenuicon.png" alt="Domain" /></div>
                             <%=t.t("domain")%>
@@ -544,7 +544,7 @@ long milliseconds = new Date().getTime();
                 <div class="leftmenu_list">
                     <div class="leftmenu_content_flevel" id="leftmenu_events">
                         <div class="leftmenu_firstindent">
-                             <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
+                             <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/events_leftmenuicon.png" alt="Event" /></div>
                             <%=t.t("event")%>
@@ -576,7 +576,7 @@ long milliseconds = new Date().getTime();
                 <div class="leftmenu_list">
                     <div class="leftmenu_content_flevel" id="leftmenu_system">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:none;"></div>
+                            <div class="leftmenu_arrows_firstlevel_open" id="expandable_first_level_arrow" style="display:block;"></div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/configuration_leftmenuicon.png" alt="System" /></div>
                             <%=t.t("system")%>
diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js
index 00cf425f735..84939687609 100644
--- a/ui/new/scripts/cloud.core2.js
+++ b/ui/new/scripts/cloud.core2.js
@@ -492,21 +492,27 @@ function clearRightPanel() {
 var $selectedLeftMenu;
 var $expandedLeftMenu;
 function selectLeftMenu($menuToSelect, expandable) {
-	if ($menuToSelect != $selectedLeftMenu) {
+	if ($selectedLeftMenu == null || ($menuToSelect.attr("id") != $selectedLeftMenu.attr("id"))) {
 		if($selectedLeftMenu != null)
 			$selectedLeftMenu.removeClass("selected");  
 		$menuToSelect.addClass("selected");
 		$selectedLeftMenu = $menuToSelect; 
 		
 		// collapse any current expanded menu
-		if ($expandedLeftMenu != null) {
-			$expandedLeftMenu.hide();
-			$expandedLeftMenu = null;
+		var $menuToExpand;
+		if (expandable != undefined && expandable) {
+			$menuToExpand = $selectedLeftMenu.siblings(".leftmenu_expandedbox");
 		}
 		
-		if (expandable != undefined && expandable) {
-			$expandedLeftMenu = $selectedLeftMenu.siblings(".leftmenu_expandedbox").show();
+		if ($expandedLeftMenu != null) {
+			$expandedLeftMenu.hide(0, function() {
+				if ($menuToExpand != null) $menuToExpand.slideDown();
+			});
+			$expandedLeftMenu = null;
+		} else if ($menuToExpand != null) {
+			$menuToExpand.slideDown();
 		}
+		$expandedLeftMenu = $menuToExpand;
 	}
 }