From e9d56d473da732bb2dc2ea8c53602133f043c0cd Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Fri, 22 Oct 2010 19:47:24 -0700
Subject: [PATCH] new UI - instance page - refactor submenu.

---
 ui/new/index.jsp                       |   28 +-
 ui/new/scripts/cloud.core2.init.js     |   60 +-
 ui/new/scripts/cloud.core2.instance.js | 1206 ++++++++++++------------
 ui/new/scripts/cloud.core2.js          |   33 +-
 4 files changed, 676 insertions(+), 651 deletions(-)

diff --git a/ui/new/index.jsp b/ui/new/index.jsp
index 9833a974946..4512346cdfb 100644
--- a/ui/new/index.jsp
+++ b/ui/new/index.jsp
@@ -335,22 +335,10 @@ long milliseconds = new Date().getTime();
                             <%=t.t("instance")%>
                         </div>
                     </div>
-                    <div class="leftmenu_expandedbox" style="display: none">
-                        <div id="leftmenu_instance_group">
-                            <div class="leftmenu_expandedlist">
-                                <div class="leftmenu_content" id="leftmenu_instance_group_header">
-                                    <div class="leftmenu_secondindent">
-                                        <div class="leftmenu_arrows expanded_close" id="arrow_icon">
-                                        </div>
-                                        
-                                        <%=t.t("instance")%>
-                                    </div>
-                                </div>
-                            </div>
-                            <div id="leftmenu_instance_group_container">
-                            </div>
-                        </div>                        
+                    
+                    <div id="leftmenu_instance_expandedbox" class="leftmenu_expandedbox" style="display: none">
                     </div>
+
                 </div>
                 <div class="leftmenu_list">
                     <div class="leftmenu_content_flevel" id="leftmenu_storage">
@@ -671,6 +659,16 @@ long milliseconds = new Date().getTime();
         </p>
     </div>
     <!-- ***** templates (begin) *************************************************************************************************-->
+    <div id="leftmenu_secondindent_template" class="leftmenu_expandedlist">
+        <div class="leftmenu_content">
+            <div class="leftmenu_secondindent">
+                <div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
+                </div>
+                <span id="label"></span>
+            </div>
+        </div>
+    </div>
+    
     <div class="leftmenu_content" id="leftmenu_submenu_template" style="display: none">
         <div class="leftmenu_thirdindent">
             <div class="leftmenu_list_icons">
diff --git a/ui/new/scripts/cloud.core2.init.js b/ui/new/scripts/cloud.core2.init.js
index 380a2542754..cb9df7514c5 100644
--- a/ui/new/scripts/cloud.core2.init.js
+++ b/ui/new/scripts/cloud.core2.init.js
@@ -36,11 +36,7 @@ $(document).ready(function() {
 			afterLoadDashboardJSP();        
 		});
 		return false;
-	});
-	$("#leftmenu_instances").bind("click", function(event) {
-		selectLeftMenu($(this), true);
-		return false;
-	});
+	});	
 	$("#leftmenu_storage").bind("click", function(event) {
 		selectLeftMenu($(this), true);
 		return false;
@@ -69,24 +65,38 @@ $(document).ready(function() {
 	
 	// Setup 2nd level navigation
 	
-    bindAndListMidMenuItems("leftmenu_event", "listEvents", "listeventsresponse", "event", "jsp/event.jsp", afterLoadEventJSP, eventToMidmenu, eventToRigntPanel, getMidmenuId);
-    bindAndListMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "jsp/alert.jsp", afterLoadAlertJSP, alertToMidmenu, alertToRigntPanel, getMidmenuId);
-    bindAndListMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRigntPanel, getMidmenuId);
-    bindAndListMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRigntPanel, getMidmenuId);
-    bindAndListMidMenuItems("leftmenu_ip", "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ipaddress.jsp", afterLoadIpJSP, ipToMidmenu, ipToRigntPanel, ipGetMidmenuId);
-    //bindAndListMidMenuItems("leftmenu_router", "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRigntPanel, getMidmenuId);
+    bindAndListMidMenuItems($("#leftmenu_event"), "listEvents", "listeventsresponse", "event", "jsp/event.jsp", afterLoadEventJSP, eventToMidmenu, eventToRigntPanel, getMidmenuId, false);
+    bindAndListMidMenuItems($("#leftmenu_alert"), "listAlerts", "listalertsresponse", "alert", "jsp/alert.jsp", afterLoadAlertJSP, alertToMidmenu, alertToRigntPanel, getMidmenuId, false);
+    bindAndListMidMenuItems($("#leftmenu_volume"), "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRigntPanel, getMidmenuId, false);
+    bindAndListMidMenuItems($("#leftmenu_snapshot"), "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRigntPanel, getMidmenuId, false);
+    bindAndListMidMenuItems($("#leftmenu_ip"), "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ipaddress.jsp", afterLoadIpJSP, ipToMidmenu, ipToRigntPanel, ipGetMidmenuId, false);
+    //bindAndListMidMenuItems("leftmenu_router", "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRigntPanel, getMidmenuId, false);
       
-    bindAndListMidMenuItems("leftmenu_submenu_my_template", "listTemplates&templatefilter=self", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId);
-    bindAndListMidMenuItems("leftmenu_submenu_featured_template", "listTemplates&templatefilter=featured", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId);
-    bindAndListMidMenuItems("leftmenu_submenu_community_template", "listTemplates&templatefilter=community", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId);
+    bindAndListMidMenuItems($("#leftmenu_submenu_my_template"), "listTemplates&templatefilter=self", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId, false);
+    bindAndListMidMenuItems($("#leftmenu_submenu_featured_template"), "listTemplates&templatefilter=featured", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId, false);
+    bindAndListMidMenuItems($("#leftmenu_submenu_community_template"), "listTemplates&templatefilter=community", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId, false);
     
-    bindAndListMidMenuItems("leftmenu_submenu_my_iso", "listIsos&isofilter=self", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId);
-    bindAndListMidMenuItems("leftmenu_submenu_featured_iso", "listIsos&isofilter=featured", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId);
-    bindAndListMidMenuItems("leftmenu_submenu_community_iso", "listIsos&isofilter=community", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId);
+    bindAndListMidMenuItems($("#leftmenu_submenu_my_iso"), "listIsos&isofilter=self", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId, false);
+    bindAndListMidMenuItems($("#leftmenu_submenu_featured_iso"), "listIsos&isofilter=featured", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId, false);
+    bindAndListMidMenuItems($("#leftmenu_submenu_community_iso"), "listIsos&isofilter=community", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId, false);
     
-    bindAndListMidMenuItems("leftmenu_service_offering", "listServiceOfferings", "listserviceofferingsresponse", "serviceoffering", "jsp/serviceoffering.jsp", afterLoadServiceOfferingJSP, serviceOfferingToMidmenu, serviceOfferingToRigntPanel, getMidmenuId); 
-    bindAndListMidMenuItems("leftmenu_disk_offering", "listDiskOfferings", "listdiskofferingsresponse", "diskoffering", "jsp/diskoffering.jsp", afterLoadDiskOfferingJSP, diskOfferingToMidmenu, diskOfferingToRigntPanel, getMidmenuId); 
-    bindAndListMidMenuItems("leftmenu_global_setting", "listConfigurations", "listconfigurationsresponse", "configuration", "jsp/globalsetting.jsp", afterLoadGlobalSettingJSP, globalSettingToMidmenu, globalSettingToRigntPanel, globalSettingGetMidmenuId, getMidmenuId); 
+    bindAndListMidMenuItems($("#leftmenu_service_offering"), "listServiceOfferings", "listserviceofferingsresponse", "serviceoffering", "jsp/serviceoffering.jsp", afterLoadServiceOfferingJSP, serviceOfferingToMidmenu, serviceOfferingToRigntPanel, getMidmenuId, false); 
+    bindAndListMidMenuItems($("#leftmenu_disk_offering"), "listDiskOfferings", "listdiskofferingsresponse", "diskoffering", "jsp/diskoffering.jsp", afterLoadDiskOfferingJSP, diskOfferingToMidmenu, diskOfferingToRigntPanel, getMidmenuId, false); 
+    bindAndListMidMenuItems($("#leftmenu_global_setting"), "listConfigurations", "listconfigurationsresponse", "configuration", "jsp/globalsetting.jsp", afterLoadGlobalSettingJSP, globalSettingToMidmenu, globalSettingToRigntPanel, globalSettingGetMidmenuId, getMidmenuId, false); 
+    
+    $("#leftmenu_instances").bind("click", function(event) {
+		selectLeftMenu($(this), true);		
+		instanceBuildSubMenu();
+		return false;
+	});	
+    $("#leftmenu_instance_group_header").bind("click", function(event) {  
+        showMiddleMenu();
+        clearMiddleMenu();          
+        enableMultipleSelectionInMidMenu();  //multiple-selection is needeed for actions like start VM, stop VM, reboot VM.
+        var $arrowIcon = $(this).find("#arrow_icon");        
+        clickInstanceGroupHeader($arrowIcon);
+        return false;
+    });
     
     $("#leftmenu_domain").bind("click", function(event) {
 		selectLeftMenu($(this), true);
@@ -118,14 +128,8 @@ $(document).ready(function() {
 		return false;
 	});
 	
-    $("#leftmenu_instance_group_header").bind("click", function(event) {  
-        showMiddleMenu();
-        clearMiddleMenu();          
-        enableMultipleSelectionInMiddleMenu();  //multiple-selection is needeed for actions like start VM, stop VM, reboot VM.
-        var $arrowIcon = $(this).find("#arrow_icon");        
-        clickInstanceGroupHeader($arrowIcon);
-        return false;
-    });
+	
+	
     
     
                
diff --git a/ui/new/scripts/cloud.core2.instance.js b/ui/new/scripts/cloud.core2.instance.js
index f778fe1fa6b..52b1a4eb5ad 100644
--- a/ui/new/scripts/cloud.core2.instance.js
+++ b/ui/new/scripts/cloud.core2.instance.js
@@ -16,12 +16,617 @@
  * 
  */
 
-// Version: @VERSION@
 
-function clickInstanceGroupHeader($arrowIcon) { 
+function instanceBuildSubMenu() {    
+    var $subMenuContainer = $("#leftmenu_instance_expandedbox").empty();
+    
+    var $newSubMenu = $("#leftmenu_secondindent_template").clone();
+    $newSubMenu.find("#label").text("All Instances");    
+    bindAndListMidMenuItems($newSubMenu, "listVirtualMachines", "listvirtualmachinesresponse", "virtualmachine", "jsp/instance.jsp", afterLoadInstanceJSP, vmToMidmenu, vmToRightPanel, getMidmenuId, true);
+    $subMenuContainer.append($newSubMenu.show());
+}
+
+function afterLoadInstanceJSP() {
+    //Add VM button
     $("#midmenu_add_link").find("#label").text("Add VM"); 
-    $("#midmenu_add_link").show(); 
-    
+    $("#midmenu_add_link").show(); 
+		        
+    //action menu	        
+    $("#midmenu_action_link").show();
+    $("#action_menu #action_list").empty();		        
+    for(var label in vmActionMap) 				            
+        buildActionLinkForMidMenu(label, vmActionMap, $("#action_menu"));	
+    
+    if (isAdmin() || isDomainAdmin())
+        $("#right_panel_content").find("#tab_router,#tab_router").show();
+    
+    var $noDiskOfferingTemplate = $("#vm_popup_disk_offering_template_no");
+    var $customDiskOfferingTemplate = $("#vm_popup_disk_offering_template_custom");
+    var $existingDiskOfferingTemplate = $("#vm_popup_disk_offering_template_existing");
+   	   
+   	initDialog("dialog_detach_iso_from_vm");       	
+   	initDialog("dialog_attach_iso");  
+    initDialog("dialog_change_name"); 
+    initDialog("dialog_change_group"); 
+    initDialog("dialog_change_service_offering", 600); 
+    initDialog("dialog_confirmation_change_root_password");
+    initDialog("dialog_confirmation_enable_ha");  
+    initDialog("dialog_confirmation_disable_ha");            
+    initDialog("dialog_create_template", 400);  
+
+    //***** switch between different tabs (begin) ********************************************************************
+    var tabArray = [$("#tab_details"), $("#tab_volume"), $("#tab_statistics"), $("#tab_router")];
+    var tabContentArray = [$("#tab_content_details"), $("#tab_content_volume"), $("#tab_content_statistics"), $("#tab_content_router")];
+    switchBetweenDifferentTabs(tabArray, tabContentArray);       
+    //***** switch between different tabs (end) **********************************************************************
+    
+    //***** VM Wizard (begin) ******************************************************************************
+    $vmPopup = $("#vm_popup");
+    var $serviceOfferingTemplate = $("#vm_popup_service_offering_template");
+    var currentPageInTemplateGridInVmPopup =1;
+    var selectedTemplateTypeInVmPopup;  //selectedTemplateTypeInVmPopup will be set to "featured" when new VM dialog box opens
+	   	
+    $("#midmenu_add_link").unbind("click").bind("click", function(event) {
+        vmWizardOpen();			
+	    $.ajax({
+		    data: createURL("command=listZones&available=true"),
+		    dataType: "json",
+		    success: function(json) {
+			    var zones = json.listzonesresponse.zone;					
+			    var $zoneSelect = $vmPopup.find("#wizard_zone").empty();					
+			    if (zones != null && zones.length > 0) {
+				    for (var i = 0; i < zones.length; i++) {
+					    $zoneSelect.append("<option value='" + zones[i].id + "'>" + fromdb(zones[i].name) + "</option>"); 
+				    }
+			    }				
+			    listTemplatesInVmPopup();	
+		    }
+	    });
+		
+	    $.ajax({
+		    data: createURL("command=listServiceOfferings"),
+		    dataType: "json",
+		    async: false,
+		    success: function(json) {
+			    var offerings = json.listserviceofferingsresponse.serviceoffering;
+			    var $container = $("#service_offering_container");
+			    $container.empty();					    
+			    if (offerings != null && offerings.length > 0) {						    
+				    for (var i = 0; i < offerings.length; i++) {	
+					    var $t = $serviceOfferingTemplate.clone();  						  
+					    $t.find("input:radio[name=service_offering_radio]").val(offerings[i].id); 
+					    $t.find("#name").text(fromdb(offerings[i].name));
+					    $t.find("#description").text(fromdb(offerings[i].displaytext)); 						    
+					    if (i > 0)
+					        $t.find("input:radio[name=service_offering_radio]").removeAttr("checked");							
+					    $container.append($t.show());	
+				    }
+				    //Safari and Chrome are not smart enough to make checkbox checked if html markup is appended by JQuery.append(). So, the following 2 lines are added.		
+			        var html_all = $container.html();        
+                    $container.html(html_all); 
+			    }
+		    }
+		});
+		    			    
+	
+	    $.ajax({
+		    data: createURL("command=listDiskOfferings&domainid=1"),
+		    dataType: "json",
+		    async: false,
+		    success: function(json) {
+			    var offerings = json.listdiskofferingsresponse.diskoffering;			
+			    var $dataDiskOfferingContainer = $("#data_disk_offering_container").empty();
+		        var $rootDiskOfferingContainer = $("#root_disk_offering_container").empty();
+		        
+		        //***** data disk offering: "no, thanks", "custom", existing disk offerings in database (begin) ****************************************************
+		        //"no, thanks" radio button (default radio button in data disk offering)		               
+	            var $t = $noDiskOfferingTemplate.clone(); 		            	     
+	            $t.find("input:radio").attr("name","data_disk_offering_radio");  
+	            $t.find("#name").text("no, thanks"); 		            
+	            $dataDiskOfferingContainer.append($t.show()); 
+		        
+		        //"custom" radio button			        
+		        var $t = $customDiskOfferingTemplate.clone();  			        
+		        $t.find("input:radio").attr("name","data_disk_offering_radio").removeAttr("checked");	
+		        $t.find("#name").text("custom:");	  			         
+		        $dataDiskOfferingContainer.append($t.show());	
+		        
+		        //existing disk offerings in database
+		        if (offerings != null && offerings.length > 0) {						    
+			        for (var i = 0; i < offerings.length; i++) {	
+				        var $t = $existingDiskOfferingTemplate.clone(); 
+				        $t.find("input:radio").attr("name","data_disk_offering_radio").val(offerings[i].id).removeAttr("checked");	 	
+				        $t.find("#name").text(fromdb(offerings[i].name));
+				        $t.find("#description").text(fromdb(offerings[i].displaytext)); 	 
+				        $dataDiskOfferingContainer.append($t.show());	
+			        }
+		        }
+		        
+		        //Safari and Chrome are not smart enough to make checkbox checked if html markup is appended by JQuery.append(). So, the following 2 lines are added.		
+	            var html_all = $dataDiskOfferingContainer.html();        
+                $dataDiskOfferingContainer.html(html_all);                     
+		        //***** data disk offering: "no, thanks", "custom", existing disk offerings in database (end) *******************************************************
+		        		        	
+		        //***** root disk offering: "custom", existing disk offerings in database (begin) *******************************************************************
+		        //"custom" radio button			        
+		        var $t = $customDiskOfferingTemplate.clone();  			        
+		        $t.find("input:radio").attr("name","root_disk_offering_radio").val("custom");	
+		        if (offerings != null && offerings.length > 0) //default is the 1st existing disk offering. If there is no existing disk offering, default to "custom" radio button
+		            $t.find("input:radio").removeAttr("checked");	
+		        $t.find("#name").text("custom:");	  			         
+		        $rootDiskOfferingContainer.append($t.show());	
+		        
+		        //existing disk offerings in database
+		        if (offerings != null && offerings.length > 0) {						    
+			        for (var i = 0; i < offerings.length; i++) {	
+				        var $t = $existingDiskOfferingTemplate.clone(); 
+				        $t.find("input:radio").attr("name","root_disk_offering_radio").val(offerings[i].id);	 
+				        if(i > 0) //default is the 1st existing disk offering. If there is no existing disk offering, default to "custom" radio button
+				            $t.find("input:radio").removeAttr("checked");	 	
+				        $t.find("#name").text(fromdb(offerings[i].name));
+				        $t.find("#description").text(fromdb(offerings[i].displaytext)); 	 
+				        $rootDiskOfferingContainer.append($t.show());	
+			        }
+		        }
+			    
+			    //Safari and Chrome are not smart enough to make checkbox checked if html markup is appended by JQuery.append(). So, the following 2 lines are added.		
+	            var html_all = $rootDiskOfferingContainer.html();        
+                $rootDiskOfferingContainer.html(html_all);                         
+			    //***** root disk offering: "custom", existing disk offerings in database (end) *********************************************************************				    
+		    }
+	    });
+	 
+	    
+	    $vmPopup.find("#wizard_service_offering").click();	      
+        return false;
+    });
+    
+    
+    function vmWizardCleanup() {
+        currentStepInVmPopup = 1;			
+	    $vmPopup.find("#step1").show().nextAll().hide();		   
+	    $vmPopup.find("#wizard_message").hide();
+	    selectedTemplateTypeInVmPopup = "featured";				
+	    $("#wiz_featured").removeClass().addClass("rev_wizmid_selectedtempbut");
+	    $("#wiz_my, #wiz_community, #wiz_blank").removeClass().addClass("rev_wizmid_nonselectedtempbut");	
+	    currentPageInTemplateGridInVmPopup = 1;	 	
+    }	
+	
+    function vmWizardOpen() {
+        $("#overlay_black").show();
+        $vmPopup.show();        
+        vmWizardCleanup();	
+    }     
+            
+    function vmWizardClose() {			
+	    $vmPopup.hide();
+	    $("#overlay_black").hide();					
+    }
+		    	
+    $vmPopup.find("#close_button").bind("click", function(event) {
+	    vmWizardClose();
+	    return false;
+    });
+			
+    $vmPopup.find("#step1 #wiz_message_continue").bind("click", function(event) {			    
+	    $vmPopup.find("#step1 #wiz_message").hide();
+	    return false;
+    });
+		
+    $vmPopup.find("#step2 #wiz_message_continue").bind("click", function(event) {			    
+	    $vmPopup.find("#step2 #wiz_message").hide();
+	    return false;
+    });
+	
+    function getIconForOS(osType) {
+	    if (osType == null || osType.length == 0) {
+		    return "";
+	    } else {
+		    if (osType.match("^CentOS") != null) {
+			    return "rev_wiztemo_centosicons";
+		    } else if (osType.match("^Windows") != null) {
+			    return "rev_wiztemo_windowsicons";
+		    } else {
+			    return "rev_wiztemo_linuxicons";
+		    }
+	    }
+    }
+	
+    //vm wizard search and pagination
+    $vmPopup.find("#search_button").bind("click", function(event) {	              
+        currentPageInTemplateGridInVmPopup = 1;           	        	
+        listTemplatesInVmPopup();  
+        return false;   //event.preventDefault() + event.stopPropagation() 
+    });
+	
+    $vmPopup.find("#search_input").bind("keypress", function(event) {		        
+        if(event.keyCode == keycode_Enter) {                	        
+            $vmPopup.find("#search_button").click();	
+            return false;   //event.preventDefault() + event.stopPropagation() 		     
+        }		    
+    });   
+			
+    $vmPopup.find("#nextPage").bind("click", function(event){	            
+        currentPageInTemplateGridInVmPopup++;        
+        listTemplatesInVmPopup(); 
+        return false;   //event.preventDefault() + event.stopPropagation() 
+    });		
+    
+    $vmPopup.find("#prevPage").bind("click", function(event){	                 
+        currentPageInTemplateGridInVmPopup--;	              	    
+        listTemplatesInVmPopup(); 
+        return false;   //event.preventDefault() + event.stopPropagation() 
+    });	
+						
+    var vmPopupStep2PageSize = 11; //max number of templates each page in step2 of New VM wizard is 11 
+    function listTemplatesInVmPopup() {		
+        var zoneId = $vmPopup.find("#wizard_zone").val();
+        if(zoneId == null || zoneId.length == 0)
+            return;
+	
+        var container = $vmPopup.find("#template_container");	 		    	
+		   
+        var commandString;    		  	   
+        var searchInput = $vmPopup.find("#search_input").val();   
+        if (selectedTemplateTypeInVmPopup != "blank") {  //template   
+            var hypervisor = $vmPopup.find("#wizard_hypervisor").val();	                
+            if (searchInput != null && searchInput.length > 0)                 
+                commandString = "command=listTemplates&templatefilter="+selectedTemplateTypeInVmPopup+"&zoneid="+zoneId+"&hypervisor="+hypervisor+"&keyword="+searchInput+"&page="+currentPageInTemplateGridInVmPopup; 
+            else
+                commandString = "command=listTemplates&templatefilter="+selectedTemplateTypeInVmPopup+"&zoneid="+zoneId+"&hypervisor="+hypervisor+"&page="+currentPageInTemplateGridInVmPopup;           		    		
+	    } 
+	    else {  //ISO
+	        if (searchInput != null && searchInput.length > 0)                 
+                commandString = "command=listIsos&isReady=true&bootable=true&zoneid="+zoneId+"&keyword="+searchInput+"&page="+currentPageInTemplateGridInVmPopup;  
+            else
+                commandString = "command=listIsos&isReady=true&bootable=true&zoneid="+zoneId+"&page="+currentPageInTemplateGridInVmPopup;  
+	    }
+		    		
+	    var loading = $vmPopup.find("#wiz_template_loading").show();				
+	    if(currentPageInTemplateGridInVmPopup==1)
+            $vmPopup.find("#prevPage").hide();
+        else 
+            $vmPopup.find("#prevPage").show();  		
+		
+	    $.ajax({
+		    data: createURL(commandString),
+		    dataType: "json",
+		    async: false,
+		    success: function(json) {
+		        var items;		
+		        if (selectedTemplateTypeInVmPopup != "blank")
+			        items = json.listtemplatesresponse.template;
+			    else
+			        items = json.listisosresponse.iso;
+			    loading.hide();
+			    container.empty();
+			    if (items != null && items.length > 0) {
+				    var first = true;
+				    for (var i = 0; i < items.length; i++) {
+					    var divClass = "rev_wiztemplistbox";
+					    if (first) {
+						    divClass = "rev_wiztemplistbox_selected";
+						    first = false;
+					    }
+
+					    var html = '<div class="'+divClass+'" id="'+items[i].id+'">'
+								      +'<div class="'+getIconForOS(items[i].ostypename)+'"></div>'
+								      +'<div class="rev_wiztemp_listtext">'+fromdb(items[i].displaytext)+'</div>'
+								      +'<div class="rev_wiztemp_ownertext">'+fromdb(items[i].account)+'</div>'
+							      +'</div>';
+					    container.append(html);
+				    }						
+				    if(items.length < vmPopupStep2PageSize)
+	                    $vmPopup.find("#nextPage").hide();
+	                else
+	                    $vmPopup.find("#nextPage").show();
+		        
+			    } else {
+			        var msg;
+			        if (selectedTemplateTypeInVmPopup != "blank")
+			            msg = "No templates available";
+			        else
+			            msg = "No ISOs available";					    
+				    var html = '<div class="rev_wiztemplistbox" id="-2">'
+							      +'<div></div>'
+							      +'<div class="rev_wiztemp_listtext">'+msg+'</div>'
+						      +'</div>';
+				    container.append(html);						
+				    $vmPopup.find("#nextPage").hide();
+			    }
+		    }
+	    });
+    }
+			
+    $vmPopup.find("#template_container").bind("click", function(event) {
+	    var container = $(this);
+	    var target = $(event.target);
+	    var parent = target.parent();
+	    if (parent.hasClass("rev_wiztemplistbox_selected") || parent.hasClass("rev_wiztemplistbox")) {
+		    target = parent;
+	    }
+	    if (target.attr("id") != "-2") {
+		    if (target.hasClass("rev_wiztemplistbox")) {
+			    container.find(".rev_wiztemplistbox_selected").removeClass().addClass("rev_wiztemplistbox");
+			    target.removeClass().addClass("rev_wiztemplistbox_selected");
+		    } else if (target.hasClass("rev_wiztemplistbox_selected")) {
+			    target.removeClass().addClass("rev_wiztemplistbox");
+		    }
+	    }
+    });
+             
+    $vmPopup.find("#wizard_zone").bind("change", function(event) {       
+        var selectedZone = $(this).val();   
+        if(selectedZone != null && selectedZone.length > 0)
+            listTemplatesInVmPopup();         
+        return false;
+    });
+            
+    $vmPopup.find("#wizard_hypervisor").bind("change", function(event) {       
+        var selectedHypervisor = $(this).val();
+        if(selectedHypervisor != null && selectedHypervisor.length > 0)
+            listTemplatesInVmPopup();         
+        return false;
+    });        
+   
+    function displayDiskOffering(type) {
+        if(type=="data") {
+            $vmPopup.find("#wizard_data_disk_offering_title").show();
+		    $vmPopup.find("#wizard_data_disk_offering").show();
+		    $vmPopup.find("#wizard_root_disk_offering_title").hide();
+		    $vmPopup.find("#wizard_root_disk_offering").hide();
+        }
+        else if(type=="root") {
+            $vmPopup.find("#wizard_root_disk_offering_title").show();
+		    $vmPopup.find("#wizard_root_disk_offering").show();
+		    $vmPopup.find("#wizard_data_disk_offering_title").hide();	
+		    $vmPopup.find("#wizard_data_disk_offering").hide();	
+        }
+    }
+    displayDiskOffering("data");  //because default value of "#wiz_template_filter" is "wiz_featured"
+  
+    
+    // Setup the left template filters	  	
+    $vmPopup.find("#wiz_template_filter").unbind("click").bind("click", function(event) {		 	    
+	    var $container = $(this);
+	    var target = $(event.target);
+	    var targetId = target.attr("id");
+	    selectedTemplateTypeInVmPopup = "featured";		
+	    switch (targetId) {
+		    case "wiz_featured":
+		        $vmPopup.find("#search_input").val("");  
+		        currentPageInTemplateGridInVmPopup = 1;
+			    selectedTemplateTypeInVmPopup = "featured";
+			    $container.find("#wiz_featured").removeClass().addClass("rev_wizmid_selectedtempbut");
+			    $container.find("#wiz_my, #wiz_community, #wiz_blank").removeClass().addClass("rev_wizmid_nonselectedtempbut");
+			    displayDiskOffering("data");
+			    break;
+		    case "wiz_my":
+		        $vmPopup.find("#search_input").val("");  
+		        currentPageInTemplateGridInVmPopup = 1;
+			    $container.find("#wiz_my").removeClass().addClass("rev_wizmid_selectedtempbut");
+			    $container.find("#wiz_featured, #wiz_community, #wiz_blank").removeClass().addClass("rev_wizmid_nonselectedtempbut");
+			    selectedTemplateTypeInVmPopup = "selfexecutable";
+			    displayDiskOffering("data");
+			    break;	
+		    case "wiz_community":
+		        $vmPopup.find("#search_input").val("");  
+		        currentPageInTemplateGridInVmPopup = 1;
+			    $container.find("#wiz_community").removeClass().addClass("rev_wizmid_selectedtempbut");
+			    $container.find("#wiz_my, #wiz_featured, #wiz_blank").removeClass().addClass("rev_wizmid_nonselectedtempbut");
+			    selectedTemplateTypeInVmPopup = "community";					
+			    displayDiskOffering("data");
+			    break;
+		    case "wiz_blank":
+		        $vmPopup.find("#search_input").val("");  
+		        currentPageInTemplateGridInVmPopup = 1;
+			    $container.find("#wiz_blank").removeClass().addClass("rev_wizmid_selectedtempbut");
+			    $container.find("#wiz_my, #wiz_community, #wiz_featured").removeClass().addClass("rev_wizmid_nonselectedtempbut");
+			    selectedTemplateTypeInVmPopup = "blank";
+			    displayDiskOffering("root");
+			    break;
+	    }
+	    listTemplatesInVmPopup();
+	    return false;
+    });  
+		
+    $vmPopup.find("#next_step").bind("click", function(event) {
+	    event.preventDefault();
+	    event.stopPropagation();	
+	    var $thisPopup = $vmPopup;		    		
+	    if (currentStepInVmPopup == 1) { //select a template/ISO		    		
+	        // prevent a person from moving on if no templates are selected	  
+	        if($thisPopup.find("#step1 #template_container .rev_wiztemplistbox_selected").length == 0) {			        
+	            $thisPopup.find("#step1 #wiz_message").show();
+	            return false;
+	        }
+               	 
+		    if ($thisPopup.find("#wiz_blank").hasClass("rev_wizmid_selectedtempbut")) {  //ISO
+		        $thisPopup.find("#step3_label").text("Root Disk Offering");
+		        $thisPopup.find("#root_disk_offering_container").show();
+		        $thisPopup.find("#data_disk_offering_container").hide();			       
+		    } 
+		    else {  //template
+		        $thisPopup.find("#step3_label").text("Data Disk Offering");
+		        $thisPopup.find("#data_disk_offering_container").show();
+		        $thisPopup.find("#root_disk_offering_container").hide();			       
+		    }	
+			
+			$thisPopup.find("#wizard_review_zone").text($thisPopup.find("#wizard_zone option:selected").text());    
+			$thisPopup.find("#wizard_review_hypervisor").text($thisPopup.find("#wizard_hypervisor option:selected").text());   	
+			$thisPopup.find("#wizard_review_template").text($thisPopup.find("#step1 .rev_wiztemplistbox_selected .rev_wiztemp_listtext").text()); 
+	    }			
+		
+	    if (currentStepInVmPopup == 2) { //service offering
+	        // prevent a person from moving on if no service offering is selected
+	        if($thisPopup.find("input:radio[name=service_offering_radio]:checked").length == 0) {
+	            $thisPopup.find("#step2 #wiz_message #wiz_message_text").text("Please select a service offering to continue");
+	            $thisPopup.find("#step2 #wiz_message").show();
+		        return false;
+		    }               
+            $thisPopup.find("#wizard_review_service_offering").text($thisPopup.find("input:radio[name=service_offering_radio]:checked").next().text());
+	    }			
+		
+	    if(currentStepInVmPopup ==3) { //disk offering	 
+	        if($thisPopup.find("#wiz_blank").hasClass("rev_wizmid_selectedtempbut"))  { //ISO
+	            $thisPopup.find("#wizard_review_disk_offering_label").text("Root Disk Offering:");
+		        $thisPopup.find("#wizard_review_disk_offering").text($thisPopup.find("#root_disk_offering_container input[name=root_disk_offering_radio]:checked").next().text());	
+		    }
+		    else { //template
+		        var checkedRadioButton = $thisPopup.find("#data_disk_offering_container input[name=data_disk_offering_radio]:checked");			        
+		        			    
+		        // validate values
+		        var isValid = true;		
+		        if(checkedRadioButton.parent().attr("id") == "vm_popup_disk_offering_template_custom")			    
+		            isValid &= validateNumber("Disk Size", $thisPopup.find("#custom_disk_size"), $thisPopup.find("#custom_disk_size_errormsg"), null, null, false);	//required	
+		        else
+		            isValid &= validateNumber("Disk Size", $thisPopup.find("#custom_disk_size"), $thisPopup.find("#custom_disk_size_errormsg"), null, null, true);	//optional		    		
+		        if (!isValid) return;
+		        
+		        $thisPopup.find("#wizard_review_disk_offering_label").text("Data Disk Offering:");
+		        
+		        var diskOfferingName = checkedRadioButton.next().text();
+		        if(checkedRadioButton.parent().attr("id") == "vm_popup_disk_offering_template_custom")
+		            diskOfferingName += (" " + $thisPopup.find("#data_disk_offering_container input[name=data_disk_offering_radio]:checked").next().next().next().val() + " MB");
+		        $thisPopup.find("#wizard_review_disk_offering").text(diskOfferingName);
+		    }	
+	    }	
+	    	
+	    if (currentStepInVmPopup == 4) { //network
+	    
+	    }	
+	    
+	    if (currentStepInVmPopup == 5) { //last step		        
+	        // validate values							
+		    var isValid = true;									
+		    isValid &= validateString("Name", $thisPopup.find("#wizard_vm_name"), $thisPopup.find("#wizard_vm_name_errormsg"), true);	 //optional	
+		    isValid &= validateString("Group", $thisPopup.find("#wizard_vm_group"), $thisPopup.find("#wizard_vm_group_errormsg"), true); //optional					
+		    if (!isValid) 
+		        return;		    
+	        vmWizardClose();
+	        
+		    // Create a new VM!!!!
+		    var moreCriteria = [];								
+		    moreCriteria.push("&zoneId="+$thisPopup.find("#wizard_zone").val());			    
+			moreCriteria.push("&hypervisor="+$thisPopup.find("#wizard_hypervisor").val());	    								
+		    moreCriteria.push("&templateId="+$thisPopup.find("#step1 .rev_wiztemplistbox_selected").attr("id"));    							
+		    moreCriteria.push("&serviceOfferingId="+$thisPopup.find("input:radio[name=service_offering_radio]:checked").val());
+			
+			var diskOfferingId;    						
+		    if ($thisPopup.find("#wiz_blank").hasClass("rev_wizmid_selectedtempbut"))  //ISO
+		        diskOfferingId = $thisPopup.find("#root_disk_offering_container input[name=root_disk_offering_radio]:checked").val();	
+		    else  //template
+		        diskOfferingId = $thisPopup.find("#data_disk_offering_container input[name=data_disk_offering_radio]:checked").val();	
+	        if(diskOfferingId != null && diskOfferingId != "" && diskOfferingId != "no" && diskOfferingId != "custom")
+		        moreCriteria.push("&diskOfferingId="+diskOfferingId);						 
+			    			
+			var customDiskSize = $thisPopup.find("#custom_disk_size").val(); //unit is MB
+			if(customDiskSize != null && customDiskSize.length > 0)
+			    moreCriteria.push("&size="+customDiskSize);	    
+			
+			var name = trim($thisPopup.find("#wizard_vm_name").val());
+		    if (name != null && name.length > 0) 
+			    moreCriteria.push("&displayname="+todb(name));	
+			
+		    var group = trim($thisPopup.find("#wizard_vm_group").val());
+		    if (group != null && group.length > 0) 
+			    moreCriteria.push("&group="+todb(group));	
+			    		
+			var $midmenuItem1 = beforeAddingMidMenuItem() ;
+			    			
+		    $.ajax({
+			    data: createURL("command=deployVirtualMachine"+moreCriteria.join("")),
+			    dataType: "json",
+			    success: function(json) {
+				    var jobId = json.deployvirtualmachineresponse.jobid;					   
+				    var timerKey = "vmNew"+jobId;
+					
+				    // Process the async job
+				    $("body").everyTime(
+					    10000,
+					    timerKey,
+					    function() {
+						    $.ajax({
+							    data: createURL("command=queryAsyncJobResult&jobId="+jobId),
+							    dataType: "json",
+							    success: function(json) {
+								    var result = json.queryasyncjobresultresponse;
+								    if (result.jobstatus == 0) {
+									    return; //Job has not completed
+								    } else {
+									    $("body").stopTime(timerKey);										    
+									    if (result.jobstatus == 1) {
+										    // Succeeded						                        
+				                            vmToMidmenu(result.virtualmachine[0], $midmenuItem1);
+				                            bindClickToMidMenu($midmenuItem1, vmToRightPanel, getMidmenuId);  
+				                            if (result.virtualmachine[0].passwordenabled == 'true') {							                                									        
+										        var extraMessage = "New password: " + result.virtualmachine[0].password;
+										        afterAddingMidMenuItem($midmenuItem1, true, extraMessage);
+										        var afterActionInfo = "Your instance has been successfully created.  Your new password is : " + result.virtualmachine[0].password;
+										        $midmenuItem1.data("afterActionInfo", afterActionInfo); 
+									        } 	
+									        else {
+									            afterAddingMidMenuItem($midmenuItem1, true);
+									        }							                        
+									    } else if (result.jobstatus == 2) {
+										    // Failed
+										    afterAddingMidMenuItem($midmenuItem1, false, fromdb(result.jobresult));		
+									    }
+								    }
+							    },
+							    error: function(XMLHttpResponse) {
+								    $("body").stopTime(timerKey);									    
+								    afterAddingMidMenuItem($midmenuItem1, false);									    						    
+								    handleError(XMLHttpResponse);
+							    }
+						    });
+					    },
+					    0
+				    );
+			    },
+			    error: function(XMLHttpResponse) {					        				    
+				    afterAddingMidMenuItem($midmenuItem1, false);	
+			        handleError(XMLHttpResponse);
+			    }					
+		    });
+	    } 		
+		
+	    //since no error, move to next step		    
+	    $vmPopup.find("#step" + currentStepInVmPopup).hide().next().show();  //hide current step, show next step		    
+	    currentStepInVmPopup++;					
+    });
+	
+    $vmPopup.find("#prev_step").bind("click", function(event) {		
+	    var $prevStep = $vmPopup.find("#step" + currentStepInVmPopup).hide().prev().show(); //hide current step, show previous step
+	    currentStepInVmPopup--;
+	    return false; //event.preventDefault() + event.stopPropagation()
+    });
+    //***** VM Wizard (end) ********************************************************************************
+    
+    //***** Volume tab (begin) *****************************************************************************         
+    $.ajax({
+        data: createURL("command=listOsTypes&response=json"),
+	    dataType: "json",
+	    success: function(json) {
+		    types = json.listostypesresponse.ostype;
+		    if (types != null && types.length > 0) {
+			    var select = $("#dialog_create_template #create_template_os_type").empty();
+			    for (var i = 0; i < types.length; i++) {
+				    select.append("<option value='" + types[i].id + "'>" + types[i].description + "</option>");
+			    }
+		    }	
+	    }
+    });        
+}
+
+
+
+
+
+
+
+
+function clickInstanceGroupHeader($arrowIcon) {     
 	if($arrowIcon.hasClass("expanded_close") == true) {
         $arrowIcon.removeClass("expanded_close").addClass("expanded_open");            
         appendInstanceGroup(-1, noGroupName);
@@ -37,604 +642,13 @@ function clickInstanceGroupHeader($arrowIcon) {
 		        	    appendInstanceGroup(instancegroups[i].id, fromdb(instancegroups[i].name));
 		            }
 		        }
-		        
-		        //action menu	        
-		        $("#midmenu_action_link").show();
-		        $("#action_menu #action_list").empty();		        
-		        for(var label in vmActionMap) 				            
-		            buildActionLinkForMidMenu(label, vmActionMap, $("#action_menu"));	
 	        }
         });  
     }
     else if($arrowIcon.hasClass("expanded_open") == true) {
         $arrowIcon.removeClass("expanded_open").addClass("expanded_close");            
         $("#leftmenu_instance_group_container").empty();   
-    }	  
-           
-    //***** VM Detail (end) ********************************************************************************    
-    $("#right_panel").load("jsp/instance.jsp", function() {	           
-	    if (isAdmin() || isDomainAdmin())
-	        $("#right_panel_content").find("#tab_router,#tab_router").show();
-	    
-	    var $noDiskOfferingTemplate = $("#vm_popup_disk_offering_template_no");
-        var $customDiskOfferingTemplate = $("#vm_popup_disk_offering_template_custom");
-        var $existingDiskOfferingTemplate = $("#vm_popup_disk_offering_template_existing");
-       	   
-       	initDialog("dialog_detach_iso_from_vm");       	
-       	initDialog("dialog_attach_iso");  
-        initDialog("dialog_change_name"); 
-        initDialog("dialog_change_group"); 
-        initDialog("dialog_change_service_offering", 600); 
-        initDialog("dialog_confirmation_change_root_password");
-        initDialog("dialog_confirmation_enable_ha");  
-        initDialog("dialog_confirmation_disable_ha");            
-        initDialog("dialog_create_template", 400);  
-	
-        //***** switch between different tabs (begin) ********************************************************************
-        var tabArray = [$("#tab_details"), $("#tab_volume"), $("#tab_statistics"), $("#tab_router")];
-        var tabContentArray = [$("#tab_content_details"), $("#tab_content_volume"), $("#tab_content_statistics"), $("#tab_content_router")];
-        switchBetweenDifferentTabs(tabArray, tabContentArray);       
-        //***** switch between different tabs (end) **********************************************************************
-        
-        //***** VM Wizard (begin) ******************************************************************************
-        $vmPopup = $("#vm_popup");
-        var $serviceOfferingTemplate = $("#vm_popup_service_offering_template");
-        var currentPageInTemplateGridInVmPopup =1;
-	    var selectedTemplateTypeInVmPopup;  //selectedTemplateTypeInVmPopup will be set to "featured" when new VM dialog box opens
-    	   	
-	    $("#midmenu_add_link").unbind("click").bind("click", function(event) {
-            vmWizardOpen();			
-		    $.ajax({
-			    data: createURL("command=listZones&available=true"),
-			    dataType: "json",
-			    success: function(json) {
-				    var zones = json.listzonesresponse.zone;					
-				    var $zoneSelect = $vmPopup.find("#wizard_zone").empty();					
-				    if (zones != null && zones.length > 0) {
-					    for (var i = 0; i < zones.length; i++) {
-						    $zoneSelect.append("<option value='" + zones[i].id + "'>" + fromdb(zones[i].name) + "</option>"); 
-					    }
-				    }				
-				    listTemplatesInVmPopup();	
-			    }
-		    });
-    		
-		    $.ajax({
-			    data: createURL("command=listServiceOfferings"),
-			    dataType: "json",
-			    async: false,
-			    success: function(json) {
-				    var offerings = json.listserviceofferingsresponse.serviceoffering;
-				    var $container = $("#service_offering_container");
-				    $container.empty();					    
-				    if (offerings != null && offerings.length > 0) {						    
-					    for (var i = 0; i < offerings.length; i++) {	
-						    var $t = $serviceOfferingTemplate.clone();  						  
-						    $t.find("input:radio[name=service_offering_radio]").val(offerings[i].id); 
-						    $t.find("#name").text(fromdb(offerings[i].name));
-						    $t.find("#description").text(fromdb(offerings[i].displaytext)); 						    
-						    if (i > 0)
-						        $t.find("input:radio[name=service_offering_radio]").removeAttr("checked");							
-						    $container.append($t.show());	
-					    }
-					    //Safari and Chrome are not smart enough to make checkbox checked if html markup is appended by JQuery.append(). So, the following 2 lines are added.		
-				        var html_all = $container.html();        
-                        $container.html(html_all); 
-				    }
-			    }
-			});
-			    			    
-		
-		    $.ajax({
-			    data: createURL("command=listDiskOfferings&domainid=1"),
-			    dataType: "json",
-			    async: false,
-			    success: function(json) {
-				    var offerings = json.listdiskofferingsresponse.diskoffering;			
-				    var $dataDiskOfferingContainer = $("#data_disk_offering_container").empty();
-			        var $rootDiskOfferingContainer = $("#root_disk_offering_container").empty();
-			        
-			        //***** data disk offering: "no, thanks", "custom", existing disk offerings in database (begin) ****************************************************
-			        //"no, thanks" radio button (default radio button in data disk offering)		               
-		            var $t = $noDiskOfferingTemplate.clone(); 		            	     
-		            $t.find("input:radio").attr("name","data_disk_offering_radio");  
-		            $t.find("#name").text("no, thanks"); 		            
-		            $dataDiskOfferingContainer.append($t.show()); 
-			        
-			        //"custom" radio button			        
-			        var $t = $customDiskOfferingTemplate.clone();  			        
-			        $t.find("input:radio").attr("name","data_disk_offering_radio").removeAttr("checked");	
-			        $t.find("#name").text("custom:");	  			         
-			        $dataDiskOfferingContainer.append($t.show());	
-			        
-			        //existing disk offerings in database
-			        if (offerings != null && offerings.length > 0) {						    
-				        for (var i = 0; i < offerings.length; i++) {	
-					        var $t = $existingDiskOfferingTemplate.clone(); 
-					        $t.find("input:radio").attr("name","data_disk_offering_radio").val(offerings[i].id).removeAttr("checked");	 	
-					        $t.find("#name").text(fromdb(offerings[i].name));
-					        $t.find("#description").text(fromdb(offerings[i].displaytext)); 	 
-					        $dataDiskOfferingContainer.append($t.show());	
-				        }
-			        }
-			        
-			        //Safari and Chrome are not smart enough to make checkbox checked if html markup is appended by JQuery.append(). So, the following 2 lines are added.		
-		            var html_all = $dataDiskOfferingContainer.html();        
-                    $dataDiskOfferingContainer.html(html_all);                     
-			        //***** data disk offering: "no, thanks", "custom", existing disk offerings in database (end) *******************************************************
-			        		        	
-			        //***** root disk offering: "custom", existing disk offerings in database (begin) *******************************************************************
-			        //"custom" radio button			        
-			        var $t = $customDiskOfferingTemplate.clone();  			        
-			        $t.find("input:radio").attr("name","root_disk_offering_radio").val("custom");	
-			        if (offerings != null && offerings.length > 0) //default is the 1st existing disk offering. If there is no existing disk offering, default to "custom" radio button
-			            $t.find("input:radio").removeAttr("checked");	
-			        $t.find("#name").text("custom:");	  			         
-			        $rootDiskOfferingContainer.append($t.show());	
-			        
-			        //existing disk offerings in database
-			        if (offerings != null && offerings.length > 0) {						    
-				        for (var i = 0; i < offerings.length; i++) {	
-					        var $t = $existingDiskOfferingTemplate.clone(); 
-					        $t.find("input:radio").attr("name","root_disk_offering_radio").val(offerings[i].id);	 
-					        if(i > 0) //default is the 1st existing disk offering. If there is no existing disk offering, default to "custom" radio button
-					            $t.find("input:radio").removeAttr("checked");	 	
-					        $t.find("#name").text(fromdb(offerings[i].name));
-					        $t.find("#description").text(fromdb(offerings[i].displaytext)); 	 
-					        $rootDiskOfferingContainer.append($t.show());	
-				        }
-			        }
-				    
-				    //Safari and Chrome are not smart enough to make checkbox checked if html markup is appended by JQuery.append(). So, the following 2 lines are added.		
-		            var html_all = $rootDiskOfferingContainer.html();        
-                    $rootDiskOfferingContainer.html(html_all);                         
-				    //***** root disk offering: "custom", existing disk offerings in database (end) *********************************************************************				    
-			    }
-		    });
-		 
-		    
-		    $vmPopup.find("#wizard_service_offering").click();	      
-            return false;
-        });
-        
-        
-	    function vmWizardCleanup() {
-	        currentStepInVmPopup = 1;			
-		    $vmPopup.find("#step1").show().nextAll().hide();		   
-		    $vmPopup.find("#wizard_message").hide();
-		    selectedTemplateTypeInVmPopup = "featured";				
-		    $("#wiz_featured").removeClass().addClass("rev_wizmid_selectedtempbut");
-		    $("#wiz_my, #wiz_community, #wiz_blank").removeClass().addClass("rev_wizmid_nonselectedtempbut");	
-		    currentPageInTemplateGridInVmPopup = 1;	 	
-	    }	
-    	
-	    function vmWizardOpen() {
-            $("#overlay_black").show();
-            $vmPopup.show();        
-            vmWizardCleanup();	
-        }     
-                
-        function vmWizardClose() {			
-		    $vmPopup.hide();
-		    $("#overlay_black").hide();					
-	    }
-    		    	
-	    $vmPopup.find("#close_button").bind("click", function(event) {
-		    vmWizardClose();
-		    return false;
-	    });
-    			
-	    $vmPopup.find("#step1 #wiz_message_continue").bind("click", function(event) {			    
-		    $vmPopup.find("#step1 #wiz_message").hide();
-		    return false;
-	    });
-    		
-	    $vmPopup.find("#step2 #wiz_message_continue").bind("click", function(event) {			    
-		    $vmPopup.find("#step2 #wiz_message").hide();
-		    return false;
-	    });
-    	
-	    function getIconForOS(osType) {
-		    if (osType == null || osType.length == 0) {
-			    return "";
-		    } else {
-			    if (osType.match("^CentOS") != null) {
-				    return "rev_wiztemo_centosicons";
-			    } else if (osType.match("^Windows") != null) {
-				    return "rev_wiztemo_windowsicons";
-			    } else {
-				    return "rev_wiztemo_linuxicons";
-			    }
-		    }
-	    }
-    	
-	    //vm wizard search and pagination
-	    $vmPopup.find("#search_button").bind("click", function(event) {	              
-            currentPageInTemplateGridInVmPopup = 1;           	        	
-            listTemplatesInVmPopup();  
-            return false;   //event.preventDefault() + event.stopPropagation() 
-        });
-    	
-        $vmPopup.find("#search_input").bind("keypress", function(event) {		        
-            if(event.keyCode == keycode_Enter) {                	        
-                $vmPopup.find("#search_button").click();	
-                return false;   //event.preventDefault() + event.stopPropagation() 		     
-            }		    
-        });   
-    			
-	    $vmPopup.find("#nextPage").bind("click", function(event){	            
-            currentPageInTemplateGridInVmPopup++;        
-            listTemplatesInVmPopup(); 
-            return false;   //event.preventDefault() + event.stopPropagation() 
-        });		
-        
-        $vmPopup.find("#prevPage").bind("click", function(event){	                 
-            currentPageInTemplateGridInVmPopup--;	              	    
-            listTemplatesInVmPopup(); 
-            return false;   //event.preventDefault() + event.stopPropagation() 
-        });	
-    						
-	    var vmPopupStep2PageSize = 11; //max number of templates each page in step2 of New VM wizard is 11 
-	    function listTemplatesInVmPopup() {		
-	        var zoneId = $vmPopup.find("#wizard_zone").val();
-	        if(zoneId == null || zoneId.length == 0)
-	            return;
-    	
-	        var container = $vmPopup.find("#template_container");	 		    	
-    		   
-	        var commandString;    		  	   
-            var searchInput = $vmPopup.find("#search_input").val();   
-            if (selectedTemplateTypeInVmPopup != "blank") {  //template   
-                var hypervisor = $vmPopup.find("#wizard_hypervisor").val();	                
-                if (searchInput != null && searchInput.length > 0)                 
-                    commandString = "command=listTemplates&templatefilter="+selectedTemplateTypeInVmPopup+"&zoneid="+zoneId+"&hypervisor="+hypervisor+"&keyword="+searchInput+"&page="+currentPageInTemplateGridInVmPopup; 
-                else
-                    commandString = "command=listTemplates&templatefilter="+selectedTemplateTypeInVmPopup+"&zoneid="+zoneId+"&hypervisor="+hypervisor+"&page="+currentPageInTemplateGridInVmPopup;           		    		
-		    } 
-		    else {  //ISO
-		        if (searchInput != null && searchInput.length > 0)                 
-                    commandString = "command=listIsos&isReady=true&bootable=true&zoneid="+zoneId+"&keyword="+searchInput+"&page="+currentPageInTemplateGridInVmPopup;  
-                else
-                    commandString = "command=listIsos&isReady=true&bootable=true&zoneid="+zoneId+"&page="+currentPageInTemplateGridInVmPopup;  
-		    }
-    		    		
-		    var loading = $vmPopup.find("#wiz_template_loading").show();				
-		    if(currentPageInTemplateGridInVmPopup==1)
-                $vmPopup.find("#prevPage").hide();
-            else 
-                $vmPopup.find("#prevPage").show();  		
-    		
-		    $.ajax({
-			    data: createURL(commandString),
-			    dataType: "json",
-			    async: false,
-			    success: function(json) {
-			        var items;		
-			        if (selectedTemplateTypeInVmPopup != "blank")
-				        items = json.listtemplatesresponse.template;
-				    else
-				        items = json.listisosresponse.iso;
-				    loading.hide();
-				    container.empty();
-				    if (items != null && items.length > 0) {
-					    var first = true;
-					    for (var i = 0; i < items.length; i++) {
-						    var divClass = "rev_wiztemplistbox";
-						    if (first) {
-							    divClass = "rev_wiztemplistbox_selected";
-							    first = false;
-						    }
-
-						    var html = '<div class="'+divClass+'" id="'+items[i].id+'">'
-									      +'<div class="'+getIconForOS(items[i].ostypename)+'"></div>'
-									      +'<div class="rev_wiztemp_listtext">'+fromdb(items[i].displaytext)+'</div>'
-									      +'<div class="rev_wiztemp_ownertext">'+fromdb(items[i].account)+'</div>'
-								      +'</div>';
-						    container.append(html);
-					    }						
-					    if(items.length < vmPopupStep2PageSize)
-		                    $vmPopup.find("#nextPage").hide();
-		                else
-		                    $vmPopup.find("#nextPage").show();
-    		        
-				    } else {
-				        var msg;
-				        if (selectedTemplateTypeInVmPopup != "blank")
-				            msg = "No templates available";
-				        else
-				            msg = "No ISOs available";					    
-					    var html = '<div class="rev_wiztemplistbox" id="-2">'
-								      +'<div></div>'
-								      +'<div class="rev_wiztemp_listtext">'+msg+'</div>'
-							      +'</div>';
-					    container.append(html);						
-					    $vmPopup.find("#nextPage").hide();
-				    }
-			    }
-		    });
-	    }
-    			
-	    $vmPopup.find("#template_container").bind("click", function(event) {
-		    var container = $(this);
-		    var target = $(event.target);
-		    var parent = target.parent();
-		    if (parent.hasClass("rev_wiztemplistbox_selected") || parent.hasClass("rev_wiztemplistbox")) {
-			    target = parent;
-		    }
-		    if (target.attr("id") != "-2") {
-			    if (target.hasClass("rev_wiztemplistbox")) {
-				    container.find(".rev_wiztemplistbox_selected").removeClass().addClass("rev_wiztemplistbox");
-				    target.removeClass().addClass("rev_wiztemplistbox_selected");
-			    } else if (target.hasClass("rev_wiztemplistbox_selected")) {
-				    target.removeClass().addClass("rev_wiztemplistbox");
-			    }
-		    }
-	    });
-                 
-        $vmPopup.find("#wizard_zone").bind("change", function(event) {       
-            var selectedZone = $(this).val();   
-            if(selectedZone != null && selectedZone.length > 0)
-                listTemplatesInVmPopup();         
-            return false;
-        });
-                
-        $vmPopup.find("#wizard_hypervisor").bind("change", function(event) {       
-            var selectedHypervisor = $(this).val();
-            if(selectedHypervisor != null && selectedHypervisor.length > 0)
-                listTemplatesInVmPopup();         
-            return false;
-        });        
-       
-        function displayDiskOffering(type) {
-            if(type=="data") {
-                $vmPopup.find("#wizard_data_disk_offering_title").show();
-			    $vmPopup.find("#wizard_data_disk_offering").show();
-			    $vmPopup.find("#wizard_root_disk_offering_title").hide();
-			    $vmPopup.find("#wizard_root_disk_offering").hide();
-            }
-            else if(type=="root") {
-                $vmPopup.find("#wizard_root_disk_offering_title").show();
-			    $vmPopup.find("#wizard_root_disk_offering").show();
-			    $vmPopup.find("#wizard_data_disk_offering_title").hide();	
-			    $vmPopup.find("#wizard_data_disk_offering").hide();	
-            }
-        }
-        displayDiskOffering("data");  //because default value of "#wiz_template_filter" is "wiz_featured"
-      
-        
-        // Setup the left template filters	  	
-	    $vmPopup.find("#wiz_template_filter").unbind("click").bind("click", function(event) {		 	    
-		    var $container = $(this);
-		    var target = $(event.target);
-		    var targetId = target.attr("id");
-		    selectedTemplateTypeInVmPopup = "featured";		
-		    switch (targetId) {
-			    case "wiz_featured":
-			        $vmPopup.find("#search_input").val("");  
-			        currentPageInTemplateGridInVmPopup = 1;
-				    selectedTemplateTypeInVmPopup = "featured";
-				    $container.find("#wiz_featured").removeClass().addClass("rev_wizmid_selectedtempbut");
-				    $container.find("#wiz_my, #wiz_community, #wiz_blank").removeClass().addClass("rev_wizmid_nonselectedtempbut");
-				    displayDiskOffering("data");
-				    break;
-			    case "wiz_my":
-			        $vmPopup.find("#search_input").val("");  
-			        currentPageInTemplateGridInVmPopup = 1;
-				    $container.find("#wiz_my").removeClass().addClass("rev_wizmid_selectedtempbut");
-				    $container.find("#wiz_featured, #wiz_community, #wiz_blank").removeClass().addClass("rev_wizmid_nonselectedtempbut");
-				    selectedTemplateTypeInVmPopup = "selfexecutable";
-				    displayDiskOffering("data");
-				    break;	
-			    case "wiz_community":
-			        $vmPopup.find("#search_input").val("");  
-			        currentPageInTemplateGridInVmPopup = 1;
-				    $container.find("#wiz_community").removeClass().addClass("rev_wizmid_selectedtempbut");
-				    $container.find("#wiz_my, #wiz_featured, #wiz_blank").removeClass().addClass("rev_wizmid_nonselectedtempbut");
-				    selectedTemplateTypeInVmPopup = "community";					
-				    displayDiskOffering("data");
-				    break;
-			    case "wiz_blank":
-			        $vmPopup.find("#search_input").val("");  
-			        currentPageInTemplateGridInVmPopup = 1;
-				    $container.find("#wiz_blank").removeClass().addClass("rev_wizmid_selectedtempbut");
-				    $container.find("#wiz_my, #wiz_community, #wiz_featured").removeClass().addClass("rev_wizmid_nonselectedtempbut");
-				    selectedTemplateTypeInVmPopup = "blank";
-				    displayDiskOffering("root");
-				    break;
-		    }
-		    listTemplatesInVmPopup();
-		    return false;
-	    });  
-    		
-	    $vmPopup.find("#next_step").bind("click", function(event) {
-		    event.preventDefault();
-		    event.stopPropagation();	
-		    var $thisPopup = $vmPopup;		    		
-		    if (currentStepInVmPopup == 1) { //select a template/ISO		    		
-		        // prevent a person from moving on if no templates are selected	  
-		        if($thisPopup.find("#step1 #template_container .rev_wiztemplistbox_selected").length == 0) {			        
-		            $thisPopup.find("#step1 #wiz_message").show();
-		            return false;
-		        }
-                   	 
-			    if ($thisPopup.find("#wiz_blank").hasClass("rev_wizmid_selectedtempbut")) {  //ISO
-			        $thisPopup.find("#step3_label").text("Root Disk Offering");
-			        $thisPopup.find("#root_disk_offering_container").show();
-			        $thisPopup.find("#data_disk_offering_container").hide();			       
-			    } 
-			    else {  //template
-			        $thisPopup.find("#step3_label").text("Data Disk Offering");
-			        $thisPopup.find("#data_disk_offering_container").show();
-			        $thisPopup.find("#root_disk_offering_container").hide();			       
-			    }	
-    			
-    			$thisPopup.find("#wizard_review_zone").text($thisPopup.find("#wizard_zone option:selected").text());    
-    			$thisPopup.find("#wizard_review_hypervisor").text($thisPopup.find("#wizard_hypervisor option:selected").text());   	
-    			$thisPopup.find("#wizard_review_template").text($thisPopup.find("#step1 .rev_wiztemplistbox_selected .rev_wiztemp_listtext").text()); 
-		    }			
-    		
-		    if (currentStepInVmPopup == 2) { //service offering
-		        // prevent a person from moving on if no service offering is selected
-		        if($thisPopup.find("input:radio[name=service_offering_radio]:checked").length == 0) {
-		            $thisPopup.find("#step2 #wiz_message #wiz_message_text").text("Please select a service offering to continue");
-		            $thisPopup.find("#step2 #wiz_message").show();
-			        return false;
-			    }               
-                $thisPopup.find("#wizard_review_service_offering").text($thisPopup.find("input:radio[name=service_offering_radio]:checked").next().text());
-		    }			
-    		
-		    if(currentStepInVmPopup ==3) { //disk offering	 
-		        if($thisPopup.find("#wiz_blank").hasClass("rev_wizmid_selectedtempbut"))  { //ISO
-		            $thisPopup.find("#wizard_review_disk_offering_label").text("Root Disk Offering:");
-			        $thisPopup.find("#wizard_review_disk_offering").text($thisPopup.find("#root_disk_offering_container input[name=root_disk_offering_radio]:checked").next().text());	
-			    }
-			    else { //template
-			        var checkedRadioButton = $thisPopup.find("#data_disk_offering_container input[name=data_disk_offering_radio]:checked");			        
-			        			    
-			        // validate values
-			        var isValid = true;		
-			        if(checkedRadioButton.parent().attr("id") == "vm_popup_disk_offering_template_custom")			    
-			            isValid &= validateNumber("Disk Size", $thisPopup.find("#custom_disk_size"), $thisPopup.find("#custom_disk_size_errormsg"), null, null, false);	//required	
-			        else
-			            isValid &= validateNumber("Disk Size", $thisPopup.find("#custom_disk_size"), $thisPopup.find("#custom_disk_size_errormsg"), null, null, true);	//optional		    		
-			        if (!isValid) return;
-			        
-			        $thisPopup.find("#wizard_review_disk_offering_label").text("Data Disk Offering:");
-			        
-			        var diskOfferingName = checkedRadioButton.next().text();
-			        if(checkedRadioButton.parent().attr("id") == "vm_popup_disk_offering_template_custom")
-			            diskOfferingName += (" " + $thisPopup.find("#data_disk_offering_container input[name=data_disk_offering_radio]:checked").next().next().next().val() + " MB");
-			        $thisPopup.find("#wizard_review_disk_offering").text(diskOfferingName);
-			    }	
-		    }	
-		    	
-		    if (currentStepInVmPopup == 4) { //network
-		    
-		    }	
-		    
-		    if (currentStepInVmPopup == 5) { //last step		        
-		        // validate values							
-			    var isValid = true;									
-			    isValid &= validateString("Name", $thisPopup.find("#wizard_vm_name"), $thisPopup.find("#wizard_vm_name_errormsg"), true);	 //optional	
-			    isValid &= validateString("Group", $thisPopup.find("#wizard_vm_group"), $thisPopup.find("#wizard_vm_group_errormsg"), true); //optional					
-			    if (!isValid) 
-			        return;		    
-		        vmWizardClose();
-		        
-			    // Create a new VM!!!!
-			    var moreCriteria = [];								
-			    moreCriteria.push("&zoneId="+$thisPopup.find("#wizard_zone").val());			    
-    			moreCriteria.push("&hypervisor="+$thisPopup.find("#wizard_hypervisor").val());	    								
-			    moreCriteria.push("&templateId="+$thisPopup.find("#step1 .rev_wiztemplistbox_selected").attr("id"));    							
-			    moreCriteria.push("&serviceOfferingId="+$thisPopup.find("input:radio[name=service_offering_radio]:checked").val());
-    			
-    			var diskOfferingId;    						
-			    if ($thisPopup.find("#wiz_blank").hasClass("rev_wizmid_selectedtempbut"))  //ISO
-			        diskOfferingId = $thisPopup.find("#root_disk_offering_container input[name=root_disk_offering_radio]:checked").val();	
-			    else  //template
-			        diskOfferingId = $thisPopup.find("#data_disk_offering_container input[name=data_disk_offering_radio]:checked").val();	
-		        if(diskOfferingId != null && diskOfferingId != "" && diskOfferingId != "no" && diskOfferingId != "custom")
-			        moreCriteria.push("&diskOfferingId="+diskOfferingId);						 
-    			    			
-    			var customDiskSize = $thisPopup.find("#custom_disk_size").val(); //unit is MB
-    			if(customDiskSize != null && customDiskSize.length > 0)
-    			    moreCriteria.push("&size="+customDiskSize);	    
-    			
-    			var name = trim($thisPopup.find("#wizard_vm_name").val());
-			    if (name != null && name.length > 0) 
-				    moreCriteria.push("&displayname="+todb(name));	
-    			
-			    var group = trim($thisPopup.find("#wizard_vm_group").val());
-			    if (group != null && group.length > 0) 
-				    moreCriteria.push("&group="+todb(group));	
-    			    		
-    			var $midmenuItem1 = beforeAddingMidMenuItem() ;
-    			    			
-			    $.ajax({
-				    data: createURL("command=deployVirtualMachine"+moreCriteria.join("")),
-				    dataType: "json",
-				    success: function(json) {
-					    var jobId = json.deployvirtualmachineresponse.jobid;					   
-					    var timerKey = "vmNew"+jobId;
-    					
-					    // Process the async job
-					    $("body").everyTime(
-						    10000,
-						    timerKey,
-						    function() {
-							    $.ajax({
-								    data: createURL("command=queryAsyncJobResult&jobId="+jobId),
-								    dataType: "json",
-								    success: function(json) {
-									    var result = json.queryasyncjobresultresponse;
-									    if (result.jobstatus == 0) {
-										    return; //Job has not completed
-									    } else {
-										    $("body").stopTime(timerKey);										    
-										    if (result.jobstatus == 1) {
-											    // Succeeded						                        
-					                            vmToMidmenu(result.virtualmachine[0], $midmenuItem1);
-					                            bindClickToMidMenu($midmenuItem1, vmToRightPanel, getMidmenuId);  
-					                            if (result.virtualmachine[0].passwordenabled == 'true') {							                                									        
-											        var extraMessage = "New password: " + result.virtualmachine[0].password;
-											        afterAddingMidMenuItem($midmenuItem1, true, extraMessage);
-											        var afterActionInfo = "Your instance has been successfully created.  Your new password is : " + result.virtualmachine[0].password;
-											        $midmenuItem1.data("afterActionInfo", afterActionInfo); 
-										        } 	
-										        else {
-										            afterAddingMidMenuItem($midmenuItem1, true);
-										        }							                        
-										    } else if (result.jobstatus == 2) {
-											    // Failed
-											    afterAddingMidMenuItem($midmenuItem1, false, fromdb(result.jobresult));		
-										    }
-									    }
-								    },
-								    error: function(XMLHttpResponse) {
-									    $("body").stopTime(timerKey);									    
-									    afterAddingMidMenuItem($midmenuItem1, false);									    						    
-									    handleError(XMLHttpResponse);
-								    }
-							    });
-						    },
-						    0
-					    );
-				    },
-				    error: function(XMLHttpResponse) {					        				    
-					    afterAddingMidMenuItem($midmenuItem1, false);	
-				        handleError(XMLHttpResponse);
-				    }					
-			    });
-		    } 		
-    		
-		    //since no error, move to next step		    
-		    $vmPopup.find("#step" + currentStepInVmPopup).hide().next().show();  //hide current step, show next step		    
-		    currentStepInVmPopup++;					
-	    });
-    	
-	    $vmPopup.find("#prev_step").bind("click", function(event) {		
-		    var $prevStep = $vmPopup.find("#step" + currentStepInVmPopup).hide().prev().show(); //hide current step, show previous step
-		    currentStepInVmPopup--;
-		    return false; //event.preventDefault() + event.stopPropagation()
-	    });
-        //***** VM Wizard (end) ********************************************************************************
-        
-        //***** Volume tab (begin) *****************************************************************************         
-        $.ajax({
-	        data: createURL("command=listOsTypes&response=json"),
-		    dataType: "json",
-		    success: function(json) {
-			    types = json.listostypesresponse.ostype;
-			    if (types != null && types.length > 0) {
-				    var select = $("#dialog_create_template #create_template_os_type").empty();
-				    for (var i = 0; i < types.length; i++) {
-					    select.append("<option value='" + types[i].id + "'>" + types[i].description + "</option>");
-				    }
-			    }	
-		    }
-	    });        
-        //***** Volume tab (end) *******************************************************************************        
-    });	
+    }	
 }  
 
 
diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js
index 9f039f6d1e8..5bf59b26520 100644
--- a/ui/new/scripts/cloud.core2.js
+++ b/ui/new/scripts/cloud.core2.js
@@ -727,10 +727,10 @@ function initDialogWithOK(elementId, width1) {
     }
 } 
 
-function disableMultipleSelectionInMidMenu() {
+function disableMultipleSelectionInMidMenu() {    
     $("#midmenu_container").selectable("destroy"); //Most pages don't need multiple selection in middle menu.
 }
-function enableMultipleSelectionInMiddleMenu() {
+function enableMultipleSelectionInMidMenu() {    
     $("#midmenu_container").selectable({
         selecting: function(event, ui) {	 	                               
             if(ui.selecting.id.indexOf("midmenuItem") != -1) {                     
@@ -762,7 +762,7 @@ function getMidmenuId(jsonObj) {
     return "midmenuItem_" + jsonObj.id; 
 }
 
-function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, clickFirstItem) {                
+function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, clickFirstItem, isMultipleSelectionInMidMenu) {                
     $.ajax({
         cache: false,
         data: createURL("command="+commandString+"&pagesize="+midmenuItemCount),
@@ -777,17 +777,21 @@ function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmen
                     toMidmenuFn(items[i], $midmenuItem1);    
                     bindClickToMidMenu($midmenuItem1, toRightPanelFn, getMidmenuIdFn);             
                     $("#midmenu_container").append($midmenuItem1.show());   
-                    if(clickFirstItem == true && i == 0)  //click the 1st item in middle menu as default 
-                        $midmenuItem1.click();                        
+                    if(clickFirstItem == true && i == 0)  { //click the 1st item in middle menu as default 
+                        $midmenuItem1.click();       
+                        if(isMultipleSelectionInMidMenu == true) {                           
+                            $midmenuItem1.addClass("ui-selected");  //because instance page is using JQuery selectable widget to do multiple-selection
+                            selectedItemsInMidMenu[items[i].id] = $midmenuItem1; //because instance page is using JQuery selectable widget to do multiple-selection                        
+                        }                        
+                    }                 
                 }  
             }  
         }
     });	 
 }
 
-function listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn) { 
-	showMiddleMenu();
-	disableMultipleSelectionInMidMenu();	
+function listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, isMultipleSelectionInMidMenu) { 
+	showMiddleMenu();	
 	clearMiddleMenu();
 	
 	$("#right_panel").load(rightPanelJSP, function(){     
@@ -802,15 +806,20 @@ function listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPane
 		});	   
 					  
 		afterLoadRightPanelJSPFn();                
-		listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, true);            
+		listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, true, isMultipleSelectionInMidMenu);            
 	});     
 	return false;
 }
 
-function bindAndListMidMenuItems(leftmenuId, commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn) {
-	$("#"+leftmenuId).bind("click", function(event) {
+function bindAndListMidMenuItems($leftmenu, commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, isMultipleSelectionInMidMenu) {	
+	if(isMultipleSelectionInMidMenu == true)
+	    enableMultipleSelectionInMidMenu();
+	else
+	    disableMultipleSelectionInMidMenu();
+	
+	$leftmenu.bind("click", function(event) {
 		selectLeftSubMenu($(this));
-        listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn);
+        listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, isMultipleSelectionInMidMenu);
         return false;
     });
 }