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] 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) **********************************************************************    
 }