From 887d179ec68a7e6059fb069222aa87bb13ff11dd Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Sun, 10 Oct 2010 00:29:11 -0700
Subject: [PATCH] new UI - when clicking left menu, populate middle menu then
 select the 1st middle menu item as default.

---
 ui/new/scripts/cloud.core2.init.js     | 32 ++++++++++++++------------
 ui/new/scripts/cloud.core2.instance.js | 16 +++++++++----
 ui/new/scripts/cloud.core2.js          | 16 ++++++-------
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/ui/new/scripts/cloud.core2.init.js b/ui/new/scripts/cloud.core2.init.js
index 399b4253b98..8e74a7a6c2e 100644
--- a/ui/new/scripts/cloud.core2.init.js
+++ b/ui/new/scripts/cloud.core2.init.js
@@ -17,7 +17,7 @@ $(document).ready(function() {
     $("#accordion_menu").show();
        
     var $midmenuItem = $("#midmenu_item");
-    function listMidMenuItems(leftmenuId, commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSP, toMidmenu, toRightPanel, getMidmenuId) { 
+    function listMidMenuItems(leftmenuId, commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn) { 
         $("#"+leftmenuId).bind("click", function(event) {
             if(selected_leftmenu_id != null && selected_leftmenu_id.length > 0)
                 $("#"+selected_leftmenu_id).removeClass("selected");
@@ -46,7 +46,7 @@ $(document).ready(function() {
                     return false;
                 });	   
                               
-                afterLoadRightPanelJSP();    
+                afterLoadRightPanelJSPFn();    
                             
                 $.ajax({
 	                cache: false,
@@ -58,10 +58,12 @@ $(document).ready(function() {
 	                    if(items != null && items.length > 0) {
 	                        for(var i=0; i<items.length;i++) { 
                                 var $midmenuItem1 = $midmenuItem.clone();  
-                                $midmenuItem1.data("toRightPanelFn", toRightPanel);                             
-                                toMidmenu(items[i], $midmenuItem1);    
-                                bindClickToMidMenu($midmenuItem1, toRightPanel, getMidmenuId);             
-                                $("#midmenu_container").append($midmenuItem1.show());                            
+                                $midmenuItem1.data("toRightPanelFn", toRightPanelFn);                             
+                                toMidmenuFn(items[i], $midmenuItem1);    
+                                bindClickToMidMenu($midmenuItem1, toRightPanelFn, getMidmenuIdFn);             
+                                $("#midmenu_container").append($midmenuItem1.show());   
+                                if(i == 0)
+                                    $midmenuItem1.click();  //click the 1st item in middle menu as default                       
                             }  
                         }  
 	                }
@@ -70,13 +72,13 @@ $(document).ready(function() {
             return false;
         });
     }
-    listMidMenuItems("leftmenu_event", "listEvents", "listeventsresponse", "event", "jsp/event.jsp", afterLoadEventJSP, eventToMidmenu, eventToRigntPanel);
-    listMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "jsp/alert.jsp", afterLoadAlertJSP, alertToMidmenu, alertToRigntPanel);
-    listMidMenuItems("leftmenu_account", "listAccounts", "listaccountsresponse", "account", "jsp/account.jsp", afterLoadAccountJSP, accountToMidmenu, accountToRigntPanel);
-    listMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRigntPanel);
-    listMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRigntPanel);
+    listMidMenuItems("leftmenu_event", "listEvents", "listeventsresponse", "event", "jsp/event.jsp", afterLoadEventJSP, eventToMidmenu, eventToRigntPanel, getMidmenuId);
+    listMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "jsp/alert.jsp", afterLoadAlertJSP, alertToMidmenu, alertToRigntPanel, getMidmenuId);
+    listMidMenuItems("leftmenu_account", "listAccounts", "listaccountsresponse", "account", "jsp/account.jsp", afterLoadAccountJSP, accountToMidmenu, accountToRigntPanel, getMidmenuId);
+    listMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRigntPanel, getMidmenuId);
+    listMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRigntPanel, getMidmenuId);
     listMidMenuItems("leftmenu_ip", "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ipaddress.jsp", afterLoadIpJSP, ipToMidmenu, ipToRigntPanel, ipGetMidmenuId);
-    listMidMenuItems("leftmenu_router", "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRigntPanel);
+    listMidMenuItems("leftmenu_router", "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRigntPanel, getMidmenuId);
       
     listMidMenuItems("leftmenu_submenu_my_template", "listTemplates&templatefilter=self", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId);
     listMidMenuItems("leftmenu_submenu_featured_template", "listTemplates&templatefilter=featured", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId);
@@ -86,9 +88,9 @@ $(document).ready(function() {
     listMidMenuItems("leftmenu_submenu_featured_iso", "listIsos&isofilter=featured", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId);
     listMidMenuItems("leftmenu_submenu_community_iso", "listIsos&isofilter=community", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId);
     
-    listMidMenuItems("leftmenu_service_offering", "listServiceOfferings", "listserviceofferingsresponse", "serviceoffering", "jsp/serviceoffering.jsp", afterLoadServiceOfferingJSP, serviceOfferingToMidmenu, serviceOfferingToRigntPanel); 
-    listMidMenuItems("leftmenu_disk_offering", "listDiskOfferings", "listdiskofferingsresponse", "diskoffering", "jsp/diskoffering.jsp", afterLoadDiskOfferingJSP, diskOfferingToMidmenu, diskOfferingToRigntPanel); 
-    listMidMenuItems("leftmenu_global_setting", "listConfigurations", "listconfigurationsresponse", "configuration", "jsp/globalsetting.jsp", afterLoadGlobalSettingJSP, globalSettingToMidmenu, globalSettingToRigntPanel, globalSettingGetMidmenuId); 
+    listMidMenuItems("leftmenu_service_offering", "listServiceOfferings", "listserviceofferingsresponse", "serviceoffering", "jsp/serviceoffering.jsp", afterLoadServiceOfferingJSP, serviceOfferingToMidmenu, serviceOfferingToRigntPanel, getMidmenuId); 
+    listMidMenuItems("leftmenu_disk_offering", "listDiskOfferings", "listdiskofferingsresponse", "diskoffering", "jsp/diskoffering.jsp", afterLoadDiskOfferingJSP, diskOfferingToMidmenu, diskOfferingToRigntPanel, getMidmenuId); 
+    listMidMenuItems("leftmenu_global_setting", "listConfigurations", "listconfigurationsresponse", "configuration", "jsp/globalsetting.jsp", afterLoadGlobalSettingJSP, globalSettingToMidmenu, globalSettingToRigntPanel, globalSettingGetMidmenuId, getMidmenuId); 
         
     $("#leftmenu_instance_group_header").bind("click", function(event) {  
         showMiddleMenu();
diff --git a/ui/new/scripts/cloud.core2.instance.js b/ui/new/scripts/cloud.core2.instance.js
index 260b49c1e18..ea5aff0bfbb 100644
--- a/ui/new/scripts/cloud.core2.instance.js
+++ b/ui/new/scripts/cloud.core2.instance.js
@@ -1241,12 +1241,15 @@ function vmToMidmenu(jsonObj, $midmenuItem1) {
     updateStateInMidMenu(jsonObj, $midmenuItem1);     
     
     $midmenuItem1.data("toRightPanelFn", vmToRightPanel);    
+    /*
     $midmenuItem1.bind("click", function(event) {  
-        var $t = $(this);     
+        var $t = $(this);    
+        $t.find("#content").addClass("selected");   
         var toRightPanelFn = $t.data("toRightPanelFn");
         toRightPanelFn($t);	 
         return false;
     }); 
+    */
 }
 
 function vmToRightPanel($midmenuItem) {
@@ -1510,9 +1513,14 @@ function appendInstanceGroup(groupId, groupName) {
                 if (instances != null && instances.length > 0) {
                     var $template = $("#midmenu_item"); 	                           
                     for(var i=0; i<instances.length;i++) {  
-                        var $newTemplate = $template.clone();                                                                                                                                              
-                        vmToMidmenu(instances[i], $newTemplate);  
-                        $("#midmenu_container").append($newTemplate.show());
+                        var $midmenuItem1 = $template.clone();                                                                                                                                              
+                        vmToMidmenu(instances[i], $midmenuItem1); 
+                        bindClickToMidMenu($midmenuItem1, vmToRightPanel, getMidmenuId);  
+                        $("#midmenu_container").append($midmenuItem1.show());                        
+                        /*
+                        if(i == 0)
+                            $midmenuItem1.click();  //click the 1st item in middle menu as default
+                        */
                     }  
                 }  
             }
diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js
index 2b5b53a492b..ae5984db1ba 100644
--- a/ui/new/scripts/cloud.core2.js
+++ b/ui/new/scripts/cloud.core2.js
@@ -540,20 +540,18 @@ function afterAddingMidMenuItem($midmenuItem1, isSuccessful, extraMessage) {
 	    $midmenuItem1.find("#second_row").text(extraMessage);  
 }
 
-function bindClickToMidMenu($midmenuItem1, toRightPanel, getMidmenuId) {
+function bindClickToMidMenu($midmenuItem1, toRightPanelFn, getMidmenuIdFn) {
     $midmenuItem1.bind("click", function(event){  
         var thisMidmenuItem = $(this);
-
+        
         if(selected_midmenu_id != null && selected_midmenu_id.length > 0)
             $("#"+selected_midmenu_id).find("#content").removeClass("selected");
-        if(getMidmenuId == null)
-            selected_midmenu_id = "midmenuItem_"+thisMidmenuItem.data("jsonObj").id;
-        else
-            selected_midmenu_id = getMidmenuId(thisMidmenuItem.data("jsonObj"));
-    
-        thisMidmenuItem.find("#content").addClass("selected");                                               
+        selected_midmenu_id = getMidmenuIdFn(thisMidmenuItem.data("jsonObj"));
+               
+        thisMidmenuItem.find("#content").addClass("selected");  
+                                              
         clearRightPanel();        
-        toRightPanel(thisMidmenuItem);	  
+        toRightPanelFn(thisMidmenuItem);	  
         return false;
     }); 
 }