From 546db0715c8a57f876a0943979f29d8aa5eef9ab Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Wed, 10 Nov 2010 11:16:41 -0800
Subject: [PATCH] new UI - Add Zone Wizard - implement close button, next
 button and previous button.

---
 ui/jsp/resource.jsp               | 59 +++++++++++++-------------
 ui/scripts/cloud.core.resource.js | 70 +++++++++++++++++++++++++++++--
 2 files changed, 97 insertions(+), 32 deletions(-)

diff --git a/ui/jsp/resource.jsp b/ui/jsp/resource.jsp
index ec73c0b7556..017145696ef 100644
--- a/ui/jsp/resource.jsp
+++ b/ui/jsp/resource.jsp
@@ -34,7 +34,7 @@
                     </div>
                 </div>
                 <div class="dbrow_cell" style="width: 10%; border: none;">
-                	<div class="resadd_button" title="Add Zone"></div>
+                	<div id="add_zone_shortcut" class="resadd_button" title="Add Zone"></div>
                 </div>
             </div>
             <div class="dbrow odd" style="margin-top:10px; border:1px solid #CCC;">
@@ -49,7 +49,7 @@
                     </div>
                 </div>
                 <div class="dbrow_cell" style="width: 10%; border: none;">
-                	<div class="resadd_button" title="Add Pod"></div>
+                	<div id="add_pod_shortcut" class="resadd_button" title="Add Pod"></div>
                 </div>
             </div>
             
@@ -66,7 +66,7 @@
                     </div>
                 </div>
                 <div class="dbrow_cell" style="width: 10%; border: none;">
-                	<div class="resadd_button" title="Add Host"></div>
+                	<div id="add_host_shortcut" class="resadd_button" title="Add Host"></div>
                 </div>
             </div>
             
@@ -83,7 +83,7 @@
                     </div>
                 </div>
                 <div class="dbrow_cell" style="width: 10%; border: none;">
-                	<div class="resadd_button" title="Add Primary Storage"></div>
+                	<div id="add_primarystorage_shortcut" class="resadd_button" title="Add Primary Storage"></div>
                 </div>
             </div>
        
@@ -93,8 +93,10 @@
 
 
 <!-- Zone wizard (begin)-->
-<div class="ui-widget-overlay" style="display:none;"></div>
-<div class="zonepopup_container" style="display: none">
+<div id="wizard_overlay" class="ui-widget-overlay" style="display:none;"></div>
+
+<div id="add_zone_wizard" class="zonepopup_container" style="display: none">
+    <!-- step 1 (begin) -->
     <div id="step1" style="display: block;">
         <div class="zonepopup_container_top">
             <div class="vmpopup_steps" style="color: #FFF; background: url(images/step1_bg.png) no-repeat top left">
@@ -148,10 +150,8 @@
                         </div>
 	                 </div>
                 </div>
-                <div class="zonepopup_navigationpanel">
-                    <div class="vmpop_prevbutton" id="prev_step" style="display: none;">
-                    </div>
-                    <div class="vmpop_nextbutton" id="next_step">
+                <div class="zonepopup_navigationpanel">                    
+                    <div class="vmpop_nextbutton" id="go_to_step_2">
                         Go to Step 2</div>
                 </div>
             </div>
@@ -159,8 +159,9 @@
         <div class="zonepopup_container_bot">
         </div>
     </div>
+    <!-- step 1 (end) -->
     
-    
+    <!-- step 2 (begin) -->
     <div id="step2" style="display: none;">
         <div class="zonepopup_container_top">
            <div class="vmpopup_steps" style="background: url(images/step1_bg_unselected.png) no-repeat top left">
@@ -245,10 +246,10 @@
                     </div>
                 </div>
                 <div class="zonepopup_navigationpanel">
-                    <div class="vmpop_prevbutton" id="prev_step" style="display: block;">
+                    <div class="vmpop_prevbutton" id="back_to_step_1" style="display: block;">
                     Back
                     </div>
-                    <div class="vmpop_nextbutton" id="next_step">
+                    <div class="vmpop_nextbutton" id="go_to_step_3">
                         Go to Step 3</div>
                 </div>
             </div>
@@ -256,9 +257,9 @@
         <div class="zonepopup_container_bot">
         </div>
     </div>
+    <!-- step 2 (end) -->
     
-    
-    
+    <!-- step 3 (begin) -->
     <div id="step3" style="display: none;">
         <div class="zonepopup_container_top">
            <div class="vmpopup_steps" style="background: url(images/step1_bg_unselected.png) no-repeat top left">
@@ -321,20 +322,22 @@
                     </div>
                 </div>
                 <div class="zonepopup_navigationpanel">
-                    <div class="vmpop_prevbutton" id="prev_step" style="display: block;">
-                   Back
+                    <div class="vmpop_prevbutton" id="back_to_step_2" style="display: block;">
+                        Back
+                    </div>
+                    <div class="vmpop_nextbutton" id="submit_button">
+                        Submit
                     </div>
-                    <div class="vmpop_nextbutton" id="next_step">
-                        Submit</div>
                 </div>
             </div>
         </div>
         <div class="zonepopup_container_bot">
         </div>
     </div>
+    <!-- step 3 (end) -->
     
-    
-    <div id="step4" style="display: none;">
+    <!-- after submit screen (begin) -->
+    <div id="after_submit_screen" style="display: none;">
         <div class="zonepopup_container_top">
            <div class="vmpopup_steps" style="background: url(images/step1_bg_unselected.png) no-repeat top left">
                 Step 1</div>
@@ -351,25 +354,23 @@
             <div class="zonepopup_maincontentarea">
                 
                 <div class="zonepopup_contentpanel">
-                	<div class="zonepoup_loadingbox" style="display:none;">
+                	<div id="spinning_wheel" class="zonepoup_loadingbox" style="display:none;">
                     	<div class="zonepoup_loader"></div>
                         <p> Adding Zone to Physical Resources</p>
                     </div>
                     
-                    <div class="zonepoup_msgbox"> Confirmation msg will appear here</div>
+                    <div id="confirmation_message" class="zonepoup_msgbox"> Confirmation msg will appear here</div>
                 </div>
-                <div class="zonepopup_navigationpanel">
-                    <div class="vmpop_prevbutton" id="prev_step" style="display: block;">
-                    Cancel
-                    </div>
-                    <div class="vmpop_nextbutton" id="next_step">
-                        OK</div>
+                <div class="zonepopup_navigationpanel">                    
+                    <div class="vmpop_nextbutton" id="close_button">
+                        Close</div>
                 </div>
             </div>
         </div>
         <div class="zonepopup_container_bot">
         </div>
     </div>
+    <!-- after submit screen (end) -->
     
 </div>
 <!-- Zone wizard (end)-->
diff --git a/ui/scripts/cloud.core.resource.js b/ui/scripts/cloud.core.resource.js
index f87cf43df92..35272d9ecd9 100644
--- a/ui/scripts/cloud.core.resource.js
+++ b/ui/scripts/cloud.core.resource.js
@@ -249,8 +249,12 @@ function afterLoadResourceJSP($midmenuItem1) {
     initAddZoneButton($("#midmenu_add_link")); 
 	initUpdateConsoleCertButton($("#midmenu_add2_link"));
     initDialog("dialog_add_zone");
-	initDialog("dialog_update_cert", 450);
-		
+	initDialog("dialog_update_cert", 450);	
+	resourceCountTotal();
+	initAddZoneShortcut();     
+}
+
+function resourceCountTotal() {		
 	$.ajax({
 	    data: createURL("command=listZones&available=true"),
 	    dataType: "json",
@@ -295,7 +299,67 @@ function afterLoadResourceJSP($midmenuItem1) {
                 $("#primarystorage_total").text(items.length.toString());		                    
             }		    
         }
-    });       
+    });  
+}
+
+function refreshAddZoneWizard() {
+    $("#add_zone_wizard").find("#step2, #step3, #after_submit_screen").hide();
+    $("#add_zone_wizard").find("#step1").show();
+}
+
+function openAddZoneWizard() {
+    refreshAddZoneWizard();
+    $("#add_zone_wizard").show();
+    $("#wizard_overlay").show();
+}
+
+function closeAddZoneWizard() {
+    $("#add_zone_wizard").hide();
+    $("#wizard_overlay").hide();
+}
+
+function initAddZoneShortcut() {
+    $("#add_zone_shortcut").unbind("click").bind("click", function(event) {
+        openAddZoneWizard();
+        return false;
+    });
+          
+    $("#add_zone_wizard").unbind("click").bind("click", function(event) {  
+        var $thisWizard = $(this);
+        var $target = $(event.target);
+        switch($target.attr("id")) {
+            case "close_button":
+                closeAddZoneWizard();
+                break;
+            
+            case "go_to_step_2": //step 1 => step 2
+                $thisWizard.find("#step1").hide();
+                $thisWizard.find("#step2").show();
+                break;    
+                
+            case "go_to_step_3": //step 2 => step 3
+                $thisWizard.find("#step2").hide();
+                $thisWizard.find("#step3").show();
+                break;   
+                
+            case "submit_button": //step 3 => spinning wheel
+                $thisWizard.find("#step3").hide();
+                $thisWizard.find("#after_submit_screen").show();
+                break;  
+           
+            case "back_to_step_2": //step 3 => step 2
+                $thisWizard.find("#step3").hide();
+                $thisWizard.find("#step2").show();
+                break;    
+                
+            case "back_to_step_1": //step 2 => step 1
+                $thisWizard.find("#step2").hide();
+                $thisWizard.find("#step1").show();
+                break;        
+        }   
+        
+        return false;
+    }); 
 }
 
 function initUpdateConsoleCertButton($midMenuAddLink2) {