Zone type switcher: Style, add functionality

- Add top label to zone switcher, add more styling

- Implement zone switching functionality, which on change sets
  cloudStack.context.zoneType to the relevant filter option, or null
  for 'All' zone types

ui/css/cloudstack3.css

@@ -2277,6 +2277,34 @@ div.detail-group.actions td {
   top: 13px;
 }
 
+/** Zone filter (mixed zone management)*/
+#header .zone-filter {
+  float: left;
+  width: 111px;
+  margin: 9px 20px 0 2px;
+}
+
+#header .zone-filter label {
+  position: absolute;
+  top: -3px;
+  color: #FFFFFF;
+  font-size: 11px;
+}
+
+#header .zone-filter select {
+  width: 100%;
+  font-size: 12px;
+  border: 1px solid #000000;
+  border-bottom: #FFFFFF;
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  background: #ECECEC;
+  margin-top: 2px;
+}
+
 /*Navigation*/
 #navigation,
 #browser {
@@ -8930,6 +8958,8 @@ div.ui-dialog div.multi-edit-add-list div.view div.data-table table.body tbody t
   -webkit-border-radius: 4px;
   -khtml-border-radius: 4px;
   border-radius: 4px;
+  background: #ECECEC;
+  margin-top: 2px;
 }
 
 /*** Select project*/

ui/index.jsp

@@ -1659,7 +1659,6 @@ under the License.
     <script type="text/javascript" src="scripts/events.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/regions.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/ui-custom/regions.js?t=<%=now%>"></script>
-    <script type="text/javascript" src="scripts/ui-custom/zoneFilter.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/ui-custom/ipRules.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/ui-custom/enableStaticNAT.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/ui-custom/securityRules.js?t=<%=now%>"></script>
@@ -1681,6 +1680,7 @@ under the License.
     <script type="text/javascript" src="scripts/docs.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/vm_snapshots.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/ui-custom/projectSelect.js?t=<%=now%>"></script>
+    <script type="text/javascript" src="scripts/ui-custom/zoneFilter.js?t=<%=now%>"></script>
 
     <!-- Plugins -->
     <script type="text/javascript" src="scripts/ui-custom/plugins.js?t=<%=now%>"></script>

ui/scripts/ui-custom/zoneFilter.js

@@ -20,12 +20,20 @@
     var $header = $('#header .controls');
     var $zoneFilter = $('<div>').addClass('zone-filter');
     var $zoneTypeSelect = $('<select>').append(
-      $('<option>').attr('value', 'basic').html(_l('Basic')),
-      $('<option>').attr('value', 'advanced').html(_l('Advanced'))
+      $('<option>').attr('value', '').html(_l('All zones')),
+      $('<option>').attr('value', 'Basic').html(_l('Basic')),
+      $('<option>').attr('value', 'Advanced').html(_l('Advanced'))
     );
+    var $label = $('<label>').html('Zone type:');
 
-    $zoneTypeSelect.appendTo($zoneFilter);
-    $zoneFilter.insertAfter($header.find('#user'));
+    $zoneFilter.append($label, $zoneTypeSelect);
+    $zoneFilter.insertAfter($header.find('.project-switcher'));
+    $zoneTypeSelect.change(function() {
+      cloudStack.context.zoneType = $zoneTypeSelect.val();
+
+      // Go to default/start page (dashboard)
+      $('#breadcrumbs .home').click();
+    });
   });
 }(jQuery, cloudStack));