From 4413a6973365caf87dc4365f6d55045a2d23820c Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Tue, 12 Oct 2010 18:51:40 -0700
Subject: [PATCH 1/7] new UI - Resources page - highlight each tree node (zone
 node, pod node, cluster node, host node, storage node, system vm node) when
 being clicked.

---
 ui/new/jsp/resource.jsp                | 350 +++++++++++++------------
 ui/new/scripts/cloud.core2.resource.js | 135 ++++++++--
 2 files changed, 293 insertions(+), 192 deletions(-)

diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index 20db32d1bc8..b8a328d7765 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -1,11 +1,11 @@
 <%@ page import="java.util.*" %>
+
 <%@ page import="com.cloud.utils.*" %>
 
 <%
     Locale browserLocale = request.getLocale();
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
-
 <!-- domain detail panel (begin) -->
 <div class="main_title" id="right_panel_header">
     <!--  
@@ -28,7 +28,7 @@
             <%=t.t("network")%></div>
         <div class="content_tabs off" id="tab_secondary_storage">
             <%=t.t("secondary.storage")%></div>
-    </div>  
+    </div>
     <!-- Details tab (start)-->
     <div id="tab_content_details">
         <div class="grid_container">
@@ -83,98 +83,104 @@
                 </div>
             </div>
         </div>
-    </div>    
+    </div>
     <!-- Details tab (end)-->
-    
     <!-- Network tab (start)-->
     <div style="display: none;" id="tab_content_network">
-    	<div class="text_container">
-        	<div class="network_dgbox">
+        <div class="text_container">
+            <div class="network_dgbox">
                 <div class="networkdg_zonepanel">
                     <div class="networkdg_zonebox">
                         <div class="networkdg_zonecloud">
-                        	<p>Zone 1</p>
+                            <p>
+                                Zone 1</p>
+                        </div>
+                        <div class="networkdg_zoneconnect">
                         </div>
-                        <div class="networkdg_zoneconnect"></div>
                     </div>
                     <div class="networkswitchpanel">
-                    	<div class="networkswitch_titlebox"><p>Guest VLAN 1000 -1001</p></div>
-                        <div class="networkswitch_top"></div>
-                        <div class="networkswitch_midpanel">
-                        	
-                            <div class="networkswitch_vlanpanel">
-                            	<div class="networkswitch_vlanconnect">
-                                	<div class="networkswitch_vlan_infoicon"></div>
-                                    <div class="networkswitch_vlan_detailsbox">
-                                    	<div class="networkswitch_vlan_detailsbox_textbox">
-                                        	<div class="networkswitch_vlan_detailsbox_textbox_label">VM Group:</div> <span>VLAN 10</span>
-                                        </div>
-                                        
-                                        <div class="networkswitch_vlan_detailsbox_textbox">
-                                        	<div class="networkswitch_vlan_detailsbox_textbox_label">IP:</div> <span>10.101.24.231</span>
-                                        </div>
-                                        
-                                    </div>
-                                    <div class="networkswitch_typeicon direct"></div>
-                                </div>
-                            </div>
-                            
-                            <div class="networkswitch_vlanpanel">
-                            	<div class="networkswitch_vlanconnect">
-                                	<div class="networkswitch_vlan_infoicon"></div>
-                                    <div class="networkswitch_vlan_detailsbox">
-                                    	<div class="networkswitch_vlan_detailsbox_textbox">
-                                        	<div class="networkswitch_vlan_detailsbox_textbox_label">VM Group:</div> <span>VLAN 10</span>
-                                        </div>
-                                        
-                                        <div class="networkswitch_vlan_detailsbox_textbox">
-                                        	<div class="networkswitch_vlan_detailsbox_textbox_label">IP:</div> <span>10.101.24.231</span>
-                                        </div>
-                                        
-                                    </div>
-                                    <div class="networkswitch_typeicon virtual"></div>
-                                </div>
-                            </div>
-                            
-                            
-                           
+                        <div class="networkswitch_titlebox">
+                            <p>
+                                Guest VLAN 1000 -1001</p>
+                        </div>
+                        <div class="networkswitch_top">
+                        </div>
+                        <div class="networkswitch_midpanel">
+                            <div class="networkswitch_vlanpanel">
+                                <div class="networkswitch_vlanconnect">
+                                    <div class="networkswitch_vlan_infoicon">
+                                    </div>
+                                    <div class="networkswitch_vlan_detailsbox">
+                                        <div class="networkswitch_vlan_detailsbox_textbox">
+                                            <div class="networkswitch_vlan_detailsbox_textbox_label">
+                                                VM Group:</div>
+                                            <span>VLAN 10</span>
+                                        </div>
+                                        <div class="networkswitch_vlan_detailsbox_textbox">
+                                            <div class="networkswitch_vlan_detailsbox_textbox_label">
+                                                IP:</div>
+                                            <span>10.101.24.231</span>
+                                        </div>
+                                    </div>
+                                    <div class="networkswitch_typeicon direct">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="networkswitch_vlanpanel">
+                                <div class="networkswitch_vlanconnect">
+                                    <div class="networkswitch_vlan_infoicon">
+                                    </div>
+                                    <div class="networkswitch_vlan_detailsbox">
+                                        <div class="networkswitch_vlan_detailsbox_textbox">
+                                            <div class="networkswitch_vlan_detailsbox_textbox_label">
+                                                VM Group:</div>
+                                            <span>VLAN 10</span>
+                                        </div>
+                                        <div class="networkswitch_vlan_detailsbox_textbox">
+                                            <div class="networkswitch_vlan_detailsbox_textbox_label">
+                                                IP:</div>
+                                            <span>10.101.24.231</span>
+                                        </div>
+                                    </div>
+                                    <div class="networkswitch_typeicon virtual">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="networkswitch_end">
                         </div>
-                        <div class="networkswitch_end"></div>
                     </div>
                 </div>
-             </div>
+            </div>
         </div>
-    
     </div>
     <!-- Network tab (end)-->
-    
     <!-- Secondary Storage tab (start)-->
-    <div id="tab_content_secondary_storage" style="display:none">        
+    <div id="tab_content_secondary_storage" style="display: none">
     </div>
-    <!-- Secondary Storage tab (end)-->    
+    <!-- Secondary Storage tab (end)-->
 </div>
 <!-- domain detail panel (end) -->
-
 <!-- treenode template (begin) -->
-<div id="treenode_template" class="tree_levelspanel" style="display:none">
-	<div class="tree_levelsbox" style="margin-left:20px;">
+<div id="treenode_template" class="tree_levelspanel" style="display: none">
+    <div class="tree_levelsbox" style="margin-left: 20px;">
         <div id="domain_title_container" class="tree_levels">
-            <div id="domain_expand_icon" class="zonetree_closedarrows"></div>
-            <div id="domain_name" class="tree_links">Domain Name</div>
+            <div id="domain_expand_icon" class="zonetree_closedarrows">
+            </div>
+            <div id="domain_name" class="tree_links">
+                Domain Name</div>
+        </div>
+        <div id="domain_children_container" style="display: none">
         </div>
-		<div id="domain_children_container" style="display:none">
-		</div>   
     </div>
 </div>
 <!-- treenode template (end) -->
-
 <!-- admin account tab template (begin) -->
 <div class="grid_container" id="admin_account_tab_template" style="display: none">
     <div class="grid_header">
         <div class="grid_header_title" id="title">
-        </div>       
-    </div> 
-        
+        </div>
+    </div>
     <div class="grid_rows even">
         <div class="grid_row_cell" style="width: 20%;">
             <div class="row_celltitles">
@@ -264,137 +270,151 @@
             <div class="row_celltitles" id="state">
             </div>
         </div>
-    </div> 
+    </div>
 </div>
 <!-- admin account tab template (end) -->
-
 <!-- Zonetree Template (begin) -->
-<div class="zonetree_contentbox" id="zonetree" style="display:none">
+<div class="zonetree_contentbox" id="zonetree" style="display: none">
     <div id="zones_container">
     </div>
 </div>
 <!-- Zonetree Template (end) -->
-
 <!-- Zone Template (begin) -->
-<div id="zone_template" style="display:none">
-    <div class="adding_loading" style="height:25px;display:none" id="loading_container">
-	    <div class="adding_animation"></div>
-	    <div class="adding_text">Adding a zone &hellip; </div>
+<div id="zone_template" style="display: none">
+    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
+        <div class="adding_animation">
+        </div>
+        <div class="adding_text">
+            Adding a zone &hellip;
+        </div>
     </div>
     <div id="row_container">
-	    <div class="leftmenu_content">
-        	<div class="leftmenu_firstindent">
-                <div class="zonetree_closedarrows" id="zone_expand"></div>
-                <div class="leftmenu_list_icons"><img src="images/zone_zoneicon.png" alt="Zone" /></div>
-                Zone: <strong><span id="zone_name">Zone 1</span></strong>
+        <div class="leftmenu_content" id="zone_node">
+            <div class="leftmenu_firstindent">
+                <div class="zonetree_closedarrows" id="zone_expand">
+                </div>
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_zoneicon.png" id="zone_icon" alt="Zone" /></div>
+                <span id="zone_label">Zone:</span> <strong><span id="zone_name">Zone 1</span></strong>
             </div>
-	    </div>
-	    <div id="zone_content" style="display:none">
-		    <div id="pods_container">
-		    </div>	
-		    <div id="systemvms_container">
-		    </div>		  
-	    </div>
-	</div>
+        </div>
+        <div id="zone_content" style="display: none">
+            <div id="pods_container">
+            </div>
+            <div id="systemvms_container">
+            </div>
+        </div>
+    </div>
 </div>
 <!-- Zone Template (end) -->
-
 <!-- Pod Template (begin) -->
-    <div id="pod_template" style="display:none">
-        <div class="adding_loading" style="height:25px;display:none" id="loading_container">
-            <div class="adding_animation"></div>
-            <div class="adding_text">Adding a pod &hellip; </div>
+<div id="pod_template" style="display: none">
+    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
+        <div class="adding_animation">
         </div>
-        <div id="row_container">  
-            <div class="leftmenu_content">
-            	<div class="leftmenu_secondindent">
-                    <div class="zonetree_openarrows" id="zone_expand"></div>
-                    <div class="leftmenu_list_icons"><img src="images/zone_podicon.png" alt="Pod" /></div>
-                    Pod: <strong><span id="pod_name">Name of the Pod</span></strong>
+        <div class="adding_text">
+            Adding a pod &hellip;
+        </div>
+    </div>
+    <div id="row_container">
+        <div class="leftmenu_content" id="pod_node">
+            <div class="leftmenu_secondindent">
+                <div class="zonetree_closedarrows" id="pod_expand">
                 </div>
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_podicon.png" id="pod_icon" alt="Pod" /></div>
+                <span id="pod_label">Pod:</span> <strong><span id="pod_name">Name of the Pod</span></strong>
             </div>
-            <div id="pod_content">
-                <!--  
-                <div id="directip_ranges_container">
-                </div>
-		    -->
-		    <div id="clusters_container">
-		    </div>
-	    </div>
-	</div>
+        </div>
+        <div id="pod_content" style="display: none">           
+            <div id="clusters_container">
+            </div>
+        </div>
+    </div>
 </div>
 <!-- Pod Template (end) -->
-
-<!-- SystemVM Template (begin) -->
-<div id="systemvm_template" style="display:none">	
-    <div id="row_container">  
-	    <div class="leftmenu_content">
-        	<div class="leftmenu_secondindent">
-            	<div class="zonetree_openarrows" style="background:none;"></div>
-                <div class="leftmenu_list_icons"><img src="images/zone_systemvmicon.png" alt="System VM" /></div>
-                System VM: <strong><span id="systemvm_name">(System VM name)</span></strong>
-            </div>
-	    </div>	    
-	</div>
-</div>
-<!-- SystemVM Template (end) -->
-
 <!-- Cluster Template (begin) -->
-<div id="cluster_template" style="display:none">
-    <div class="adding_loading" style="height:25px;display:none" id="loading_container">
-	    <div class="adding_animation"></div>
-	    <div class="adding_text">Adding a cluster &hellip; </div>
+<div id="cluster_template" style="display: none">
+    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
+        <div class="adding_animation">
+        </div>
+        <div class="adding_text">
+            Adding a cluster &hellip;
+        </div>
     </div>
-    <div id="row_container">  
-	    <div class="leftmenu_content">
-        	<div class="leftmenu_thirdindent">
-            	<div class="zonetree_openarrows" id="zone_expand"></div>
-                <div class="leftmenu_list_icons"><img src="images/zone_clustericon.png" alt="Cluster" /></div>
-                Cluster: <strong><span id="cluster_name">(Name of the Cluster)</span></strong>
+    <div id="row_container">
+        <div class="leftmenu_content" id="cluster_node">
+            <div class="leftmenu_thirdindent">
+                <div class="zonetree_openarrows" id="cluster_expand">
+                </div>
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_clustericon.png" id="cluster_icon" alt="Cluster" /></div>
+                <span id="cluster_label"">Cluster:</span> 
+                <strong><span id="cluster_name">(Name of the Cluster)</span></strong>
             </div>
-	    </div>	    
-	    <div id="cluster_content">	        
-		    <div id="hosts_container">
-		    </div>
-		    <div id="primarystorages_container">
-		    </div>
-	    </div>    
-	</div>
+        </div>
+        <div id="cluster_content">
+            <div id="hosts_container">
+            </div>
+            <div id="primarystorages_container">
+            </div>
+        </div>
+    </div>
 </div>
 <!-- Cluster Template (end) -->
-
 <!-- Host Template (begin) -->
-<div id="host_template" style="display:none">
-    <div class="adding_loading" style="height:25px;display:none" id="loading_container">
-	    <div class="adding_animation"></div>
-	    <div class="adding_text">Adding a host &hellip; </div>
+<div id="host_template" style="display: none">
+    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
+        <div class="adding_animation">
+        </div>
+        <div class="adding_text">
+            Adding a host &hellip;
+        </div>
     </div>
-    <div id="row_container">  
-	    <div class="leftmenu_content">
-        	<div class="leftmenu_fourthindent">
-                <div class="leftmenu_list_icons"><img src="images/zone_hosticon.png" alt="Host" /></div>
-                Host: <strong><span id="host_name">(Name of the Host)</span></strong>
+    <div id="row_container">
+        <div class="leftmenu_content" id="host_node">
+            <div class="leftmenu_fourthindent">
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_hosticon.png" id="host_icon" alt="Host" /></div>
+                <span id="host_label">Host:</span> 
+                <strong><span id="host_name">(Name of the Host)</span></strong>
             </div>
-	    </div>
-	</div>
+        </div>
+    </div>
 </div>
 <!-- Host Template (end) -->
-
 <!-- Primary Storage Template (begin) -->
-<div id="primary_storage_template" style="display:none">
-    <div class="adding_loading" style="height:25px;display:none" id="loading_container">
-	    <div class="adding_animation"></div>
-	    <div class="adding_text">Adding a primary storage &hellip; </div>
+<div id="primarystorage_template" style="display: none">
+    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
+        <div class="adding_animation">
+        </div>
+        <div class="adding_text">
+            Adding a primary storage &hellip;
+        </div>
     </div>
-    <div id="row_container">  
-	    <div class="leftmenu_content">
-        	<div class="leftmenu_fourthindent">
-                <div class="leftmenu_list_icons"><img src="images/zone_primarystorageicon.png" alt="PrimaryStorage" /></div>
-                Primary: <strong><span id="primary_storage_name">(Name of the Primary Storage)</span></strong>
+    <div id="row_container">
+        <div class="leftmenu_content" id="primarystorage_node">
+            <div class="leftmenu_fourthindent">
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_primarystorageicon.png" id="primarystorage_icon" alt="PrimaryStorage" /></div>
+                <span id="primarystorage_label">Storage:</span> 
+                <strong><span id="primarystorage_name">(Name of the Primary Storage)</span></strong>
             </div>
-	    </div>
-	</div>
+        </div>
+    </div>
 </div>
 <!-- Primary Storage Template (end) -->
-
-
+<!-- SystemVM Template (begin) -->
+<div id="systemvm_template" style="display: none">
+    <div id="row_container">
+        <div class="leftmenu_content" id="systemvm_node">
+            <div class="leftmenu_secondindent">                
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_systemvmicon.png" id="systemvm_icon" alt="System VM" /></div>
+                <span id="systemvm_label">System VM:</span> 
+                <strong><span id="systemvm_name">(System VM name)</span></strong>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- SystemVM Template (end) -->
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index d225a4dda40..113d24ad5da 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -27,6 +27,7 @@ function afterLoadResourceJSP() {
 
     function zoneJSONToTemplate(json, template) {
         var zoneid = json.id;
+        template.attr("id", "zone_" + zoneid);  
 	    template.data("id", zoneid).data("name", fromdb(json.name));
 	    template.find("#zone_name")
 		    .text(fromdb(json.name))
@@ -76,12 +77,15 @@ function afterLoadResourceJSP() {
 	    });
     }
     
-    function podJSONToTemplate(json, template) {		    
+    function podJSONToTemplate(json, template) {	
+        var podid = json.id;
+        template.attr("id", "pod_" + podid);  //???
+    	    
 		var ipRange = getIpRange(json.startip, json.endip);			
-		template.data("id", json.id).data("name", json.name);
+		template.data("id", podid).data("name", json.name);
 		
 		var podName = template.find("#pod_name").text(json.name);
-		podName.data("id", json.id);
+		podName.data("id", podid);
 		podName.data("zoneid", json.zoneid);
 		podName.data("name", json.name);
 		podName.data("cidr", json.cidr);
@@ -91,7 +95,7 @@ function afterLoadResourceJSP() {
 		podName.data("gateway", json.gateway);		
 		
 	    $.ajax({
-            data: createURL("command=listClusters&podid="+json.id+maxPageSize),
+            data: createURL("command=listClusters&podid="+podid+maxPageSize),
 	        dataType: "json",
 	        success: function(json) {
 		        var items = json.listclustersresponse.cluster;
@@ -108,8 +112,9 @@ function afterLoadResourceJSP() {
 	}
 		
 	function systemvmJSONToTemplate(json, template) {	
-	    template.data("id", json.id).data("name", json.name);
-	     
+	    var systemvmid = json.id;	
+	    template.attr("id", "systemvm_"+systemvmid);
+	    template.data("id", systemvmid).data("name", json.name);	     
 	    var systeymvmName = template.find("#systemvm_name").text(json.name);
 		systeymvmName.data("systemvmtype", json.systemvmtype);
 		systeymvmName.data("name", json.name);	
@@ -152,7 +157,7 @@ function afterLoadResourceJSP() {
 		        var container = template.find("#primarystorages_container").empty();
 		        if (items != null && items.length > 0) {					    
 			        for (var i = 0; i < items.length; i++) {
-				        var primaryStorageTemplate = $("#primary_storage_template").clone(true).attr("id", "primary_storage_"+items[i].id);
+				        var primaryStorageTemplate = $("#primarystorage_template").clone(true).attr("id", "primary_storage_"+items[i].id);
 				        primaryStorageJSONToTemplate(items[i], primaryStorageTemplate);
 				        container.append(primaryStorageTemplate.show());
 			        }
@@ -170,7 +175,7 @@ function afterLoadResourceJSP() {
 	function primaryStorageJSONToTemplate(json, template) {
 	    template.data("id", json.id).data("name", fromdb(json.name));
 	    
-	    var primaryStorageName = template.find("#primary_storage_name").text(fromdb(json.name));
+	    var primaryStorageName = template.find("#primarystorage_name").text(fromdb(json.name));
 	}
 	
 	$("#zone_template").bind("click", function(event) {
@@ -181,7 +186,7 @@ function afterLoadResourceJSP() {
 		var name = template.data("name");
 		
 		switch (action) {
-			case "zone_expand" :
+			case "zone_expand" :			   
 				if (target.hasClass("zonetree_closedarrows")) {
 					$("#zone_"+id).find("#zone_content").show();					
 					target.removeClass().addClass("zonetree_openarrows");
@@ -189,26 +194,102 @@ function afterLoadResourceJSP() {
 					$("#zone_"+id).find("#zone_content").hide();
 					target.removeClass().addClass("zonetree_closedarrows");
 				}
-				break;
-			case "zone_name" :
-				$(".zonetree_firstlevel_selected").removeClass().addClass("zonetree_firstlevel");
-				$(".zonetree_secondlevel_selected").removeClass().addClass("zonetree_secondlevel");
-				template.find(".zonetree_firstlevel").removeClass().addClass("zonetree_firstlevel_selected");
-									
-				var obj = {"id": target.data("id"), "name": target.data("name"), "dns1": target.data("dns1"), "dns2": target.data("dns2"), "internaldns1": target.data("internaldns1"), "internaldns2": target.data("internaldns2"), "vlan": target.data("vlan"), "guestcidraddress": target.data("guestcidraddress")};
-				//zoneObjectToRightPanel(obj);					
-				
-				break;
-				
-			case "pod_name" :
-				$(".zonetree_firstlevel_selected").removeClass().addClass("zonetree_firstlevel");
-				$(".zonetree_secondlevel_selected").removeClass().addClass("zonetree_secondlevel");
-				target.parent(".zonetree_secondlevel").removeClass().addClass("zonetree_secondlevel_selected");
-									
+				break;					
+			case "zone_icon":
+			case "zone_label":
+			case "zone_name":	
+			    $zoneetree1.find(".selected").removeClass("selected");
+			    template.find("#zone_node").addClass("selected");	
+			    var obj = {"id": target.data("id"), "name": target.data("name"), "dns1": target.data("dns1"), "dns2": target.data("dns2"), "internaldns1": target.data("internaldns1"), "internaldns2": target.data("internaldns2"), "vlan": target.data("vlan"), "guestcidraddress": target.data("guestcidraddress")};
+				//zoneObjectToRightPanel(obj);				    		   			    
+			    break;
+			
+			
+			case "pod_expand" :			   
+				if (target.hasClass("zonetree_closedarrows")) {
+					$("#zone_"+id).find("#pod_content").show();					
+					target.removeClass().addClass("zonetree_openarrows");
+				} else {
+					$("#zone_"+id).find("#pod_content").hide();
+					target.removeClass().addClass("zonetree_closedarrows");
+				}
+				break;			
+			case "pod_icon":
+			case "pod_label":	
+			case "pod_name" :			   
+				$zoneetree1.find(".selected").removeClass("selected");
+			    template.find("#pod_node").addClass("selected");
 				var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
-				//podObjectToRightPanel(obj);
-				
+				//podObjectToRightPanel(obj);				
 				break;
+				
+			
+			case "cluster_expand" :			   
+				if (target.hasClass("zonetree_closedarrows")) {
+					$("#zone_"+id).find("#cluster_content").show();					
+					target.removeClass().addClass("zonetree_openarrows");
+				} else {
+					$("#zone_"+id).find("#cluster_content").hide();
+					target.removeClass().addClass("zonetree_closedarrows");
+				}
+				break;			
+			case "cluster_icon":
+			case "cluster_label":	
+			case "cluster_name" :			   
+				$zoneetree1.find(".selected").removeClass("selected");
+			    template.find("#cluster_node").addClass("selected");
+				var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
+				//clusterObjectToRightPanel(obj);				
+				break;	
+				
+				
+			case "host_expand" :			   
+				if (target.hasClass("zonetree_closedarrows")) {
+					$("#zone_"+id).find("#host_content").show();					
+					target.removeClass().addClass("zonetree_openarrows");
+				} else {
+					$("#zone_"+id).find("#host_content").hide();
+					target.removeClass().addClass("zonetree_closedarrows");
+				}
+				break;			
+			case "host_icon":
+			case "host_label":	
+			case "host_name" :			   
+				$zoneetree1.find(".selected").removeClass("selected");
+			    template.find("#host_node").addClass("selected");
+				var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
+				//hostObjectToRightPanel(obj);				
+				break;	
+			
+			
+			case "primarystorage_expand" :			   
+				if (target.hasClass("zonetree_closedarrows")) {
+					$("#zone_"+id).find("#primarystorage_content").show();					
+					target.removeClass().addClass("zonetree_openarrows");
+				} else {
+					$("#zone_"+id).find("#primarystorage_content").hide();
+					target.removeClass().addClass("zonetree_closedarrows");
+				}
+				break;			
+			case "primarystorage_icon":
+			case "primarystorage_label":	
+			case "primarystorage_name" :			   
+				$zoneetree1.find(".selected").removeClass("selected");
+			    template.find("#primarystorage_node").addClass("selected");
+				var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
+				//primarystorageObjectToRightPanel(obj);				
+				break;
+						
+			
+			case "systemvm_icon":
+			case "systemvm_label":	
+			case "systemvm_name" :			   
+				$zoneetree1.find(".selected").removeClass("selected");
+			    template.find("#systemvm_node").addClass("selected");
+				var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
+				//systemvmObjectToRightPanel(obj);				
+				break;
+			
 			
 			default:
 				break;

From e8898f25c50d0eea740b4048e09d6ca3cf4956ae Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Wed, 13 Oct 2010 09:40:03 -0700
Subject: [PATCH 2/7] new UI - resources page - fix the issue that all pods or
 all system vms are highlighted when one pod or one system vm is selected in
 zone tree.

---
 ui/new/jsp/resource.jsp                | 26 +++++--
 ui/new/scripts/cloud.core2.resource.js | 97 ++++++++++++--------------
 2 files changed, 64 insertions(+), 59 deletions(-)

diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index b8a328d7765..c0555e7eb24 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -295,7 +295,10 @@
                 </div>
                 <div class="leftmenu_list_icons">
                     <img src="images/zone_zoneicon.png" id="zone_icon" alt="Zone" /></div>
-                <span id="zone_label">Zone:</span> <strong><span id="zone_name">Zone 1</span></strong>
+                <span id="zone_label">Zone:</span> 
+                <strong>
+                    <span id="zone_name">Zone 1</span>
+                </strong>
             </div>
         </div>
         <div id="zone_content" style="display: none">
@@ -323,7 +326,10 @@
                 </div>
                 <div class="leftmenu_list_icons">
                     <img src="images/zone_podicon.png" id="pod_icon" alt="Pod" /></div>
-                <span id="pod_label">Pod:</span> <strong><span id="pod_name">Name of the Pod</span></strong>
+                <span id="pod_label">Pod:</span> 
+                <strong>
+                    <span id="pod_name">Name of the Pod</span>
+                </strong>
             </div>
         </div>
         <div id="pod_content" style="display: none">           
@@ -350,7 +356,9 @@
                 <div class="leftmenu_list_icons">
                     <img src="images/zone_clustericon.png" id="cluster_icon" alt="Cluster" /></div>
                 <span id="cluster_label"">Cluster:</span> 
-                <strong><span id="cluster_name">(Name of the Cluster)</span></strong>
+                <strong>
+                    <span id="cluster_name">(Name of the Cluster)</span>
+                </strong>
             </div>
         </div>
         <div id="cluster_content">
@@ -377,7 +385,9 @@
                 <div class="leftmenu_list_icons">
                     <img src="images/zone_hosticon.png" id="host_icon" alt="Host" /></div>
                 <span id="host_label">Host:</span> 
-                <strong><span id="host_name">(Name of the Host)</span></strong>
+                <strong>
+                    <span id="host_name">(Name of the Host)</span>
+                </strong>
             </div>
         </div>
     </div>
@@ -398,7 +408,9 @@
                 <div class="leftmenu_list_icons">
                     <img src="images/zone_primarystorageicon.png" id="primarystorage_icon" alt="PrimaryStorage" /></div>
                 <span id="primarystorage_label">Storage:</span> 
-                <strong><span id="primarystorage_name">(Name of the Primary Storage)</span></strong>
+                <strong>
+                    <span id="primarystorage_name">(Name of the Primary Storage)</span>
+                </strong>
             </div>
         </div>
     </div>
@@ -412,7 +424,9 @@
                 <div class="leftmenu_list_icons">
                     <img src="images/zone_systemvmicon.png" id="systemvm_icon" alt="System VM" /></div>
                 <span id="systemvm_label">System VM:</span> 
-                <strong><span id="systemvm_name">(System VM name)</span></strong>
+                <strong>
+                    <span id="systemvm_name">(System VM name)</span>
+                </strong>
             </div>
         </div>
     </div>
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index 113d24ad5da..ee09f6dc0f4 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -187,106 +187,97 @@ function afterLoadResourceJSP() {
 		
 		switch (action) {
 			case "zone_expand" :			   
-				if (target.hasClass("zonetree_closedarrows")) {
-					$("#zone_"+id).find("#zone_content").show();					
-					target.removeClass().addClass("zonetree_openarrows");
-				} else {
-					$("#zone_"+id).find("#zone_content").hide();
-					target.removeClass().addClass("zonetree_closedarrows");
+				if (target.hasClass("zonetree_closedarrows")) {						
+					target.removeClass().addClass("zonetree_openarrows");					
+					target.parent().parent().parent().find("#zone_content").show();	
+				} else {					
+					target.removeClass().addClass("zonetree_closedarrows");					
+					target.parent().parent().parent().find("#zone_content").hide();									
 				}
-				break;					
-			case "zone_icon":
-			case "zone_label":
+				break;	
 			case "zone_name":	
 			    $zoneetree1.find(".selected").removeClass("selected");
-			    template.find("#zone_node").addClass("selected");	
+			    target.parent().parent().parent().addClass("selected");	
 			    var obj = {"id": target.data("id"), "name": target.data("name"), "dns1": target.data("dns1"), "dns2": target.data("dns2"), "internaldns1": target.data("internaldns1"), "internaldns2": target.data("internaldns2"), "vlan": target.data("vlan"), "guestcidraddress": target.data("guestcidraddress")};
 				//zoneObjectToRightPanel(obj);				    		   			    
 			    break;
 			
 			
-			case "pod_expand" :			   
-				if (target.hasClass("zonetree_closedarrows")) {
-					$("#zone_"+id).find("#pod_content").show();					
+			case "pod_expand" :				    	   
+				if (target.hasClass("zonetree_closedarrows")) {									
 					target.removeClass().addClass("zonetree_openarrows");
-				} else {
-					$("#zone_"+id).find("#pod_content").hide();
+					target.parent().parent().siblings("#pod_content").show();	
+				} else {					
 					target.removeClass().addClass("zonetree_closedarrows");
+					target.parent().parent().siblings("#pod_content").hide();
 				}
-				break;			
-			case "pod_icon":
-			case "pod_label":	
+				break;	
 			case "pod_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
-			    template.find("#pod_node").addClass("selected");
-				var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
+				target.parent().parent().parent().addClass("selected");
+			    //var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
 				//podObjectToRightPanel(obj);				
 				break;
 				
 			
 			case "cluster_expand" :			   
 				if (target.hasClass("zonetree_closedarrows")) {
-					$("#zone_"+id).find("#cluster_content").show();					
-					target.removeClass().addClass("zonetree_openarrows");
+				    target.removeClass().addClass("zonetree_openarrows");
+					target.parent().parent().siblings("#cluster_content").show();					
+					
 				} else {
-					$("#zone_"+id).find("#cluster_content").hide();
-					target.removeClass().addClass("zonetree_closedarrows");
+				    target.removeClass().addClass("zonetree_closedarrows");
+					target.parent().parent().siblings("#cluster_content").hide();					
 				}
-				break;			
-			case "cluster_icon":
-			case "cluster_label":	
+				break;		
 			case "cluster_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
-			    template.find("#cluster_node").addClass("selected");
-				var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
+			    target.parent().parent().parent().addClass("selected");
+			    //var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
 				//clusterObjectToRightPanel(obj);				
 				break;	
 				
 				
 			case "host_expand" :			   
 				if (target.hasClass("zonetree_closedarrows")) {
-					$("#zone_"+id).find("#host_content").show();					
-					target.removeClass().addClass("zonetree_openarrows");
+				    target.removeClass().addClass("zonetree_openarrows");
+					target.parent().parent().siblings("#host_content").show();					
+					
 				} else {
-					$("#zone_"+id).find("#host_content").hide();
-					target.removeClass().addClass("zonetree_closedarrows");
+				    target.removeClass().addClass("zonetree_closedarrows");
+					target.parent().parent().siblings("#host_content").hide();					
 				}
-				break;			
-			case "host_icon":
-			case "host_label":	
+				break;	
 			case "host_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
-			    template.find("#host_node").addClass("selected");
-				var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
+			    target.parent().parent().parent().addClass("selected");
+				//var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
 				//hostObjectToRightPanel(obj);				
 				break;	
 			
 			
 			case "primarystorage_expand" :			   
 				if (target.hasClass("zonetree_closedarrows")) {
-					$("#zone_"+id).find("#primarystorage_content").show();					
-					target.removeClass().addClass("zonetree_openarrows");
+				    target.removeClass().addClass("zonetree_openarrows");
+					target.parent().parent().siblings("#primarystorage_content").show();					
+					
 				} else {
-					$("#zone_"+id).find("#primarystorage_content").hide();
-					target.removeClass().addClass("zonetree_closedarrows");
+				    target.removeClass().addClass("zonetree_closedarrows");
+					target.parent().parent().siblings("#primarystorage_content").hide();					
 				}
-				break;			
-			case "primarystorage_icon":
-			case "primarystorage_label":	
+				break;	
 			case "primarystorage_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
-			    template.find("#primarystorage_node").addClass("selected");
-				var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
+			    target.parent().parent().parent().addClass("selected");
+				//var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
 				//primarystorageObjectToRightPanel(obj);				
 				break;
 						
-			
-			case "systemvm_icon":
-			case "systemvm_label":	
+						
 			case "systemvm_name" :			   
-				$zoneetree1.find(".selected").removeClass("selected");
-			    template.find("#systemvm_node").addClass("selected");
-				var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
+				$zoneetree1.find(".selected").removeClass("selected");			    		    
+			    target.parent().parent().parent().addClass("selected");			    
+				//var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
 				//systemvmObjectToRightPanel(obj);				
 				break;
 			

From f27785658ece1f34c8fda93f9d8f4bc5e94eaa0e Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Wed, 13 Oct 2010 10:52:41 -0700
Subject: [PATCH 3/7] new UI - specify element instead of elementId when
 switching between tabs.

---
 ui/new/jsp/instance.jsp                 |   3 +-
 ui/new/jsp/resource.jsp                 | 873 ++++++++++++------------
 ui/new/scripts/cloud.core2.domain.js    |   4 +-
 ui/new/scripts/cloud.core2.instance.js  |   4 +-
 ui/new/scripts/cloud.core2.ipaddress.js |   4 +-
 ui/new/scripts/cloud.core2.js           |  10 +-
 ui/new/scripts/cloud.core2.resource.js  |  13 +-
 ui/new/scripts/cloud.core2.volume.js    |   4 +-
 8 files changed, 463 insertions(+), 452 deletions(-)

diff --git a/ui/new/jsp/instance.jsp b/ui/new/jsp/instance.jsp
index bf25553e5da..f72e350426b 100644
--- a/ui/new/jsp/instance.jsp
+++ b/ui/new/jsp/instance.jsp
@@ -173,7 +173,8 @@
     </div>
     <!--Details tab (end)-->
     <!--Volume tab (start)-->
-    <div style="display: none;" id="tab_content_volume">        
+    <div style="display: none;" id="tab_content_volume">    
+        Volume    
     </div>
     <!--Volume tab (end)-->
     <!--Statistics tab (start)-->
diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index c0555e7eb24..b576328bab4 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -1,434 +1,439 @@
-<%@ page import="java.util.*" %>
-
-<%@ page import="com.cloud.utils.*" %>
-
-<%
-    Locale browserLocale = request.getLocale();
-    CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
-%>
-<!-- domain detail panel (begin) -->
-<div class="main_title" id="right_panel_header">
-    <!--  
-    <div class="main_titleicon">
-        <img src="images/title_snapshoticon.gif" alt="Instance" /></div>
-    -->
-    <h1>
-        Resources
-    </h1>
-</div>
-<div class="contentbox" id="right_panel_content">
-    <div class="info_detailbox errorbox" id="after_action_info_container" style="display: none">
-        <p id="after_action_info">
-        </p>
-    </div>
-    <div class="tabbox" style="margin-top: 15px;">
-        <div class="content_tabs on" id="tab_details">
-            <%=t.t("details")%></div>
-        <div class="content_tabs off" id="tab_network">
-            <%=t.t("network")%></div>
-        <div class="content_tabs off" id="tab_secondary_storage">
-            <%=t.t("secondary.storage")%></div>
-    </div>
-    <!-- Details tab (start)-->
-    <div id="tab_content_details">
-        <div class="grid_container">
-            <div class="grid_rows odd">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("ID")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="id">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows even">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("Name")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="name">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows odd">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("Accounts")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="redirect_to_account_page">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows even">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("Instances")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="redirect_to_instance_page">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows odd">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("Volume")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="redirect_to_volume_page">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Details tab (end)-->
-    <!-- Network tab (start)-->
-    <div style="display: none;" id="tab_content_network">
-        <div class="text_container">
-            <div class="network_dgbox">
-                <div class="networkdg_zonepanel">
-                    <div class="networkdg_zonebox">
-                        <div class="networkdg_zonecloud">
-                            <p>
-                                Zone 1</p>
-                        </div>
-                        <div class="networkdg_zoneconnect">
-                        </div>
-                    </div>
-                    <div class="networkswitchpanel">
-                        <div class="networkswitch_titlebox">
-                            <p>
-                                Guest VLAN 1000 -1001</p>
-                        </div>
-                        <div class="networkswitch_top">
-                        </div>
-                        <div class="networkswitch_midpanel">
-                            <div class="networkswitch_vlanpanel">
-                                <div class="networkswitch_vlanconnect">
-                                    <div class="networkswitch_vlan_infoicon">
-                                    </div>
-                                    <div class="networkswitch_vlan_detailsbox">
-                                        <div class="networkswitch_vlan_detailsbox_textbox">
-                                            <div class="networkswitch_vlan_detailsbox_textbox_label">
-                                                VM Group:</div>
-                                            <span>VLAN 10</span>
-                                        </div>
-                                        <div class="networkswitch_vlan_detailsbox_textbox">
-                                            <div class="networkswitch_vlan_detailsbox_textbox_label">
-                                                IP:</div>
-                                            <span>10.101.24.231</span>
-                                        </div>
-                                    </div>
-                                    <div class="networkswitch_typeicon direct">
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="networkswitch_vlanpanel">
-                                <div class="networkswitch_vlanconnect">
-                                    <div class="networkswitch_vlan_infoicon">
-                                    </div>
-                                    <div class="networkswitch_vlan_detailsbox">
-                                        <div class="networkswitch_vlan_detailsbox_textbox">
-                                            <div class="networkswitch_vlan_detailsbox_textbox_label">
-                                                VM Group:</div>
-                                            <span>VLAN 10</span>
-                                        </div>
-                                        <div class="networkswitch_vlan_detailsbox_textbox">
-                                            <div class="networkswitch_vlan_detailsbox_textbox_label">
-                                                IP:</div>
-                                            <span>10.101.24.231</span>
-                                        </div>
-                                    </div>
-                                    <div class="networkswitch_typeicon virtual">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="networkswitch_end">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Network tab (end)-->
-    <!-- Secondary Storage tab (start)-->
-    <div id="tab_content_secondary_storage" style="display: none">
-    </div>
-    <!-- Secondary Storage tab (end)-->
-</div>
-<!-- domain detail panel (end) -->
-<!-- treenode template (begin) -->
-<div id="treenode_template" class="tree_levelspanel" style="display: none">
-    <div class="tree_levelsbox" style="margin-left: 20px;">
-        <div id="domain_title_container" class="tree_levels">
-            <div id="domain_expand_icon" class="zonetree_closedarrows">
-            </div>
-            <div id="domain_name" class="tree_links">
-                Domain Name</div>
-        </div>
-        <div id="domain_children_container" style="display: none">
-        </div>
-    </div>
-</div>
-<!-- treenode template (end) -->
-<!-- admin account tab template (begin) -->
-<div class="grid_container" id="admin_account_tab_template" style="display: none">
-    <div class="grid_header">
-        <div class="grid_header_title" id="title">
-        </div>
-    </div>
-    <div class="grid_rows even">
-        <div class="grid_row_cell" style="width: 20%;">
-            <div class="row_celltitles">
-                <%=t.t("ID")%>:</div>
-        </div>
-        <div class="grid_row_cell" style="width: 79%;">
-            <div class="row_celltitles" id="id">
-            </div>
-        </div>
-    </div>
-    <div class="grid_rows odd">
-        <div class="grid_row_cell" style="width: 20%;">
-            <div class="row_celltitles">
-                <%=t.t("Role")%>:</div>
-        </div>
-        <div class="grid_row_cell" style="width: 79%;">
-            <div class="row_celltitles" id="role">
-            </div>
-        </div>
-    </div>
-    <div class="grid_rows even">
-        <div class="grid_row_cell" style="width: 20%;">
-            <div class="row_celltitles">
-                <%=t.t("Account")%>:</div>
-        </div>
-        <div class="grid_row_cell" style="width: 79%;">
-            <div class="row_celltitles" id="account">
-            </div>
-        </div>
-    </div>
-    <div class="grid_rows odd">
-        <div class="grid_row_cell" style="width: 20%;">
-            <div class="row_celltitles">
-                <%=t.t("Domain")%>:</div>
-        </div>
-        <div class="grid_row_cell" style="width: 79%;">
-            <div class="row_celltitles" id="domain">
-            </div>
-        </div>
-    </div>
-    <div class="grid_rows even">
-        <div class="grid_row_cell" style="width: 20%;">
-            <div class="row_celltitles">
-                <%=t.t("VMs")%>:</div>
-        </div>
-        <div class="grid_row_cell" style="width: 79%;">
-            <div class="row_celltitles" id="vm_total">
-            </div>
-        </div>
-    </div>
-    <div class="grid_rows odd">
-        <div class="grid_row_cell" style="width: 20%;">
-            <div class="row_celltitles">
-                <%=t.t("IPs")%>:</div>
-        </div>
-        <div class="grid_row_cell" style="width: 79%;">
-            <div class="row_celltitles" id="ip_total">
-            </div>
-        </div>
-    </div>
-    <div class="grid_rows even">
-        <div class="grid_row_cell" style="width: 20%;">
-            <div class="row_celltitles">
-                <%=t.t("Bytes.Received")%>:</div>
-        </div>
-        <div class="grid_row_cell" style="width: 79%;">
-            <div class="row_celltitles" id="bytes_received">
-            </div>
-        </div>
-    </div>
-    <div class="grid_rows odd">
-        <div class="grid_row_cell" style="width: 20%;">
-            <div class="row_celltitles">
-                <%=t.t("Bytes.Sent")%>:</div>
-        </div>
-        <div class="grid_row_cell" style="width: 79%;">
-            <div class="row_celltitles" id="bytes_sent">
-            </div>
-        </div>
-    </div>
-    <div class="grid_rows even">
-        <div class="grid_row_cell" style="width: 20%;">
-            <div class="row_celltitles">
-                <%=t.t("State")%>:</div>
-        </div>
-        <div class="grid_row_cell" style="width: 79%;">
-            <div class="row_celltitles" id="state">
-            </div>
-        </div>
-    </div>
-</div>
-<!-- admin account tab template (end) -->
-<!-- Zonetree Template (begin) -->
-<div class="zonetree_contentbox" id="zonetree" style="display: none">
-    <div id="zones_container">
-    </div>
-</div>
-<!-- Zonetree Template (end) -->
-<!-- Zone Template (begin) -->
-<div id="zone_template" style="display: none">
-    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
-        <div class="adding_animation">
-        </div>
-        <div class="adding_text">
-            Adding a zone &hellip;
-        </div>
-    </div>
-    <div id="row_container">
-        <div class="leftmenu_content" id="zone_node">
-            <div class="leftmenu_firstindent">
-                <div class="zonetree_closedarrows" id="zone_expand">
-                </div>
-                <div class="leftmenu_list_icons">
-                    <img src="images/zone_zoneicon.png" id="zone_icon" alt="Zone" /></div>
-                <span id="zone_label">Zone:</span> 
-                <strong>
-                    <span id="zone_name">Zone 1</span>
-                </strong>
-            </div>
-        </div>
-        <div id="zone_content" style="display: none">
-            <div id="pods_container">
-            </div>
-            <div id="systemvms_container">
-            </div>
-        </div>
-    </div>
-</div>
-<!-- Zone Template (end) -->
-<!-- Pod Template (begin) -->
-<div id="pod_template" style="display: none">
-    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
-        <div class="adding_animation">
-        </div>
-        <div class="adding_text">
-            Adding a pod &hellip;
-        </div>
-    </div>
-    <div id="row_container">
-        <div class="leftmenu_content" id="pod_node">
-            <div class="leftmenu_secondindent">
-                <div class="zonetree_closedarrows" id="pod_expand">
-                </div>
-                <div class="leftmenu_list_icons">
-                    <img src="images/zone_podicon.png" id="pod_icon" alt="Pod" /></div>
-                <span id="pod_label">Pod:</span> 
-                <strong>
-                    <span id="pod_name">Name of the Pod</span>
-                </strong>
-            </div>
-        </div>
-        <div id="pod_content" style="display: none">           
-            <div id="clusters_container">
-            </div>
-        </div>
-    </div>
-</div>
-<!-- Pod Template (end) -->
-<!-- Cluster Template (begin) -->
-<div id="cluster_template" style="display: none">
-    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
-        <div class="adding_animation">
-        </div>
-        <div class="adding_text">
-            Adding a cluster &hellip;
-        </div>
-    </div>
-    <div id="row_container">
-        <div class="leftmenu_content" id="cluster_node">
-            <div class="leftmenu_thirdindent">
-                <div class="zonetree_openarrows" id="cluster_expand">
-                </div>
-                <div class="leftmenu_list_icons">
-                    <img src="images/zone_clustericon.png" id="cluster_icon" alt="Cluster" /></div>
-                <span id="cluster_label"">Cluster:</span> 
-                <strong>
-                    <span id="cluster_name">(Name of the Cluster)</span>
-                </strong>
-            </div>
-        </div>
-        <div id="cluster_content">
-            <div id="hosts_container">
-            </div>
-            <div id="primarystorages_container">
-            </div>
-        </div>
-    </div>
-</div>
-<!-- Cluster Template (end) -->
-<!-- Host Template (begin) -->
-<div id="host_template" style="display: none">
-    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
-        <div class="adding_animation">
-        </div>
-        <div class="adding_text">
-            Adding a host &hellip;
-        </div>
-    </div>
-    <div id="row_container">
-        <div class="leftmenu_content" id="host_node">
-            <div class="leftmenu_fourthindent">
-                <div class="leftmenu_list_icons">
-                    <img src="images/zone_hosticon.png" id="host_icon" alt="Host" /></div>
-                <span id="host_label">Host:</span> 
-                <strong>
-                    <span id="host_name">(Name of the Host)</span>
-                </strong>
-            </div>
-        </div>
-    </div>
-</div>
-<!-- Host Template (end) -->
-<!-- Primary Storage Template (begin) -->
-<div id="primarystorage_template" style="display: none">
-    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
-        <div class="adding_animation">
-        </div>
-        <div class="adding_text">
-            Adding a primary storage &hellip;
-        </div>
-    </div>
-    <div id="row_container">
-        <div class="leftmenu_content" id="primarystorage_node">
-            <div class="leftmenu_fourthindent">
-                <div class="leftmenu_list_icons">
-                    <img src="images/zone_primarystorageicon.png" id="primarystorage_icon" alt="PrimaryStorage" /></div>
-                <span id="primarystorage_label">Storage:</span> 
-                <strong>
-                    <span id="primarystorage_name">(Name of the Primary Storage)</span>
-                </strong>
-            </div>
-        </div>
-    </div>
-</div>
-<!-- Primary Storage Template (end) -->
-<!-- SystemVM Template (begin) -->
-<div id="systemvm_template" style="display: none">
-    <div id="row_container">
-        <div class="leftmenu_content" id="systemvm_node">
-            <div class="leftmenu_secondindent">                
-                <div class="leftmenu_list_icons">
-                    <img src="images/zone_systemvmicon.png" id="systemvm_icon" alt="System VM" /></div>
-                <span id="systemvm_label">System VM:</span> 
-                <strong>
-                    <span id="systemvm_name">(System VM name)</span>
-                </strong>
-            </div>
-        </div>
-    </div>
-</div>
-<!-- SystemVM Template (end) -->
+<%@ page import="java.util.*" %>
+
+<%@ page import="com.cloud.utils.*" %>
+
+<%
+    Locale browserLocale = request.getLocale();
+    CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
+%>
+<!-- domain detail panel (begin) -->
+<div class="main_title" id="right_panel_header">
+    <!--  
+    <div class="main_titleicon">
+        <img src="images/title_snapshoticon.gif" alt="Instance" /></div>
+    -->
+    <h1>
+        Resources
+    </h1>
+</div>
+<div class="contentbox" id="right_panel_content">
+    <div class="info_detailbox errorbox" id="after_action_info_container" style="display: none">
+        <p id="after_action_info">
+        </p>
+    </div>
+    <div id="zone_page">
+        <div class="tabbox" style="margin-top: 15px;">
+            <div class="content_tabs on" id="tab_details">
+                <%=t.t("details")%></div>
+            <div class="content_tabs off" id="tab_network">
+                <%=t.t("network")%></div>
+            <div class="content_tabs off" id="tab_secondary_storage">
+                <%=t.t("secondary.storage")%></div>
+        </div>
+        <!-- Details tab (start)-->
+        <div id="tab_content_details">
+            <div class="grid_container">
+                <div class="grid_rows odd">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("ID")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="id">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("Name")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="name">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows odd">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("Accounts")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="redirect_to_account_page">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("Instances")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="redirect_to_instance_page">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows odd">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("Volume")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="redirect_to_volume_page">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Details tab (end)-->
+        <!-- Network tab (start)-->
+        <div style="display: none;" id="tab_content_network">
+            <div class="text_container">
+                <div class="network_dgbox">
+                    <div class="networkdg_zonepanel">
+                        <div class="networkdg_zonebox">
+                            <div class="networkdg_zonecloud">
+                                <p>
+                                    Zone 1</p>
+                            </div>
+                            <div class="networkdg_zoneconnect">
+                            </div>
+                        </div>
+                        <div class="networkswitchpanel">
+                            <div class="networkswitch_titlebox">
+                                <p>
+                                    Guest VLAN 1000 -1001</p>
+                            </div>
+                            <div class="networkswitch_top">
+                            </div>
+                            <div class="networkswitch_midpanel">
+                                <div class="networkswitch_vlanpanel">
+                                    <div class="networkswitch_vlanconnect">
+                                        <div class="networkswitch_vlan_infoicon">
+                                        </div>
+                                        <div class="networkswitch_vlan_detailsbox">
+                                            <div class="networkswitch_vlan_detailsbox_textbox">
+                                                <div class="networkswitch_vlan_detailsbox_textbox_label">
+                                                    VM Group:</div>
+                                                <span>VLAN 10</span>
+                                            </div>
+                                            <div class="networkswitch_vlan_detailsbox_textbox">
+                                                <div class="networkswitch_vlan_detailsbox_textbox_label">
+                                                    IP:</div>
+                                                <span>10.101.24.231</span>
+                                            </div>
+                                        </div>
+                                        <div class="networkswitch_typeicon direct">
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="networkswitch_vlanpanel">
+                                    <div class="networkswitch_vlanconnect">
+                                        <div class="networkswitch_vlan_infoicon">
+                                        </div>
+                                        <div class="networkswitch_vlan_detailsbox">
+                                            <div class="networkswitch_vlan_detailsbox_textbox">
+                                                <div class="networkswitch_vlan_detailsbox_textbox_label">
+                                                    VM Group:</div>
+                                                <span>VLAN 10</span>
+                                            </div>
+                                            <div class="networkswitch_vlan_detailsbox_textbox">
+                                                <div class="networkswitch_vlan_detailsbox_textbox_label">
+                                                    IP:</div>
+                                                <span>10.101.24.231</span>
+                                            </div>
+                                        </div>
+                                        <div class="networkswitch_typeicon virtual">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="networkswitch_end">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Network tab (end)-->
+        <!-- Secondary Storage tab (start)-->
+        <div id="tab_content_secondary_storage" style="display: none">
+            Secondary Storage
+        </div>
+        <!-- Secondary Storage tab (end)-->
+    </div>
+    <div id="pod_page" style="display:none">
+        Pod Page
+    </div>
+    <div id="cluster_page" style="display:none">
+        Cluster Page
+    </div>
+    <div id="host_page" style="display:none">
+        Host page
+    </div>
+    <div id="primarystorage_page" style="display:none">
+        Primary Storage Page
+    </div>
+    <div id="systemvm_page" style="display:none">
+        System VM Page
+    </div>    
+</div>
+<!-- domain detail panel (end) -->
+<!-- treenode template (begin) -->
+<div id="treenode_template" class="tree_levelspanel" style="display: none">
+    <div class="tree_levelsbox" style="margin-left: 20px;">
+        <div id="domain_title_container" class="tree_levels">
+            <div id="domain_expand_icon" class="zonetree_closedarrows">
+            </div>
+            <div id="domain_name" class="tree_links">
+                Domain Name</div>
+        </div>
+        <div id="domain_children_container" style="display: none">
+        </div>
+    </div>
+</div>
+<!-- treenode template (end) -->
+<!-- admin account tab template (begin) -->
+<div class="grid_container" id="admin_account_tab_template" style="display: none">
+    <div class="grid_header">
+        <div class="grid_header_title" id="title">
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("ID")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="id">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("Role")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="role">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("Account")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="account">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("Domain")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="domain">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("VMs")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="vm_total">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("IPs")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="ip_total">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("Bytes.Received")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="bytes_received">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("Bytes.Sent")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="bytes_sent">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("State")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="state">
+            </div>
+        </div>
+    </div>
+</div>
+<!-- admin account tab template (end) -->
+<!-- Zonetree Template (begin) -->
+<div class="zonetree_contentbox" id="zonetree" style="display: none">
+    <div id="zones_container">
+    </div>
+</div>
+<!-- Zonetree Template (end) -->
+<!-- Zone Template (begin) -->
+<div id="zone_template" style="display: none">
+    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
+        <div class="adding_animation">
+        </div>
+        <div class="adding_text">
+            Adding a zone &hellip;
+        </div>
+    </div>
+    <div id="row_container">
+        <div class="leftmenu_content" id="zone_node">
+            <div class="leftmenu_firstindent">
+                <div class="zonetree_closedarrows" id="zone_expand">
+                </div>
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_zoneicon.png" id="zone_icon" alt="Zone" /></div>
+                <span id="zone_label">Zone:</span> <strong><span id="zone_name">Zone 1</span> </strong>
+            </div>
+        </div>
+        <div id="zone_content" style="display: none">
+            <div id="pods_container">
+            </div>
+            <div id="systemvms_container">
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Zone Template (end) -->
+<!-- Pod Template (begin) -->
+<div id="pod_template" style="display: none">
+    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
+        <div class="adding_animation">
+        </div>
+        <div class="adding_text">
+            Adding a pod &hellip;
+        </div>
+    </div>
+    <div id="row_container">
+        <div class="leftmenu_content" id="pod_node">
+            <div class="leftmenu_secondindent">
+                <div class="zonetree_closedarrows" id="pod_expand">
+                </div>
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_podicon.png" id="pod_icon" alt="Pod" /></div>
+                <span id="pod_label">Pod:</span> <strong><span id="pod_name">Name of the Pod</span>
+                </strong>
+            </div>
+        </div>
+        <div id="pod_content" style="display: none">
+            <div id="clusters_container">
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Pod Template (end) -->
+<!-- Cluster Template (begin) -->
+<div id="cluster_template" style="display: none">
+    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
+        <div class="adding_animation">
+        </div>
+        <div class="adding_text">
+            Adding a cluster &hellip;
+        </div>
+    </div>
+    <div id="row_container">
+        <div class="leftmenu_content" id="cluster_node">
+            <div class="leftmenu_thirdindent">
+                <div class="zonetree_openarrows" id="cluster_expand">
+                </div>
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_clustericon.png" id="cluster_icon" alt="Cluster" /></div>
+                <span id="cluster_label"">Cluster:</span> <strong><span id="cluster_name">(Name of the
+                    Cluster)</span> </strong>
+            </div>
+        </div>
+        <div id="cluster_content">
+            <div id="hosts_container">
+            </div>
+            <div id="primarystorages_container">
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Cluster Template (end) -->
+<!-- Host Template (begin) -->
+<div id="host_template" style="display: none">
+    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
+        <div class="adding_animation">
+        </div>
+        <div class="adding_text">
+            Adding a host &hellip;
+        </div>
+    </div>
+    <div id="row_container">
+        <div class="leftmenu_content" id="host_node">
+            <div class="leftmenu_fourthindent">
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_hosticon.png" id="host_icon" alt="Host" /></div>
+                <span id="host_label">Host:</span> <strong><span id="host_name">(Name of the Host)</span>
+                </strong>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Host Template (end) -->
+<!-- Primary Storage Template (begin) -->
+<div id="primarystorage_template" style="display: none">
+    <div class="adding_loading" style="height: 25px; display: none" id="loading_container">
+        <div class="adding_animation">
+        </div>
+        <div class="adding_text">
+            Adding a primary storage &hellip;
+        </div>
+    </div>
+    <div id="row_container">
+        <div class="leftmenu_content" id="primarystorage_node">
+            <div class="leftmenu_fourthindent">
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_primarystorageicon.png" id="primarystorage_icon" alt="PrimaryStorage" /></div>
+                <span id="primarystorage_label">Storage:</span> <strong><span id="primarystorage_name">
+                    (Name of the Primary Storage)</span> </strong>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Primary Storage Template (end) -->
+<!-- SystemVM Template (begin) -->
+<div id="systemvm_template" style="display: none">
+    <div id="row_container">
+        <div class="leftmenu_content" id="systemvm_node">
+            <div class="leftmenu_secondindent">
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_systemvmicon.png" id="systemvm_icon" alt="System VM" /></div>
+                <span id="systemvm_label">System VM:</span> <strong><span id="systemvm_name">(System
+                    VM name)</span> </strong>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- SystemVM Template (end) -->
diff --git a/ui/new/scripts/cloud.core2.domain.js b/ui/new/scripts/cloud.core2.domain.js
index 12d7a4f828c..e93bbb169fa 100644
--- a/ui/new/scripts/cloud.core2.domain.js
+++ b/ui/new/scripts/cloud.core2.domain.js
@@ -238,8 +238,8 @@ function afterLoadDomainJSP() {
 	refreshWholeTree(defaultRootDomainId, defaultRootLevel);
 		
 	//***** switch between different tabs (begin) ********************************************************************
-    var tabArray = ["tab_details", "tab_resource_limits", "tab_admin_account"];
-    var tabContentArray = ["tab_content_details", "tab_content_resource_limits", "tab_content_admin_account"];
+    var tabArray = [$("#tab_details"), $("#tab_resource_limits"), $("#tab_admin_account")];
+    var tabContentArray = [$("#tab_content_details"), $("#tab_content_resource_limits"), $("#tab_content_admin_account")];
     switchBetweenDifferentTabs(tabArray, tabContentArray);       
     //***** switch between different tabs (end) **********************************************************************
 	    
diff --git a/ui/new/scripts/cloud.core2.instance.js b/ui/new/scripts/cloud.core2.instance.js
index 860d685d10c..9ed5b5b2e6e 100644
--- a/ui/new/scripts/cloud.core2.instance.js
+++ b/ui/new/scripts/cloud.core2.instance.js
@@ -47,8 +47,8 @@ function clickInstanceGroupHeader($arrowIcon) {
         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"];
+        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) **********************************************************************
         
diff --git a/ui/new/scripts/cloud.core2.ipaddress.js b/ui/new/scripts/cloud.core2.ipaddress.js
index eb7a04cd702..f4c143ec02c 100644
--- a/ui/new/scripts/cloud.core2.ipaddress.js
+++ b/ui/new/scripts/cloud.core2.ipaddress.js
@@ -1,8 +1,8 @@
 //***** baseline (begin) *******************************************************************************************************************
 function afterLoadIpJSP() {
     //***** switch between different tabs (begin) ********************************************************************
-    var tabArray = ["tab_details", "tab_port_forwarding", "tab_load_balancer"];
-    var tabContentArray = ["tab_content_details", "tab_content_port_forwarding", "tab_content_load_balancer"];
+    var tabArray = [$("#tab_details"), $("#tab_port_forwarding"), $("#tab_load_balancer")];
+    var tabContentArray = [$("#tab_content_details"), $("#tab_content_port_forwarding"), $("#tab_content_load_balancer")];
     switchBetweenDifferentTabs(tabArray, tabContentArray);       
     //***** switch between different tabs (end) **********************************************************************
         
diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js
index ae5984db1ba..927355c91c9 100644
--- a/ui/new/scripts/cloud.core2.js
+++ b/ui/new/scripts/cloud.core2.js
@@ -585,17 +585,17 @@ function switchBetweenDifferentTabs(tabArray, tabContentArray) {
 }
 
 function switchToTab(tabIndex, tabArray, tabContentArray) {
-  $("#"+tabArray[tabIndex]).bind("click", function(event){               
-        $("#"+tabArray[tabIndex]).removeClass("off").addClass("on"); //current tab turns on
+  tabArray[tabIndex].bind("click", function(event){               
+        tabArray[tabIndex].removeClass("off").addClass("on"); //current tab turns on
         for(var k=0; k<tabArray.length; k++) { 
             if(k != tabIndex)
-                $("#"+tabArray[k]).removeClass("on").addClass("off");  //other tabs turns off
+                tabArray[k].removeClass("on").addClass("off");  //other tabs turns off
         }                    
                         
-        $("#"+tabContentArray[tabIndex]).show();    //current tab content shows             
+        tabContentArray[tabIndex].show();    //current tab content shows             
         for(var k=0; k<tabContentArray.length; k++) {
             if(k != tabIndex)
-                $("#"+tabContentArray[k]).hide();   //other tab content hide
+                tabContentArray[k].hide();   //other tab content hide
         }   
         return false;
     });   
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index ee09f6dc0f4..d467c85146c 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -1,9 +1,11 @@
 function afterLoadResourceJSP() {
-    //***** switch between different tabs (begin) ********************************************************************
-    var tabArray = ["tab_details", "tab_network", "tab_secondary_storage"];
-    var tabContentArray = ["tab_content_details", "tab_content_network", "tab_content_secondary_storage"];
+    var $zonePage = $("#zone_page");
+
+    //***** switch between different tabs in zone page (begin) ********************************************************************
+    var tabArray = [$zonePage.find("#tab_details"), $zonePage.find("#tab_network"), $zonePage.find("#tab_secondary_storage")];
+    var tabContentArray = [$zonePage.find("#tab_content_details"), $zonePage.find("#tab_content_network"), $zonePage.find("#tab_content_secondary_storage")];
     switchBetweenDifferentTabs(tabArray, tabContentArray);       
-    //***** switch between different tabs (end) **********************************************************************
+    //***** switch between different tabs in zone page (end) **********************************************************************
   
     var forceLogout = true;  // We force a logout only if the user has first added a POD for the very first time 
     var $zoneetree1 = $("#zonetree").clone().attr("id", "zonetree1");  
@@ -198,6 +200,9 @@ function afterLoadResourceJSP() {
 			case "zone_name":	
 			    $zoneetree1.find(".selected").removeClass("selected");
 			    target.parent().parent().parent().addClass("selected");	
+			    
+			    //???
+			    
 			    var obj = {"id": target.data("id"), "name": target.data("name"), "dns1": target.data("dns1"), "dns2": target.data("dns2"), "internaldns1": target.data("internaldns1"), "internaldns2": target.data("internaldns2"), "vlan": target.data("vlan"), "guestcidraddress": target.data("guestcidraddress")};
 				//zoneObjectToRightPanel(obj);				    		   			    
 			    break;
diff --git a/ui/new/scripts/cloud.core2.volume.js b/ui/new/scripts/cloud.core2.volume.js
index 32126c3b237..141df633540 100644
--- a/ui/new/scripts/cloud.core2.volume.js
+++ b/ui/new/scripts/cloud.core2.volume.js
@@ -364,8 +364,8 @@ function afterLoadVolumeJSP() {
 	// *** recurring snapshot dialog - event binding (end) ******************************	    
          
     //***** switch between different tabs (begin) ********************************************************************
-    var tabArray = ["tab_details", "tab_snapshot"];
-    var tabContentArray = ["tab_content_details", "tab_content_snapshot"];
+    var tabArray = [$("#tab_details"), $("#tab_snapshot")];
+    var tabContentArray = [$("#tab_content_details"), $("#tab_content_snapshot")];
     switchBetweenDifferentTabs(tabArray, tabContentArray);       
     //***** switch between different tabs (end) **********************************************************************    
 }

From f06eb93c555331314e602c137e3274cc63092077 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Wed, 13 Oct 2010 11:12:21 -0700
Subject: [PATCH 4/7] new UI - resources page - clicking differet type of node
 will show different type of page.

---
 ui/new/jsp/resource.jsp                |  2 +-
 ui/new/scripts/cloud.core2.resource.js | 31 +++++++++++++++++++++-----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index b576328bab4..6bc32bf05a2 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -21,7 +21,7 @@
         <p id="after_action_info">
         </p>
     </div>
-    <div id="zone_page">
+    <div id="zone_page" style="display:none">
         <div class="tabbox" style="margin-top: 15px;">
             <div class="content_tabs on" id="tab_details">
                 <%=t.t("details")%></div>
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index d467c85146c..740d0c8e7c6 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -1,5 +1,21 @@
 function afterLoadResourceJSP() {
     var $zonePage = $("#zone_page");
+    var $podPage = $("#pod_page");
+    var $clusterPage = $("#cluster_page");
+    var $hostPage = $("#host_page");
+    var $primarystoragePage = $("#primarystorage_page");
+    var $systemvmPage = $("#systemvm_page");
+    
+    var pageArray = [$zonePage, $podPage, $clusterPage, $hostPage, $primarystoragePage, $systemvmPage];
+    
+    function showPage($pageToShow) {        
+        for(var i=0; i<pageArray.length; i++) {
+            if(pageArray[i].attr("id") == $pageToShow.attr("id"))
+                pageArray[i].show();
+            else
+                pageArray[i].hide();
+        }            
+    }
 
     //***** switch between different tabs in zone page (begin) ********************************************************************
     var tabArray = [$zonePage.find("#tab_details"), $zonePage.find("#tab_network"), $zonePage.find("#tab_secondary_storage")];
@@ -81,7 +97,7 @@ function afterLoadResourceJSP() {
     
     function podJSONToTemplate(json, template) {	
         var podid = json.id;
-        template.attr("id", "pod_" + podid);  //???
+        template.attr("id", "pod_" + podid);  
     	    
 		var ipRange = getIpRange(json.startip, json.endip);			
 		template.data("id", podid).data("name", json.name);
@@ -199,10 +215,8 @@ function afterLoadResourceJSP() {
 				break;	
 			case "zone_name":	
 			    $zoneetree1.find(".selected").removeClass("selected");
-			    target.parent().parent().parent().addClass("selected");	
-			    
-			    //???
-			    
+			    target.parent().parent().parent().addClass("selected");				    
+			    showPage($zonePage);	    
 			    var obj = {"id": target.data("id"), "name": target.data("name"), "dns1": target.data("dns1"), "dns2": target.data("dns2"), "internaldns1": target.data("internaldns1"), "internaldns2": target.data("internaldns2"), "vlan": target.data("vlan"), "guestcidraddress": target.data("guestcidraddress")};
 				//zoneObjectToRightPanel(obj);				    		   			    
 			    break;
@@ -220,6 +234,7 @@ function afterLoadResourceJSP() {
 			case "pod_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
 				target.parent().parent().parent().addClass("selected");
+				showPage($podPage);
 			    //var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
 				//podObjectToRightPanel(obj);				
 				break;
@@ -238,6 +253,7 @@ function afterLoadResourceJSP() {
 			case "cluster_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
 			    target.parent().parent().parent().addClass("selected");
+			    showPage($clusterPage);
 			    //var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
 				//clusterObjectToRightPanel(obj);				
 				break;	
@@ -256,6 +272,7 @@ function afterLoadResourceJSP() {
 			case "host_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
 			    target.parent().parent().parent().addClass("selected");
+			    showPage($hostPage);
 				//var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
 				//hostObjectToRightPanel(obj);				
 				break;	
@@ -274,6 +291,7 @@ function afterLoadResourceJSP() {
 			case "primarystorage_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
 			    target.parent().parent().parent().addClass("selected");
+			    showPage($primarystoragePage);
 				//var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
 				//primarystorageObjectToRightPanel(obj);				
 				break;
@@ -281,7 +299,8 @@ function afterLoadResourceJSP() {
 						
 			case "systemvm_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");			    		    
-			    target.parent().parent().parent().addClass("selected");			    
+			    target.parent().parent().parent().addClass("selected");		
+			    showPage($systemvmPage);
 				//var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
 				//systemvmObjectToRightPanel(obj);				
 				break;

From 8a413180fee4dc4b335b884f3814718ac3d92d24 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Wed, 13 Oct 2010 11:43:26 -0700
Subject: [PATCH 5/7] new UI - resources page - implement zone details tab.

---
 .../classes/resources/resource.properties     |  6 +++
 ui/new/jsp/resource.jsp                       | 48 +++++++++++++++----
 ui/new/scripts/cloud.core2.resource.js        | 48 ++++++++++++-------
 3 files changed, 77 insertions(+), 25 deletions(-)

diff --git a/client/WEB-INF/classes/resources/resource.properties b/client/WEB-INF/classes/resources/resource.properties
index b65212e5771..b8a09221fc5 100644
--- a/client/WEB-INF/classes/resources/resource.properties
+++ b/client/WEB-INF/classes/resources/resource.properties
@@ -64,6 +64,12 @@ value = Value
 description = Description
 category = Category
 hypervisor = Hypervisor
+dns1 = DNS 1
+dns2 = DNS 2
+internaldns1 = Internal DNS 1
+internaldns2 = Internal DNS 2
+vlan = VLAN
+guestcidraddress = Guest CIDR
 
 disk.offering = Disk Offering
 copy.ISO.to = Copy ISO to
diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index 6bc32bf05a2..15a438fa8f3 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -46,43 +46,73 @@
                 <div class="grid_rows even">
                     <div class="grid_row_cell" style="width: 20%;">
                         <div class="row_celltitles">
-                            <%=t.t("Name")%>:</div>
+                            <%=t.t("name")%>:</div>
                     </div>
                     <div class="grid_row_cell" style="width: 79%;">
                         <div class="row_celltitles" id="name">
                         </div>
                     </div>
                 </div>
-                <div class="grid_rows odd">
+                <div class="grid_rows even">
                     <div class="grid_row_cell" style="width: 20%;">
                         <div class="row_celltitles">
-                            <%=t.t("Accounts")%>:</div>
+                            <%=t.t("dns1")%>:</div>
                     </div>
                     <div class="grid_row_cell" style="width: 79%;">
-                        <div class="row_celltitles" id="redirect_to_account_page">
+                        <div class="row_celltitles" id="dns1">
                         </div>
                     </div>
                 </div>
                 <div class="grid_rows even">
                     <div class="grid_row_cell" style="width: 20%;">
                         <div class="row_celltitles">
-                            <%=t.t("Instances")%>:</div>
+                            <%=t.t("dns2")%>:</div>
                     </div>
                     <div class="grid_row_cell" style="width: 79%;">
-                        <div class="row_celltitles" id="redirect_to_instance_page">
+                        <div class="row_celltitles" id="dns2">
                         </div>
                     </div>
                 </div>
-                <div class="grid_rows odd">
+                <div class="grid_rows even">
                     <div class="grid_row_cell" style="width: 20%;">
                         <div class="row_celltitles">
-                            <%=t.t("Volume")%>:</div>
+                            <%=t.t("internaldns1")%>:</div>
                     </div>
                     <div class="grid_row_cell" style="width: 79%;">
-                        <div class="row_celltitles" id="redirect_to_volume_page">
+                        <div class="row_celltitles" id="internaldns1">
                         </div>
                     </div>
                 </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("internaldns2")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="internaldns2">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("vlan")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="vlan">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("guestcidraddress")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="guestcidraddress">
+                        </div>
+                    </div>
+                </div>                
             </div>
         </div>
         <!-- Details tab (end)-->
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index 740d0c8e7c6..0f97c6c9c44 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -1,10 +1,11 @@
 function afterLoadResourceJSP() {
-    var $zonePage = $("#zone_page");
-    var $podPage = $("#pod_page");
-    var $clusterPage = $("#cluster_page");
-    var $hostPage = $("#host_page");
-    var $primarystoragePage = $("#primarystorage_page");
-    var $systemvmPage = $("#systemvm_page");
+    var $rightPanelConent = $("#right_panel_content");
+    var $zonePage = $rightPanelConent.find("#zone_page");
+    var $podPage = $rightPanelConent.find("#pod_page");
+    var $clusterPage = $rightPanelConent.find("#cluster_page");
+    var $hostPage = $rightPanelConent.find("#host_page");
+    var $primarystoragePage = $rightPanelConent.find("#primarystorage_page");
+    var $systemvmPage = $rightPanelConent.find("#systemvm_page");
     
     var pageArray = [$zonePage, $podPage, $clusterPage, $hostPage, $primarystoragePage, $systemvmPage];
     
@@ -16,13 +17,8 @@ function afterLoadResourceJSP() {
                 pageArray[i].hide();
         }            
     }
-
-    //***** switch between different tabs in zone page (begin) ********************************************************************
-    var tabArray = [$zonePage.find("#tab_details"), $zonePage.find("#tab_network"), $zonePage.find("#tab_secondary_storage")];
-    var tabContentArray = [$zonePage.find("#tab_content_details"), $zonePage.find("#tab_content_network"), $zonePage.find("#tab_content_secondary_storage")];
-    switchBetweenDifferentTabs(tabArray, tabContentArray);       
-    //***** switch between different tabs in zone page (end) **********************************************************************
-  
+   
+    //***** build zone tree (begin) ***********************************************************************************************
     var forceLogout = true;  // We force a logout only if the user has first added a POD for the very first time 
     var $zoneetree1 = $("#zonetree").clone().attr("id", "zonetree1");  
     $("#midmenu_container").append($zoneetree1.show());
@@ -218,7 +214,7 @@ function afterLoadResourceJSP() {
 			    target.parent().parent().parent().addClass("selected");				    
 			    showPage($zonePage);	    
 			    var obj = {"id": target.data("id"), "name": target.data("name"), "dns1": target.data("dns1"), "dns2": target.data("dns2"), "internaldns1": target.data("internaldns1"), "internaldns2": target.data("internaldns2"), "vlan": target.data("vlan"), "guestcidraddress": target.data("guestcidraddress")};
-				//zoneObjectToRightPanel(obj);				    		   			    
+				zoneJsonToDetailsTab(obj);							    		   			    
 			    break;
 			
 			
@@ -311,7 +307,6 @@ function afterLoadResourceJSP() {
 		}
 		return false;
 	});
-
     
     function getIpRange(startip, endip) {
 	    var ipRange = "";
@@ -322,6 +317,27 @@ function afterLoadResourceJSP() {
 			ipRange = ipRange + "-" + endip;
 		}		
 		return ipRange;
-	}	
+	}		
+	//***** build zone tree (end) *************************************************************************************************
+	
+	//***** zone page (begin) *****************************************************************************************************
+	//switch between different tabs in zone page 
+    var tabArray = [$zonePage.find("#tab_details"), $zonePage.find("#tab_network"), $zonePage.find("#tab_secondary_storage")];
+    var tabContentArray = [$zonePage.find("#tab_content_details"), $zonePage.find("#tab_content_network"), $zonePage.find("#tab_content_secondary_storage")];
+    switchBetweenDifferentTabs(tabArray, tabContentArray);       
+  
+    function zoneJsonToDetailsTab(jsonObj) {	    
+	    var $detailsTab = $zonePage.find("#tab_content_details");   
+        $detailsTab.data("jsonObj", jsonObj);           
+        $detailsTab.find("#id").text(fromdb(jsonObj.id));
+        $detailsTab.find("#name").text(fromdb(jsonObj.name));
+        $detailsTab.find("#dns1").text(fromdb(jsonObj.dns1));
+        $detailsTab.find("#dns2").text(fromdb(jsonObj.dns2));
+        $detailsTab.find("#internaldns1").text(fromdb(jsonObj.internaldns1));
+        $detailsTab.find("#internaldns2").text(fromdb(jsonObj.internaldns2));	
+        $detailsTab.find("#vlan").text(fromdb(jsonObj.vlan));
+        $detailsTab.find("#guestcidraddress").text(fromdb(jsonObj.guestcidraddress));     
+	}	  
+    //***** zone page (end) *******************************************************************************************************
 }
 

From 9fbc8fd1127642e50b407ede10be1b1443d45438 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Wed, 13 Oct 2010 14:39:27 -0700
Subject: [PATCH 6/7] new UI - resources page - implement pod details tab.

---
 .../classes/resources/resource.properties     |  3 +
 ui/new/jsp/resource.jsp                       | 64 ++++++++++++++++++-
 ui/new/scripts/cloud.core2.resource.js        | 21 +++++-
 3 files changed, 83 insertions(+), 5 deletions(-)

diff --git a/client/WEB-INF/classes/resources/resource.properties b/client/WEB-INF/classes/resources/resource.properties
index b8a09221fc5..2dab056acab 100644
--- a/client/WEB-INF/classes/resources/resource.properties
+++ b/client/WEB-INF/classes/resources/resource.properties
@@ -70,6 +70,9 @@ internaldns1 = Internal DNS 1
 internaldns2 = Internal DNS 2
 vlan = VLAN
 guestcidraddress = Guest CIDR
+private.cidr = Private CIDR
+private.ip.range = Private IP Range
+gateway = Gateway
 
 disk.offering = Disk Offering
 copy.ISO.to = Copy ISO to
diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index 15a438fa8f3..549329828d6 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -192,8 +192,68 @@
         </div>
         <!-- Secondary Storage tab (end)-->
     </div>
-    <div id="pod_page" style="display:none">
-        Pod Page
+    <div id="pod_page" style="display:none">        
+        <div class="tabbox" style="margin-top: 15px;">
+            <div class="content_tabs on" id="tab_details">
+                <%=t.t("details")%></div>           
+        </div>
+        <!-- Details tab (start)-->
+        <div id="tab_content_details">
+            <div class="grid_container">
+                <div class="grid_rows odd">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("ID")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="id">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("name")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="name">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("private.cidr")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="cidr">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("private.ip.range")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="ipRange">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("gateway")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="gateway">
+                        </div>
+                    </div>
+                </div> 
+                          
+            </div>
+        </div>
+        <!-- Details tab (end)-->
     </div>
     <div id="cluster_page" style="display:none">
         Cluster Page
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index 0f97c6c9c44..3913b88a9de 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -231,8 +231,8 @@ function afterLoadResourceJSP() {
 				$zoneetree1.find(".selected").removeClass("selected");
 				target.parent().parent().parent().addClass("selected");
 				showPage($podPage);
-			    //var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
-				//podObjectToRightPanel(obj);				
+			    var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")};
+				podJsonToDetailsTab(obj);				
 				break;
 				
 			
@@ -314,7 +314,7 @@ function afterLoadResourceJSP() {
 			ipRange = startip;
 		}
 		if (endip != null && endip.length > 0) {
-			ipRange = ipRange + "-" + endip;
+			ipRange = ipRange + " - " + endip;
 		}		
 		return ipRange;
 	}		
@@ -339,5 +339,20 @@ function afterLoadResourceJSP() {
         $detailsTab.find("#guestcidraddress").text(fromdb(jsonObj.guestcidraddress));     
 	}	  
     //***** zone page (end) *******************************************************************************************************
+    
+    //***** pod page (begin) ******************************************************************************************************
+    	function podJsonToDetailsTab(jsonObj) {	    
+	    var $detailsTab = $podPage.find("#tab_content_details");   
+        $detailsTab.data("jsonObj", jsonObj);           
+        $detailsTab.find("#id").text(fromdb(jsonObj.id));
+        $detailsTab.find("#name").text(fromdb(jsonObj.name));
+        $detailsTab.find("#cidr").text(fromdb(jsonObj.cidr));        
+        $detailsTab.find("#ipRange").text(fromdb(jsonObj.ipRange));
+        $detailsTab.find("#gateway").text(fromdb(jsonObj.gateway));  
+        
+        //if (getDirectAttachUntaggedEnabled() == "true") 
+		//	$("#submenu_content_zones #action_add_directip_vlan").data("type", "pod").data("id", obj.id).data("name", obj.name).data("zoneid", obj.zoneid).show();		
+	}	
+	//***** pod page (end) ********************************************************************************************************
 }
 

From 9580317518342d41ab6c1ada8dfa6d476a9fe9b4 Mon Sep 17 00:00:00 2001
From: NIKITA <nikita@cloud.com>
Date: Wed, 13 Oct 2010 16:06:22 -0700
Subject: [PATCH 7/7] Revised UI for left menu

---
 ui/new/css/main.css                           |  111 +-
 ui/new/images/alert_leftmenuicon.png          |  Bin 0 -> 545 bytes
 ui/new/images/destroyvm_actionicon.png        |  Bin 0 -> 1820 bytes
 ui/new/images/leftmenu_closedarrow.png        |  Bin 257 -> 204 bytes
 ui/new/images/leftmenu_closedarrow_nonexp.png |  Bin 0 -> 172 bytes
 ui/new/images/leftmenu_expanded.gif           |  Bin 0 -> 393 bytes
 ui/new/images/leftmenu_highlighted.gif        |  Bin 0 -> 171 bytes
 ui/new/images/leftmenu_openarrow.png          |  Bin 207 -> 202 bytes
 ui/new/images/leftmenu_white_closedarrow.png  |  Bin 0 -> 190 bytes
 .../leftmenu_white_closedarrow_nonexp.png     |  Bin 0 -> 194 bytes
 ui/new/images/leftmenu_white_openedarrow.png  |  Bin 0 -> 183 bytes
 ui/new/images/rebootvm_actionicon.png         |  Bin 0 -> 1784 bytes
 ui/new/images/startvm_actionicon.png          |  Bin 0 -> 1753 bytes
 ui/new/images/stopvm_actionicon.png           |  Bin 0 -> 1719 bytes
 ui/new/images/zone_zoneicon.png               |  Bin 3981 -> 3801 bytes
 ui/new/index.jsp                              |  532 +++---
 ui/new/scripts/cloud.core2.init.js            | 1514 ++++++++---------
 17 files changed, 1191 insertions(+), 966 deletions(-)
 create mode 100644 ui/new/images/alert_leftmenuicon.png
 create mode 100644 ui/new/images/destroyvm_actionicon.png
 create mode 100644 ui/new/images/leftmenu_closedarrow_nonexp.png
 create mode 100644 ui/new/images/leftmenu_expanded.gif
 create mode 100644 ui/new/images/leftmenu_highlighted.gif
 create mode 100644 ui/new/images/leftmenu_white_closedarrow.png
 create mode 100644 ui/new/images/leftmenu_white_closedarrow_nonexp.png
 create mode 100644 ui/new/images/leftmenu_white_openedarrow.png
 create mode 100644 ui/new/images/rebootvm_actionicon.png
 create mode 100644 ui/new/images/startvm_actionicon.png
 create mode 100644 ui/new/images/stopvm_actionicon.png

diff --git a/ui/new/css/main.css b/ui/new/css/main.css
index 239ce943856..243a8643439 100644
--- a/ui/new/css/main.css
+++ b/ui/new/css/main.css
@@ -1258,7 +1258,27 @@ a:visited {
 	margin:0;
 	padding:0;
 	border-bottom:1px dashed #92a7b7;
-	
+}
+
+.leftmenu_expandedbox{
+	width:220px;
+	height:auto;
+	float:left;
+	background:#7f9bae url(../images/leftmenu_expanded.gif) repeat-x top left;
+	border-bottom:1px solid #FFF;
+	margin:0;
+	padding:0;
+	overflow-x:scoll;
+	overflow-x:auto;
+	overflow-y:hidden;
+}
+
+.leftmenu_expandedlist{
+	width:100%;
+	height:auto;
+	float:left; 
+	margin:0;
+	padding:0;
 }
 
 .leftmenu_content{
@@ -1275,11 +1295,17 @@ a:visited {
 	padding:0 0 3px 0;
 }
 
+				
+
 .leftmenu_content.selected{
 	color:#FFF;
 	background:#626262 url(../images/leftmenu_hover.gif) repeat-x top left;
 }
 
+.leftmenu_content.highlighted{
+	background:#a9b8c3 url(../images/leftmenu_highlighted.gif) repeat-x top left;
+}
+
 /*
 .leftmenu_content:hover{
 	background:#626262 url(../images/leftmenu_hover.gif) repeat-x top left;
@@ -1296,7 +1322,8 @@ a:visited {
 }
 
 .leftmenu_firstindent{
-	width:200px;
+	min-width:200px;
+	max-width:auto;
 	height:auto;
 	float:left;
 	margin:7px 0 0 10px;
@@ -1305,32 +1332,70 @@ a:visited {
 }
 
 .leftmenu_secondindent{
-	width:180px;
+	min-width:180px;
+	max-width:auto;
 	height:auto;
 	float:left;
-	margin:7px 0 0 25px;
+	color:#FFF;
+	margin:7px 0 0 30px;
 	display:inline;
 	padding:0;
 }
 
 .leftmenu_thirdindent{
-	width:150px;
+	min-width:160px;
+	max-width:auto;
 	height:auto;
 	float:left;
-	margin:7px 0 0 60px;
+	color:#FFF;
+	margin:7px 0 0 50px;
 	display:inline;
 	padding:0;
 }
 
 .leftmenu_fourthindent{
-	width:170px;
+	min-width:200px;
+	max-width:auto;
 	height:auto;
 	float:left;
+	color:#FFF;
+	margin:7px 0 0 70px;
+	display:inline;
+	padding:0;
+}
+
+.leftmenu_fifthindent{
+	min-width:200px;
+	max-width:auto;
+	height:auto;
+	float:left;
+	color:#FFF;
 	margin:7px 0 0 100px;
 	display:inline;
 	padding:0;
 }
 
+.leftmenu_sixthindent{
+	min-width:200px;
+	max-width:auto;
+	height:auto;
+	float:left;
+	color:#FFF;
+	margin:7px 0 0 120px;
+	display:inline;
+	padding:0;
+}
+
+.leftmenu_domainindent{
+	min-width:180px;
+	max-width:auto;
+	height:auto;
+	float:left;
+	color:#FFF;
+	margin:7px 0 0 30px;
+	display:inline;
+	padding:0;
+}
 
 .leftmenu_titles {
 	width:auto;
@@ -1355,10 +1420,10 @@ a:visited {
 
 
 .leftmenu_arrows {
-	width:10px;
-	height:11px;
+	width:9px;
+	height:9px;
 	float:left;
-	margin:2px 6px 0 0;
+	margin:2px 4px 0 0;
 	padding:0;
 }
 
@@ -1366,10 +1431,26 @@ a:visited {
 	background:url(../images/leftmenu_closedarrow.png) no-repeat top left;
 }
 
+.leftmenu_arrows.nonexpanded_close {
+	background:url(../images/leftmenu_closedarrow_nonexp.png) no-repeat top left;
+}
+
 .leftmenu_arrows.open {
 	background:url(../images/leftmenu_openarrow.png) no-repeat top left;
 }
 
+.leftmenu_arrows.expanded_close {
+	background:url(../images/leftmenu_white_closedarrow.png) no-repeat top left;
+}
+
+.leftmenu_arrows.white_nonexpanded_close {
+	background:url(../images/leftmenu_white_closedarrow_nonexp.png) no-repeat top left;
+}
+
+.leftmenu_arrows.expanded_open {
+	background:url(../images/leftmenu_white_openedarrow.png) no-repeat top left;
+}
+
 .right_panel {
 	width:auto;
 	height:auto;
@@ -2837,8 +2918,14 @@ a:hover.search_button {
 	width:auto;
 	height:auto;
 	float:left;
-	margin:0 0 0 0;
-	padding:0;
+	color:#FFF;
+	text-align:left;
+	font-weight:normal;
+	font-size:11px;
+	cursor:pointer;
+	cursor:hand;
+	margin:0;
+	padding:0 0 3px 0;
 }
 
 
diff --git a/ui/new/images/alert_leftmenuicon.png b/ui/new/images/alert_leftmenuicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e5b604712a5830c683c0c846ab71d08730cb362
GIT binary patch
literal 545
zcmV++0^a?JP)<h;3K|Lk000e1NJLTq000jF000aK1^@s6y+Y^Y0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz!%0LzRCwBqQA<c0Q4~FQo|%v)jnraY
z1PTQ~D!A{$l~7Ouf@}9eg>D2vaN8nv<*E=6QQHzk5Clc=v#6VPV+vM@7&T3u##%Fr
zPLyOOGw=1zWF?H!2N&Kw_ndpq<3TBfu=38{4SL@OHe6$&^)8NvkR#2{tuS}rYj(Y#
zE>~AnHLr*9Ld7t$Q<`h18a5Lgt4|r9-u#zX7H4}kr}%2~tA!V%1st5zpjC6@-o^UM
zd&Sbq>r`Hw1qg+bgIxXw#&4Gg9_Z&%M%tCconk63PNII@1y4gfCLp4OSX998>AL(3
z#gCJrVr8s%<Imm%NhY&d>XD9QyagQ(BP=G65};pOW75oZ-V)1tMW~Z(1}^E43^{}+
zNgZtofyePk&<F00t<&-R%q=k;FOG1mUIM$a0~&<Rju_q!KSg^&50dz};@zkmrse5!
zIuNU?TneS_X?`67SB?nMaCBb7&i-Hgxa9xxmwF8Q?i2wPmZoI&TxhgEmm%9paAbC5
zUPJK`pj5W8^2J2Obb~&?{c>ACmf1sxABM<VeXZ!?J4opM4{<z&<^`~79+D446C=hH
jnlrZs`MiJYp8x{@p;F;molNX_00000NkvXXu0mjfesb}A

literal 0
HcmV?d00001

diff --git a/ui/new/images/destroyvm_actionicon.png b/ui/new/images/destroyvm_actionicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d868d0931e23fcdcd60b7bb30642d7c4515f0ca7
GIT binary patch
literal 1820
zcmV+%2jlpOP)<h;3K|Lk000e1NJLTq0015U000yS1^@s7?X1000000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU&zDYzuRCwBA`2YVu!?o+z7#=)$aQV-l
zKMV{YfsY?Q{XeO!^!ewTH~*O!fZ+Z6k2;J0KU`2QBEkR=K#b3yKWBLL>J<YYA0MNF
zg2I1>yZ0Xa|Mlzl|8+p!3qAQez-EAO0m!)Ua0Y+?VgzyS-@nhm&(Hs#lY^6ifsujX
z>({RgKY#vYl$Mre09*3<&Ab19|NdoQWn*EO&dtrh%gV~Y_wV2TIedIy00IbXDH9_T
z!-tO_7+6_Z(-;{U)nsL5OF$Y~e*E~s@bB-x9H5IP3knJ{{QC8a;pK~$EZjWY1q`=t
z-Lic4?AiYx-@pI={rlJdGqJH?mu_Zb`_J_K`;Xb*zW-!kVg@^b;lSd>3~CD&Fx&*1
z0Cx4mhfnx`;$P(DW&Ra00)>DaCPv0D00C&AdX@%)AUd}<>wOrMB*Y6LE?i?{5e2Ul
z3rn%f|HxmmwX(BHWvhjtg#ppvr8rCw*$X+=c%!q6E<6~ReQ(}-ZdnwCV_9SKkNJu8
z<qa!6B|FKUO=6+72BlQUhK>6x1fU(tva}_2iD=yK_4k7y0Q3<&?uJ<W<zP^KzU9%3
zJ#KY6ut>$-sXERax&EemvtAF{?Urj=2xfWQI`1wU4G7aT8u9_+92ap6KSh0XH67=U
zte52(%8l8osz9QIC<<AGT$EQL_?k@M0g)@M;r~rh-+Eb=ZSuU$Xfc|9um!~opJ95d
zTqV!%=fY5Gx_JG#dpNRbe+3|#+F2TjqVSo_WX#OO7>R+1g5YCWbYZu!5wWxh2-+!I
zS%{sDw%Ygyd@SkhTvGT8v>jbRQ6YseDi#uA;$vr$+09I5{LW2c4jk?+?z#87-$N+a
zE;%Ao>A6ITA^@ea9)OrW5Vo4hWG*#L>ztM4CSmOYlSz;^gnviV>GV15K%VC@+ZT@G
zY#D~J9SWgZ=Pk<;FZrGqk)ukZx2Kn?wJN1jDM23lzW%>Xwquj3s!_M*`nZ_l-EmUb
zOI)C5HK7{<4iB>C?Ax>XNh^6(8F@z{R88}G1_#{u_a8bP9tvB_exvcADA62X3z;N|
zc?#*z-rBu=ayz0dFH;#zmsOQw>l>PRX8sjM!OK6ZRd>ku;Uvh?2to`8B0Mj<N3kN1
z^)D^a0=_VFdP>JDD`Y(tyIaGa#Dho};^4ti9WBfDzr-8Xd^Ss!LV*&aqohwwQ3)i9
zVcjqeT(@QhfC<1924O4H0lj_gyW!#F^fc{EOwcC$Trf>?BFzLzZR(L60HrZ>g&PSX
zT3n=!eBQ=);-B)M>%;Q?FUwzJhoxE$V`uR`iRQyyY<qNV{PB8DFV$xQRl0lq(v`c9
zef!OKd<f81)r2+?MBzzxH@llErZtd*T4N&SpyW_Nv<hmWQlyGUJzLPTmmYi4gXAWH
z;Kf!iUc9I%VnMtJDTOH21hqwMW28wF5|iCcHp%+E+1Z%XzU1xC?Cido_rC9Y1C;DH
zDivkFR4$QBkbdy(AU9(GOG?wU^EAfGj6{>0rda_Z=YWF;K%>oeFoHsF%cO_{s6#-a
zH-g*;GS5=pQPFoepALt^$A*BVPPfD7c|o~mP_<F4TD8^%6)u3Fi{AI>IdL3|{uel#
z&GMCy6Ow5n&JQDz$P5=7AYZ1HVw~pqc*fnt)B6-SlbZP{zg+T%Ol5eNqU#uU8n$JY
zmB!}peT}!5^@$t3odMW9a4wf~$tg*bO}m{^)xeQ}qTr<Z6jkA3M!|XdIXb#-aQxq2
z8vDNcQ#o2ImE=~l`G3hk1|2NZ7;6_tyGs|N=f*uok;OsyC#`np4cL|Jb{vvdcViCU
zD9-{h)Zw^y`0v%3M9%uKe)wxXFURNS*%UT02@SN+f$Ae8Y@$+O<KRPnYm0p=6l5o7
zoqD#inC3l(4rp0dRZTzHsQzJ+EOGI)Q4=tYngZ`4a$o&DYp&J~ZdR+LA?yVxKs1O>
zPqQl<8~k|#(zuXFFh>Y(6+L5bA#}7C7;60(O>V!ct8v3H@kZSRn}(VqwdiC60X@q*
z&0nV9A4is05Q=saC2N2ocTg5D*!AUQR>uOKVnGtVVYJQl9=JY#$uh$*SgBY#qy>Yw
z_k@P8DR^1q%}N4NUDR&3kFOu)R%Y)8Tb4cA&x)Ol7A^<;KdMPKcQ4&uAQA8hVeku=
zgv;Bmz31M1<|2SO$zo<UnD0zEb~ok?vc5@7_N_J#_?~CN$8V)$G3UhE8l%9}%QWG-
z=xcO6B<?ja77&W0h{Z6WP9zirXKES-+=81_VsUMVdrLUYbN&K0KP55;B2xYU0000<
KMNUMnLSTZrA$0Em

literal 0
HcmV?d00001

diff --git a/ui/new/images/leftmenu_closedarrow.png b/ui/new/images/leftmenu_closedarrow.png
index 1d3e81c9c2b9a7197131d2a5b963faf3bc2874f7..5271e23aa1d8cb0ed00b5180920bc22846ca7f88 100644
GIT binary patch
delta 174
zcmZo<I>V^g8Q|y6%O%Cdz`(%k>ERLtq*;NOlY@<cfw6bhHI9jj8ufXeE{-7;w~{jQ
z^72xW5)y7O3OMjMh%t8@We{-aaky5mpvy1dP_Xd7LX)6EL&76phZz1a&TH%}42&$3
z7(XBAO5_pv!IM<Om=q__EUv;Lkf3qQVd}xF*ByB?T*OiuW^H6v`ytq|cEK}Qc1|XS
ZPiv&7xV`O`0J?+0)78&~Wt~$(699VMH3k3x

delta 227
zcmX@Z*vO>V8Q|y6%O%Cdz`(%k>ERLtq}hO&n*&HPYKNX-n5d{xzu42oF{I*FQbu0h
zy2PY}gcZyj3Tz79j7O3fI27CzUfWOj$1UJcu<*Zvle9uZ!Xy612*x!+98Vf=%wY9+
z!SFG30*3=b;}pZ@t;~!bH{}(=8VemBm<fa*w2*Ju!F!~V_ehgLYEnQXTLT00%x~Nt
z^2|x~3ja7JGptNvO{!jDDfzzf2J=lZ2?2&jp$;+!npA#>b;LIOVDdR$rx3=JBsfEX
bgMr~hyV69##LW#r*E4v!`njxgN@xNAfn!Ot

diff --git a/ui/new/images/leftmenu_closedarrow_nonexp.png b/ui/new/images/leftmenu_closedarrow_nonexp.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5c90940560ce01242b23c371d77513c7ea141a4
GIT binary patch
literal 172
zcmeAS@N?(olHy`uVBq!ia0vp^tU%1k!N$PA*t_Z)2aqFK;u=vBoS#-wo>-L1;Fyx1
zl&avFo0y&&l$w}QS$Hzl2B^r-)5S5Q;#N{dUf#d+M;KTb7>_Wd7&b%#X$~P~Lk1=e
zMHV#>dG5f06Gs|YfJ~Lc4B_q#i~<Q7#}=GE#PV-(h9jH8!F~f#16c-}t%9dlg?^3)
Pn#|zo>gTe~DWM4fAxAOE

literal 0
HcmV?d00001

diff --git a/ui/new/images/leftmenu_expanded.gif b/ui/new/images/leftmenu_expanded.gif
new file mode 100644
index 0000000000000000000000000000000000000000..59b4f616a01ff85a77a76c8eabcf460e9aaf1835
GIT binary patch
literal 393
zcmV;40e1dJNk%w1VFCb%0M!5hf19pmgqTfjf?$7>bdjV&U2tN6lxT*Uc$KJjlcs)}
zt!s#!ZHk^rX?<IIkA0b}Pj7^Ln5$iTkYs|EQE`TGj-q;(sy<n3Q*(%Sl&4j6iEoUc
zS9Xh7cZ_?Nt5$W2MPzqcd5v(6p<aEGUw)E#mZ^G{sbhkcb&{oWkE3&tqfl>!RdtF(
zU~)uZbx?4HQgMe_c#TJ8dUKGZT6vCejiGLgpL>_8KU!>TiJg6!t$dlROKX5#e35F0
zn_hj9A^8LV00000EC2ui00IDr000K2z>DyL!xfH&R?FoAfn>6Vw87&Eu2_f`vRb`f
zlrRMb!<f&Sw1&m{d^m7UXWog$LLnN>!FNdh5<NXXKO-X~h$I7x0|t%;Cy^%;69JZ&
zm<O5%KAk=bpbI&pISi(!HZ~ip8#Of|A{DX~DJd!{Gr2PayaXt}C<(#|8O0e0$jK!o
nCMFio7B@E@9ud|NJ39~C4>~#u;Nbw{<mKk)=;`X~=s^HG_xq*(

literal 0
HcmV?d00001

diff --git a/ui/new/images/leftmenu_highlighted.gif b/ui/new/images/leftmenu_highlighted.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c2570849ad75afc162fe75d2c3c672491ee760aa
GIT binary patch
literal 171
zcmZ?wbhEHbWM&X!IKsei`r6&s??3H6apB<EtB22D|Ni6Gtw%4Oy?+1x)7J;jUw{7k
zef{3!7j8b-ck0rb-AAw8d$MxJ;geTxZ#r=D*u|SWj-K0k_{@%D=QaYlmu_x7e3}6R
zDE?#ti|K$!kev*y8VQP8DoJcF7OJgzXlJ0zT$18{!{v?h{Xb0#tw}3Ww8T484whIb
JUJzig1^|wDRNepp

literal 0
HcmV?d00001

diff --git a/ui/new/images/leftmenu_openarrow.png b/ui/new/images/leftmenu_openarrow.png
index 0725bf4368bc88cd40397e13427903101d7d9d04..132f7d34bcef6721928fdf1de40f29843c78e690 100644
GIT binary patch
delta 172
zcmX@lc#2W6Gr-TCmrII^fq{Y7)59eQNOJ-)D+e0`1LK2`Z+|B$YSia=x;TbZ+)B#H
z%gakiNVvf$;K1W>tiFLEiABhPuUSUGo{2+2;JJOrai$|Z3TzGx2bVZXy=u6@)zQz)
zA`l}fQj^l8$=;;zpmTuf=>Zl=1}2`nGARs~9<mut=hO<|zj~8pDof-k?jVLqEDXkv
Xq*(qpi+BND!QkoY=d#X;DWM4fQ~ff9

delta 177
zcmX@bc%D(QGr-TCmrII^fq{Y7)59eQNOJ=*D+e0`1LKp0Y6m7NYSb5cx;TbZ+)B#H
z%UhR_kdVR7p}?l_*xrG`kcm^F{h^}3X=WCIj?eQMnWjWEuqX>?GkvUWU~mdkV-IGW
z#K57DqHFM>gEK{96GO*&mSlyCJPeF%m-se4V3@S?1;dgXj49$LT7C!2H3*&{s_A&t
cF-wA>vsw0wZjVG6&?yX_?5=(;>zopr0NO}2_y7O^

diff --git a/ui/new/images/leftmenu_white_closedarrow.png b/ui/new/images/leftmenu_white_closedarrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..04f806a46ec6faa1443f2e108694d79b6b648af6
GIT binary patch
literal 190
zcmeAS@N?(olHy`uVBq!ia0vp^tU%1k!N$PA*t_Z)2aqFK;u=vBoS#-wo>-L1;Fyx1
zl&avFo0y&&l$w}QS$Hzl2B;{()5S5Q;#Sg+|NrZinI~*u;ZP7bc;E;F3j^bkAM!_1
z5+<;7DD1dUFL01Uz(GNe!=!2HLK$xXc7+BBMJWk|u0$SzA3Q<dC0%(P8Wu`0A2vAn
n|Hhji{HBM6)P67?YfNN#kYAOp)UbIy&@Ki~S3j3^P6<r_Qy4uz

literal 0
HcmV?d00001

diff --git a/ui/new/images/leftmenu_white_closedarrow_nonexp.png b/ui/new/images/leftmenu_white_closedarrow_nonexp.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed7fb0b8e4aa95308e1e92ee7b443d737451746c
GIT binary patch
literal 194
zcmeAS@N?(olHy`uVBq!ia0vp^tU%1k!N$PA*t_Z)2aqFK;u=vBoS#-wo>-L1;Fyx1
zl&avFo0y&&l$w}QS$Hzl2B;{-)5S5Q;#Sg+|NrZinI~*u;ZP7bc;E;F3j^bkAM!_1
z5+<;7DC`j6pTR2Npuof;HPLdK0-pnep_7S0gXr~xXBaN>JHF~$xPp<xKqNUqB28WS
s3PYO0y7rY%8fPVPZvMgC!+e;*+_OOTZPw)ZK>HXxUHx3vIVCg!0O{*I=>Px#

literal 0
HcmV?d00001

diff --git a/ui/new/images/leftmenu_white_openedarrow.png b/ui/new/images/leftmenu_white_openedarrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..45f1f5e5e1d4995a45ba836f903d337593bf4c41
GIT binary patch
literal 183
zcmeAS@N?(olHy`uVBq!ia0vp^oIuRV!N$PA_#oulUm!=a#5JNMI6tkVJh3R1!7(L2
zDOJHUH!(dmC^a#qvhZZ84Ny^}r;B4q#jT_t|Nqx33q&)q2q;hZ!7t#z6QIMsh>?jy
ziHSwW;S5I-1B-x<)DlJ(9mkpmh9>RirhbD^g%6TP(i%@09Gb$wBC*Tz!~^3qF>ET|
f4~QIAO_X2|+ES78`C&j7&=LkuS3j3^P6<r_E5$e&

literal 0
HcmV?d00001

diff --git a/ui/new/images/rebootvm_actionicon.png b/ui/new/images/rebootvm_actionicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6057448a78416e8d4337433c1e9e1da7b5df7d3
GIT binary patch
literal 1784
zcmV<U1_$|xP)<h;3K|Lk000e1NJLTq0015U000yS1^@s7?X1000000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU&nn^@KRCwBA`2YVu!?o+z7#=)$aQV-l
zKMX7kKp-t8^MCbK6^7df-~I;+ynp{uXUFb0PQQOMOacfX#^=wUGrW5Bih+-hk5NHE
z;Xli_??3-*YHBgmF6Ut2I?o)%05TMW{cD*1pa0L#01!ZoAkO{!_Zj&4`Tuira56A3
zGBAAo`jz45&!3Fa($WxHU%z?xpNEHsft8JgA$>9@&;*bu!+(AOrmp}2IGjTrgkdNO
z!>8@78VPAKTZ@8uUI&3fAV^TW0tSgf@lJbyW?Kj=LA2?@E?bX2$^Yf36cYa9p|#!%
zAy(Gf)BK<qBgWr&m_#>Y3{pyHo0f`2aYS9$Tjw0d5O^38pC5|nU7o}gLcB|*QI;~t
zx)-p!W)5UkZPuh{>0GCXwCFwK-ScGN?_U6cz4YS63y4af!(P98ZO_WgdWeac>4vzN
zxZ2;pe;Gjd)2B}ia&mGUKnMQ>t7T$>c=z+?&!9k(`1kMM9vLYaZFY8c2B2*WjKHw@
z2Q+-mbqR*&&ptE!xbW|XkO(uwuiuQT?3_5l!J7a6`FG*x@89~u!b0GXW?};BVg!ad
zP_A+*7sHPq{~4xa{9%BB+!-ukA3l6H2K(~Um(SjR|NUe5_We6B27W`M>mL}udi|f_
z&09#wN3=47>DNI1-FtsGF`Am1as&DNKr95rf>6u{#9TlOQvH)%<fAx;<l6`)j$aD@
z|1mE3a8|tu<XeCMM3X&B!%!54Pd=Jj)7nZ6W)MO}L6Ax}N5M_S(Mb?N&`t0USh227
z4$j>a#9!c~gNUF`9h3@!MW_g|X%ft*@4e~AC5MD?&pqe9?{m0={UwPKDz!<L`E4}3
z>kwuFg6-+L{+!8VhI=I`5v;$UWC5ZXXgj58+9PlvA7mo=soU)ys;XLxd+_l6&1REV
z3Va`4%i(x_oNULYVzJ2Y&basfJhHkLDT<PE9XG(il+9&HW-PH45$%nQs=OVR$UG-J
zH?Q0D`Fl-2-yw};L|>bf?DBLvTOpITEd^oNRFt%Vwz*A$Ao1fGtxI}nT%mH(YR7{5
z?MUr(VzaVD1re1uZQC`103^Y#Fp7~J@!`39t8o;U=Bv00@mMaO(EEFs=ahNCg(YIb
zFb+P53I~FGVR#)RR7xAe<b?w=&7>1?R8{M)>)Zng6cZ?p;sGRc`WC>6>EL{xc2_QF
zeesxfPBr@Tl4PMT{l~{A8l_pp4-3PXq8BPq?a1n2E^<RVna8w$RSnM=VZ|O{j4bwD
zKx7eVhCRYjXIg8iyuB)j(Q9C*53NS&7XQ6}0otmX&?cfFJlX6fo957{fqGM^2!ePh
z1qB6_YV_2D2eHx~ih_c-9#rs9DfA%p<_`r$kP6j<isHqJ;>A;`w>F7wr7fBYNq^n$
zCfV$+-^{+GKlqZ_H*enCoq03g%xp`^t%F0w-Y+eexJ+>Ukn6xVZ2-%VX_{wPCSiu7
znH<Mi0V4Z>gJGc2rT+|uLgUI@5x1cZ3OT)@<Png03ZfDs`W5qubUJ+`2`qWOC+F%)
zrDkxn5v=vKbswpaF?8c|{d>I6IS!*Y6=$<qv4n|{%m*<)X=!P>CdCHG*V$6Y`3wg%
ze4E5zRy<jFN(<H~dHM{+5{}4i+gsbPf~;i)&rhE<hwB$(V2k2hE*B<eG<vS$)`sHo
z*rAwVV2VeKxFN-im5ci|O+YWo@&7n=mF8Dp({izbFl>4)mE1?G8}q{BGnCq`)hgA<
z%Z`lM!-_R^t`!OYqFVFDkX=W8FW~YTUMvU^B}<KO=!uYjZze9$#LOs7|0vTElE(t>
z`#R?Y|9zdaG7ogskXSzbob`0u^1DC0bKVMu_<@#n8L4o5eeJIl3@9g;32yh8;L5G>
zC*|t=?=Ms+_>E+{*Y%5TKie+`@ZkCS1D$SNoRs~-qEBTf$TSq|Mr;I4?o&JwM;~xu
zh((TFh7mO}A`)my;SS`xt<nl?JEV&1(8<F$h3~l^m3eP-JL#G!JX$0bi+;WVuF0t^
zHf$;tO9#xRroraat}X*HHKkcafz%MSJIBJ(cX~g5hyJY0(Uzp3D;<M$zWoNx7RG5{
z<U*qWpdU<w?R|CE`^H6}?mJCURFS@eukUaAS`a|No@4oL-K_Qk-v`5;KpJF33whu%
z2l>Orv9`zR9b(1Y%S=TH)z_F$s<o+PF;$TaWeln6#D#+UJU0!FZW-h-bQEu^by*Rg
a3;qFnQ%I!jT{G(d0000<MNUMnLSTZD8E=gM

literal 0
HcmV?d00001

diff --git a/ui/new/images/startvm_actionicon.png b/ui/new/images/startvm_actionicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a585a3dc99f9e6a26e3e923ee6abf7727ccbe52
GIT binary patch
literal 1753
zcmV;~1}6E5P)<h;3K|Lk000e1NJLTq0015U000yS1^@s7?X1000000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU&dr3q=RCwBA`2YVu!?o+z7#=)$aQV-l
zKMX7kKp-t8^MCbK6^7df-~I;+ynp{uXUFb0PQQOMOacfX#^=wUGrW5Bih+-hk5NHE
z;Xli_??3-*YHBgmF6Ut2I?o)%05TMW{cD*1pa0L#01!ZoAkO{!_Zj&4`Tuira56A3
zGBAAo`jz45&!3Fa($WxHU%z?xpNEHsft8JgA$>9@&;$ksHWtqRoIF3j0t67)QYJ<w
zh7TV<FtD<+rZF-ys>#aAmVh*}{P^*M;oskXIY1Xp78Dd@`1R`-!^;;hS-5$)3m9+R
zx@8G8_LvY*f|-Sxp=KE;12YpFko}v1>HGH|vw_ZMU}9zhnZ)qw4Ff}K%r}N7&;B!j
zUH$Ok6F#8$7kPP^e}Q$(ARz`OCWg-d0azego```U49~V*x>raDy$e0ar9pu}AV@7F
zSUjN6I5ZZAN1-qnf<mM4B<J7<5NOgIDP2N8cgpM>;!QT0eJ1ZbJWSJ+DO)W2%J!uz
zpJ~%uv>I(1W5A{;3W(!aQQ?~Z63ypot*xXnB0f#lC)>X7gXel6$PLo+hu1NDerTws
zScM}OnpWKJ9jIf5O^4IEZFh#lkWD)dQG%?~?BXtfs_MDf^;rk!Hvu3vM|ocEGF<%V
zLr*Te|CS|4Pr_iJXbH{*WIgGd!>3nE&~)6I81pESBw3{QG9{#}{KpCkC@!V;N8gcJ
zo1HkS+2~Q+<}X{9_S!!Ih^BUx27)Mh_m$U1lMojdEP|q9BUss639+>kf?Ya4Aqv4S
z5bRS37QrrsV51@;f)B(Lk&PAxL5W6_-8K7)XC{dm_A<ln%-%ES!4(`1NtDp(on)B<
z(lD1m%mfI_>$-j$jYda%C8<x?aDd4qNXy{fil%ATumibpCJx_pI-P>5szt8TaKB*~
zyp!j;qNK=vDv=`7GAW%-bMlz)ovuUePMboZkYZc5haXdXEKV}>5*wf=KOR##9Cnat
zPIyjgoAmm9M9mMMB2m%RCM9!mCLCX)7W+(+=ld_Rtn33emq`#9Pe@(kkglp_danDl
zzFa}10(yLK)r-^L7B>nyZ<wZ?@jN&w2vG2(5b*GvKNacotA}e4%}=dTZl%K4^}3(n
zk#Jxa*n%YtdWI<y@&5^VLwGG~L?~R!4_kJhG%=>CCEK<x1Hc4e>IJ<)rUP2gb9^JK
zd*hgP53+pS9hgQKQjg>SD9xdotdJnOqa+n~+CS(xHj<NROk3q`e~&pVJ#ZLv7F#D#
zaa5QgMOo@>V@*kzSwReHo*6E*tJ7zA@B9hSR@J;V5e4zdCi{{0VAVh_y+}knsE1w@
zMEs6_fZ!MP5cH1_Jmlm>dJ$9#dJ%={L5re?78Ea@q#{C_#MYt(Qz2<$>UK9@yX$Xe
z-=<0QCA0h9?Ax6;Gr#%GKuPuwP8CPLTB|ZmFn@?Uh|L7RGG$rTN!Cf45oi|Ib?ZQ6
z9ypi=8awo#!BFVA%#1jIIvC{ghLL+f=5eU1$mo0AkET+o1Eau_=X<g*GAf+G*$%)P
zjZGh=kVS#MjlRdvxyEtmZNr5^K~BQLNal^WKS-z3*M)3=`~;sAdfvkc4c{g?FdJSh
zKcqE#hP=cI8A(_4j^j19?4V%V!J`vrtm()x2DTV37K>qV#^YyOo$i!r8v6`g$IXoC
zrY>a0#wGlkCN(6+@t<3|Mn8T(r&^_jGz5wi3`C^eiy%HjW4p9&s~vlKI%{2xDvC!2
z1^=Yo_2yAshkP$!dJP>5LPW_@V-G!1^6$mM1zK2{q2;el+CcHxz&uO-qC;1Xy#Z+&
zvaZ#ATK(oF9NV9K{nDKk4Dkgm>k>-g$Y$e@5C)7>hXrBxSbTpV|D-})`uUE^WnYS{
zUwG^vKS#H74xKufhb|`i^14q=H^@pQ%SAUHqsfh%Ni*X(F5b37uvy3{LTdz?GB||%
zP6l3m1|I%J@0Zm%x-)wo4Da?K8g01ZmwMn@Tq*zv4pl4FJ=Vy`tsP@KFYCyuCCw@h
zq=u*+9%~z)=+(y?^sD}z`ig@4`GCQQ0MHMXG0i=@>3v`lh+?NHi7QDA&7<eru@(eS
zu={XnGGVoI!1vzpNgxd}riF6^tqA?y_4$eW>K$Uk+{-K_N!8bQKC0H1(iw`8bafa~
v?8HRD9g|_q8E!(@-7PhD)VisJ_XU3eafcqyoz*bJ00000NkvXXu0mjfYeYH4

literal 0
HcmV?d00001

diff --git a/ui/new/images/stopvm_actionicon.png b/ui/new/images/stopvm_actionicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..34d0399def1458039a875cd771dca9413b82c3be
GIT binary patch
literal 1719
zcmV;o21xmdP)<h;3K|Lk000e1NJLTq0015U000yS1^@s7?X1000000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU&SxH1eRCwBA`2YVu!?o+z7#=)$aQV-l
zKMV{YfsY?Q{XeO!^m!eS%ftW#@85saS^WRuf<r(yKmaj5fBu}|)vH$we0+S23JMDU
z8SdVD@c-AZ-~U0%7kct{fXx8m0+4ax;S2x)#0cWtzki>BpP&CfCkH1310w^&*RNk0
ze*XN)C@n3`zyh-5^_zG9d3bmjSlL(@Cb6+I6#e_h(96j9pP!faD?k8&EoEY4V)*d!
z0|P57YZ@aXqnfO&Yzass%a0#F82<hJmjiUsWI;hehF`yaF}!^7l7*XxyMXc5ty`8r
zV~+^|C74;588)-BfiwZFVPjzW{{6@7Z{L41FfoJu$#4&d1A&gc2{Zxh>W2@X@BziX
z$ji(8D*`&^Kaj)3$oK^yfWVS3Uc3P70y*sUyVv%t%&doiCfyJh6Ic8D_b&qofBN)^
zK~7GN1L)wNV6{w45bu8e{23HT694}F+an_-qs`9F&cMRV!oUa&n}0yV?-}TS|M2KB
z=M$hC`9wt--Y7Diah9_+1#ABM=ih~&zklls3k!imnu!UhixC*=K)IE`F#P%J7iTiq
zu?!4zK_<RnFj@a#&ttIWPhUQJv#_!~`S$%g11k$F11Bd3(2##%#rJ`M{tHOgf;1t4
z2P~gXGn$&3as%1?Kr95rf=~<!ATA(g2I8Mm-yX|}-+ATB^z)zMPYIT7S7Z(ILB0hD
zKsB|jGz>)1n@N*2O<OB%p`h4>;0r-PH&t}!QgH7Fbg5t9#xGF8y*pj`2W~|LMct?n
z1sA2nN25ua+C1u+X;i%Akee`f=FYk2hzb6L%w)1&EJ~$BLuI@VKuigQ)hm_Cm9Fc5
zYh}4l*iV4T0!XXk-b%S#zJMGk2m;RbrR%y|hGA^?lDmubrfG_k!XRL>l8Ocg2FYuC
zR4f(+d0hA1uP!;RL#nDOe%lYRF=caEN^vdm06q15#t`lBLOyfCbG9~b7Ovk$Ki~*e
z*MouKAwN4ao1w!)(Y72$k*TU$6>W<#Ns=tKJKx=Sa!wvb-;x8!b*XW8ueUn>XAPt>
zoV@ONel-lCB#b4Bdnk^DdER%9(@hk<Cwk@Jx!GvugeBld$boT(!44Xw)6p*>uTCd#
z)BoV#5=ayh%^1dk@3&85=m`x|FYYCtj>(=V-P%b37YPT?UDkIHo0^=U<)y`iypdyQ
zecZO4Qlnu>ilRxIBXc#MG29dd2|U26(w-O<6jn?W#+AkM0+0nXE_<Lo^?b9MvAQd<
zDm}KwwEd^_^b!7dzXj;4T0)zMqUf8<KehB@Ac9&;0$Na9R4D$y4=5t&!j<B-AmT#k
zCOgH2E=slq!KHgQBDk<1F568IAz9cWsWGJuu@jT|bTTuZ`{qqMDbY)AX7c9d-8=W5
zbKU?Y(?+AB?zh@4k_ple{yON*EWlDW4C5ND@iC*(<c{O~1|pvW2d{xfpA9jB0<W4j
zBSjoQ9TF0~kz@(Tyh44)L_gztDVNKg83C4pFyL`XQmz>^?FhPIbwW_#CJ4Hm>_^Xu
z<0yJRakX0Im5>vXDG=8;`Fwt!iw%&kP^DO>7#e8&?^x_9aiu(8S3ay}#vOIykZPJ(
zk9xlAwAJ3$=F#4#yXN&rdv69{^Tf4UEheWd-|+l?S=Y6b8m6pkx}@qV7c)xE+t1Mv
z#>w&da%cAY=-2jir`1w+J#ScdnFc`|ot*4%Plc<ur>|a27)4eD;a>oi55X>`27sv+
zZ%hhE(nVb$hDK4qf74(-UY@DRwf0PNXNUdQP|#+xsf^iU7v6Q3SMD)3#}nhoy007N
z`JVNMA0;H7J_?Y~_6*Tm&g@kvr3BPl>zvrKEEcA6JV{}NY$+9Q;mkPP96!yO%)eCa
zEe^S3x~Ug!+d(DW7;FY+iq>jTW*}i=jmY~2z7?rU|FU#1Wb9%0osIp(ic$w^A2&9B
zE*jbFOHH46-~*vDq=JCc>DnBX2kpqSr~bFnVtv;QrxI3_h7_1|N>QaB)+zs0A_7v3
zPZC(}vT)_VeeyhsXE6d;bauN^$~J;qkslV4MV1O;inQh(m)=)$=N489g=lVlohPQV
z%n)vhbB*pt#BW2aX+n`yQ4AC6L_$GuCQY~DF5D3+=ZZB)+`A$!`U`f%*(!K)-3|Z%
N002ovPDHLkV1lL|IYj^f

literal 0
HcmV?d00001

diff --git a/ui/new/images/zone_zoneicon.png b/ui/new/images/zone_zoneicon.png
index 93b1fb26889e0ecd74e3f2a93fdda8148238298a..4799285102d625eb84a5d21c72746b67c29636d2 100644
GIT binary patch
delta 1051
zcmV+$1mydTAK4wSzzP8blfeoTfAYuw|8@Bp85xmf00000|Nnw>7(M15{vT|r&Hxty
z00030|6=_A|35?9k^84u1=vl0eEG*vYas*C95L_E{|6s_Gra%wh2ds{KO+DD0RR6&
zF_D3Rfr0VU_a6)!9)9`%i{T%G<p1AFj8l(4*tPA>bJuD&V}^?_KQb`Rf8TeJW998n
z--B&588&V?d;-G^00000|NmnA|NlS3+pj+ujy-wDaQf9(KP6$F5)LND+gd^#rEfp~
zdgrJt2661U7oQ7W{9@@}e(@%QkG2wnmIxoi`)@xP?!No_DN##^pYi|y{|qw@-)`a(
z6RDlM_acLdk~o8ht^z~jf4bugZ$AHGxKZT+@z|yNFBv}n{AuCQv*q}g_g@(pe*9tZ
zHB;O&In%>eUQB=iAPh%h1C0Ow|7W=I@;$?<o9{RU_*i?m*jN-qSee#q3vkVO`uQh=
zgOVsj(XofG&DPxec+y`(hT-{-9}KTQ|73Xa_S0?;1pzl(MW~{gf0tkX`Tge?^MzOM
z8RCpo7<gFN7+!w;$-wgKn~$rK@K(nE|Nk=tEk5=C7sEdWS4|lP3wd#d@4x>sJo@m3
zfuDt8gTI<^Amji4{~78JKKOt4*;|HRfB!N>T4^#|d-9rL!<l;wNfrvLGp$s@82|tO
z&tO@(bXsPTS7z_pe-jMJu7(T;u0CW~zw<Q1lZkQa(jt7f82|tO&+z>1Cx*mXJFoA&
z@?3-A$1etk-@ksXC=aj+G*>^v#=`ucsBi+XO7Eae1OOPv|ChT<dbzY|a@Ge;wWRop
zR#EC}@X=C)ieo7%xHyQ5b`x=P66u!Jp^GRe1qX3Z#6rzff6)fPVpAW{Xi3vHxre#C
zUM_JHZV)>7%^$zz`!-bCNd7`Aza0$QVQ$&VyejJBT3i|Jh$_in&N{l|VA&pWt4XF)
zeRN_=?2aOdpKQOyV7e;^m5uuLr;Drik=3(tMW9r((7gt!M2s^#y72uL4PT({`Q(>s
z2n{#8Hxapcf3jC|1JF##e3)N#E|w})iZv4#NGDZBcK5KjX40F8v005`xE^-Hr&z1g
z6BV-O(%N_cnwVaAGV@&@RV65!Hlipnc4Qa(yEU4A6G03yzqH2GY=KR&Hl%PHgMHfT
z%l%u20#Novekk|DcyRvIfo+l?@c7L<-zqw?EOKr5e;~<rg=cR+^X^L-)A7)&I@z&-
z+ZT@Syc>WfU%p4T?9B6zrAbo?AFY_{xL%WxBywy|3d45E%`RZARN2?vS(vyoe0Ah-
z-}JxcPXjj!UrX1gavwr-KdV@}i(Pl<h=>gIr?_<b&^=XEZbjrU@%HHd|IwcT057oS
VTm%284SoOs002ovPDHLkV1iXR8chHI

delta 1232
zcmV;>1TXv99gQEbzzPAllfeoTf9fZO|DQj8$Y=cj|35?3j1B+WG6EO@00030|6+tG
zV|1E*=zpTM76aqopFf_xe*O9p00030{{Sig)&Bwi|Nj7r%jf_41^oa(8WsQo`11h)
z|Ns90ujBOpi>=E5|Ni{|xMw^N00030|6)Y8i-CcGf$`p(kMh?(Gd|$pe_&=fe(Tv%
z#?Yl_{{Lk7!%*pB#PH<PHwMPY30vas|KnI#9B9E1TECcq@&Et-tZTOK|8@DnD~1$b
zTSfo?009600F(f0{{jF1{{ZLm^#HZq?G@+v`@rb?04ntO`2a#041zis5P$ai`v3v|
z|Nj7+((3jL1_KGR+2R0Ke=sEg8x08n_WAq(?fCov90mIv0ssI10A8rh{23Dr1Ipd#
z06-`k06Zoe0FSuM0PFAf0FzcRYytoO{{Y<O>Huh;zsu9>_B8qZ{s0XL1_0#N;Q+md
zTQWi}A<@F{C^o?O@%s;kPv3trOg;ZR^%FDWtZ)DRGVuOq_?)XRf1~o{$In-W(!vak
zUw-~%=sWTF3_l;Iu{bX$g9INp!?z#58O}ZXz+f%P#_ymc`ib$yr=O;WU;jLH{QeV$
ze@sjajw(_NGQ8XjufKd}c=qAzwL~2;ZN_caU)Ih&eXogum4(4aM~*>HN|@p2pZ^RO
zp1o!G`HzvIz(|adfAQFz7dFpWxDQX?c8)<ojE}+BNQL3!x9<!y_FiUSXJcj9pJB_$
z*tq66!>aR-|EC1nGAuiAnIYCehvDJtPYjz+-)0C>;a}4pX&cIT{>~GI*Pp&=N6g-L
z<u3y>gP0&U!|glI8LZ?5&+cuBG2viiWq^fK>GMaAI~O0if57<k^%n+fO>qWK3nOJV
z4$gb*9PA7L#_6RcsxScK`2U^hOgh)2&CPqMnMImN5f)ldiz38YwW$aqk~Z}L+O~<>
z6wx9GqD4@l6e$D|U67J4mSNLiDUI5gm%+K6nRDix^R_Tr`+R`k;(@=AQj#g^Xog9l
zWHCIQ!n8rNf31ejXkeFDaqhMei^28IWXYBv4BMLAqI%7#R1PU^1hAuK1OFl0vYAZf
zTZX1mSAS-V-o1@snpHm^Qz@h^$rN;!a|U`z5>~|1zNX5vLANq*ST=3d|DbHq@Vrc{
zT#Kd6b6xcz#*zz6E@iPC(7myWoz($s3k(zTB@5lMfB3$TrDC0V+NU_~9&Qe;Lh;31
z|BGbtR$eRc{?{L*Lm(Z3ZDBu$TI={Uw@huoL%r%FZ<uJNMNTg<o6+cry8Ak!{wG38
z$<V~_^VdfcH><oZl4%VKiMLGQ)Sj)>Rr=6%6C8q!ZgA)I1PG|{dnh>-PPRoZchv?i
z2`MGRe_y7<569*nb+k8i*9QZPPtEfxHcPgk<8V6ZKhRD@_3$P(%d^kZl)Dt>QaOSy
zY2H86vww3`9T8GW2HwTVX~l}$&&ThD8mf+LstNIU^aqNf0D_}kttg6v!I5uda(NQ*
z89G}c@dp=rk2OZsm=I$1qqJ5;O7NAtNGzpKLR=Ymdt>P9j5?FmVI>cy4VH~3<feb$
u_QB%^J1#mP(G&@wy2}J0*A(Si_ICh)>M)9@b%^l*0000<MNUMnLSTa6HFbjk

diff --git a/ui/new/index.jsp b/ui/new/index.jsp
index 11e7ec48099..1f7b7feb7a8 100644
--- a/ui/new/index.jsp
+++ b/ui/new/index.jsp
@@ -176,7 +176,7 @@ long milliseconds = new Date().getTime();
                                 </ul>
                             </div>
                         </div>
-                        <div class="actionpanel_button_wrapper" id="midmenu_add_link" style="display: none">
+                        <div class="actionpanel_button_wrapper" id="midmenu_add_link" style="display: none;">
                             <div class="actionpanel_button">
                                 <div class="actionpanel_button_icons">
                                     <img src="images/addvm_actionicon.png" alt="Add" /></div>
@@ -185,6 +185,41 @@ long milliseconds = new Date().getTime();
                             </div>
                         </div>
                         
+                        <div class="actionpanel_button_wrapper" id="midmenu_add_link" style="display: none;">
+                            <div class="actionpanel_button">
+                                <div class="actionpanel_button_icons">
+                                    <img src="images/startvm_actionicon.png" alt="Start" /></div>
+                                <div class="actionpanel_button_links">
+                                    Start</div>
+                            </div>
+                        </div>
+                        
+                        <div class="actionpanel_button_wrapper" id="midmenu_add_link" style="display: none;">
+                            <div class="actionpanel_button">
+                                <div class="actionpanel_button_icons">
+                                    <img src="images/stopvm_actionicon.png" alt="Stop" /></div>
+                                <div class="actionpanel_button_links">
+                                    Stop</div>
+                            </div>
+                        </div>
+                        
+                        <div class="actionpanel_button_wrapper" id="midmenu_add_link" style="display: none;">
+                            <div class="actionpanel_button">
+                                <div class="actionpanel_button_icons">
+                                    <img src="images/rebootvm_actionicon.png" alt="Reboot" /></div>
+                                <div class="actionpanel_button_links">
+                                    Reboot</div>
+                            </div>
+                        </div>
+                        
+                         <div class="actionpanel_button_wrapper" id="midmenu_add_link" style="display: none;">
+                            <div class="actionpanel_button">
+                                <div class="actionpanel_button_icons">
+                                    <img src="images/destroyvm_actionicon.png" alt="Destroy" /></div>
+                                <div class="actionpanel_button_links">
+                                    Destroy</div>
+                            </div>
+                        </div>
                         <div class="actionpanel_button_wrapper" id="add_link" style="display: block; float:right; background:none; ">
                             <div class="actionpanel_button">
                                 <div class="actionpanel_button_icons">
@@ -219,9 +254,9 @@ long milliseconds = new Date().getTime();
         <div class="leftmenu_panel">
             <div class="leftmenu_box" id="accordion_menu" style="display: none">
                 <div class="leftmenu_list">
-                    <div class="leftmenu_content">
+                    <div class="leftmenu_content" id="leftmenu_dashboard">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows close" id="arrowIcon">
+                            <div class="leftmenu_arrows nonexpanded_close" id="arrowIcon">
                             </div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/leftmenu_dashboardicon.png" alt="Dashboard" /></div>
@@ -229,17 +264,9 @@ long milliseconds = new Date().getTime();
                         </div>
                     </div>
                 </div>
+                
                 <div class="leftmenu_list">
-                    <div class="leftmenu_content" id="leftmenu_dashboard">
-                        <div class="leftmenu_secondindent">
-                            <div class="leftmenu_list_icons">
-                                <img src="images/leftmenu_dashboardicon.png" alt="Dashboard" /></div>
-                            <%=t.t("dashboard")%>
-                        </div>
-                    </div>
-                </div>
-                <div class="leftmenu_list">
-                    <div class="leftmenu_content">
+                    <div class="leftmenu_content highlighted">
                         <div class="leftmenu_firstindent">
                             <div class="leftmenu_arrows close" id="arrowIcon">
                             </div>
@@ -248,29 +275,36 @@ long milliseconds = new Date().getTime();
                             <%=t.t("instance")%>
                         </div>
                     </div>
-                </div>
-                <div class="leftmenu_list">
-                    <div id="leftmenu_instance_group">
-                        <div class="leftmenu_content" id="leftmenu_instance_group_header">
-                            <div class="leftmenu_secondindent">
-                                <div class="leftmenu_arrows close" id="arrow_icon">
+                    <div class="leftmenu_expandedbox">
+                    	<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>
+                                        <div class="leftmenu_list_icons">
+                                            <img src="images/instance_leftmenuicon.png" alt="Instance" /></div>
+                                        <%=t.t("instance")%>
+                                    </div>
                                 </div>
-                                <div class="leftmenu_list_icons">
-                                    <img src="images/instance_leftmenuicon.png" alt="Instance" /></div>
-                                <%=t.t("instance")%>
+                               </div>
+                            <div id="leftmenu_instance_group_container">
                             </div>
                         </div>
-                        <div id="leftmenu_instance_group_container">
-                        </div>
+                        <div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" id="leftmenu_router">
+                                <div class="leftmenu_secondindent">
+                                	 <div class="leftmenu_arrows white_nonexpanded_close" id="arrow_icon">
+                                     </div>                          
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/routers_leftmenuicon.png" alt="Router" /></div>
+                                    <%=t.t("router")%>
+                                </div>
+                            </div>
+                    	</div>
                     </div>
-                    <div class="leftmenu_content" id="leftmenu_router">
-                        <div class="leftmenu_secondindent">                           
-                            <div class="leftmenu_list_icons">
-                                <img src="images/routers_leftmenuicon.png" alt="Router" /></div>
-                            <%=t.t("router")%>
-                        </div>
-                    </div>                   
-                </div>               
+                </div>
+                               
                 <div class="leftmenu_list">
                     <div class="leftmenu_content">
                         <div class="leftmenu_firstindent">
@@ -281,25 +315,35 @@ long milliseconds = new Date().getTime();
                             <%=t.t("storage")%>
                         </div>
                     </div>
-                </div>
-                <div class="leftmenu_list">                   
-                    <div class="leftmenu_content" id="leftmenu_volume">
-                        <div class="leftmenu_secondindent">
-                            <div class="leftmenu_list_icons">
-                                <img src="images/leftmenu_volumeicon.png" alt="Volume" /></div>
-                            <%=t.t("volume")%>
-                        </div>
-                    </div>
-                    <div class="leftmenu_content" id="leftmenu_snapshot">
-                        <div class="leftmenu_secondindent">
-                            <div class="leftmenu_list_icons">
-                                <img src="images/leftmenu_snapshotsicon.png" alt="Snapshot" /></div>
-                            <%=t.t("snapshot")%>
+                    <div class="leftmenu_expandedbox">
+                    	<div class="leftmenu_expandedlist">
+                    		<div class="leftmenu_content" id="leftmenu_volume">
+                                <div class="leftmenu_secondindent">
+                                	<div class="leftmenu_arrows white_nonexpanded_close" id="arrow_icon">
+                                     </div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/leftmenu_volumeicon.png" alt="Volume" /></div>
+                                    <%=t.t("volume")%>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="leftmenu_expandedlist">
+                        	<div class="leftmenu_content" id="leftmenu_snapshot">
+                                <div class="leftmenu_secondindent">
+                                	<div class="leftmenu_arrows white_nonexpanded_close" id="arrow_icon">
+                                     </div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/leftmenu_snapshotsicon.png" alt="Snapshot" /></div>
+                                    <%=t.t("snapshot")%>
+                                </div>
+                            </div>
                         </div>
                     </div>
+                    
                 </div>
+                
                 <div class="leftmenu_list">
-                    <div class="leftmenu_content">
+                    <div class="leftmenu_content" id="leftmenu_ip">
                         <div class="leftmenu_firstindent">
                             <div class="leftmenu_arrows close" id="arrowIcon">
                             </div>
@@ -309,15 +353,7 @@ long milliseconds = new Date().getTime();
                         </div>
                     </div>
                 </div>
-                <div class="leftmenu_list">
-                    <div class="leftmenu_content" id="leftmenu_ip">
-                        <div class="leftmenu_secondindent">
-                            <div class="leftmenu_list_icons">
-                                <img src="images/leftmenu_ipaddressicon.png" alt="IP Address" /></div>
-                            <%=t.t("ip.address")%>
-                        </div>
-                    </div>                    
-                </div>
+                
                 <div class="leftmenu_list">
                     <div class="leftmenu_content">
                         <div class="leftmenu_firstindent">
@@ -330,117 +366,152 @@ long milliseconds = new Date().getTime();
                     </div>
                 </div>
                 <div class="leftmenu_list">
-                    <div id="leftmenu_itemplate_filter">    
-                        <div class="leftmenu_content" id="leftmenu_template_filter_header">
-                            <div class="leftmenu_secondindent">                                
-                                <div class="leftmenu_list_icons">
-                                    <img src="images/templates_leftmenuicon.png" alt="Template" /></div>
-                                 <%=t.t("template")%>
+                  <div class="leftmenu_expandedbox">    
+                        <div id="leftmenu_itemplate_filter">    
+                            <div class="leftmenu_content" id="leftmenu_template_filter_header">
+                                <div class="leftmenu_secondindent"> 
+                                	<div class="leftmenu_arrows expanded_open" id="arrowIcon">
+                            		</div>                               
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/templates_leftmenuicon.png" alt="Template" /></div>
+                                     <%=t.t("template")%>
+                                </div>
                             </div>
-                        </div>
-                        <div id="leftmenu_template_filter_container">                        
-                            <div class="leftmenu_content" id="leftmenu_submenu_my_template">
-						        <div class="leftmenu_thirdindent">
-						            <div class="leftmenu_list_icons">
-						                <img src="images/templates_leftmenuicon.png" alt="My Template" /></div>
-						            <div>
-						                 <%=t.t("my.template")%></div>
-						        </div>
-						    </div>                        
-                            <div class="leftmenu_content" id="leftmenu_submenu_featured_template">
-						        <div class="leftmenu_thirdindent">
-						            <div class="leftmenu_list_icons">
-						                <img src="images/templates_leftmenuicon.png" alt="Featured Template" /></div>
-						            <div>
-						                 <%=t.t("featured.template")%></div>
-						        </div>
-						    </div>                        
-                            <div class="leftmenu_content" id="leftmenu_submenu_community_template">
-						        <div class="leftmenu_thirdindent">
-						            <div class="leftmenu_list_icons">
-						                <img src="images/templates_leftmenuicon.png" alt="Community Template" /></div>
-						            <div>
-						                 <%=t.t("community.template")%></div>
-						        </div>
-						    </div>                        
-                        </div>
-                    </div>
-                    <div id="leftmenu_iso_filter">    
-                        <div class="leftmenu_content" id="leftmenu_iso_filter_header">
-                            <div class="leftmenu_secondindent">                                
-                                <div class="leftmenu_list_icons">
-                                    <img src="images/templates_leftmenuicon.png" alt="Templates" /></div>
-                                 <%=t.t("iso")%>
+                            
+                                <div id="leftmenu_template_filter_container">
+                                    <div class="leftmenu_expandedlist">                        
+                                        <div class="leftmenu_content" id="leftmenu_submenu_my_template">
+                                            <div class="leftmenu_thirdindent">
+                                            	<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
+                            					</div>
+                                                <div class="leftmenu_list_icons">
+                                                    <img src="images/templates_leftmenuicon.png" alt="My Template" /></div>
+                                                <div>
+                                                     <%=t.t("my.template")%></div>
+                                            </div>
+                                        </div> 
+                                     </div>
+                                     <div class="leftmenu_expandedlist">                       
+                                        <div class="leftmenu_content" id="leftmenu_submenu_featured_template">
+                                            <div class="leftmenu_thirdindent">
+                                            	<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
+                            					</div>
+                                                <div class="leftmenu_list_icons">
+                                                    <img src="images/templates_leftmenuicon.png" alt="Featured Template" /></div>
+                                                <div>
+                                                     <%=t.t("featured.template")%></div>
+                                            </div>
+                                        </div> 
+                                     </div>  
+                                     <div class="leftmenu_expandedlist">                     
+                                        <div class="leftmenu_content" id="leftmenu_submenu_community_template">
+                                            <div class="leftmenu_thirdindent">
+                                            	<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
+                            					</div>
+                                                <div class="leftmenu_list_icons">
+                                                    <img src="images/templates_leftmenuicon.png" alt="Community Template" /></div>
+                                                <div>
+                                                     <%=t.t("community.template")%></div>
+                                            </div>
+                                        </div>
+                                     </div>                        
+                                 </div>
                             </div>
-                        </div>
-                        <div id="leftmenu_iso_filter_container">
-                             <div class="leftmenu_content" id="leftmenu_submenu_my_iso">
-						        <div class="leftmenu_thirdindent">
-						            <div class="leftmenu_list_icons">
-						                <img src="images/templates_leftmenuicon.png" /></div>
-						            <div>
-						                 <%=t.t("my.iso")%></div>
-						        </div>
-						    </div>                        
-                            <div class="leftmenu_content" id="leftmenu_submenu_featured_iso">
-						        <div class="leftmenu_thirdindent">
-						            <div class="leftmenu_list_icons">
-						                <img src="images/templates_leftmenuicon.png" /></div>
-						            <div>
-						                 <%=t.t("featured.iso")%></div>
-						        </div>
-						    </div>                        
-                            <div class="leftmenu_content" id="leftmenu_submenu_community_iso">
-						        <div class="leftmenu_thirdindent">
-						            <div class="leftmenu_list_icons">
-						                <img src="images/templates_leftmenuicon.png" /></div>
-						            <div>
-						                 <%=t.t("community.iso")%></div>
-						        </div>
-						    </div>                                         
-                        </div>
-                    </div>
-                </div>
-                <div class="leftmenu_list">
-                    <div class="leftmenu_content">
-                        <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows close" id="arrowIcon">
+                           	
+                            
+                            <div id="leftmenu_iso_filter">    
+                                    <div class="leftmenu_content" id="leftmenu_iso_filter_header">
+                                        <div class="leftmenu_secondindent"> 
+                                            <div class="leftmenu_arrows expanded_open" id="arrowIcon">
+                                            </div>                               
+                                            <div class="leftmenu_list_icons">
+                                                <img src="images/templates_leftmenuicon.png" alt="Templates" /></div>
+                                             <%=t.t("iso")%>
+                                        </div>
+                                    </div>
+                                <div id="leftmenu_iso_filter_container">
+                                	 <div class="leftmenu_expandedlist">  
+                                         <div class="leftmenu_content" id="leftmenu_submenu_my_iso">
+                                            <div class="leftmenu_thirdindent">
+                                                <div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
+                                                </div>
+                                                <div class="leftmenu_list_icons">
+                                                    <img src="images/templates_leftmenuicon.png" /></div>
+                                                <div>
+                                                     <%=t.t("my.iso")%></div>
+                                            </div>
+                                        </div>
+                                      </div> 
+                                       <div class="leftmenu_expandedlist">                         
+                                            <div class="leftmenu_content" id="leftmenu_submenu_featured_iso">
+                                                <div class="leftmenu_thirdindent">
+                                                    <div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
+                                                    </div>
+                                                    <div class="leftmenu_list_icons">
+                                                        <img src="images/templates_leftmenuicon.png" /></div>
+                                                    <div>
+                                                         <%=t.t("featured.iso")%></div>
+                                                </div>
+                                            </div>
+                                      	</div>
+                                        
+                                         <div class="leftmenu_expandedlist">                          
+                                            <div class="leftmenu_content" id="leftmenu_submenu_community_iso">
+                                                <div class="leftmenu_thirdindent">
+                                                    <div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
+                                                    </div>
+                                                    <div class="leftmenu_list_icons">
+                                                        <img src="images/templates_leftmenuicon.png" /></div>
+                                                    <div>
+                                                         <%=t.t("community.iso")%></div>
+                                                </div>
+                                            </div>
+                                         </div>                                         
+                                </div>
                             </div>
-                            <div class="leftmenu_list_icons">
-                                <img src="images/accounts_leftmenuicon.png" alt="Account" /></div>
-                             <%=t.t("account")%>
-                        </div>
+                        
                     </div>
+                    
                 </div>
                 <div class="leftmenu_list">
                     <div class="leftmenu_content" id="leftmenu_account">
-                        <div class="leftmenu_secondindent">
+                        <div class="leftmenu_firstindent">
+                            <div class="leftmenu_arrows nonexpanded_close" id="arrowIcon">
+                            </div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/accounts_leftmenuicon.png" alt="Account" /></div>
                              <%=t.t("account")%>
                         </div>
                     </div>
                 </div>
-                <div class="leftmenu_list">
-                    <div class="leftmenu_content">
-                        <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows close" id="arrowIcon">
-                            </div>
-                            <div class="leftmenu_list_icons">
-                                <img src="images/domain_leftmenuicon.png" alt="Domain" /></div>
-                             <%=t.t("domain")%>
-                        </div>
-                    </div>
-                </div>
+                
                 <div class="leftmenu_list">
                     <div class="leftmenu_content" id="leftmenu_domain">
-                        <div class="leftmenu_secondindent">
+                        <div class="leftmenu_firstindent">
+                            <div class="leftmenu_arrows close" id="arrowIcon">
+                            </div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/domain_leftmenuicon.png" alt="Domain" /></div>
                              <%=t.t("domain")%>
                         </div>
                     </div>
+                    <div class="leftmenu_expandedbox">
+                    	<div class="leftmenu_expandedlist">  
+                            <div class="leftmenu_content">
+                                 <div class="leftmenu_domainindent" style="margin-left:30px;">
+                                    <div id="domain_title_container" class="tree_levels">
+                                        <div class="leftmenu_arrows expanded_close" id="arrowIcon">
+                                        </div>
+                                       	Domain Name
+                                    </div>
+                                    <div id="domain_children_container" style="display:none">
+                                    </div>   
+                                </div>
+                             </div>
+                         </div>
+                    </div>
                 </div>
+                
                 <div class="leftmenu_list">
                     <div class="leftmenu_content">
                         <div class="leftmenu_firstindent">
@@ -451,63 +522,144 @@ long milliseconds = new Date().getTime();
                              <%=t.t("event")%>
                         </div>
                     </div>
-                </div>
-                <div class="leftmenu_list">
-                    <div class="leftmenu_content" id="leftmenu_event">
-                        <div class="leftmenu_secondindent">
-                            <div class="leftmenu_list_icons">
-                                <img src="images/events_leftmenuicon.png" alt="Event" /></div>
-                             <%=t.t("event")%>
+                    <div class="leftmenu_expandedbox">
+                    	<div class="leftmenu_expandedlist">
+                        	<div class="leftmenu_content" id="leftmenu_event">
+                                <div class="leftmenu_secondindent">
+                                	<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/events_leftmenuicon.png" alt="Event" /></div>
+                                     <%=t.t("event")%>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="leftmenu_content" id="leftmenu_alert">
-                        <div class="leftmenu_secondindent">
-                            <div class="leftmenu_list_icons">
-                                <img src="images/events_leftmenuicon.png" alt="Alert" /></div>
-                             <%=t.t("alert")%>
+                        <div class="leftmenu_expandedlist">
+                        	<div class="leftmenu_content" id="leftmenu_alert">
+                                <div class="leftmenu_secondindent">
+                                	<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/alert_leftmenuicon.png" alt="Alert" /></div>
+                                     <%=t.t("alert")%>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
+               
                 <div class="leftmenu_list">
-                    <div class="leftmenu_content">
+                    <div class="leftmenu_content highlighted">
                         <div class="leftmenu_firstindent">
-                            <div class="leftmenu_arrows close" id="arrowIcon">
+                            <div class="leftmenu_arrows open" id="arrowIcon">
                             </div>
                             <div class="leftmenu_list_icons">
                                 <img src="images/configuration_leftmenuicon.png" alt="System" /></div>
                             <%=t.t("system")%>
                         </div>
                     </div>
+                    <div class="leftmenu_expandedbox">
+                    	<div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" id="leftmenu_resource">
+                                <div class="leftmenu_secondindent">
+                                    <div class="leftmenu_arrows expanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/configuration_leftmenuicon.png" alt="Resources" /></div>
+                                    <%=t.t("resources")%>
+                                </div>  
+                            </div>
+                        </div>
+                        <div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" id="leftmenu_resource">
+                                <div class="leftmenu_thirdindent">
+                                    <div class="leftmenu_arrows expanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/zone_zoneicon.png" alt="Zone" /></div>
+                                    Zone: <strong><span id="zone_name">Zone 1</span></strong>
+                                </div>  
+                            </div>
+                        </div>
+                        
+                        <div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" id="leftmenu_resource">
+                                <div class="leftmenu_fourthindent">
+                                    <div class="leftmenu_arrows expanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/zone_podicon.png" alt="Pod" /></div>
+                                    Pod: <strong><span id="pod_name">Name of the Pod</span></strong>
+                                </div>  
+                            </div>
+                        </div>
+                        
+                        <div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" id="leftmenu_resource">
+                                <div class="leftmenu_fifthindent">
+                                    <div class="leftmenu_arrows expanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/zone_clustericon.png" alt="Cluster" /></div>
+                                  Cluster: <strong><span id="cluster_name">(Name of the Cluster)</span></strong>
+                                </div>  
+                            </div>
+                        </div>
+                        
+                        <div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" id="leftmenu_resource">
+                                <div class="leftmenu_sixthindent">
+                                    <div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/zone_hosticon.png" alt="Host" /></div>
+                                  Host: <strong><span id="host_name">(Name of the Host)</span></strong>
+                                </div>  
+                            </div>
+                        </div>
+                        
+                        <div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" id="leftmenu_resource">
+                                <div class="leftmenu_sixthindent">
+                                    <div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/zone_primarystorageicon.png" alt="PrimaryStorage" /></div>
+                                 Primary: <strong><span id="primary_storage_name">(Name of the Primary Storage)</span></strong>
+                                </div>  
+                            </div>
+                        </div>
+                        
+                        <div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" style="border-bottom:1px dashed b4c8d6;" id="leftmenu_service_offering">
+                                <div class="leftmenu_secondindent">
+                                    <div class="leftmenu_arrows expanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/configuration_leftmenuicon.png" alt="Service Offerings" /></div>
+                                    <%=t.t("service.offerings")%>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" id="leftmenu_disk_offering">
+                                <div class="leftmenu_secondindent">
+                                    <div class="leftmenu_arrows expanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/configuration_leftmenuicon.png" alt="Disk Offerings" /></div>
+                                    <%=t.t("disk.offerings")%>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" id="leftmenu_global_setting">
+                                <div class="leftmenu_secondindent">
+                                    <div class="leftmenu_arrows expanded_close" id="arrowIcon"></div>
+                                    <div class="leftmenu_list_icons">
+                                        <img src="images/configuration_leftmenuicon.png" alt="Global Settings" /></div>
+                                    <%=t.t("global.settings")%>
+                                </div>
+                            </div>
+                        </div>
+               		 </div>
                 </div>
-                <div class="leftmenu_list">                    
-                    <div class="leftmenu_content" id="leftmenu_resource">
-                        <div class="leftmenu_secondindent">
-                            <div class="leftmenu_list_icons">
-                                <img src="images/configuration_leftmenuicon.png" alt="Resources" /></div>
-                            <%=t.t("resources")%>
-                        </div>
-                    </div>
-                    <div class="leftmenu_content" id="leftmenu_service_offering">
-                        <div class="leftmenu_secondindent">
-                            <div class="leftmenu_list_icons">
-                                <img src="images/configuration_leftmenuicon.png" alt="Service Offerings" /></div>
-                            <%=t.t("service.offerings")%>
-                        </div>
-                    </div>
-                    <div class="leftmenu_content" id="leftmenu_disk_offering">
-                        <div class="leftmenu_secondindent">
-                            <div class="leftmenu_list_icons">
-                                <img src="images/configuration_leftmenuicon.png" alt="Disk Offerings" /></div>
-                            <%=t.t("disk.offerings")%>
-                        </div>
-                    </div>
-                    <div class="leftmenu_content" id="leftmenu_global_setting">
-                        <div class="leftmenu_secondindent">
-                            <div class="leftmenu_list_icons">
-                                <img src="images/configuration_leftmenuicon.png" alt="Global Settings" /></div>
-                            <%=t.t("global.settings")%>
-                        </div>
-                    </div>
+                
+              
+                
+                
                 </div>
             </div>
         </div>
diff --git a/ui/new/scripts/cloud.core2.init.js b/ui/new/scripts/cloud.core2.init.js
index 1d2dde2dda2..3505bfcec21 100644
--- a/ui/new/scripts/cloud.core2.init.js
+++ b/ui/new/scripts/cloud.core2.init.js
@@ -1,19 +1,5 @@
 $(document).ready(function() {     
-    $("#accordion_menu").accordion({
-        autoHeight: false, 
-        collapsible: true,
-        active: false,
-        change: function(event, ui) {   
-            if(ui.newContent.length==0)  //collapse
-                ui.oldHeader.find("#arrow_icon").removeClass("open").addClass("close");            
-            else  //expand
-                ui.newHeader.find("#arrow_icon").removeClass("close").addClass("open"); 
-                
-            //collapse submenu instanceGroup under menu instance
-            $("#leftmenu_instance_group_header").find("#arrow_icon").removeClass("open").addClass("close");            
-            $("#leftmenu_instance_group_container").empty();     
-        }
-    });
+
     $("#accordion_menu").show();
        
     var $midmenuItem = $("#midmenu_item");
@@ -30,13 +16,13 @@ $(document).ready(function() {
             clearLeftMenu();
             clearMiddleMenu();
             
-            $("#right_panel").load(rightPanelJSP, function(){                   
+            $("#right_panel").load(rightPanelJSP, function(){                   
                 $("#right_panel_content #tab_content_details #action_message_box #close_button").bind("click", function(event){    
                     $(this).parent().hide();
                     return false;
-                });  
-                                     
-                var $actionLink = $("#right_panel_content #tab_content_details #action_link");
+                });  
+                                     
+                var $actionLink = $("#right_panel_content #tab_content_details #action_link");
 	            $actionLink.bind("mouseover", function(event) {	    
                     $(this).find("#action_menu").show();    
                     return false;
@@ -44,14 +30,14 @@ $(document).ready(function() {
                 $actionLink.bind("mouseout", function(event) {       
                     $(this).find("#action_menu").hide();    
                     return false;
-                });	   
-                              
-                afterLoadRightPanelJSPFn();    
-                            
-                $.ajax({
-	                cache: false,
+                });	   
+                              
+                afterLoadRightPanelJSPFn();    
+                            
+                $.ajax({
+	                cache: false,
 	                data: createURL("command="+commandString+"&pagesize="+midmenuItemCount),
-	                dataType: "json",
+	                dataType: "json",
 	                success: function(json) {		                    
 	                    selectedItemsInMidMenu = {};    	                
 	                    var items = json[jsonResponse1][jsonResponse2];
@@ -59,7 +45,7 @@ $(document).ready(function() {
 	                        for(var i=0; i<items.length;i++) { 
                                 var $midmenuItem1 = $midmenuItem.clone();  
                                 $midmenuItem1.data("toRightPanelFn", toRightPanelFn);                             
-                                toMidmenuFn(items[i], $midmenuItem1);    
+                                toMidmenuFn(items[i], $midmenuItem1);    
                                 bindClickToMidMenu($midmenuItem1, toRightPanelFn, getMidmenuIdFn);             
                                 $("#midmenu_container").append($midmenuItem1.show());   
                                 if(i == 0)  //click the 1st item in middle menu as default 
@@ -121,7 +107,7 @@ $(document).ready(function() {
         clearLeftMenu();
         clearMiddleMenu();
         
-        $("#right_panel").load("jsp/domain.jsp", function(){ 
+        $("#right_panel").load("jsp/domain.jsp", function(){ 
             afterLoadDomainJSP();       
         });     
         return false;
@@ -139,7 +125,7 @@ $(document).ready(function() {
         clearLeftMenu();
         clearMiddleMenu();
                 
-        $("#right_panel").load("jsp/resource.jsp", function(){ 
+        $("#right_panel").load("jsp/resource.jsp", function(){ 
             afterLoadResourceJSP();       
         });     
                 
@@ -173,484 +159,484 @@ $(document).ready(function() {
 		alert("Detected a frame not from the same domain (" + self.location.hostname + ").  Moving app to top of browser to prevent any security tampering.");
 		top.location.href = window.location.href;
 	}
-
-	// We don't support IE6 at the moment, so let's just inform customers it won't work
-	var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
-	var gteIE7 = false /*@cc_on || @_jscript_version >= 5.7 @*/;
-
-	// Disable IE6 browsers as UI does not support it
-	if (IE6 == true) {
-		alert("Only IE7, IE8, FireFox 3.x, Chrome, and Safari browsers are supported at this time.");
-		return;
-	}
-	
-	/*
-	initializeTestTool();
-	*/
-	
-	// We will be dropping all the main tab content into this container
-	mainContainer = $("#maincontentarea");
-
-	// Tab Links, dashboard is the initial active tab
-	mainContainer.load("content/tab_dashboard.html");
-	
-	// Default AJAX Setup
-	$.ajaxSetup({
-		url: "/client/api",
-		dataType: "json",
-		cache: false,
-		error: function(XMLHttpResponse) {
-			handleError(XMLHttpResponse);
-		},
-		beforeSend: function(XMLHttpRequest) {
-			if (g_mySession == $.cookie("JSESSIONID")) {
-				return true;
-			} else {
-				$("#dialog_session_expired").dialog("open");
-				return false;
-			}
-		}		
-	});
-	
-	// LOGIN/LOGOUT
-	// 'Enter' Key in any login form element = Submit click
+
+	// We don't support IE6 at the moment, so let's just inform customers it won't work
+	var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
+	var gteIE7 = false /*@cc_on || @_jscript_version >= 5.7 @*/;
+
+	// Disable IE6 browsers as UI does not support it
+	if (IE6 == true) {
+		alert("Only IE7, IE8, FireFox 3.x, Chrome, and Safari browsers are supported at this time.");
+		return;
+	}
+	
+	/*
+	initializeTestTool();
+	*/
+	
+	// We will be dropping all the main tab content into this container
+	mainContainer = $("#maincontentarea");
+
+	// Tab Links, dashboard is the initial active tab
+	mainContainer.load("content/tab_dashboard.html");
+	
+	// Default AJAX Setup
+	$.ajaxSetup({
+		url: "/client/api",
+		dataType: "json",
+		cache: false,
+		error: function(XMLHttpResponse) {
+			handleError(XMLHttpResponse);
+		},
+		beforeSend: function(XMLHttpRequest) {
+			if (g_mySession == $.cookie("JSESSIONID")) {
+				return true;
+			} else {
+				$("#dialog_session_expired").dialog("open");
+				return false;
+			}
+		}		
+	});
+	
+	// LOGIN/LOGOUT
+	// 'Enter' Key in any login form element = Submit click
 	$("#logoutpage #loginForm").keypress(function(event) {
-		var formId = $(event.target).attr("id");
-		if(event.keyCode == keycode_Enter && formId != "loginbutton") {
-			login();
-		}
-	});
-	
-	$("#logoutpage .loginbutton").bind("click", function(event) {
-		login();
-		return false;
-	});
-	
-	$("#logoutaccount_link").bind("click", function(event) {
-		$.ajax({
-		        data: createURL("command=logout&response=json"),
-			dataType: "json",
-			success: function(json) {
-				logout(true);
-			},
-			error: function() {
-				logout(true);
-			},
-			beforeSend : function(XMLHTTP) {
-				return true;
-			}
-		});
-	});
-	
-	// FUNCTION: logs the user out
+		var formId = $(event.target).attr("id");
+		if(event.keyCode == keycode_Enter && formId != "loginbutton") {
+			login();
+		}
+	});
+	
+	$("#logoutpage .loginbutton").bind("click", function(event) {
+		login();
+		return false;
+	});
+	
+	$("#logoutaccount_link").bind("click", function(event) {
+		$.ajax({
+		        data: createURL("command=logout&response=json"),
+			dataType: "json",
+			success: function(json) {
+				logout(true);
+			},
+			error: function() {
+				logout(true);
+			},
+			beforeSend : function(XMLHTTP) {
+				return true;
+			}
+		});
+	});
+	
+	// FUNCTION: logs the user out
 	var activeTab = null;
-	function logout(refresh) {
-		g_mySession = null;
+	function logout(refresh) {
+		g_mySession = null;
                 g_sessionKey = null;
-		g_username = null;	
-		g_account = null;
-		g_domainid = null;	
+		g_username = null;	
+		g_account = null;
+		g_domainid = null;	
 		g_timezoneoffset = null;
-		g_timezone = null;
-		
-		$.cookie('JSESSIONID', null);
-		$.cookie('sessionKey', null);
-		$.cookie('username', null);
-		$.cookie('account', null);
-		$.cookie('domainid', null);
-		$.cookie('role', null);
-		$.cookie('networktype', null); 
+		g_timezone = null;
+		
+		$.cookie('JSESSIONID', null);
+		$.cookie('sessionKey', null);
+		$.cookie('username', null);
+		$.cookie('account', null);
+		$.cookie('domainid', null);
+		$.cookie('role', null);
+		$.cookie('networktype', null); 
 		$.cookie('timezoneoffset', null);
-		$.cookie('timezone', null);
-		
+		$.cookie('timezone', null);
+		
 		$("body").stopTime();
 		
-		// default is to redisplay the login page
+		// default is to redisplay the login page
 		if (onLogoutCallback()) {
 			if (refresh) {
 				location.replace('/client');
 				return false;
-			}
-			$("#account_password").val("");
-			$(".loginbutton_box p").hide();
-			$("#logoutpage").show();
-			$("body").css("background", "#4e4e4e url(images/logout_bg.gif) repeat-x top left");
-			mainContainer.empty();
-			$("#mainmaster").hide();
-			$("#overlay_black").hide();
-			
-			var menuOnClass = "menutab_on";
-			var menuOffClass = "menutab_off";
-			var tab = null;
-			if (isAdmin()) {
-				tab = $("#menutab_dashboard_root");
-				menuOnClass = "admin_menutab_on";
-				menuOffClass = "admin_menutab_off";
-			} else if (isDomainAdmin()) {
-				tab = $("#menutab_dashboard_domain");
-				menuOnClass = "admin_menutab_on";
-				menuOffClass = "admin_menutab_off";
-			} else if (isUser()) {
-				tab = $("#menutab_dashboard_user");
-				menuOnClass = "menutab_on";
-				menuOffClass = "menutab_off";
-			}
-			if (activeTab != null) {
-				activeTab.removeClass(menuOnClass).addClass(menuOffClass);
-				activeTab = null;
-			}
-			if (tab != null) {
-				tab.removeClass(menuOffClass).addClass(menuOnClass);
-			}
-			g_role = null;
-			$("#account_username").focus();
-		}
-	}
-	
-	// FUNCTION: logs the user in
-	function login() {
-		var array1 = [];
-		var username = encodeURIComponent($("#account_username").val());
-		array1.push("&username="+username);
-		
-		var password = $.md5(encodeURIComponent($("#account_password").val()));
-		array1.push("&password="+password);
-		
-		var domain = encodeURIComponent($("#account_domain").val());
-		if(domain != null && domain.length > 0)
-		    array1.push("&domain="+domain);
-		
+			}
+			$("#account_password").val("");
+			$(".loginbutton_box p").hide();
+			$("#logoutpage").show();
+			$("body").css("background", "#4e4e4e url(images/logout_bg.gif) repeat-x top left");
+			mainContainer.empty();
+			$("#mainmaster").hide();
+			$("#overlay_black").hide();
+			
+			var menuOnClass = "menutab_on";
+			var menuOffClass = "menutab_off";
+			var tab = null;
+			if (isAdmin()) {
+				tab = $("#menutab_dashboard_root");
+				menuOnClass = "admin_menutab_on";
+				menuOffClass = "admin_menutab_off";
+			} else if (isDomainAdmin()) {
+				tab = $("#menutab_dashboard_domain");
+				menuOnClass = "admin_menutab_on";
+				menuOffClass = "admin_menutab_off";
+			} else if (isUser()) {
+				tab = $("#menutab_dashboard_user");
+				menuOnClass = "menutab_on";
+				menuOffClass = "menutab_off";
+			}
+			if (activeTab != null) {
+				activeTab.removeClass(menuOnClass).addClass(menuOffClass);
+				activeTab = null;
+			}
+			if (tab != null) {
+				tab.removeClass(menuOffClass).addClass(menuOnClass);
+			}
+			g_role = null;
+			$("#account_username").focus();
+		}
+	}
+	
+	// FUNCTION: logs the user in
+	function login() {
+		var array1 = [];
+		var username = encodeURIComponent($("#account_username").val());
+		array1.push("&username="+username);
+		
+		var password = $.md5(encodeURIComponent($("#account_password").val()));
+		array1.push("&password="+password);
+		
+		var domain = encodeURIComponent($("#account_domain").val());
+		if(domain != null && domain.length > 0)
+		    array1.push("&domain="+domain);
+		
 		$.ajax({
-			type: "POST",
-		        data: createURL("command=login&response=json" + array1.join("")),
-			dataType: "json",
-			async: false,
-			success: function(json) {
-				g_mySession = $.cookie('JSESSIONID');
-				g_sessionKey = encodeURIComponent(json.loginresponse.sessionkey);
-				g_role = json.loginresponse.type;
-				g_username = json.loginresponse.username;	
-				g_account = json.loginresponse.account;
+			type: "POST",
+		        data: createURL("command=login&response=json" + array1.join("")),
+			dataType: "json",
+			async: false,
+			success: function(json) {
+				g_mySession = $.cookie('JSESSIONID');
+				g_sessionKey = encodeURIComponent(json.loginresponse.sessionkey);
+				g_role = json.loginresponse.type;
+				g_username = json.loginresponse.username;	
+				g_account = json.loginresponse.account;
 				g_domainid = json.loginresponse.domainid;	
-				g_timezone = json.loginresponse.timezone;								
-				g_timezoneoffset = json.loginresponse.timezoneoffset;					
-				if (json.loginresponse.networktype != null) 
-					g_networkType = json.loginresponse.networktype;				
-				if (json.loginresponse.hypervisortype != null) 
-					g_hypervisorType = json.loginresponse.hypervisortype;				
-				if (json.loginresponse.directattachnetworkgroupsenabled != null) 
+				g_timezone = json.loginresponse.timezone;								
+				g_timezoneoffset = json.loginresponse.timezoneoffset;					
+				if (json.loginresponse.networktype != null) 
+					g_networkType = json.loginresponse.networktype;				
+				if (json.loginresponse.hypervisortype != null) 
+					g_hypervisorType = json.loginresponse.hypervisortype;				
+				if (json.loginresponse.directattachnetworkgroupsenabled != null) 
 					g_directAttachNetworkGroupsEnabled = json.loginresponse.directattachnetworkgroupsenabled;
 				if (json.loginresponse.directattacheduntaggedenabled != null) 
-					g_directAttachedUntaggedEnabled = json.loginresponse.directattacheduntaggedenabled;
-                if (json.loginresponse.systemvmuselocalstorage != null) 
+					g_directAttachedUntaggedEnabled = json.loginresponse.directattacheduntaggedenabled;
+                if (json.loginresponse.systemvmuselocalstorage != null) 
 					g_systemVmUseLocalStorage = json.loginresponse.systemvmuselocalstorage;
 					
-				$.cookie('sessionKey', g_sessionKey, { expires: 1});
-				$.cookie('networktype', g_networkType, { expires: 1});
-				$.cookie('hypervisortype', g_hypervisorType, { expires: 1});
-				$.cookie('username', g_username, { expires: 1});	
-				$.cookie('account', g_account, { expires: 1});	
-				$.cookie('domainid', g_domainid, { expires: 1});				
-				$.cookie('role', g_role, { expires: 1});
+				$.cookie('sessionKey', g_sessionKey, { expires: 1});
+				$.cookie('networktype', g_networkType, { expires: 1});
+				$.cookie('hypervisortype', g_hypervisorType, { expires: 1});
+				$.cookie('username', g_username, { expires: 1});	
+				$.cookie('account', g_account, { expires: 1});	
+				$.cookie('domainid', g_domainid, { expires: 1});				
+				$.cookie('role', g_role, { expires: 1});
 				$.cookie('timezoneoffset', g_timezoneoffset, { expires: 1});  
-				$.cookie('timezone', g_timezone, { expires: 1});  
+				$.cookie('timezone', g_timezone, { expires: 1});  
 				$.cookie('directattachnetworkgroupsenabled', g_directAttachNetworkGroupsEnabled, { expires: 1}); 
-				$.cookie('directattacheduntaggedenabled', g_directAttachedUntaggedEnabled, { expires: 1}); 
-				$.cookie('systemvmuselocalstorage', g_systemVmUseLocalStorage, { expires: 1}); 
-				
-				// Set Role
-				if (isUser()) {
-					$(".loginbutton_box p").text("").hide();			
-					$("#menutab_role_user #menutab_dashboard_user").click();
-				} else if (isAdmin()) {
-					$(".loginbutton_box p").text("").hide();			
-					$("#menutab_role_root #menutab_dashboard_root").click();
-				} else if (isDomainAdmin()) {
-					$(".loginbutton_box p").text("").hide();			
-					$("#menutab_role_domain #menutab_dashboard_domain").click();
-				} else {
-				    $(".loginbutton_box p").text("Account type of '" + username + "' is neither user nor admin.").show();
-				    return;
-				}				
-				
-				$("#logoutpage").hide();
-				$("body").css("background", "#FFF repeat top left");
+				$.cookie('directattacheduntaggedenabled', g_directAttachedUntaggedEnabled, { expires: 1}); 
+				$.cookie('systemvmuselocalstorage', g_systemVmUseLocalStorage, { expires: 1}); 
+				
+				// Set Role
+				if (isUser()) {
+					$(".loginbutton_box p").text("").hide();			
+					$("#menutab_role_user #menutab_dashboard_user").click();
+				} else if (isAdmin()) {
+					$(".loginbutton_box p").text("").hide();			
+					$("#menutab_role_root #menutab_dashboard_root").click();
+				} else if (isDomainAdmin()) {
+					$(".loginbutton_box p").text("").hide();			
+					$("#menutab_role_domain #menutab_dashboard_domain").click();
+				} else {
+				    $(".loginbutton_box p").text("Account type of '" + username + "' is neither user nor admin.").show();
+				    return;
+				}				
+				
+				$("#logoutpage").hide();
+				$("body").css("background", "#FFF repeat top left");
 				$("#mainmaster").show();	
-			},
-			error: function() {
-				$("#account_password").val("");
-				$("#logoutpage").show();				
-				$(".loginbutton_box p").text("Your username/password does not match our records.").show();
-				$("#account_username").focus();
-			},
-			beforeSend: function(XMLHttpRequest) {
-				return true;
-			}
-		});
-	}
-	
-	// Dialogs
-	$("#dialog_confirmation").dialog({ 
-		autoOpen: false,
-		modal: true,
-		zIndex: 2000
-	});
-	
-	$("#dialog_info").dialog({ 
-		autoOpen: false,
-		modal: true,
-		zIndex: 2000,
-		buttons: { "OK": function() { $(this).dialog("close"); } }
-	});
-	
-	$("#dialog_alert").dialog({ 
-		autoOpen: false,
-		modal: true,
-		zIndex: 2000,
-		buttons: { "OK": function() { $(this).dialog("close"); } }
-	});
-	$("#dialog_alert").siblings(".ui-widget-header").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
-	$("#dialog_alert").siblings(".ui-dialog-buttonpane").find(".ui-state-default").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
-	
-	$("#dialog_error").dialog({ 
-		autoOpen: false,
-		modal: true,
-		zIndex: 2000,
-		buttons: { "Close": function() { $(this).dialog("close"); } }
-	});
-	$("#dialog_error").siblings(".ui-widget-header").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
-	$("#dialog_error").siblings(".ui-dialog-buttonpane").find(".ui-state-default").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
-	
-	$("#dialog_session_expired").dialog({ 
-		autoOpen: false,
-		modal: true,
-		zIndex: 2000,
-		buttons: { "OK": function() { logout(true); $(this).dialog("close"); } }
-	});
-	$("#dialog_session_expired").siblings(".ui-widget-header").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
-	$("#dialog_session_expired").siblings(".ui-dialog-buttonpane").find(".ui-state-default").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
-			
-	$("#dialog_info_please_select_one_item_in_middle_menu").dialog({ 
-		autoOpen: false,
-		modal: true,
-		zIndex: 2000,
-		buttons: { "OK": function() { $(this).dialog("close"); } }
-	});
-	
-	/*
-	$("#dialog_server_error").dialog({ 
-		autoOpen: false,
-		modal: true,
-		zIndex: 2000,
-		buttons: { "OK": function() { $(this).dialog("close"); } }
-	});
-	$("#dialog_server_error").siblings(".ui-widget-header").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
-	$("#dialog_server_error").siblings(".ui-dialog-buttonpane").find(".ui-state-default").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
-	*/
-	
-	// Menu Tabs
-	$("#global_nav").bind("click", function(event) {
-		var tab = $(event.target);
-		var tabId = tab.attr("id");
-		var menuOnClass = "menutab_on";
-		var menuOffClass = "menutab_off";
-		if (tabId == "menutab_dashboard_user" || tabId == "menutab_dashboard_root" || tabId == "menutab_dashboard_domain") {
-			showDashboardTab();
-		} else if (tabId == "menutab_vm") {
-		    mainContainer.load("content/tab_instances.html", function() {
-			    showInstancesTab(tab.data("domainId"), tab.data("account"));	
-		    });		
-		} else if (tabId == "menutab_networking") {
-		    mainContainer.load("content/tab_networking.html", function() {
-		        showNetworkingTab(tab.data("domainId"), tab.data("account"));
-		    });	
-		} else if (tabId == "menutab_templates") {
-		    mainContainer.load("content/tab_templates.html", function() {
-			    showTemplatesTab();
-			});	
-		} else if (tabId == "menutab_events") {
-			mainContainer.load("content/tab_events.html", function() {			    
-			    showEventsTab(tab.data("showEvents"));
-			});
-		} else if (tabId == "menutab_hosts") {
-			mainContainer.load("content/tab_hosts.html", function() {		
-			    showHostsTab();
-			});
-	    } else if (tabId == "menutab_storage") {
-			mainContainer.load("content/tab_storage.html", function() {		
-			    showStorageTab(tab.data("domainId"), tab.data("targetTab"));
-			});
-		} else if (tabId == "menutab_accounts") {
-			mainContainer.load("content/tab_accounts.html", function() {	
-			    showAccountsTab(tab.data("domainId"));
-			});
-		} else if (tabId == "menutab_domain") {
-			mainContainer.load("jsp/tab_domains.jsp", function() {	   
-			    showDomainsTab();
-			});
-		} else if (tabId == "menutab_configuration") {
-			mainContainer.load("content/tab_configuration.html", function() {
-			    showConfigurationTab();
-			});
-		} else {
-			return false;
-		}
-		
-		if (isAdmin() || isDomainAdmin()) {
-			menuOnClass = "admin_menutab_on";
-			menuOffClass = "admin_menutab_off";
-		} else if (isUser()) {
-			menuOnClass = "menutab_on";
-			menuOffClass = "menutab_off";
-		}
-		if (activeTab != null) {
-			activeTab.removeClass(menuOnClass).addClass(menuOffClass); 
-		}
-		tab.removeClass(menuOffClass).addClass(menuOnClass);
-		activeTab = tab;
-		removeDialogs();
-		return false;
-	});
-	
-	// Dashboard Tab
-	function showDashboardTab() {
-		mainContainer.load("content/tab_dashboard.html", function() {
-			$(".header_topright #header_username").text($.cookie("username"));
-			
-			if (isAdmin()) {
-				var sessionExpired = false;
-				var zones = null;
-				var noZones = false;
-				var noPods = true;
-				$("#menutab_dashboard_root, #menutab_vm, #menutab_networking_old, #menutab_networking, #menutab_templates, #menutab_events, #menutab_hosts, #menutab_storage, #menutab_accounts, #menutab_domain").hide();							
-				$.ajax({
+			},
+			error: function() {
+				$("#account_password").val("");
+				$("#logoutpage").show();				
+				$(".loginbutton_box p").text("Your username/password does not match our records.").show();
+				$("#account_username").focus();
+			},
+			beforeSend: function(XMLHttpRequest) {
+				return true;
+			}
+		});
+	}
+	
+	// Dialogs
+	$("#dialog_confirmation").dialog({ 
+		autoOpen: false,
+		modal: true,
+		zIndex: 2000
+	});
+	
+	$("#dialog_info").dialog({ 
+		autoOpen: false,
+		modal: true,
+		zIndex: 2000,
+		buttons: { "OK": function() { $(this).dialog("close"); } }
+	});
+	
+	$("#dialog_alert").dialog({ 
+		autoOpen: false,
+		modal: true,
+		zIndex: 2000,
+		buttons: { "OK": function() { $(this).dialog("close"); } }
+	});
+	$("#dialog_alert").siblings(".ui-widget-header").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
+	$("#dialog_alert").siblings(".ui-dialog-buttonpane").find(".ui-state-default").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
+	
+	$("#dialog_error").dialog({ 
+		autoOpen: false,
+		modal: true,
+		zIndex: 2000,
+		buttons: { "Close": function() { $(this).dialog("close"); } }
+	});
+	$("#dialog_error").siblings(".ui-widget-header").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
+	$("#dialog_error").siblings(".ui-dialog-buttonpane").find(".ui-state-default").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
+	
+	$("#dialog_session_expired").dialog({ 
+		autoOpen: false,
+		modal: true,
+		zIndex: 2000,
+		buttons: { "OK": function() { logout(true); $(this).dialog("close"); } }
+	});
+	$("#dialog_session_expired").siblings(".ui-widget-header").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
+	$("#dialog_session_expired").siblings(".ui-dialog-buttonpane").find(".ui-state-default").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
+			
+	$("#dialog_info_please_select_one_item_in_middle_menu").dialog({ 
+		autoOpen: false,
+		modal: true,
+		zIndex: 2000,
+		buttons: { "OK": function() { $(this).dialog("close"); } }
+	});
+	
+	/*
+	$("#dialog_server_error").dialog({ 
+		autoOpen: false,
+		modal: true,
+		zIndex: 2000,
+		buttons: { "OK": function() { $(this).dialog("close"); } }
+	});
+	$("#dialog_server_error").siblings(".ui-widget-header").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
+	$("#dialog_server_error").siblings(".ui-dialog-buttonpane").find(".ui-state-default").css("background", "url('/client/css/images/ui-bg_errorglass_30_ffffff_1x400.png') repeat-x scroll 50% 50% #393939");
+	*/
+	
+	// Menu Tabs
+	$("#global_nav").bind("click", function(event) {
+		var tab = $(event.target);
+		var tabId = tab.attr("id");
+		var menuOnClass = "menutab_on";
+		var menuOffClass = "menutab_off";
+		if (tabId == "menutab_dashboard_user" || tabId == "menutab_dashboard_root" || tabId == "menutab_dashboard_domain") {
+			showDashboardTab();
+		} else if (tabId == "menutab_vm") {
+		    mainContainer.load("content/tab_instances.html", function() {
+			    showInstancesTab(tab.data("domainId"), tab.data("account"));	
+		    });		
+		} else if (tabId == "menutab_networking") {
+		    mainContainer.load("content/tab_networking.html", function() {
+		        showNetworkingTab(tab.data("domainId"), tab.data("account"));
+		    });	
+		} else if (tabId == "menutab_templates") {
+		    mainContainer.load("content/tab_templates.html", function() {
+			    showTemplatesTab();
+			});	
+		} else if (tabId == "menutab_events") {
+			mainContainer.load("content/tab_events.html", function() {			    
+			    showEventsTab(tab.data("showEvents"));
+			});
+		} else if (tabId == "menutab_hosts") {
+			mainContainer.load("content/tab_hosts.html", function() {		
+			    showHostsTab();
+			});
+	    } else if (tabId == "menutab_storage") {
+			mainContainer.load("content/tab_storage.html", function() {		
+			    showStorageTab(tab.data("domainId"), tab.data("targetTab"));
+			});
+		} else if (tabId == "menutab_accounts") {
+			mainContainer.load("content/tab_accounts.html", function() {	
+			    showAccountsTab(tab.data("domainId"));
+			});
+		} else if (tabId == "menutab_domain") {
+			mainContainer.load("jsp/tab_domains.jsp", function() {	   
+			    showDomainsTab();
+			});
+		} else if (tabId == "menutab_configuration") {
+			mainContainer.load("content/tab_configuration.html", function() {
+			    showConfigurationTab();
+			});
+		} else {
+			return false;
+		}
+		
+		if (isAdmin() || isDomainAdmin()) {
+			menuOnClass = "admin_menutab_on";
+			menuOffClass = "admin_menutab_off";
+		} else if (isUser()) {
+			menuOnClass = "menutab_on";
+			menuOffClass = "menutab_off";
+		}
+		if (activeTab != null) {
+			activeTab.removeClass(menuOnClass).addClass(menuOffClass); 
+		}
+		tab.removeClass(menuOffClass).addClass(menuOnClass);
+		activeTab = tab;
+		removeDialogs();
+		return false;
+	});
+	
+	// Dashboard Tab
+	function showDashboardTab() {
+		mainContainer.load("content/tab_dashboard.html", function() {
+			$(".header_topright #header_username").text($.cookie("username"));
+			
+			if (isAdmin()) {
+				var sessionExpired = false;
+				var zones = null;
+				var noZones = false;
+				var noPods = true;
+				$("#menutab_dashboard_root, #menutab_vm, #menutab_networking_old, #menutab_networking, #menutab_templates, #menutab_events, #menutab_hosts, #menutab_storage, #menutab_accounts, #menutab_domain").hide();							
+				$.ajax({
 				        data: createURL("command=listZones&available=true&response=json"+maxPageSize),
-					dataType: "json",
-					async: false,
-					success: function(json) {
-						zones = json.listzonesresponse.zone;
-						var zoneSelect = $("#capacity_zone_select").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>"); 								
-								if(noPods) {
-								    $.ajax({
-								data: createURL("command=listPods&zoneId="+zones[i].id+"&response=json"),
-						                dataType: "json",
-						                async: false,
-						                success: function(json) {
-							                var pods = json.listpodsresponse.pod;						
-							                if (pods != null && pods.length > 0) {
-            							        noPods = false;
-            							        $("#menutab_dashboard_root, #menutab_vm, #menutab_networking_old, #menutab_networking, #menutab_templates, #menutab_events, #menutab_hosts, #menutab_storage, #menutab_accounts, #menutab_domain").show();							
-							                }							
-						                }
-					                });
-								}
-							}
-						} else {							
-							noZones = true;
-						}
-					},					
-					beforeSend: function(XMLHttpRequest) {
-						return true;
-					}	
-				});
-				if (sessionExpired) return false;
-				if (noZones || noPods) {
-					$("#tab_dashboard_user").hide();
-					$("#menutab_role_user").hide();
-					$("#menutab_role_root").show();
-					$("#menutab_configuration").click();
-					return false;
-				}
-				
-				var capacities = null;
-				$.ajax({
-					cache: false,
-					async: false,
-					data: createURL("command=listCapacity&response=json"),
-					dataType: "json",
-					success: function(json) {
-						capacities = json.listcapacityresponse.capacity;
-					}
-				});
-				
-				$("#capacity_pod_select").bind("change", function(event) {
-					// Reset to Defaults
-					$("#public_ip_total, #storage_total, #storage_alloc_total, #sec_storage_total, #memory_total, #cpu_total, #private_ip_total").text("N/A");
-					$("#public_ip_used, #storage_used, #storage_alloc, #sec_storage_used, #memory_used, #cpu_used, #private_ip_used,").attr("style", "width:50%").text("N/A");
-					$(".db_bargraph_barbox_safezone").attr("style", "width:0%");
-					$(".db_bargraph_barbox_unsafezone").attr("style", "width:0%");
+					dataType: "json",
+					async: false,
+					success: function(json) {
+						zones = json.listzonesresponse.zone;
+						var zoneSelect = $("#capacity_zone_select").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>"); 								
+								if(noPods) {
+								    $.ajax({
+								data: createURL("command=listPods&zoneId="+zones[i].id+"&response=json"),
+						                dataType: "json",
+						                async: false,
+						                success: function(json) {
+							                var pods = json.listpodsresponse.pod;						
+							                if (pods != null && pods.length > 0) {
+            							        noPods = false;
+            							        $("#menutab_dashboard_root, #menutab_vm, #menutab_networking_old, #menutab_networking, #menutab_templates, #menutab_events, #menutab_hosts, #menutab_storage, #menutab_accounts, #menutab_domain").show();							
+							                }							
+						                }
+					                });
+								}
+							}
+						} else {							
+							noZones = true;
+						}
+					},					
+					beforeSend: function(XMLHttpRequest) {
+						return true;
+					}	
+				});
+				if (sessionExpired) return false;
+				if (noZones || noPods) {
+					$("#tab_dashboard_user").hide();
+					$("#menutab_role_user").hide();
+					$("#menutab_role_root").show();
+					$("#menutab_configuration").click();
+					return false;
+				}
+				
+				var capacities = null;
+				$.ajax({
+					cache: false,
+					async: false,
+					data: createURL("command=listCapacity&response=json"),
+					dataType: "json",
+					success: function(json) {
+						capacities = json.listcapacityresponse.capacity;
+					}
+				});
+				
+				$("#capacity_pod_select").bind("change", function(event) {
+					// Reset to Defaults
+					$("#public_ip_total, #storage_total, #storage_alloc_total, #sec_storage_total, #memory_total, #cpu_total, #private_ip_total").text("N/A");
+					$("#public_ip_used, #storage_used, #storage_alloc, #sec_storage_used, #memory_used, #cpu_used, #private_ip_used,").attr("style", "width:50%").text("N/A");
+					$(".db_bargraph_barbox_safezone").attr("style", "width:0%");
+					$(".db_bargraph_barbox_unsafezone").attr("style", "width:0%");
 					
 					var selectedZone = $("#capacity_zone_select option:selected").text();
 					var selectedPod = $("#capacity_pod_select").val();
 					
-					if (capacities != null && capacities.length > 0) {
-						for (var i = 0; i < capacities.length; i++) {
-							var capacity = capacities[i];
-							if (capacity.zonename == selectedZone) {
-								// Public IPs
-								if (capacity.type == "4") {
-									$("#public_ip_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + capacity.capacityused + " / " + capacity.percentused + "%");
-									$("#public_ip_total").text("Total: " + capacity.capacitytotal);
-									var usedPercentage = parseInt(capacity.percentused);
-									if (usedPercentage > 70) {
-										$("#capacity_public_ip .db_bargraph_barbox_safezone").attr("style", "width:70%");
-										if(usedPercentage <= 100) 										
-										    $("#capacity_public_ip .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
-										else 
-										    $("#capacity_public_ip .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
-									} else {
-										$("#capacity_public_ip .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
-									    $("#capacity_public_ip .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
-									}								
-								// Secondary Storage
-								} else if (capacity.type == "6") {
-									$("#sec_storage_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertBytes(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
-									$("#sec_storage_total").text("Total: " + convertBytes(parseInt(capacity.capacitytotal)));
-									var usedPercentage = parseInt(capacity.percentused);
-									if (usedPercentage > 70) {
-										$("#capacity_sec_storage .db_bargraph_barbox_safezone").attr("style", "width:70%");
-										if(usedPercentage <= 100) 
-										    $("#capacity_sec_storage .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
-										else
-										    $("#capacity_sec_storage .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
-									} else {
-										$("#capacity_sec_storage .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
-									    $("#capacity_sec_storage .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
-									}
-								} else {
-									if (capacity.podname == selectedPod) {
-										// Memory
-										if (capacity.type == "0") {
-											$("#memory_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertBytes(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
-											$("#memory_total").text("Total: " + convertBytes(parseInt(capacity.capacitytotal)));
-											var usedPercentage = parseInt(capacity.percentused);
-											if (usedPercentage > 70) {
-												$("#capacity_memory .db_bargraph_barbox_safezone").attr("style", "width:70%");
-												if(usedPercentage <= 100) 
-												    $("#capacity_memory .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
-												else
-												    $("#capacity_memory .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
-											} else {
-												$("#capacity_memory .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
-											    $("#capacity_memory .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
-											}
-										// CPU
-										} else if (capacity.type == "1") {
-											$("#cpu_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertHz(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
-											$("#cpu_total").text("Total: " + convertHz(parseInt(capacity.capacitytotal)));
-											var usedPercentage = parseInt(capacity.percentused);
-											if (usedPercentage > 70) {
-												$("#capacity_cpu .db_bargraph_barbox_safezone").attr("style", "width:70%");
-												if(usedPercentage <= 100) 
-												    $("#capacity_cpu .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
-												else
-												    $("#capacity_cpu .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
-											} else {
-												$("#capacity_cpu .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
-											    $("#capacity_cpu .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
+					if (capacities != null && capacities.length > 0) {
+						for (var i = 0; i < capacities.length; i++) {
+							var capacity = capacities[i];
+							if (capacity.zonename == selectedZone) {
+								// Public IPs
+								if (capacity.type == "4") {
+									$("#public_ip_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + capacity.capacityused + " / " + capacity.percentused + "%");
+									$("#public_ip_total").text("Total: " + capacity.capacitytotal);
+									var usedPercentage = parseInt(capacity.percentused);
+									if (usedPercentage > 70) {
+										$("#capacity_public_ip .db_bargraph_barbox_safezone").attr("style", "width:70%");
+										if(usedPercentage <= 100) 										
+										    $("#capacity_public_ip .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
+										else 
+										    $("#capacity_public_ip .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
+									} else {
+										$("#capacity_public_ip .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
+									    $("#capacity_public_ip .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
+									}								
+								// Secondary Storage
+								} else if (capacity.type == "6") {
+									$("#sec_storage_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertBytes(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
+									$("#sec_storage_total").text("Total: " + convertBytes(parseInt(capacity.capacitytotal)));
+									var usedPercentage = parseInt(capacity.percentused);
+									if (usedPercentage > 70) {
+										$("#capacity_sec_storage .db_bargraph_barbox_safezone").attr("style", "width:70%");
+										if(usedPercentage <= 100) 
+										    $("#capacity_sec_storage .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
+										else
+										    $("#capacity_sec_storage .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
+									} else {
+										$("#capacity_sec_storage .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
+									    $("#capacity_sec_storage .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
+									}
+								} else {
+									if (capacity.podname == selectedPod) {
+										// Memory
+										if (capacity.type == "0") {
+											$("#memory_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertBytes(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
+											$("#memory_total").text("Total: " + convertBytes(parseInt(capacity.capacitytotal)));
+											var usedPercentage = parseInt(capacity.percentused);
+											if (usedPercentage > 70) {
+												$("#capacity_memory .db_bargraph_barbox_safezone").attr("style", "width:70%");
+												if(usedPercentage <= 100) 
+												    $("#capacity_memory .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
+												else
+												    $("#capacity_memory .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
+											} else {
+												$("#capacity_memory .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
+											    $("#capacity_memory .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
+											}
+										// CPU
+										} else if (capacity.type == "1") {
+											$("#cpu_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertHz(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
+											$("#cpu_total").text("Total: " + convertHz(parseInt(capacity.capacitytotal)));
+											var usedPercentage = parseInt(capacity.percentused);
+											if (usedPercentage > 70) {
+												$("#capacity_cpu .db_bargraph_barbox_safezone").attr("style", "width:70%");
+												if(usedPercentage <= 100) 
+												    $("#capacity_cpu .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
+												else
+												    $("#capacity_cpu .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
+											} else {
+												$("#capacity_cpu .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
+											    $("#capacity_cpu .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
 											}
 										// Storage Used
 										} else if (capacity.type == "2") {
@@ -681,296 +667,296 @@ $(document).ready(function() {
 											} else {
 												$("#capacity_storage_alloc .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
 											    $("#capacity_storage_alloc .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
-											}
-										// Private IPs
-										} else if (capacity.type == "5") {
-											$("#private_ip_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + capacity.capacityused + " / " + capacity.percentused + "%");
-											$("#private_ip_total").text("Total: " + capacity.capacitytotal);
-											var usedPercentage = parseInt(capacity.percentused);
-											if (usedPercentage > 70) {
-												$("#capacity_private_ip .db_bargraph_barbox_safezone").attr("style", "width:70%");
-												if(usedPercentage <= 100) 
-												    $("#capacity_private_ip .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
-												else
-												    $("#capacity_private_ip .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
-											} else {
-												$("#capacity_private_ip .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
-											    $("#capacity_private_ip .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
-											}
-										}
-									}
-								}
-							}
-						}
-					}
-				});
-				
-				$("#capacity_zone_select").bind("change", function(event) {
-					var zoneId = $(this).val();
-					$.ajax({
+											}
+										// Private IPs
+										} else if (capacity.type == "5") {
+											$("#private_ip_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + capacity.capacityused + " / " + capacity.percentused + "%");
+											$("#private_ip_total").text("Total: " + capacity.capacitytotal);
+											var usedPercentage = parseInt(capacity.percentused);
+											if (usedPercentage > 70) {
+												$("#capacity_private_ip .db_bargraph_barbox_safezone").attr("style", "width:70%");
+												if(usedPercentage <= 100) 
+												    $("#capacity_private_ip .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
+												else
+												    $("#capacity_private_ip .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
+											} else {
+												$("#capacity_private_ip .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
+											    $("#capacity_private_ip .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				});
+				
+				$("#capacity_zone_select").bind("change", function(event) {
+					var zoneId = $(this).val();
+					$.ajax({
 					        data: createURL("command=listPods&zoneId="+zoneId+"&response=json"+maxPageSize),
-						dataType: "json",
-						async: false,
-						success: function(json) {
-							var pods = json.listpodsresponse.pod;
-							var podSelect = $("#capacity_pod_select").empty();	
+						dataType: "json",
+						async: false,
+						success: function(json) {
+							var pods = json.listpodsresponse.pod;
+							var podSelect = $("#capacity_pod_select").empty();	
 							if (pods != null && pods.length > 0) {
-								podSelect.append("<option value='All'>All</option>"); 
-							    for (var i = 0; i < pods.length; i++) {
-								    podSelect.append("<option value='" + pods[i].name + "'>" + fromdb(pods[i].name) + "</option>"); 
-							    }
-							}
-							$("#capacity_pod_select").change();
-						}
-					});
-				});
-				$("#capacity_zone_select").change();
-				
-				// Show Recent Alerts
-				$.ajax({
-				        data: createURL("command=listAlerts&response=json"),
-					dataType: "json",
-					success: function(json) {
-						var alerts = json.listalertsresponse.alert;
-						if (alerts != null && alerts.length > 0) {
-							var alertGrid = $("#alert_grid_content").empty();
-							var length = (alerts.length>=5) ? 5 : alerts.length;
-							for (var i = 0; i < length; i++) {
-								var errorTemplate = $("#recent_error_template").clone(true);
-								errorTemplate.find("#db_error_type").text(toAlertType(alerts[i].type));
-								errorTemplate.find("#db_error_msg").append(fromdb(alerts[i].description));											
-								setDateField(alerts[i].sent, errorTemplate.find("#db_error_date"));															
-								alertGrid.append(errorTemplate.show());
-							}
-						}
-					}
-				});
-				
-				// Show Host Alerts
-				$.ajax({
-				        data: createURL("command=listHosts&state=Alert&response=json"),
-					dataType: "json",
-					success: function(json) {
-						var alerts = json.listhostsresponse.host;
-						if (alerts != null && alerts.length > 0) {
-							var alertGrid = $("#host_alert_grid_content").empty();
-							var length = (alerts.length>=4) ? 4 : alerts.length;
-							for (var i = 0; i < length; i++) {
-								var errorTemplate = $("#recent_error_template").clone(true);
-								errorTemplate.find("#db_error_type").text("Host - Alert State");
-								errorTemplate.find("#db_error_msg").append("Host - <b>" + fromdb(alerts[i].name) + "</b> has been detected in Alert state.");								
-								setDateField(alerts[i].disconnected, errorTemplate.find("#db_error_date"));											
-								alertGrid.append(errorTemplate.show());
-							}
-						}
-					}
-				});
-				
-				$("#alert_more").bind("click", function(event) {
-					event.preventDefault();
-					
-					$("#menutab_role_root #menutab_events").data("showEvents", false).click();
-				});
-				$("#host_alert_more").bind("click", function(event) {
-					event.preventDefault();
-					$("#menutab_hosts").click();
-				});
-				
-				$("#tab_dashboard_user, #tab_dashboard_domain, #loading_gridtable").hide();
-				$("#tab_dashboard_root").show();
-				$("#menutab_role_user").hide();
-				$("#menutab_role_root").show();
-				$("#menutab_role_domain").hide();
-				$("#launch_test").show();
-			} else if (isDomainAdmin()) {
-				var thisTab = $("#tab_dashboard_domain");
-				$("#tab_dashboard_user, #tab_dashboard_root, #loading_gridtable").hide();
-				thisTab.show();
-				$("#menutab_role_user").hide();
-				$("#menutab_role_root").hide();
-				$("#menutab_role_domain").show();
-				$("#launch_test").hide();
-				
-				// Need to use/create better API for this as there is a limit of pageSize
-				// to list count.
-				$.ajax({
+								podSelect.append("<option value='All'>All</option>"); 
+							    for (var i = 0; i < pods.length; i++) {
+								    podSelect.append("<option value='" + pods[i].name + "'>" + fromdb(pods[i].name) + "</option>"); 
+							    }
+							}
+							$("#capacity_pod_select").change();
+						}
+					});
+				});
+				$("#capacity_zone_select").change();
+				
+				// Show Recent Alerts
+				$.ajax({
+				        data: createURL("command=listAlerts&response=json"),
+					dataType: "json",
+					success: function(json) {
+						var alerts = json.listalertsresponse.alert;
+						if (alerts != null && alerts.length > 0) {
+							var alertGrid = $("#alert_grid_content").empty();
+							var length = (alerts.length>=5) ? 5 : alerts.length;
+							for (var i = 0; i < length; i++) {
+								var errorTemplate = $("#recent_error_template").clone(true);
+								errorTemplate.find("#db_error_type").text(toAlertType(alerts[i].type));
+								errorTemplate.find("#db_error_msg").append(fromdb(alerts[i].description));											
+								setDateField(alerts[i].sent, errorTemplate.find("#db_error_date"));															
+								alertGrid.append(errorTemplate.show());
+							}
+						}
+					}
+				});
+				
+				// Show Host Alerts
+				$.ajax({
+				        data: createURL("command=listHosts&state=Alert&response=json"),
+					dataType: "json",
+					success: function(json) {
+						var alerts = json.listhostsresponse.host;
+						if (alerts != null && alerts.length > 0) {
+							var alertGrid = $("#host_alert_grid_content").empty();
+							var length = (alerts.length>=4) ? 4 : alerts.length;
+							for (var i = 0; i < length; i++) {
+								var errorTemplate = $("#recent_error_template").clone(true);
+								errorTemplate.find("#db_error_type").text("Host - Alert State");
+								errorTemplate.find("#db_error_msg").append("Host - <b>" + fromdb(alerts[i].name) + "</b> has been detected in Alert state.");								
+								setDateField(alerts[i].disconnected, errorTemplate.find("#db_error_date"));											
+								alertGrid.append(errorTemplate.show());
+							}
+						}
+					}
+				});
+				
+				$("#alert_more").bind("click", function(event) {
+					event.preventDefault();
+					
+					$("#menutab_role_root #menutab_events").data("showEvents", false).click();
+				});
+				$("#host_alert_more").bind("click", function(event) {
+					event.preventDefault();
+					$("#menutab_hosts").click();
+				});
+				
+				$("#tab_dashboard_user, #tab_dashboard_domain, #loading_gridtable").hide();
+				$("#tab_dashboard_root").show();
+				$("#menutab_role_user").hide();
+				$("#menutab_role_root").show();
+				$("#menutab_role_domain").hide();
+				$("#launch_test").show();
+			} else if (isDomainAdmin()) {
+				var thisTab = $("#tab_dashboard_domain");
+				$("#tab_dashboard_user, #tab_dashboard_root, #loading_gridtable").hide();
+				thisTab.show();
+				$("#menutab_role_user").hide();
+				$("#menutab_role_root").hide();
+				$("#menutab_role_domain").show();
+				$("#launch_test").hide();
+				
+				// Need to use/create better API for this as there is a limit of pageSize
+				// to list count.
+				$.ajax({
 				        data: createURL("command=listVirtualMachines&response=json"+maxPageSize),
-					dataType: "json",
-					success: function(json) {
-						if (json.listvirtualmachinesresponse.virtualmachine != undefined)
-							thisTab.find("#dashboard_instances").text(json.listvirtualmachinesresponse.virtualmachine.length);
-					}
-				});
-				$.ajax({
+					dataType: "json",
+					success: function(json) {
+						if (json.listvirtualmachinesresponse.virtualmachine != undefined)
+							thisTab.find("#dashboard_instances").text(json.listvirtualmachinesresponse.virtualmachine.length);
+					}
+				});
+				$.ajax({
 				        data: createURL("command=listVolumes&response=json"+maxPageSize),
-					dataType: "json",
-					success: function(json) {
-						if (json.listvolumesresponse.volume)
-							thisTab.find("#dashboard_volumes").text(json.listvolumesresponse.volume.length);
-					}
-				});
-				$.ajax({
+					dataType: "json",
+					success: function(json) {
+						if (json.listvolumesresponse.volume)
+							thisTab.find("#dashboard_volumes").text(json.listvolumesresponse.volume.length);
+					}
+				});
+				$.ajax({
 				        data: createURL("command=listSnapshots&response=json"+maxPageSize),
-					dataType: "json",
-					success: function(json) {
-						if (json.listsnapshotsresponse.snapshot)
-							thisTab.find("#dashboard_snapshots").text(json.listsnapshotsresponse.snapshot.length);
-					}
-				});
-				$.ajax({
+					dataType: "json",
+					success: function(json) {
+						if (json.listsnapshotsresponse.snapshot)
+							thisTab.find("#dashboard_snapshots").text(json.listsnapshotsresponse.snapshot.length);
+					}
+				});
+				$.ajax({
 				        data: createURL("command=listAccounts&response=json"+maxPageSize),
-					dataType: "json",
-					success: function(json) {
-						if (json.listaccountsresponse.account)
-							thisTab.find("#dashboard_accounts").text(json.listaccountsresponse.account.length);
-					}
-				});
-				$.ajax({
-				        data: createURL("command=listEvents&level=ERROR&response=json"),
-					dataType: "json",
-					success: function(json) {
-						var events = json.listeventsresponse.event;
-						if (events != null && events.length > 0) {
-							var errorGrid = thisTab.find("#error_grid_content").empty();
-							var length = (events.length>=3) ? 3 : events.length;
-							for (var i = 0; i < length; i++) {
-								var errorTemplate = $("#recent_error_template").clone(true);
-								errorTemplate.find("#db_error_type").text(events[i].type);
-								errorTemplate.find("#db_error_msg").text(fromdb(events[i].description));								
-								setDateField(events[i].created, errorTemplate.find("#db_error_date"));																
-								errorGrid.append(errorTemplate.show());
-							}
-						}
-					}
-				});
-			} else if(isUser()) {			    
-			    $("#launch_test").hide();
-				$.ajax({
-					cache: false,
-					data: createURL("command=listAccounts&response=json"),
-					dataType: "json",
-					success: function(json) {
-					    var accounts = json.listaccountsresponse.account;						
-						if (accounts != null && accounts.length > 0) {
-						    var statJSON = accounts[0];
-						    var sent = parseInt(statJSON.sentbytes);
-						    var rec = parseInt(statJSON.receivedbytes);
-    						
-    						if(sent==0 && rec==0)
-    						    $("#network_bandwidth_panel").hide();
-    						else
-    						    $("#network_bandwidth_panel").show();
-    						
-						    $("#menutab_role_user").show();
-						    $("#menutab_role_root").hide();
-							$("#menutab_role_domain").hide();
-						    $("#tab_dashboard_user").show();
-						    $("#tab_dashboard_root, #tab_dashboard_domain, #loading_gridtable").hide();
-							
-						    // This is in bytes, so let's change to KB
-						    sent = Math.round(sent / 1024);
-						    rec = Math.round(rec / 1024);
-						    $("#db_sent").text(sent + "KB");
-						    $("#db_received").text(rec + "KB");
-						    $("#db_available_public_ips").text(statJSON.ipavailable);
-						    $("#db_owned_public_ips").text(statJSON.iptotal);
-						    $("#db_running_vms").text(statJSON.vmrunning + " VM(s)");
-						    $("#db_stopped_vms").text(statJSON.vmstopped + " VM(s)");
-						    $("#db_total_vms").text(statJSON.vmtotal + " VM(s)");
-						    $("#db_avail_vms").text(statJSON.vmavailable + " VM(s)");						   
-						    $("#db_account_id").text(statJSON.id);
-						    $("#db_account").text(statJSON.name);						    
-						    $("#db_type").text(toRole(statJSON.accounttype));
-						    $("#db_domain").text(statJSON.domain);						    			   
-						}
-						
-						// Events
-						$.ajax({
-						        data: createURL("command=listEvents&level=ERROR&response=json"),
-							dataType: "json",
-							success: function(json) {
-								var events = json.listeventsresponse.event;
-								if (events != null && events.length > 0) {
-									var errorGrid = $("#error_grid_content").empty();
-									var length = (events.length>=3) ? 3 : events.length;
-									for (var i = 0; i < length; i++) {
-										var errorTemplate = $("#recent_error_template").clone(true);
-										errorTemplate.find("#db_error_type").text(events[i].type);
-										errorTemplate.find("#db_error_msg").text(fromdb(events[i].description));										
-										setDateField(events[i].created, errorTemplate.find("#db_error_date"));									
-										errorGrid.append(errorTemplate.show());
-									}
-								}
-							}
-						});
-					},					
-					beforeSend: function(XMLHttpRequest) {
-						return true;
-					}	
-				});
-			} else { //no role 
-			    logout(false);
-			    return;
-			}
-		});
-	}
-
-	// Check whether the session is valid.
-	g_mySession = $.cookie("JSESSIONID");
-	g_sessionKey = $.cookie("sessionKey");
-	g_role = $.cookie("role");
-	g_username = $.cookie("username");
-	g_account = $.cookie("account");
-	g_domainid = $.cookie("domainid");
-	g_networkType = $.cookie("networktype");
+					dataType: "json",
+					success: function(json) {
+						if (json.listaccountsresponse.account)
+							thisTab.find("#dashboard_accounts").text(json.listaccountsresponse.account.length);
+					}
+				});
+				$.ajax({
+				        data: createURL("command=listEvents&level=ERROR&response=json"),
+					dataType: "json",
+					success: function(json) {
+						var events = json.listeventsresponse.event;
+						if (events != null && events.length > 0) {
+							var errorGrid = thisTab.find("#error_grid_content").empty();
+							var length = (events.length>=3) ? 3 : events.length;
+							for (var i = 0; i < length; i++) {
+								var errorTemplate = $("#recent_error_template").clone(true);
+								errorTemplate.find("#db_error_type").text(events[i].type);
+								errorTemplate.find("#db_error_msg").text(fromdb(events[i].description));								
+								setDateField(events[i].created, errorTemplate.find("#db_error_date"));																
+								errorGrid.append(errorTemplate.show());
+							}
+						}
+					}
+				});
+			} else if(isUser()) {			    
+			    $("#launch_test").hide();
+				$.ajax({
+					cache: false,
+					data: createURL("command=listAccounts&response=json"),
+					dataType: "json",
+					success: function(json) {
+					    var accounts = json.listaccountsresponse.account;						
+						if (accounts != null && accounts.length > 0) {
+						    var statJSON = accounts[0];
+						    var sent = parseInt(statJSON.sentbytes);
+						    var rec = parseInt(statJSON.receivedbytes);
+    						
+    						if(sent==0 && rec==0)
+    						    $("#network_bandwidth_panel").hide();
+    						else
+    						    $("#network_bandwidth_panel").show();
+    						
+						    $("#menutab_role_user").show();
+						    $("#menutab_role_root").hide();
+							$("#menutab_role_domain").hide();
+						    $("#tab_dashboard_user").show();
+						    $("#tab_dashboard_root, #tab_dashboard_domain, #loading_gridtable").hide();
+							
+						    // This is in bytes, so let's change to KB
+						    sent = Math.round(sent / 1024);
+						    rec = Math.round(rec / 1024);
+						    $("#db_sent").text(sent + "KB");
+						    $("#db_received").text(rec + "KB");
+						    $("#db_available_public_ips").text(statJSON.ipavailable);
+						    $("#db_owned_public_ips").text(statJSON.iptotal);
+						    $("#db_running_vms").text(statJSON.vmrunning + " VM(s)");
+						    $("#db_stopped_vms").text(statJSON.vmstopped + " VM(s)");
+						    $("#db_total_vms").text(statJSON.vmtotal + " VM(s)");
+						    $("#db_avail_vms").text(statJSON.vmavailable + " VM(s)");						   
+						    $("#db_account_id").text(statJSON.id);
+						    $("#db_account").text(statJSON.name);						    
+						    $("#db_type").text(toRole(statJSON.accounttype));
+						    $("#db_domain").text(statJSON.domain);						    			   
+						}
+						
+						// Events
+						$.ajax({
+						        data: createURL("command=listEvents&level=ERROR&response=json"),
+							dataType: "json",
+							success: function(json) {
+								var events = json.listeventsresponse.event;
+								if (events != null && events.length > 0) {
+									var errorGrid = $("#error_grid_content").empty();
+									var length = (events.length>=3) ? 3 : events.length;
+									for (var i = 0; i < length; i++) {
+										var errorTemplate = $("#recent_error_template").clone(true);
+										errorTemplate.find("#db_error_type").text(events[i].type);
+										errorTemplate.find("#db_error_msg").text(fromdb(events[i].description));										
+										setDateField(events[i].created, errorTemplate.find("#db_error_date"));									
+										errorGrid.append(errorTemplate.show());
+									}
+								}
+							}
+						});
+					},					
+					beforeSend: function(XMLHttpRequest) {
+						return true;
+					}	
+				});
+			} else { //no role 
+			    logout(false);
+			    return;
+			}
+		});
+	}
+
+	// Check whether the session is valid.
+	g_mySession = $.cookie("JSESSIONID");
+	g_sessionKey = $.cookie("sessionKey");
+	g_role = $.cookie("role");
+	g_username = $.cookie("username");
+	g_account = $.cookie("account");
+	g_domainid = $.cookie("domainid");
+	g_networkType = $.cookie("networktype");
 	g_hypervisorType = $.cookie("hypervisortype");
-	g_timezone = $.cookie("timezone");
+	g_timezone = $.cookie("timezone");
 	g_directAttachNetworkGroupsEnabled = $.cookie("directattachnetworkgroupsenabled");
-	g_directAttachedUntaggedEnabled = $.cookie("directattacheduntaggedenabled");
-	g_systemVmUseLocalStorage = $.cookie("systemvmuselocalstorage");
-	
-	if($.cookie("timezoneoffset") != null)
-	    g_timezoneoffset = isNaN($.cookie("timezoneoffset"))?null: parseFloat($.cookie("timezoneoffset"));
-	else
-	    g_timezoneoffset = null;
-	    
-	if (!g_networkType || g_networkType.length == 0) 		
-		g_networkType = "vnet";
-	
-	if (!g_hypervisorType || g_hypervisorType.length == 0) 		
-		g_hypervisorType = "kvm";
-	
-	if (!g_directAttachNetworkGroupsEnabled || g_directAttachNetworkGroupsEnabled.length == 0) 		
+	g_directAttachedUntaggedEnabled = $.cookie("directattacheduntaggedenabled");
+	g_systemVmUseLocalStorage = $.cookie("systemvmuselocalstorage");
+	
+	if($.cookie("timezoneoffset") != null)
+	    g_timezoneoffset = isNaN($.cookie("timezoneoffset"))?null: parseFloat($.cookie("timezoneoffset"));
+	else
+	    g_timezoneoffset = null;
+	    
+	if (!g_networkType || g_networkType.length == 0) 		
+		g_networkType = "vnet";
+	
+	if (!g_hypervisorType || g_hypervisorType.length == 0) 		
+		g_hypervisorType = "kvm";
+	
+	if (!g_directAttachNetworkGroupsEnabled || g_directAttachNetworkGroupsEnabled.length == 0) 		
 		g_directAttachNetworkGroupsEnabled = "false";	
 		
 	if (!g_directAttachedUntaggedEnabled || g_directAttachedUntaggedEnabled.length == 0) 		
-		g_directAttachedUntaggedEnabled = "false";		
-	
-	if (!g_systemVmUseLocalStorage || g_systemVmUseLocalStorage.length == 0) 		
-		g_systemVmUseLocalStorage = "false";
-		
-	$.ajax({
-	        data: createURL("command=listZones&available=true&response=json"),
-		dataType: "json",
-		async: false,
-		success: function(json) {
-			// session is valid, continue
-			if (isUser()) {
-				$("#menutab_role_user #menutab_dashboard_user").click();
-			} else if (isAdmin()) {
-				$("#menutab_role_root #menutab_dashboard_root").click();
-			} else if (isDomainAdmin()) {
-				$("#menutab_role_domain #menutab_dashboard_domain").click();
-			} else {
-				logout(false);
-			}
-		},
-		error: function(xmlHTTP) {
-			logout(false);
-		},
-		beforeSend: function(xmlHTTP) {
-			return true;
-		}
-	});
-});
-
+		g_directAttachedUntaggedEnabled = "false";		
+	
+	if (!g_systemVmUseLocalStorage || g_systemVmUseLocalStorage.length == 0) 		
+		g_systemVmUseLocalStorage = "false";
+		
+	$.ajax({
+	        data: createURL("command=listZones&available=true&response=json"),
+		dataType: "json",
+		async: false,
+		success: function(json) {
+			// session is valid, continue
+			if (isUser()) {
+				$("#menutab_role_user #menutab_dashboard_user").click();
+			} else if (isAdmin()) {
+				$("#menutab_role_root #menutab_dashboard_root").click();
+			} else if (isDomainAdmin()) {
+				$("#menutab_role_domain #menutab_dashboard_domain").click();
+			} else {
+				logout(false);
+			}
+		},
+		error: function(xmlHTTP) {
+			logout(false);
+		},
+		beforeSend: function(xmlHTTP) {
+			return true;
+		}
+	});
+});
+