From 7770da13db5e1ff8d6635d5280e371ef6e5bf1a2 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Wed, 8 Sep 2010 15:08:49 -0700
Subject: [PATCH] new UI - instance page - be able to switch between tabs.

---
 ui/new/jsp/tab_instance.jsp           | 24 ++++++++++++++++--------
 ui/new/scripts/cloud.core.instance.js | 26 ++++++++++++++++++++++++++
 ui/new/scripts/cloud.core.js          |  2 +-
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/ui/new/jsp/tab_instance.jsp b/ui/new/jsp/tab_instance.jsp
index cb517b0079c..32a6350fd62 100644
--- a/ui/new/jsp/tab_instance.jsp
+++ b/ui/new/jsp/tab_instance.jsp
@@ -23,15 +23,16 @@
         <p id="after_action_info"></p>
     </div>
     <div class="tabbox" style="margin-top:15px;">
-        <div class="content_tabs on">
+        <div class="content_tabs on" id="tab_details">
             <%=t.t("Details")%></div>
-        <div class="content_tabs off">
+        <div class="content_tabs off" id="tab_volume">
             <%=t.t("Volume")%></div>
-        <div class="content_tabs off">
+        <div class="content_tabs off" id="tab_statistics">
             <%=t.t("Statistics")%></div>
     </div>
-    <!--VM details start here-->
-    <div class="grid_container" style="display:none;">
+    
+    <!--Details tab (start)-->
+    <div class="grid_container" style="display:block;" id="tab_content_details">
         <div class="grid_rows odd">
             <div class="vm_statusbox">
                 <div class="vm_consolebox">
@@ -140,10 +141,10 @@
             </div>
         </div>
     </div>
-    <!--VM details ends here-->
+    <!--Details tab (end)-->
     
-    <!--Volume start here-->
-    <div class="grid_container" style="display:block;">
+    <!--Volume tab (start)-->
+    <div class="grid_container" style="display:none;" id="tab_content_volume">
     	<div class="grid_header">
         	<div class="grid_header_title">i-2-7-JW</div>
             <div class="grid_actionbox"></div>
@@ -186,6 +187,13 @@
         </div>
     
     </div>
+    <!--Volume tab (end)-->
+    
+    <!--Statistics tab (start)-->
+    <div class="grid_container" style="display:none;" id="tab_content_statistics">
+    statistics....
+    </div>    
+    <!--Statistics tab (start)-->
 </div>
 <!-- VM detail panel (end) -->
 <!-- VM wizard (begin)-->
diff --git a/ui/new/scripts/cloud.core.instance.js b/ui/new/scripts/cloud.core.instance.js
index d904072dcd4..1bbb17f7330 100755
--- a/ui/new/scripts/cloud.core.instance.js
+++ b/ui/new/scripts/cloud.core.instance.js
@@ -542,6 +542,32 @@ function clickInstanceGroupHeader($arrowIcon) {
 		    zIndex: 2000
 	    }));
         
+        //***** switch to different tab (begin) ********************************************************************
+        $("#tab_details").bind("click", function(event){
+            $(this).removeClass("off").addClass("on");
+            $("#tab_volume, #tab_statistics").removeClass("on").addClass("off");  
+            $("#tab_content_details").show();     
+            $("#tab_content_volume, #tab_content_statistics").hide();   
+            return false;
+        });
+        
+        $("#tab_volume").bind("click", function(event){
+            $(this).removeClass("off").addClass("on");
+            $("#tab_details, #tab_statistics").removeClass("on").addClass("off");   
+            $("#tab_content_volume").show();    
+            $("#tab_content_details, #tab_content_statistics").hide();    
+            return false;
+        });
+        
+        $("#tab_statistics").bind("click", function(event){
+            $(this).removeClass("off").addClass("on");
+            $("#tab_details, #tab_volume").removeClass("on").addClass("off");  
+            $("#tab_content_statistics").show();   
+            $("#tab_content_details, #tab_content_volume").hide();      
+            return false;
+        });        
+        //***** switch to different tab (end) **********************************************************************
+        
         //***** VM Wizard (begin) ******************************************************************************
         $vmPopup = $("#vm_popup");
         var $serviceOfferingTemplate = $("#vm_popup_service_offering_template");
diff --git a/ui/new/scripts/cloud.core.js b/ui/new/scripts/cloud.core.js
index c563805529c..59c53cbc28d 100755
--- a/ui/new/scripts/cloud.core.js
+++ b/ui/new/scripts/cloud.core.js
@@ -170,7 +170,7 @@ function fromdb(val) {
 }
 
 function todb(val) {
-    return encodeURIComponent(escape(display));
+    return encodeURIComponent(escape(val));
 }