Regions UI: Move to separate source file, add real data, update style

-Move region UI code to ui-custom/regions.js, to separate from core UI
 rendering

-Pull real data and endpoint URL on region select list, from data
 provider in scripts/regions.js

-Make region selector have same appearance as notifications box

ui/css/cloudstack3.css

@@ -11102,29 +11102,28 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
   -webkit-border-radius: 4px;
   -khtml-border-radius: 4px;
   border-radius: 4px;
-  width: 281px;
-  background: #E4E4E4;
-  height: 327px;
-  /*+placement:shift 72px 49px;*/
+  width: 318px;
+  background: url(../images/bg-notifications.png) center;
+  height: 372px;
+  /*+placement:shift 321px 49px;*/
   position: relative;
-  left: 72px;
+  left: 321px;
   top: 49px;
   position: absolute;
   z-index: 1000;
-  /*+box-shadow:0px 3px 11px #171717;*/
-  -moz-box-shadow: 0px 3px 11px #171717;
-  -webkit-box-shadow: 0px 3px 11px #171717;
-  -o-box-shadow: 0px 3px 11px #171717;
-  box-shadow: 0px 3px 11px #171717;
 }
 
 .region-selector h2 {
-  color: #283139;
-  text-shadow: 0px 1px 3px #FFFFFF;
-  margin: 5px 0 12px;
+  color: #FFFFFF;
   text-align: center;
+  font-size: 21px;
   letter-spacing: 1px;
-  font-size: 18px;
+  /*+text-shadow:0px 1px 2px #000000;*/
+  -moz-text-shadow: 0px 1px 2px #000000;
+  -webkit-text-shadow: 0px 1px 2px #000000;
+  -o-text-shadow: 0px 1px 2px #000000;
+  text-shadow: 0px 1px 2px #000000;
+  margin: 31px 0 14px;
 }
 
 .region-selector .buttons {
@@ -11134,16 +11133,16 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
 }
 
 .region-selector .buttons .button.close {
+  background: url(../images/gradients.png) 0px -317px;
   float: right;
-  cursor: pointer;
-  background: url(../images/bg-gradients.png) 0px -270px;
+  margin-right: 10px;
+  border-bottom: 1px solid #232323;
   /*+border-radius:4px;*/
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -khtml-border-radius: 4px;
   border-radius: 4px;
-  border: 1px solid #B1B1B1;
-  padding: 8px 17px 8px 18px;
+  padding: 8px;
 }
 
 .region-selector .buttons .button.close:hover {
@@ -11155,16 +11154,17 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
 }
 
 .region-selector .buttons .button.close span {
-  color: #636363;
-  /*+text-shadow:none;*/
-  -moz-text-shadow: none;
-  -webkit-text-shadow: none;
-  -o-text-shadow: none;
-  text-shadow: none;
+  color: #FFFFFF;
+  font-weight: bold;
+  letter-spacing: 1px;
+  /*+text-shadow:0px 1px 2px #000000;*/
+  -moz-text-shadow: 0px 1px 2px #000000;
+  -webkit-text-shadow: 0px 1px 2px #000000;
+  -o-text-shadow: 0px 1px 2px #000000;
+  text-shadow: 0px 1px 2px #000000;
 }
 
 .region-selector .buttons .button.close:hover span {
-  color: #000000;
 }
 
 .region-selector ul {
@@ -11212,16 +11212,6 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
   text-shadow: 0px 1px #FFFFFF;
 }
 
-.region-selector .top-arrow {
-  width: 76px;
-  height: 12px;
-  background: url(../images/sprites.png) -107px -1312px;
-  /*+placement:shift 78px -12px;*/
-  position: relative;
-  left: 78px;
-  top: -12px;
-}
-
 .region-switcher .icon {
   display: block;
   width: 100%;

ui/index.jsp

@@ -1657,6 +1657,7 @@ under the License.
     <script type="text/javascript" src="scripts/instances.js?t=<%=now%>"></script>
     <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/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>

ui/scripts/regions.js

@@ -18,6 +18,20 @@
   cloudStack.sections.regions = {
     title: 'label.menu.regions',
     id: 'regions',
+    regionSelector: {
+      dataProvider: function(args) {
+        $.ajax({
+          url: createURL('listRegions&listAll=true'),
+          success: function(json) {
+            var regions = json.listregionsresponse.region
+
+            args.response.success({
+              data: regions ? regions : []
+            });
+          }
+        }); 
+      }
+    },
     listView: {
       section: 'regions',
       fields: {

ui/scripts/ui-custom/regions.js

@@ -0,0 +1,90 @@
+(function($, cloudStack) {
+  $(window).bind('cloudStack.ready', function() {
+    // Region switcher
+    var $regionList = $('<ul>');
+
+    // Get region listing
+    var refreshRegions = function() {
+      $regionList.find('li').remove();
+      cloudStack.sections.regions.regionSelector.dataProvider({
+        response: {
+          success: function(args) {
+            var data = args.data;
+
+            $(data).each(function() {
+              var region = this;
+              var $li = $('<li>').append($('<span>').html(_s(region.name)));
+
+              $li.data('region-data', region);
+              $regionList.append($li);
+            });
+          }
+        }
+      });
+    };
+
+    $(window).bind('cloudStack.refreshRegions', refreshRegions);
+
+    var $regionSelector = $('<div>').addClass('region-selector')
+    .append($('<div>').addClass('top-arrow'))
+    .append($('<h2>').html(_l('label.menu.regions')))
+    .append($regionList)
+    .append(
+      $('<div>').addClass('buttons')
+      .append(
+        $('<div>').addClass('button close').append($('<span>').html(_l('label.close')))
+      )
+    )
+    .hide();
+    var $regionSwitcherButton = $('<div>').addClass('region-switcher')
+    .attr('title', 'Select region')
+    .append(
+      $('<span>').addClass('icon').html('&nbsp;')
+    );
+
+    var closeRegionSelector = function(args) {
+      $regionSwitcherButton.removeClass('active');
+      $regionSelector.fadeOut(args ? args.complete : null);
+      $('body > .overlay').fadeOut(function() { $('body > .overlay').remove() });
+    };
+
+    var switchRegion = function(url) {
+
+      closeRegionSelector({
+        complete: function() {
+          $('#container').prepend($('<div>').addClass('loading-overlay'));
+
+          document.location.href = url;
+        }
+      });
+    };
+
+    $regionList.click(function(event) {
+      var $target = $(event.target);
+      var $li = $target.closest('li');
+
+      if ($li.size()) {
+        var url = $li.data('region-data').endpoint;
+
+        switchRegion(url);
+      }
+    });
+
+    $regionSwitcherButton.click(function() {
+      if ($regionSwitcherButton.hasClass('active')) {
+        closeRegionSelector();
+      } else {
+        $regionSwitcherButton.addClass('active');
+        $regionSelector.fadeIn('fast').overlay({ closeAction: closeRegionSelector });
+      }
+    });
+
+    $regionSelector.find('.button.close').click(function() {
+      closeRegionSelector();
+    });
+    
+    $('#header .controls .view-switcher.button:last').after($regionSwitcherButton, $regionSelector); 
+    refreshRegions();
+  });
+}(jQuery, cloudStack));      
+        

ui/scripts/ui/core.js

@@ -127,75 +127,6 @@
             .append($('<span>').html(_l('label.notifications')))
             .notifications();
 
-      // Region switcher
-      var $regionList = $('<ul>');
-
-      // Append dummy content for now
-      $regionList.append($('<li>').append($('<span>').html('USA')));
-      $regionList.append($('<li>').append($('<span>').html('Canada')));
-      $regionList.append($('<li>').append($('<span>').html('Europe')));
-      $regionList.append($('<li>').append($('<span>').html('Asia')));
-      $regionList.append($('<li>').append($('<span>').html('USA')));
-      $regionList.append($('<li>').append($('<span>').html('Canada')));
-      $regionList.append($('<li>').append($('<span>').html('Europe'))); 
-
-      var $regionSelector = $('<div>').addClass('region-selector')
-        .append($('<div>').addClass('top-arrow'))
-        .append($('<h2>').html(_l('label.menu.regions')))
-        .append($regionList)
-        .append(
-          $('<div>').addClass('buttons')
-            .append(
-              $('<div>').addClass('button close').append($('<span>').html(_l('label.close')))
-            )
-        )
-        .hide();
-      var $regionSwitcherButton = $('<div>').addClass('region-switcher')
-        .attr('title', 'Select region')
-        .append(
-          $('<span>').addClass('icon').html('&nbsp;')
-        );
-
-      var closeRegionSelector = function(args) {
-        $regionSwitcherButton.removeClass('active');
-        $regionSelector.fadeOut(args ? args.complete : null);
-        $('body > .overlay').fadeOut(function() { $('body > .overlay').remove() });
-      };
-
-      var switchRegion = function(url) {
-        closeRegionSelector({
-          complete: function() {
-            $('#container').prepend($('<div>').addClass('loading-overlay'));
-
-            document.location.href = url;
-          }
-        });
-      };
-
-      $regionList.click(function(event) {
-        var $target = $(event.target);
-        var $li = $target.closest('li');
-
-        if ($li.size()) {
-          var url = 'http://10.223.77.3:8080/client';
-
-          switchRegion(url);
-        }
-      });
-
-      $regionSwitcherButton.click(function() {
-        if ($regionSwitcherButton.hasClass('active')) {
-          closeRegionSelector();
-        } else {
-          $regionSwitcherButton.addClass('active');
-          $regionSelector.fadeIn('fast').overlay({ closeAction: closeRegionSelector });
-        }
-      });
-
-      $regionSelector.find('.button.close').click(function() {
-        closeRegionSelector();
-      });
-
       // Project switcher
       var $viewSwitcher = $('<div>').addClass('button view-switcher')
             .append(
@@ -204,6 +135,8 @@
                 .html(_l('label.default.view'))
                 .prepend(
                   $('<span>').addClass('icon').html('&nbsp;')
+
+
                 )
             )
             .append(
@@ -288,8 +221,6 @@
         $('<div>').addClass('logo'),
         $('<div>').addClass('controls')
           .append($notificationArea)
-          .append($regionSwitcherButton)
-          .append($regionSelector)
           .append($viewSwitcher)
           .append($projectSelect)
           .append($userInfo)
@@ -426,6 +357,8 @@
 
     // Hide logo conditionally
     if (!args.hasLogo) $('#header, #header .controls').addClass('nologo');
+    
+    $(window).trigger('cloudStack.ready');
 
     return this;
   };