From c7385bd095a59d0bfed1383bc7d95e48617585c2 Mon Sep 17 00:00:00 2001
From: will <will@cloud.com>
Date: Fri, 22 Oct 2010 17:43:21 -0700
Subject: [PATCH] Fixed up the Help Section in 2.2 UI

---
 ui/new/css/main.css                |  7 +++++--
 ui/new/index.jsp                   | 22 +++++++++++-----------
 ui/new/scripts/cloud.core2.init.js |  2 ++
 ui/new/scripts/cloud.core2.js      |  4 ++++
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/ui/new/css/main.css b/ui/new/css/main.css
index b1c2a5547f9..a0acbbddea2 100644
--- a/ui/new/css/main.css
+++ b/ui/new/css/main.css
@@ -1810,7 +1810,10 @@ a:hover.search_button {
 
 .actionpanel_button:hover{
 	background:url(../images/actionpanel_hover.gif) repeat-x top right;
-	
+}
+
+.actionpanel_button.selected{
+	background:url(../images/actionpanel_hover.gif) repeat-x top right;
 }
 
 .action_ddarrow {
@@ -1865,7 +1868,7 @@ a:hover.search_button {
 	position:absolute;
 	background:#FFF repeat top left;
 	border:1px solid #999;
-	top:20px;
+	top:65px;
 	right:7px;
 	margin:0;
 	padding:0;
diff --git a/ui/new/index.jsp b/ui/new/index.jsp
index 9833a974946..db7fc17d54a 100644
--- a/ui/new/index.jsp
+++ b/ui/new/index.jsp
@@ -259,39 +259,39 @@ long milliseconds = new Date().getTime();
                         </div>
                         <div class="actionpanel_button_wrapper" id="help_link" style="display: block; float: right;
                             background: none; position: relative;">
-                            <div class="actionpanel_button">
+                            <div class="actionpanel_button" id="help_button">
                                 <div class="actionpanel_button_icons">
                                     <img src="images/help_actionicon.png" alt="Help" /></div>
                                 <div class="actionpanel_button_links">
                                     <%=t.t("help")%></div>
                             </div>
-                            
-                            <div class="help_dropdown_box" id="help_dropdown_dialog" style="display:none;">
+                        </div>
+						<div class="help_dropdown_box" id="help_dropdown_dialog" style="display:none;">
                             	<div class="help_dropdown_box_titlebox">
-                                	<h2> Instance Help</h2>
+                                	<h2>Help</h2>
                                     <a id="help_dropdown_close" href="#"> Close</a>
                                 </div>
                                 
                                 <div class="help_dropdown_box_textbox" id="help_dropdown_body">
+									<a id="help_top" name="help_top"></a>
                                 	<ul>
-                                    	<li><a href="#topic1">Start VM</a></li>
-                                        <li><a href="#topic2">Stop VM</a></li>
-                                        <li><a href="#topic3">Destroy VM</a></li>
+                                    	<li><a href="#topic1">Topic 1</a></li>
+                                        <li><a href="#topic2">Topic 2</a></li>
+                                        <li><a href="#topic3">Topic 3</a></li>
                                     </ul>
                                     
                                     
-                                    <h3>Start VM<a name="topic1"></a></h3>
+                                    <h3>Topic 1<a id="topic1" name="topic1"></a>&nbsp;<a href="#help_top">Top</a></h3>
                                 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                                     
                                    
-                                    <h3>Stop VM <a name="topic2"></a></h3>
+                                    <h3>Topic 2 <a id="topic2" name="topic2"></a></h3>
                                 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p><p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                     
-                                    <h3>Destroy VM<a name="topic3"></a></h3>
+                                    <h3>Topic 3<a id="topic3" name="topic3"></a></h3>
                                 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p><p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                 </div>
                             </div>
-                        </div>
                     </div>
                     <!-- Action Panel ends here-->
                     <!-- Right Panel starts here-->
diff --git a/ui/new/scripts/cloud.core2.init.js b/ui/new/scripts/cloud.core2.init.js
index 380a2542754..db0d56150f1 100644
--- a/ui/new/scripts/cloud.core2.init.js
+++ b/ui/new/scripts/cloud.core2.init.js
@@ -169,11 +169,13 @@ $(document).ready(function() {
 	// Initialize help drop down dialog
 	$("#help_link").bind("click", function(event) {
 		$("#help_dropdown_dialog").show();
+		$("#help_button").addClass("selected");
 		return false;
 	});
 	
 	$("#help_dropdown_close").bind("click", function(event) {
 		$("#help_dropdown_dialog").hide();
+		$("#help_button").removeClass("selected");
 		return false;
 	});
 	
diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js
index 9f039f6d1e8..4961c2704a9 100644
--- a/ui/new/scripts/cloud.core2.js
+++ b/ui/new/scripts/cloud.core2.js
@@ -517,6 +517,10 @@ function selectLeftMenu($menuToSelect, expandable) {
 			$menuToExpand.slideDown(500);
 		}
 		$expandedLeftMenu = $menuToExpand;
+		
+		// Close the help link if it's opened
+		$("#help_dropdown_dialog").hide();
+		$("#help_button").removeClass("selected");
 	}
 }