cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From seb...@apache.org
Subject [08/39] Format JS
Date Thu, 18 Jul 2013 16:34:43 GMT
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui/core.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js
index 18c3363..c23484b 100644
--- a/ui/scripts/ui/core.js
+++ b/ui/scripts/ui/core.js
@@ -15,443 +15,462 @@
 // specific language governing permissions and limitations
 // under the License.
 (function($, cloudStack) {
-  $.extend(cloudStack, {
-    ui: {
-      widgets: {} // Defines API methods for UI widgets
-    },
-    uiCustom: {}
-  });
-
-  /**
-   * Generate navigation <li>s
-   *
-   * @param args cloudStack data args
-   */
-  var makeNavigation = function(args) {
-    var $navList = $('<ul>');
-    var preFilter = cloudStack.sectionPreFilter ?
-          cloudStack.sectionPreFilter({
-            context: $.extend(true, {}, args.context, {
-              sections: $.map(cloudStack.sections, function(value, key) {
-                return key;
-              })
-            })
-          }) : null;
+    $.extend(cloudStack, {
+        ui: {
+            widgets: {} // Defines API methods for UI widgets
+        },
+        uiCustom: {}
+    });
 
-    $.each(args.sections, function(sectionID, args) {
-      if (preFilter && $.inArray(sectionID, preFilter) == -1) {
-        if (!(args.preFilter && args.preFilter())) {
-          return true;
-        }
-      }
-
-      
-      var $li = $('<li>')
-            .addClass('navigation-item')
-            .addClass(sectionID)
-            .append($('<span>').addClass('icon').html('&nbsp;'))
-            .append($('<span>').html(_l(args.title)))
-            .data('cloudStack-section-id', sectionID);
-
-      if (args.customIcon) {
-        $li.addClass('custom-icon').find('span.icon').html('').append(
-          $('<img>').attr({ src: args.customIcon })
-        );
-      }
+    /**
+     * Generate navigation <li>s
+     *
+     * @param args cloudStack data args
+     */
+    var makeNavigation = function(args) {
+        var $navList = $('<ul>');
+        var preFilter = cloudStack.sectionPreFilter ?
+            cloudStack.sectionPreFilter({
+                context: $.extend(true, {}, args.context, {
+                    sections: $.map(cloudStack.sections, function(value, key) {
+                        return key;
+                    })
+                })
+            }) : null;
+
+        $.each(args.sections, function(sectionID, args) {
+            if (preFilter && $.inArray(sectionID, preFilter) == -1) {
+                if (!(args.preFilter && args.preFilter())) {
+                    return true;
+                }
+            }
 
-      $li.appendTo($navList);
 
-      return true;
-    });
+            var $li = $('<li>')
+                .addClass('navigation-item')
+                .addClass(sectionID)
+                .append($('<span>').addClass('icon').html('&nbsp;'))
+                .append($('<span>').html(_l(args.title)))
+                .data('cloudStack-section-id', sectionID);
 
-    // Special classes for first and last items
-    $navList.find('li:first').addClass('first');
-    $navList.find('li:last').addClass('last');
-
-    return $navList;
-  };
-
-  /**
-   * Create section contents
-   *
-   * @param sectionID Section's ID to show
-   * @param args CloudStack3 configuration
-   */
-  var showSection = function(sectionID, args, $browser) {
-    var $navItem = $('#navigation').find('li').filter(function() {
-      return $(this).hasClass(sectionID);
-    });
-    var data = args.sections[sectionID];
-    
-    data.$browser = $browser;
-    $navItem.siblings().removeClass('active');
-    $navItem.addClass('active');
-
-    // Reset browser panels
-    $browser.cloudBrowser('removeAllPanels');
-    $browser.cloudBrowser('addPanel', {
-      title: '<span class="section">' + _l(data.title) + '</span>' + '<span class="subsection"></span>',
-      data: '',
-      complete: function($panel, $breadcrumb) {
-        $breadcrumb.attr('title', _l(data.title));
-        data.$breadcrumb = $breadcrumb;
-        
-        // Hide breadcrumb if this is the home section
-        if (args.home === sectionID) {
-          $('#breadcrumbs').find('li:first, div.end:last').hide();
-        }
+            if (args.customIcon) {
+                $li.addClass('custom-icon').find('span.icon').html('').append(
+                    $('<img>').attr({
+                        src: args.customIcon
+                    })
+                );
+            }
 
-        // Append specified widget to view
-        if (data.show)
-          $panel.append(data.show(data));
-        else if (data.treeView)
-          $panel.treeView(data, { context: args.context });
-        else
-          $panel.listView(data, { context: args.context });
-      }
-    });
+            $li.appendTo($navList);
 
-    return $navItem;
-  };
+            return true;
+        });
 
-  // Define page element generation fns
-  var pageElems = {
-    header: function(args) {
-      // Make notification area
-      var $notificationArea = $('<div>').addClass('button notifications')
-            .append(
-              $('<div>').addClass('total')
-              // Total notifications
-                .append($('<span>').html(0))
+        // Special classes for first and last items
+        $navList.find('li:first').addClass('first');
+        $navList.find('li:last').addClass('last');
+
+        return $navList;
+    };
+
+    /**
+     * Create section contents
+     *
+     * @param sectionID Section's ID to show
+     * @param args CloudStack3 configuration
+     */
+    var showSection = function(sectionID, args, $browser) {
+        var $navItem = $('#navigation').find('li').filter(function() {
+            return $(this).hasClass(sectionID);
+        });
+        var data = args.sections[sectionID];
+
+        data.$browser = $browser;
+        $navItem.siblings().removeClass('active');
+        $navItem.addClass('active');
+
+        // Reset browser panels
+        $browser.cloudBrowser('removeAllPanels');
+        $browser.cloudBrowser('addPanel', {
+            title: '<span class="section">' + _l(data.title) + '</span>' + '<span class="subsection"></span>',
+            data: '',
+            complete: function($panel, $breadcrumb) {
+                $breadcrumb.attr('title', _l(data.title));
+                data.$breadcrumb = $breadcrumb;
+
+                // Hide breadcrumb if this is the home section
+                if (args.home === sectionID) {
+                    $('#breadcrumbs').find('li:first, div.end:last').hide();
+                }
+
+                // Append specified widget to view
+                if (data.show)
+                    $panel.append(data.show(data));
+                else if (data.treeView)
+                    $panel.treeView(data, {
+                        context: args.context
+                    });
+                else
+                    $panel.listView(data, {
+                        context: args.context
+                    });
+            }
+        });
+
+        return $navItem;
+    };
+
+    // Define page element generation fns
+    var pageElems = {
+        header: function(args) {
+            // Make notification area
+            var $notificationArea = $('<div>').addClass('button notifications')
+                .append(
+                    $('<div>').addClass('total')
+                    // Total notifications
+                    .append($('<span>').html(0))
             )
-            .append($('<span>').html(_l('label.notifications')))
-            .notifications();
+                .append($('<span>').html(_l('label.notifications')))
+                .notifications();
 
-      // Project switcher
-      var $viewSwitcher = $('<div>').addClass('button view-switcher')
-            .append(
-              // Default View
-              $('<div>').addClass('select default-view active')
-                .html(_l('label.default.view'))
-                .prepend(
-                  $('<span>').addClass('icon').html('&nbsp;')
+            // Project switcher
+            var $viewSwitcher = $('<div>').addClass('button view-switcher')
+                .append(
+                    // Default View
+                    $('<div>').addClass('select default-view active')
+                    .html(_l('label.default.view'))
+                    .prepend(
+                        $('<span>').addClass('icon').html('&nbsp;')
 
 
-                )
+                    )
             )
-            .append(
-              // Project View
-              $('<div>').addClass('select project-view')
-                .html(_l('label.project.view'))
-                .prepend(
-                  $('<span>').addClass('icon').html('&nbsp;')
-                )
+                .append(
+                    // Project View
+                    $('<div>').addClass('select project-view')
+                    .html(_l('label.project.view'))
+                    .prepend(
+                        $('<span>').addClass('icon').html('&nbsp;')
+                    )
             )
-            .click(function(event) {
-              var $target = $(event.target);
-              var $projectSwitcher = $(this);
-              var $container = $('html body');
-              var $navDisabled = $(
-                $.map([
-                  'projects',
-                  'accounts',
-                  'domains',
-                  'system',
-                  'global-settings',
-                  'configuration'
-                ], function(id) {
-                  return '#navigation li.' + id;
-                }).join(',')
-              );
-
-              if ($target.closest('.select.project-view').size()) {
-                $('#cloudStack3-container').addClass('project-view');
-                $projectSwitcher.addClass('alt');
-                $projectSwitcher.find('.select.project-view').addClass('active')
-                  .siblings().removeClass('active');
-
-                // Activate project view
-                $navDisabled.hide();
-                cloudStack.uiCustom.projects({
-                  $projectSelect: $projectSelect.hide().find('select')
+                .click(function(event) {
+                    var $target = $(event.target);
+                    var $projectSwitcher = $(this);
+                    var $container = $('html body');
+                    var $navDisabled = $(
+                        $.map([
+                            'projects',
+                            'accounts',
+                            'domains',
+                            'system',
+                            'global-settings',
+                            'configuration'
+                        ], function(id) {
+                            return '#navigation li.' + id;
+                        }).join(',')
+                    );
+
+                    if ($target.closest('.select.project-view').size()) {
+                        $('#cloudStack3-container').addClass('project-view');
+                        $projectSwitcher.addClass('alt');
+                        $projectSwitcher.find('.select.project-view').addClass('active')
+                            .siblings().removeClass('active');
+
+                        // Activate project view
+                        $navDisabled.hide();
+                        cloudStack.uiCustom.projects({
+                            $projectSelect: $projectSelect.hide().find('select')
+                        });
+                    } else {
+                        $navDisabled.show();
+                        $('#cloudStack3-container').removeClass('project-view');
+                        $projectSwitcher.removeClass('alt');
+                        $projectSelect.hide();
+                        $projectSwitcher.find('.select.default-view').addClass('active')
+                            .siblings().removeClass('active');
+
+                        // Put project name in header
+                        $('.select.project-view').html(
+                            '<span class="icon">&nbsp;</span>' + _l('label.project.view')
+                        ).attr('title', '');
+
+                        // Clear out project
+                        cloudStack.context.projects = null;
+                    }
+
+                    $('#navigation li.dashboard').click();
+
+                    return false;
                 });
-              } else {
-                $navDisabled.show();
-                $('#cloudStack3-container').removeClass('project-view');
-                $projectSwitcher.removeClass('alt');
-                $projectSelect.hide();
-                $projectSwitcher.find('.select.default-view').addClass('active')
-                  .siblings().removeClass('active');
-
-                // Put project name in header
-                $('.select.project-view').html(
-                  '<span class="icon">&nbsp;</span>' + _l('label.project.view')
-                ).attr('title', '');
-
-                // Clear out project
-                cloudStack.context.projects = null;
-              }
-
-              $('#navigation li.dashboard').click();
-
-              return false;
-            });
-      var $projectSelect = $('<div>').addClass('view-switcher').hide()
-            .append($('<select>'));
-
-      // User status area
-      var userLabel = args.context.users[0].name ?
-            args.context.users[0].name : args.context.users[0].login;
-      var $userInfo = $('<div>').attr({ id: 'user' }).addClass('button')
-            .append(
-              $('<div>').addClass('name').html(
-                args.context && args.context.users ?
-                  cloudStack.concat(userLabel, 14) : 'Invalid User'
-              )
+            var $projectSelect = $('<div>').addClass('view-switcher').hide()
+                .append($('<select>'));
+
+            // User status area
+            var userLabel = args.context.users[0].name ?
+                args.context.users[0].name : args.context.users[0].login;
+            var $userInfo = $('<div>').attr({
+                id: 'user'
+            }).addClass('button')
+                .append(
+                    $('<div>').addClass('name').html(
+                        args.context && args.context.users ?
+                        cloudStack.concat(userLabel, 14) : 'Invalid User'
+                    )
             )
-            .append(
-              $('<div>').addClass('icon options')
                 .append(
-                  $('<div>').addClass('icon arrow')
-                )
+                    $('<div>').addClass('icon options')
+                    .append(
+                        $('<div>').addClass('icon arrow')
+                    )
             );
-      $userInfo.attr('title', userLabel);
-
-      return [
-        $('<div>').addClass('logo'),
-        $('<div>').addClass('controls')
-          .append($notificationArea)
-          .append($viewSwitcher)
-          .append($projectSelect)
-          .append($userInfo)
-      ];
-    },
-
-    'main-area': function(args) {
-      var $navigation = $('<div>').attr({ id: 'navigation' });
-      var $browser = $('<div>').attr({ id: 'browser' })
-            .append(
-              // Home breadcrumb
-              $('<div>').attr({ id: 'breadcrumbs' })
-                .append($('<div>').addClass('home'))
-                .append($('<div>').addClass('end'))
+            $userInfo.attr('title', userLabel);
+
+            return [
+                $('<div>').addClass('logo'),
+                $('<div>').addClass('controls')
+                .append($notificationArea)
+                .append($viewSwitcher)
+                .append($projectSelect)
+                .append($userInfo)
+            ];
+        },
+
+        'main-area': function(args) {
+            var $navigation = $('<div>').attr({
+                id: 'navigation'
+            });
+            var $browser = $('<div>').attr({
+                id: 'browser'
+            })
+                .append(
+                    // Home breadcrumb
+                    $('<div>').attr({
+                        id: 'breadcrumbs'
+                    })
+                    .append($('<div>').addClass('home'))
+                    .append($('<div>').addClass('end'))
             )
 
             .append(
-              // Panel container
-              $('<div>').addClass('container')
+                // Panel container
+                $('<div>').addClass('container')
             );
 
-      makeNavigation(args).appendTo($navigation);
-
-      return [
-        $navigation, $browser
-      ];
-    }
-  };
-
-  $.fn.cloudStack = function(args) {
-    var $container = $('<div>')
-          .attr({
-            id: 'container',
-            'cloudStack-container': true
-          })
-          .data('cloudStack-args', args)
-          .appendTo(this);
-    var context = args.context;
-
-    // Create pageElems
-    $.each(pageElems, function(id, fn) {
-      var $elem = $('<div>').attr({ id: id });
-
-      $(fn(args)).each(function() {
-        $elem.append($(this));
-      });
-
-      $elem.appendTo($container);
-    });
+            makeNavigation(args).appendTo($navigation);
+
+            return [
+                $navigation, $browser
+            ];
+        }
+    };
+
+    $.fn.cloudStack = function(args) {
+        var $container = $('<div>')
+            .attr({
+                id: 'container',
+                'cloudStack-container': true
+            })
+            .data('cloudStack-args', args)
+            .appendTo(this);
+        var context = args.context;
+
+        // Create pageElems
+        $.each(pageElems, function(id, fn) {
+            var $elem = $('<div>').attr({
+                id: id
+            });
+
+            $(fn(args)).each(function() {
+                $elem.append($(this));
+            });
 
-    // User options
-    var $options = $('<div>').attr({ id: 'user-options' })
-          .appendTo($('#header'));
-    
-    $(['label.logout', 'label.help', 'label.about']).each(function() {
-      var $link = $('<a>')
-            .attr({ href: '#' })
-            .html(_l(this.toString()))
-            .appendTo($options);
-
-      if (this == 'label.help') {
-        $link.click(function() {
-          var helpURL = 'http://docs.cloud.com/CloudStack_Documentation';
-
-          window.open(helpURL, '_blank');
-          
-          return false;
+            $elem.appendTo($container);
         });
-      }
-      if (this == 'label.about') {
-        $link.click(function() {
-          var $logo = $('<div>').addClass('logo').html(_l('label.app.name')),
-          $version = $('<div>').addClass('version').html(g_cloudstackversion),
-          $about = $('<div>').addClass('about').append($logo).append($version);
-          $about.dialog({
-            modal: true,
-            width: 300,
-            title: _l('label.about.app'),
-            closeOnEscape: false,
-            dialogClass: 'dialog-about',
-            buttons: {
-              'Close': function() {
-                $( this ).dialog( "close" );
-                $(':ui-dialog, .overlay').remove();
-              }
+
+        // User options
+        var $options = $('<div>').attr({
+            id: 'user-options'
+        })
+            .appendTo($('#header'));
+
+        $(['label.logout', 'label.help', 'label.about']).each(function() {
+            var $link = $('<a>')
+                .attr({
+                    href: '#'
+                })
+                .html(_l(this.toString()))
+                .appendTo($options);
+
+            if (this == 'label.help') {
+                $link.click(function() {
+                    var helpURL = 'http://docs.cloud.com/CloudStack_Documentation';
+
+                    window.open(helpURL, '_blank');
+
+                    return false;
+                });
+            }
+            if (this == 'label.about') {
+                $link.click(function() {
+                    var $logo = $('<div>').addClass('logo').html(_l('label.app.name')),
+                        $version = $('<div>').addClass('version').html(g_cloudstackversion),
+                        $about = $('<div>').addClass('about').append($logo).append($version);
+                    $about.dialog({
+                        modal: true,
+                        width: 300,
+                        title: _l('label.about.app'),
+                        closeOnEscape: false,
+                        dialogClass: 'dialog-about',
+                        buttons: {
+                            'Close': function() {
+                                $(this).dialog("close");
+                                $(':ui-dialog, .overlay').remove();
+                            }
+                        }
+                    }).closest('.ui-dialog').overlay();
+
+                    return false;
+                });
             }
-          }).closest('.ui-dialog').overlay();
+        });
+
+        // Initialize browser
+        $container.find('#browser div.container').cloudBrowser();
+        $container.find('#navigation li')
+            .filter(function() {
+                return $(this).hasClass(args.home);
+            })
+            .click();
 
-          return false;
+        // Validation
+        $.extend($.validator.messages, {
+            required: _l('label.required')
         });
-      }
-    });
 
-    // Initialize browser
-    $container.find('#browser div.container').cloudBrowser();
-    $container.find('#navigation li')
-      .filter(function() {
-        return $(this).hasClass(args.home);
-      })
-      .click();
-
-    // Validation
-    $.extend($.validator.messages, { required: _l('label.required') });
-
-    $.validator.addMethod(
-      "disallowSpecialCharacters",
-      function(value, element) {
-        return (value.indexOf("<") == -1 && value.indexOf(">") == -1);
-      },
-      jQuery.format("Disallowed characters: <, >")
-    );
-
-    // Check for pending project invitations
-    if (args.projects) {
-      args.projects.invitationCheck({
-        context: cloudStack.context,
-        response: {
-          success: function(args) {
-            if (!args.data.length) return;
-
-            var projectList = $.map(args.data, function(invitation) {
-              return '<li>' + invitation.project + '</li>';
-            }).join('');
-
-            cloudStack.dialog.notice({
-              message: _l('message.pending.projects.1') +
-                '<ul>' + projectList + '</ul>' +
-                '<p>' + _l('message.pending.projects.2') + '</p>'
+        $.validator.addMethod(
+            "disallowSpecialCharacters",
+            function(value, element) {
+                return (value.indexOf("<") == -1 && value.indexOf(">") == -1);
+            },
+            jQuery.format("Disallowed characters: <, >")
+        );
+
+        // Check for pending project invitations
+        if (args.projects) {
+            args.projects.invitationCheck({
+                context: cloudStack.context,
+                response: {
+                    success: function(args) {
+                        if (!args.data.length) return;
+
+                        var projectList = $.map(args.data, function(invitation) {
+                            return '<li>' + invitation.project + '</li>';
+                        }).join('');
+
+                        cloudStack.dialog.notice({
+                            message: _l('message.pending.projects.1') + '<ul>' + projectList + '</ul>' + '<p>' + _l('message.pending.projects.2') + '</p>'
+                        });
+                    }
+                }
             });
-          }
         }
-      });
-    }
-
-    // Hide logo conditionally
-    if (!args.hasLogo) $('#header, #header .controls').addClass('nologo');
-    
-    $(window).trigger('cloudStack.ready');
-
-    return this;
-  };
-
-  // Events
-  $(function() {
-    // Check if target should be hovered
-    function checkHoveredLabel($target) {
-      var $multiWizard = $('div.ui-dialog div.multi-wizard');
-      if (($target.is('label[for]') && !$target.parents('body.login')) || 
-        ($multiWizard.size() && 
-          ($target.is('.multi-wizard label') && $target.prev('input[type="radio"],input[type="checkbox"]').size()) || 
-          ($target.is('.multi-wizard .select-desc div.name') && $target.parent('div.select-desc').prev('input[type="radio"],input[type="checkbox"]').size())
-        ))
-        return true;
-
-      return false;
-    }
-
-    // Rollover behavior for user options
-    $(document).bind('mouseover', function(event) {
-      var $target = $(event.target);
-      if (checkHoveredLabel($target)) {
-        $target.addClass('label-hovered');
-      }
-      if ($target.closest('#user, #user-options').size()) {
-        return false;
-      }
-      else $('#user-options').hide();
-
-      return false;
-    });
 
-    $(document).bind('mouseout', function(event) {
-      var $target = $(event.target);
-      if (checkHoveredLabel($target)) {
-        $target.removeClass('label-hovered');
-      }
-    });
+        // Hide logo conditionally
+        if (!args.hasLogo) $('#header, #header .controls').addClass('nologo');
+
+        $(window).trigger('cloudStack.ready');
+
+        return this;
+    };
 
-    $(document).bind('click', function(event) {
-      var $target = $(event.target);
-      var $container = $target.closest('[cloudStack-container]');
-      var args = $container.data('cloudStack-args');
-      var $browser = $container.find('#browser .container');
-      var $multiWizard = $('div.ui-dialog div.multi-wizard');
-
-      // Wizard: trigger click event for input when click it label
-      if ($multiWizard.size()) {
-          if ($target.is('.multi-wizard label') && $target.prev('input[type="radio"],input[type="checkbox"]').size()) {
-            $target.prev('input').trigger('click');
-          }
-          if ($target.is('.multi-wizard .select-desc div.name') && $target.parent('div.select-desc').prev('input[type="radio"],input[type="checkbox"]').size()) {
-            $target.parent('div.select-desc').prev('input').trigger('click');
-          }
-      }
-
-      if (!$container.size()) return true;
-
-      // Navigation items
-      if ($target.closest('li.navigation-item').size() && $target.closest('#navigation').size()) {
-        var $navItem = $target.closest('li.navigation-item');
-
-        if ($navItem.is('.disabled')) return false;
-        showSection($navItem.data('cloudStack-section-id'), args, $browser);
-
-        return false;
-      }
-
-      // Browser expand
-      if ($target.hasClass('control expand') && $target.closest('div.panel div.toolbar').size()) {
-        $browser.cloudBrowser('toggleMaximizePanel', {
-          panel: $target.closest('div.panel')
+    // Events
+    $(function() {
+        // Check if target should be hovered
+        function checkHoveredLabel($target) {
+            var $multiWizard = $('div.ui-dialog div.multi-wizard');
+            if (($target.is('label[for]') && !$target.parents('body.login')) ||
+                ($multiWizard.size() &&
+                    ($target.is('.multi-wizard label') && $target.prev('input[type="radio"],input[type="checkbox"]').size()) ||
+                    ($target.is('.multi-wizard .select-desc div.name') && $target.parent('div.select-desc').prev('input[type="radio"],input[type="checkbox"]').size())
+                ))
+                return true;
+
+            return false;
+        }
+
+        // Rollover behavior for user options
+        $(document).bind('mouseover', function(event) {
+            var $target = $(event.target);
+            if (checkHoveredLabel($target)) {
+                $target.addClass('label-hovered');
+            }
+            if ($target.closest('#user, #user-options').size()) {
+                return false;
+            } else $('#user-options').hide();
+
+            return false;
+        });
+
+        $(document).bind('mouseout', function(event) {
+            var $target = $(event.target);
+            if (checkHoveredLabel($target)) {
+                $target.removeClass('label-hovered');
+            }
         });
 
-        return false;
-      }
+        $(document).bind('click', function(event) {
+            var $target = $(event.target);
+            var $container = $target.closest('[cloudStack-container]');
+            var args = $container.data('cloudStack-args');
+            var $browser = $container.find('#browser .container');
+            var $multiWizard = $('div.ui-dialog div.multi-wizard');
+
+            // Wizard: trigger click event for input when click it label
+            if ($multiWizard.size()) {
+                if ($target.is('.multi-wizard label') && $target.prev('input[type="radio"],input[type="checkbox"]').size()) {
+                    $target.prev('input').trigger('click');
+                }
+                if ($target.is('.multi-wizard .select-desc div.name') && $target.parent('div.select-desc').prev('input[type="radio"],input[type="checkbox"]').size()) {
+                    $target.parent('div.select-desc').prev('input').trigger('click');
+                }
+            }
 
-      // Home breadcrumb
-      if ($target.is('#breadcrumbs div.home')) {
-        showSection(args.home, args, $browser);
-        return false;
-      }
+            if (!$container.size()) return true;
 
-      // User options
-      if ($target.closest('#user div.icon.options').size()) {
-        $('#user-options').toggle();
+            // Navigation items
+            if ($target.closest('li.navigation-item').size() && $target.closest('#navigation').size()) {
+                var $navItem = $target.closest('li.navigation-item');
 
-        return false;
-      }
+                if ($navItem.is('.disabled')) return false;
+                showSection($navItem.data('cloudStack-section-id'), args, $browser);
 
-      return true;
+                return false;
+            }
+
+            // Browser expand
+            if ($target.hasClass('control expand') && $target.closest('div.panel div.toolbar').size()) {
+                $browser.cloudBrowser('toggleMaximizePanel', {
+                    panel: $target.closest('div.panel')
+                });
+
+                return false;
+            }
+
+            // Home breadcrumb
+            if ($target.is('#breadcrumbs div.home')) {
+                showSection(args.home, args, $browser);
+                return false;
+            }
+
+            // User options
+            if ($target.closest('#user div.icon.options').size()) {
+                $('#user-options').toggle();
+
+                return false;
+            }
+
+            return true;
+        });
     });
-  });
 })(window.jQuery,
-   window.cloudStack ? window.cloudStack : window.cloudStack = {});
+    window.cloudStack ? window.cloudStack : window.cloudStack = {});

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui/dialog.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
index 7f82eea..eb7e7b2 100644
--- a/ui/scripts/ui/dialog.js
+++ b/ui/scripts/ui/dialog.js
@@ -15,128 +15,134 @@
 // specific language governing permissions and limitations
 // under the License.
 (function($, cloudStack, _l) {
-  cloudStack.dialog = {
-    /**
-     * Error message form
-     *
-     * Returns callback, that can be plugged into a standard data provider response
-     */
-    error: function(callback) {
-      return function(args) {
-        var message = args.message ? args.message : args;
-        if (message) cloudStack.dialog.notice({ message: message });
-
-        if (callback) callback();
-      };
-    },
-
-    /**
-     * Dialog with form
-     */
-    createForm: function(args) {
-      var $formContainer = $('<div>').addClass('form-container');
-      var $message = $('<span>').addClass('message').appendTo($formContainer).html(
-        _l(args.form.desc)
-      );
-      var $form = $('<form>').appendTo($formContainer)
-            .submit(function() {
-              $(this).closest('.ui-dialog').find('button.ok').click();
-
-              return false;
-            });
+    cloudStack.dialog = {
+        /**
+         * Error message form
+         *
+         * Returns callback, that can be plugged into a standard data provider response
+         */
+        error: function(callback) {
+            return function(args) {
+                var message = args.message ? args.message : args;
+                if (message) cloudStack.dialog.notice({
+                    message: message
+                });
 
-      var createLabel = _l(args.form.createLabel);
-      var $submit = $('<input>')
-            .attr({
-              type: 'submit'
-            })
-            .hide()
-            .appendTo($form);
-
-      // Render fields and events
-      var fields = $.map(args.form.fields, function(value, key) {
-        return key;
-      })
-
-      var ret = function() {
-        $('.overlay').remove();
-        
-        return $formContainer.dialog({
-          dialogClass: args.form.bigSize ? 'create-form big' : 'create-form',
-          closeOnEscape: false,
-          draggable: false,
-          width: args.form.bigSize ? 800 : 400,
-          title: _l(args.form.title),
-          open: function() {
-            if (args.form.preFilter) {
-              args.form.preFilter({ $form: $form, context: args.context });
-            }
-          },
-          buttons: [
-            {
-              text: createLabel ? createLabel : _l('label.ok'),
-              'class': 'ok',
-              click: function() {
-                if (!complete($formContainer)) { return false; }
+                if (callback) callback();
+            };
+        },
+
+        /**
+         * Dialog with form
+         */
+        createForm: function(args) {
+            var $formContainer = $('<div>').addClass('form-container');
+            var $message = $('<span>').addClass('message').appendTo($formContainer).html(
+                _l(args.form.desc)
+            );
+            var $form = $('<form>').appendTo($formContainer)
+                .submit(function() {
+                    $(this).closest('.ui-dialog').find('button.ok').click();
+
+                    return false;
+                });
 
-                $('div.overlay').remove();
-                $('.tooltip-box').remove();
-                $formContainer.remove();
-                $(this).dialog('destroy');
+            var createLabel = _l(args.form.createLabel);
+            var $submit = $('<input>')
+                .attr({
+                    type: 'submit'
+                })
+                .hide()
+                .appendTo($form);
 
-                $('.hovered-elem').hide();
+            // Render fields and events
+            var fields = $.map(args.form.fields, function(value, key) {
+                return key;
+            })
 
+            var ret = function() {
+                $('.overlay').remove();
+
+                return $formContainer.dialog({
+                    dialogClass: args.form.bigSize ? 'create-form big' : 'create-form',
+                    closeOnEscape: false,
+                    draggable: false,
+                    width: args.form.bigSize ? 800 : 400,
+                    title: _l(args.form.title),
+                    open: function() {
+                        if (args.form.preFilter) {
+                            args.form.preFilter({
+                                $form: $form,
+                                context: args.context
+                            });
+                        }
+                    },
+                    buttons: [{
+                        text: createLabel ? createLabel : _l('label.ok'),
+                        'class': 'ok',
+                        click: function() {
+                            if (!complete($formContainer)) {
+                                return false;
+                            }
+
+                            $('div.overlay').remove();
+                            $('.tooltip-box').remove();
+                            $formContainer.remove();
+                            $(this).dialog('destroy');
+
+                            $('.hovered-elem').hide();
+
+                            return true;
+                        }
+                    }, {
+                        text: _l('label.cancel'),
+                        'class': 'cancel',
+                        click: function() {
+                            $('div.overlay').remove();
+                            $('.tooltip-box').remove();
+                            $formContainer.remove();
+                            $(this).dialog('destroy');
+
+                            $('.hovered-elem').hide();
+                        }
+                    }]
+                }).closest('.ui-dialog').overlay();
+            };
+
+            var isLastAsync = function(idx) {
+                for (var i = idx + 1; i < $(fields).length; i++) {
+                    var f = args.form.fields[$(fields).get(i)];
+                    if (f.select || f.dynamic) {
+                        return false;
+                    }
+                }
                 return true;
-              }
-            },
-            {
-              text: _l('label.cancel'),
-              'class': 'cancel',
-              click: function() {
-                $('div.overlay').remove();
-                $('.tooltip-box').remove();
-                $formContainer.remove();
-                $(this).dialog('destroy');
-
-                $('.hovered-elem').hide();
-              }
-            }
-          ]
-        }).closest('.ui-dialog').overlay();
-      };
-
-      var isLastAsync = function(idx) {
-        for(var i = idx+1; i < $(fields).length ; i++) {
-          var f = args.form.fields[$(fields).get(i)];
-          if(f.select || f.dynamic){
-            return false;
-          }
-        }
-        return true;
-      };
-
-      var isAsync = false;
-      var isNoDialog = args.noDialog ? args.noDialog : false;
-
-      $(fields).each(function(idx, element) {
-        var key = this;
-        var field = args.form.fields[key];
-
-        var $formItem = $('<div>')
-              .addClass('form-item')
-              .attr({ rel: key });
-
-        if(field.isHidden != null) {
-          if (typeof(field.isHidden) == 'boolean' && field.isHidden == true)
-            $formItem.hide();
-          else if (typeof(field.isHidden) == 'function' && field.isHidden() == true)
-            $formItem.hide();
-        }
+            };
+
+            var isAsync = false;
+            var isNoDialog = args.noDialog ? args.noDialog : false;
+
+            $(fields).each(function(idx, element) {
+                var key = this;
+                var field = args.form.fields[key];
+
+                var $formItem = $('<div>')
+                    .addClass('form-item')
+                    .attr({
+                        rel: key
+                    });
+
+                if (field.isHidden != null) {
+                    if (typeof(field.isHidden) == 'boolean' && field.isHidden == true)
+                        $formItem.hide();
+                    else if (typeof(field.isHidden) == 'function' && field.isHidden() == true)
+                        $formItem.hide();
+                }
 
-        $formItem.appendTo($form);
+                $formItem.appendTo($form);
 
-        //Handling Escape KeyPress events
-        /*   $('.ui-dialog').keypress(function(event) {
+                //Handling Escape KeyPress events
+                /*   $('.ui-dialog').keypress(function(event) {
          if ( event.which == 27 ) {
          event.stopPropagation();
          }
@@ -155,551 +161,567 @@
          $(':ui-dialog').dialog({
          closeOnEscape: false
          }); */
-        // Label field
+                // Label field
 
-        var $name = $('<div>').addClass('name')
-              .appendTo($formItem)
-              .append(
-                $('<label>').html(_l(field.label) + ':')
-              );
+                var $name = $('<div>').addClass('name')
+                    .appendTo($formItem)
+                    .append(
+                        $('<label>').html(_l(field.label) + ':')
+                );
 
-        // red asterisk
-        var $astersikSpan = $('<span>').addClass('field-required').html('*');
-        $name.find('label').prepend($astersikSpan);
+                // red asterisk
+                var $astersikSpan = $('<span>').addClass('field-required').html('*');
+                $name.find('label').prepend($astersikSpan);
 
-        if (field.validation == null || field.validation.required == false) {
-          $astersikSpan.hide();
-        }
-
-        // Tooltip description
-        if (field.desc) {
-          $formItem.attr({ title: _l(field.desc) });
-        }
+                if (field.validation == null || field.validation.required == false) {
+                    $astersikSpan.hide();
+                }
 
-        // Input area
-        var $value = $('<div>').addClass('value')
-              .appendTo($formItem);
-        var $input, $dependsOn, selectFn, selectArgs;
-        var dependsOn = field.dependsOn;
-
-        // Depends on fields
-        if (field.dependsOn) {
-          $formItem.attr('depends-on', dependsOn);
-          $dependsOn = $form.find('input, select').filter(function() {
-            return $(this).attr('name') === dependsOn;
-          });
-
-          if ($dependsOn.is('[type=checkbox]')) {
-            var isReverse = args.form.fields[dependsOn].isReverse;
-
-            // Checkbox
-            $dependsOn.bind('click', function(event) {
-              var $target = $(this);
-              var $dependent = $target.closest('form').find('[depends-on=\'' + dependsOn + '\']');
-
-              if (($target.is(':checked') && !isReverse) ||
-                  ($target.is(':unchecked') && isReverse)) {
-                $dependent.css('display', 'inline-block');
-                $dependent.each(function() {
-                  if ($(this).data('dialog-select-fn')) {
-                    $(this).data('dialog-select-fn')();
-                  }
-                });
-              } else if (($target.is(':unchecked') && !isReverse) ||
-                         ($target.is(':checked') && isReverse)) {
-                $dependent.hide();
-              }
+                // Tooltip description
+                if (field.desc) {
+                    $formItem.attr({
+                        title: _l(field.desc)
+                    });
+                }
 
-              $dependent.find('input[type=checkbox]').click();
+                // Input area
+                var $value = $('<div>').addClass('value')
+                    .appendTo($formItem);
+                var $input, $dependsOn, selectFn, selectArgs;
+                var dependsOn = field.dependsOn;
+
+                // Depends on fields
+                if (field.dependsOn) {
+                    $formItem.attr('depends-on', dependsOn);
+                    $dependsOn = $form.find('input, select').filter(function() {
+                        return $(this).attr('name') === dependsOn;
+                    });
+
+                    if ($dependsOn.is('[type=checkbox]')) {
+                        var isReverse = args.form.fields[dependsOn].isReverse;
+
+                        // Checkbox
+                        $dependsOn.bind('click', function(event) {
+                            var $target = $(this);
+                            var $dependent = $target.closest('form').find('[depends-on=\'' + dependsOn + '\']');
+
+                            if (($target.is(':checked') && !isReverse) ||
+                                ($target.is(':unchecked') && isReverse)) {
+                                $dependent.css('display', 'inline-block');
+                                $dependent.each(function() {
+                                    if ($(this).data('dialog-select-fn')) {
+                                        $(this).data('dialog-select-fn')();
+                                    }
+                                });
+                            } else if (($target.is(':unchecked') && !isReverse) ||
+                                ($target.is(':checked') && isReverse)) {
+                                $dependent.hide();
+                            }
+
+                            $dependent.find('input[type=checkbox]').click();
+
+                            if (!isReverse) {
+                                $dependent.find('input[type=checkbox]').attr('checked', false);
+                            } else {
+                                $dependent.find('input[type=checkbox]').attr('checked', true);
+                            }
+
+                            return true;
+                        });
+
+                        // Show fields by default if it is reverse checkbox
+                        if (isReverse) {
+                            $dependsOn.click();
+                        }
+                    }
+                }
 
-              if (!isReverse) {
-                $dependent.find('input[type=checkbox]').attr('checked', false);
-              } else {
-                $dependent.find('input[type=checkbox]').attr('checked', true);
-              }
+                // Determine field type of input
+                if (field.select) {
+                    isAsync = true;
+                    selectArgs = {
+                        context: args.context,
+                        response: {
+                            success: function(args) {
+                                $(args.data).each(function() {
+                                    var id = this.id !== undefined ? this.id : this.name;
+                                    var description = this.description;
+
+                                    if (args.descriptionField)
+                                        description = this[args.descriptionField];
+                                    else
+                                        description = this.description;
+
+                                    var $option = $('<option>')
+                                        .appendTo($input)
+                                        .val(_s(id))
+                                        .html(_s(description));
+                                });
+
+                                if (field.defaultValue) {
+                                    $input.val(_s(field.defaultValue));
+                                }
+
+                                $input.trigger('change');
+
+                                if ((!isNoDialog) && isLastAsync(idx)) {
+                                    ret();
+                                }
+                            }
+                        }
+                    };
+
+                    selectFn = field.select;
+                    $input = $('<select>')
+                        .attr({
+                            name: key
+                        })
+                        .data('dialog-select-fn', function(args) {
+                            selectFn(args ? $.extend(true, {}, selectArgs, args) : selectArgs);
+                        })
+                        .appendTo($value);
+
+                    // Pass form item to provider for additional manipulation
+                    $.extend(selectArgs, {
+                        $select: $input,
+                        $form: $form,
+                        type: 'createForm'
+                    });
+
+                    if (dependsOn) {
+                        $dependsOn = $input.closest('form').find('input, select').filter(function() {
+                            return $(this).attr('name') === dependsOn;
+                        });
+
+                        $dependsOn.bind('change', function(event) {
+                            var $target = $(this);
+
+                            if (!$dependsOn.is('select')) return true;
+
+                            var dependsOnArgs = {};
+
+                            $input.find('option').remove();
+
+                            if (!$target.children().size()) return true;
+
+                            dependsOnArgs[dependsOn] = $target.val();
+
+                            selectFn($.extend(selectArgs, dependsOnArgs));
+
+                            return true;
+                        });
+
+                        if (!$dependsOn.is('select')) {
+                            selectFn(selectArgs);
+                        }
+                    } else {
+                        selectFn(selectArgs);
+                    }
+                } else if (field.isBoolean) {
+                    if (field.multiArray) {
+                        $input = $('<div>')
+                            .addClass('multi-array').addClass(key).appendTo($value);
+
+                        $.each(field.multiArray, function(itemKey, itemValue) {
+                            $input.append(
+                                $('<div>').addClass('item')
+                                .append(
+                                    $.merge(
+                                        $('<div>').addClass('name').html(_l(itemValue.label)),
+                                        $('<div>').addClass('value').append(
+                                            $('<input>').attr({
+                                                name: itemKey,
+                                                type: 'checkbox'
+                                            }).appendTo($value)
+                                        )
+                                    )
+                                )
+                            );
+                        });
+
+                    } else {
+                        $input = $('<input>').attr({
+                            name: key,
+                            type: 'checkbox'
+                        }).appendTo($value);
+                        if (field.isChecked) {
+                            $input.attr('checked', 'checked');
+                        } else {
+                            // This is mainly for IE compatibility
+                            setTimeout(function() {
+                                $input.attr('checked', false);
+                            }, 100);
+                        }
+                    }
+
+                    // Setup on click event
+                    if (field.onChange) {
+                        $input.click(function() {
+                            field.onChange({
+                                $checkbox: $input
+                            });
+                        });
+                    }
+                } else if (field.dynamic) {
+                    isAsync = true;
+                    // Generate a 'sub-create-form' -- append resulting fields
+                    $input = $('<div>').addClass('dynamic-input').appendTo($value);
+                    $form.hide();
+
+                    field.dynamic({
+                        response: {
+                            success: function(args) {
+                                var form = cloudStack.dialog.createForm({
+                                    noDialog: true,
+                                    form: {
+                                        title: '',
+                                        fields: args.fields
+                                    }
+                                });
+
+                                var $fields = form.$formContainer.find('.form-item').appendTo($input);
+                                $form.show();
+
+                                // Form should be slightly wider
+                                $form.closest(':ui-dialog').dialog('option', {
+                                    position: 'center',
+                                    closeOnEscape: false
+                                });
+                                if ((!isNoDialog) && isLastAsync(idx)) {
+                                    ret();
+                                }
+                            }
+                        }
+                    });
+                } else if (field.isTextarea) {
+                    $input = $('<textarea>').attr({
+                        name: key
+                    }).appendTo($value);
+
+                    if (field.defaultValue) {
+                        $input.val(field.defaultValue);
+                    }
+                } else if (field.isDatepicker) { //jQuery datepicker
+                    $input = $('<input>').attr({
+                        name: key,
+                        type: 'text'
+                    }).appendTo($value);
+
+                    if (field.defaultValue) {
+                        $input.val(field.defaultValue);
+                    }
+                    if (field.id) {
+                        $input.attr('id', field.id);
+                    }
+                    $input.addClass("disallowSpecialCharacters");
+                    $input.datepicker({
+                        dateFormat: 'yy-mm-dd'
+                    });
+
+                } else if (field.range) { //2 text fields on the same line (e.g. port range: startPort - endPort)
+                    $input = $.merge(
+                        // Range start
+                        $('<input>').attr({
+                            type: 'text',
+                            name: field.range[0]
+                        }),
+
+                        // Range end
+                        $('<input>').attr({
+                            type: 'text',
+                            name: field.range[1]
+                        })
+                    ).appendTo(
+                        $('<div>').addClass('range-edit').appendTo($value)
+                    );
+                    $input.wrap($('<div>').addClass('range-item'));
+                    $input.addClass("disallowSpecialCharacters");
+
+                } else { //text field
+                    $input = $('<input>').attr({
+                        name: key,
+                        type: field.password || field.isPassword ? 'password' : 'text'
+                    }).appendTo($value);
+
+                    if (field.defaultValue) {
+                        $input.val(field.defaultValue);
+                    }
+                    if (field.id) {
+                        $input.attr('id', field.id);
+                    }
+                    $input.addClass("disallowSpecialCharacters");
+                }
 
-              return true;
-            });
+                if (field.validation != null)
+                    $input.data('validation-rules', field.validation);
+                else
+                    $input.data('validation-rules', {});
 
-            // Show fields by default if it is reverse checkbox
-            if (isReverse) {
-              $dependsOn.click();
-            }
-          }
-        }
+                var fieldLabel = field.label;
 
-        // Determine field type of input
-        if (field.select) {
-          isAsync = true;
-          selectArgs = {
-            context: args.context,
-            response: {
-              success: function(args) {
-                $(args.data).each(function() {
-                  var id = this.id !== undefined ? this.id : this.name;
-                  var description = this.description;
-
-                  if (args.descriptionField)
-                    description = this[args.descriptionField];
-                  else
-                    description = this.description;
-
-                  var $option = $('<option>')
-                        .appendTo($input)
-                        .val(_s(id))
-                        .html(_s(description));
-                });
+                var inputId = $input.attr('id') ? $input.attr('id') : fieldLabel.replace(/\./g, '_');
 
-                if (field.defaultValue) {
-                  $input.val(_s(field.defaultValue));
-                }
+                $input.attr('id', inputId);
+                $name.find('label').attr('for', inputId);
 
-                $input.trigger('change');
+                if (field.isDisabled)
+                    $input.attr("disabled", "disabled");
 
-                if((!isNoDialog) && isLastAsync(idx)) {
-                   ret();
+                // Tooltip
+                if (field.docID) {
+                    $input.toolTip({
+                        docID: field.docID,
+                        tooltip: '.tooltip-box',
+                        mode: 'focus',
+                        attachTo: '.form-item'
+                    });
                 }
-              }
-            }
-          };
 
-          selectFn = field.select;
-          $input = $('<select>')
-            .attr({ name: key })
-            .data('dialog-select-fn', function(args) {
-              selectFn(args ? $.extend(true, {}, selectArgs, args) : selectArgs);
-            })
-            .appendTo($value);
 
-          // Pass form item to provider for additional manipulation
-          $.extend(selectArgs, { $select: $input, $form: $form, type: 'createForm' });
-
-          if (dependsOn) {
-            $dependsOn = $input.closest('form').find('input, select').filter(function() {
-              return $(this).attr('name') === dependsOn;
+                /*     $input.blur(function() {
+         console.log('tooltip remove->' + $input.attr('name'));
+         });*/
             });
 
-            $dependsOn.bind('change', function(event) {
-              var $target = $(this);
 
-              if (!$dependsOn.is('select')) return true;
+            var getFormValues = function() {
+                var formValues = {};
+                $.each(args.form.fields, function(key) {});
+            };
 
-              var dependsOnArgs = {};
-
-              $input.find('option').remove();
+            // Setup form validation
+            $formContainer.find('form').validate();
+            $formContainer.find('input, select').each(function() {
+                if ($(this).data('validation-rules')) {
+                    $(this).rules('add', $(this).data('validation-rules'));
+                } else {
+                    $(this).rules('add', {});
+                }
+            });
+            $form.find('select').trigger('change');
 
-              if (!$target.children().size()) return true;
 
-              dependsOnArgs[dependsOn] = $target.val();
+            var complete = function($formContainer) {
+                var $form = $formContainer.find('form');
+                var data = cloudStack.serializeForm($form);
 
-              selectFn($.extend(selectArgs, dependsOnArgs));
+                if (!$formContainer.find('form').valid()) {
+                    // Ignore hidden field validation
+                    if ($formContainer.find('input.error:visible, select.error:visible').size()) {
+                        return false;
+                    }
+                }
 
-              return true;
-            });
+                args.after({
+                    data: data,
+                    ref: args.ref, // For backwards compatibility; use context
+                    context: args.context,
+                    $form: $form
+                });
 
-            if (!$dependsOn.is('select')) {
-              selectFn(selectArgs);
+                return true;
+            };
+
+            if (args.noDialog) {
+                return {
+                    $formContainer: $formContainer,
+                    completeAction: complete
+                };
+            } else if (!isAsync) {
+                return ret();
             }
-          } else {
-            selectFn(selectArgs);
-          }
-        } else if (field.isBoolean) {
-          if (field.multiArray) {
-            $input = $('<div>')
-              .addClass('multi-array').addClass(key).appendTo($value);
-
-            $.each(field.multiArray, function(itemKey, itemValue) {
-              $input.append(
-                $('<div>').addClass('item')
-                  .append(
-                    $.merge(
-                      $('<div>').addClass('name').html(_l(itemValue.label)),
-                      $('<div>').addClass('value').append(
-                        $('<input>').attr({ name: itemKey, type: 'checkbox' }).appendTo($value)
-                      )
-                    )
-                  )
-              );
-            });
+        },
+
+        // Dialog with list view selector
+        listView: function(args) {
+            var listView = args.listView;
+            var after = args.after;
+            var context = args.context;
+            var $listView = $('<div>');
+
+            listView.actions = {
+                select: {
+                    label: _l('label.select.instance'),
+                    type: listView.type,
+                    action: {
+                        uiCustom: function(args) {
+                            var $item = args.$item;
+                            var $input = $item.find('td.actions input:visible');
+
+                            if ($input.attr('type') == 'checkbox') {
+                                if ($input.is(':checked'))
+                                    $item.addClass('multi-edit-selected');
+                                else
+                                    $item.removeClass('multi-edit-selected');
+                            } else {
+                                $item.siblings().removeClass('multi-edit-selected');
+                                $item.addClass('multi-edit-selected');
+                            }
+                        }
+                    }
+                }
+            };
 
-          } else {
-            $input = $('<input>').attr({ name: key, type: 'checkbox' }).appendTo($value);
-            if (field.isChecked) {
-              $input.attr('checked', 'checked');
-            } else {
-              // This is mainly for IE compatibility
-              setTimeout(function() {
-                $input.attr('checked', false);
-              }, 100);
-            }
-          }
-
-          // Setup on click event
-          if (field.onChange) {
-            $input.click(function() {
-              field.onChange({
-                $checkbox: $input
-              });
+            // Init list view
+            $listView = $('<div>').listView({
+                context: context,
+                uiCustom: true,
+                listView: listView
             });
-          }
-        } else if (field.dynamic) {
-          isAsync = true;
-          // Generate a 'sub-create-form' -- append resulting fields
-          $input = $('<div>').addClass('dynamic-input').appendTo($value);
-          $form.hide();
-
-          field.dynamic({
-            response: {
-              success: function(args) {
-                var form = cloudStack.dialog.createForm({
-                  noDialog: true,
-                  form: {
-                    title: '',
-                    fields: args.fields
-                  }
-                });
-
-                var $fields = form.$formContainer.find('.form-item').appendTo($input);
-                $form.show();
 
-                // Form should be slightly wider
-                $form.closest(':ui-dialog').dialog('option', { position: 'center',closeOnEscape: false });
-                if((!isNoDialog) && isLastAsync(idx)) {
-                  ret();
+            // Change action label
+            $listView.find('th.actions').html(_l('label.select'));
+
+            $listView.dialog({
+                dialogClass: 'multi-edit-add-list panel',
+                width: 825,
+                title: _l('Select VM'),
+                buttons: [{
+                    text: _l('label.apply'),
+                    'class': 'ok',
+                    click: function() {
+                        if (!$listView.find(
+                            'input[type=radio]:checked, input[type=checkbox]:checked'
+                        ).size()) {
+                            cloudStack.dialog.notice({
+                                message: _l('message.select.instance')
+                            });
+
+                            return false;
+                        }
+
+                        after({
+                            context: $.extend(true, {}, context, {
+                                instances: $listView.find('tr.multi-edit-selected').map(function(index, row) {
+                                    var $row = $(row);
+
+                                    return $row.data('json-obj');
+                                })
+                            })
+                        });
+
+                        $listView.remove();
+
+                        $('div.overlay').remove();
+                    }
+                }, {
+                    text: _l('label.cancel'),
+                    'class': 'cancel',
+                    click: function() {
+                        $listView.fadeOut(function() {
+                            $listView.remove();
+                        });
+                        $('div.overlay').fadeOut(function() {
+                            $('div.overlay').remove();
+                        });
+                    }
+                }]
+            }).parent('.ui-dialog').overlay();
+        },
+
+        /**
+         * to change a property(e.g. validation) of a createForm field after a createForm is rendered
+         */
+        createFormField: {
+            validation: {
+                required: {
+                    add: function($formField) {
+                        var $input = $formField.find('input, select');
+                        var validationRules = $input.data('validation-rules');
+
+                        if (validationRules == null || validationRules.required == null || validationRules.required == false) {
+                            $formField.find('.name').find('label').find('span.field-required').css('display', 'inline'); //show red asterisk
+
+                            if (validationRules == null)
+                                validationRules = {};
+                            validationRules.required = true;
+                            $input.data('validation-rules', validationRules);
+                            $input.rules('add', {
+                                required: true
+                            });
+                        }
+                    },
+                    remove: function($formField) {
+                        var $input = $formField.find('input, select');
+                        var validationRules = $input.data('validation-rules');
+
+                        if (validationRules != null && validationRules.required != null && validationRules.required == true) {
+                            $formField.find('.name').find('label').find('span.field-required').hide(); //hide red asterisk
+                            delete validationRules.required;
+                            $input.data('validation-rules', validationRules);
+
+                            $input.rules('remove', 'required');
+                            $formField.find('.value').find('label.error').hide();
+                        }
+                    }
                 }
-              }
             }
-          });
-        } else if(field.isTextarea) {
-          $input = $('<textarea>').attr({
-            name: key
-          }).appendTo($value);
-
-          if (field.defaultValue) {
-            $input.val(field.defaultValue);
-          }
-        } else if (field.isDatepicker) { //jQuery datepicker
-            $input = $('<input>').attr({
-              name: key,
-              type: 'text'
-            }).appendTo($value);
-
-            if (field.defaultValue) {
-              $input.val(field.defaultValue);
-            }
-            if (field.id) {
-              $input.attr('id', field.id);
+        },
+
+        /**
+         * Confirmation dialog
+         */
+        confirm: function(args) {
+            return $(
+                $('<span>').addClass('message').html(
+                    _l(args.message)
+                )
+            ).dialog({
+                title: _l('label.confirmation'),
+                dialogClass: 'confirm',
+                closeOnEscape: false,
+                zIndex: 5000,
+                buttons: [{
+                    text: _l('label.no'),
+                    'class': 'cancel',
+                    click: function() {
+                        $(this).dialog('destroy');
+                        $('div.overlay').remove();
+                        if (args.cancelAction) {
+                            args.cancelAction();
+                        }
+                        $('.hovered-elem').hide();
+                    }
+                }, {
+                    text: _l('label.yes'),
+                    'class': 'ok',
+                    click: function() {
+                        args.action();
+                        $(this).dialog('destroy');
+                        $('div.overlay').remove();
+                        $('.hovered-elem').hide();
+                    }
+                }]
+            }).closest('.ui-dialog').overlay();
+        },
+
+        /**
+         * Notice dialog
+         */
+        notice: function(args) {
+            if (args.message) {
+                return $(
+                    $('<span>').addClass('message').html(
+                        _l(args.message)
+                    )
+                ).dialog({
+                    title: _l('label.status'),
+                    dialogClass: 'notice',
+                    closeOnEscape: false,
+                    zIndex: 5000,
+                    buttons: [{
+                        text: _l('Close'),
+                        'class': 'close',
+                        click: function() {
+                            $(this).dialog('destroy');
+                            if (args.clickAction) args.clickAction();
+                            $('.hovered-elem').hide();
+                        }
+                    }]
+                });
             }
-          $input.addClass("disallowSpecialCharacters");
-          $input.datepicker({dateFormat: 'yy-mm-dd'});
-
-        } else if(field.range) {//2 text fields on the same line (e.g. port range: startPort - endPort)
-          $input = $.merge(
-            // Range start
-            $('<input>').attr({
-              type: 'text',
-              name: field.range[0]
-            }),
-
-            // Range end
-            $('<input>').attr({
-              type: 'text',
-              name: field.range[1]
-            })
-          ).appendTo(
-            $('<div>').addClass('range-edit').appendTo($value)
-          );
-          $input.wrap($('<div>').addClass('range-item'));
-          $input.addClass("disallowSpecialCharacters");
-
-        } else { //text field
-          $input = $('<input>').attr({
-            name: key,
-            type: field.password || field.isPassword ? 'password' : 'text'
-          }).appendTo($value);
-
-          if (field.defaultValue) {
-            $input.val(field.defaultValue);
-          }
-          if (field.id) {
-            $input.attr('id', field.id);
-          }
-          $input.addClass("disallowSpecialCharacters");
-        }
-
-        if(field.validation != null)
-          $input.data('validation-rules', field.validation);
-        else
-          $input.data('validation-rules', {});
-
-        var fieldLabel = field.label;
-
-        var inputId = $input.attr('id') ? $input.attr('id') : fieldLabel.replace(/\./g,'_');
-
-        $input.attr('id', inputId);
-        $name.find('label').attr('for', inputId);
-
-        if(field.isDisabled)
-            $input.attr("disabled","disabled");
-
-        // Tooltip
-        if (field.docID) {
-          $input.toolTip({
-            docID: field.docID,
-            tooltip:'.tooltip-box',
-            mode:'focus',
-            attachTo: '.form-item'
-          });
-        }
-
-
-        /*     $input.blur(function() {
-         console.log('tooltip remove->' + $input.attr('name'));
-         });*/
-      });
 
-
-      var getFormValues = function() {
-        var formValues = {};
-        $.each(args.form.fields, function(key) {});
-      };
-
-      // Setup form validation
-      $formContainer.find('form').validate();
-      $formContainer.find('input, select').each(function() {
-        if ($(this).data('validation-rules')) {
-          $(this).rules('add', $(this).data('validation-rules'));
-        }
-        else {
-          $(this).rules('add', {});
-        }
-      });
-      $form.find('select').trigger('change');
-
-
-      var complete = function($formContainer) {
-        var $form = $formContainer.find('form');
-        var data = cloudStack.serializeForm($form);
-
-        if (!$formContainer.find('form').valid()) {
-          // Ignore hidden field validation
-          if ($formContainer.find('input.error:visible, select.error:visible').size()) {
             return false;
-          }
-        }
-
-        args.after({
-          data: data,
-          ref: args.ref, // For backwards compatibility; use context
-          context: args.context,
-          $form: $form
-        });
-
-        return true;
-      };
-
-      if (args.noDialog) {
-        return {
-          $formContainer: $formContainer,
-          completeAction: complete
-        };
-      } else if (!isAsync) {
-        return ret();
-      }
-    },
-
-    // Dialog with list view selector
-    listView: function(args) {
-      var listView = args.listView;
-      var after = args.after;
-      var context = args.context;
-      var $listView = $('<div>');
-
-      listView.actions = {
-        select: {
-          label: _l('label.select.instance'),
-          type: listView.type,
-          action: {
-            uiCustom: function(args) {
-              var $item = args.$item;
-              var $input = $item.find('td.actions input:visible');
-
-              if ($input.attr('type') == 'checkbox') {
-                if ($input.is(':checked'))
-                  $item.addClass('multi-edit-selected');
-                else
-                  $item.removeClass('multi-edit-selected');
-              } else {
-                $item.siblings().removeClass('multi-edit-selected');
-                $item.addClass('multi-edit-selected');
-              }
-            }
-          }
         }
-      };
-
-      // Init list view
-      $listView = $('<div>').listView({
-        context: context,
-        uiCustom: true,
-        listView: listView
-      });
-
-      // Change action label
-      $listView.find('th.actions').html(_l('label.select'));
-      
-      $listView.dialog({
-        dialogClass: 'multi-edit-add-list panel',
-        width: 825,
-        title: _l('Select VM'),
-        buttons: [
-          {
-            text: _l('label.apply'),
-            'class': 'ok',
-            click: function() {
-              if (!$listView.find(
-                'input[type=radio]:checked, input[type=checkbox]:checked'
-              ).size()) {
-                cloudStack.dialog.notice({ message: _l('message.select.instance')});
-
-                return false;
-              }
-              
-              after({
-                context: $.extend(true, {}, context, {
-                  instances: $listView.find('tr.multi-edit-selected').map(function(index, row) {
-                    var $row = $(row);
-
-                    return $row.data('json-obj');
-                  })
-                })
-              });
-              
-              $listView.remove();
-
-              $('div.overlay').remove();
-            }
-          },
-          {
-            text: _l('label.cancel'),
-            'class': 'cancel',
-            click: function() {
-              $listView.fadeOut(function() {
-                $listView.remove();
-              });
-              $('div.overlay').fadeOut(function() {
-                $('div.overlay').remove();
-              });
-            }
-          }
-        ]
-      }).parent('.ui-dialog').overlay();
-    },
-
-    /**
-     * to change a property(e.g. validation) of a createForm field after a createForm is rendered
-     */
-    createFormField: {
-      validation: {
-        required: {
-          add: function($formField) {
-            var $input = $formField.find('input, select');
-            var validationRules = $input.data('validation-rules');
-
-            if(validationRules == null || validationRules.required == null || validationRules.required == false) {
-              $formField.find('.name').find('label').find('span.field-required').css('display', 'inline'); //show red asterisk
-
-              if(validationRules == null)
-                validationRules = {};
-              validationRules.required = true;
-              $input.data('validation-rules', validationRules);
-              $input.rules('add', { required: true });
-            }
-          },
-          remove: function($formField) {
-            var $input = $formField.find('input, select');
-            var validationRules = $input.data('validation-rules');
-
-            if(validationRules != null && validationRules.required != null && validationRules.required == true) {
-              $formField.find('.name').find('label').find('span.field-required').hide(); //hide red asterisk
-              delete validationRules.required;
-              $input.data('validation-rules', validationRules);
-
-              $input.rules('remove', 'required');
-              $formField.find('.value').find('label.error').hide();
-            }
-          }
-        }
-      }
-    },
-
-    /**
-     * Confirmation dialog
-     */
-    confirm: function(args) {
-      return $(
-        $('<span>').addClass('message').html(
-          _l(args.message)
-        )
-      ).dialog({
-        title: _l('label.confirmation'),
-        dialogClass: 'confirm',
-        closeOnEscape: false,
-        zIndex: 5000,
-        buttons: [
-          {
-            text: _l('label.no'),
-            'class': 'cancel',
-            click: function() {
-              $(this).dialog('destroy');
-              $('div.overlay').remove();
-              if (args.cancelAction) { args.cancelAction(); }
-              $('.hovered-elem').hide();
-            }
-          },
-          {
-            text: _l('label.yes'),
-            'class': 'ok',
-            click: function() {
-              args.action();
-              $(this).dialog('destroy');
-              $('div.overlay').remove();
-              $('.hovered-elem').hide();
-            }
-          }
-        ]
-      }).closest('.ui-dialog').overlay();
-    },
-
-    /**
-     * Notice dialog
-     */
-    notice: function(args) {
-      if (args.message) {
-        return $(
-          $('<span>').addClass('message').html(
-            _l(args.message)
-          )
-        ).dialog({
-            title: _l('label.status'),
-            dialogClass: 'notice',
-            closeOnEscape: false,
-            zIndex: 5000,
-            buttons: [
-              {
-                text: _l('Close'),
-                'class': 'close',
-                click: function() {
-                  $(this).dialog('destroy');
-                  if (args.clickAction) args.clickAction();
-                  $('.hovered-elem').hide();
-                }
-              }
-            ]
-          });
-      }
-
-      return false;
-    }
-  };
+    };
 })(window.jQuery, window.cloudStack, _l);

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui/events.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/events.js b/ui/scripts/ui/events.js
index bd609d2..a7eff84 100644
--- a/ui/scripts/ui/events.js
+++ b/ui/scripts/ui/events.js
@@ -15,46 +15,48 @@
 // specific language governing permissions and limitations
 // under the License.
 (function($, cloudStack) {
-  cloudStack.ui.event = {
-    // Attach element to specific event type
-    elem: function(widget, elem, $elem, extraData) {
-      // Setup DOM metadata
-      var data = { cloudStack: {} };
-      data.cloudStack[widget] = {
-        elem: elem
-      };
-      if (extraData) $.extend(data.cloudStack[widget], extraData);
+    cloudStack.ui.event = {
+        // Attach element to specific event type
+        elem: function(widget, elem, $elem, extraData) {
+            // Setup DOM metadata
+            var data = {
+                cloudStack: {}
+            };
+            data.cloudStack[widget] = {
+                elem: elem
+            };
+            if (extraData) $.extend(data.cloudStack[widget], extraData);
 
-      return $elem
-        .addClass('cloudStack-elem')
-        .addClass(widget)
-        .data(data);
-    },
+            return $elem
+                .addClass('cloudStack-elem')
+                .addClass(widget)
+                .data(data);
+        },
 
-    // Create widget-based event
-    bind: function(widget, events) {
-      return function(event) {
-        var $target = $(event.target);
-        var $widget, $elem;
-        var data, elem;
+        // Create widget-based event
+        bind: function(widget, events) {
+            return function(event) {
+                var $target = $(event.target);
+                var $widget, $elem;
+                var data, elem;
 
-        $elem = $target.closest('.cloudStack-elem.' + widget);
-        if (!$elem.size())
-          return true;
+                $elem = $target.closest('.cloudStack-elem.' + widget);
+                if (!$elem.size())
+                    return true;
 
-        $widget = $('.cloudStack-widget.' + widget);
-        data = $elem.data('cloudStack')[widget];
-        elem = data.elem;
+                $widget = $('.cloudStack-widget.' + widget);
+                data = $elem.data('cloudStack')[widget];
+                elem = data.elem;
 
-        events[elem]($elem, $widget, data);
+                events[elem]($elem, $widget, data);
 
-        return false;
-      };
-    },
+                return false;
+            };
+        },
 
-    // Trigger CloudStack UI event (cloudStack.*)
-    call: function(eventName, data) {
-      $(window).trigger('cloudStack.' + eventName, data);
-    }
-  };
+        // Trigger CloudStack UI event (cloudStack.*)
+        call: function(eventName, data) {
+            $(window).trigger('cloudStack.' + eventName, data);
+        }
+    };
 })(jQuery, cloudStack);

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui/utils.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/utils.js b/ui/scripts/ui/utils.js
index 39ef3e3..aeaf02b 100644
--- a/ui/scripts/ui/utils.js
+++ b/ui/scripts/ui/utils.js
@@ -15,113 +15,110 @@
 // specific language governing permissions and limitations
 // under the License.
 (function($, cloudStack) {
-  // General utils
-  cloudStack.serializeForm = function($form, options) {
-    if (!options) options = {};
-
-    var data = {};
-
-    $($form.serializeArray()).each(function() {
-      var dataItem = data[this.name];
-      var value = _s(this.value.toString());
-
-      if (options.escapeSlashes) {
-        value = value.replace(/\//g, '__forwardSlash__');
-      }
-
-      if (!dataItem) {
-        data[this.name] = value;
-      } else if (dataItem && !$.isArray(dataItem)) {
-        data[this.name] = [dataItem, value];
-      } else if($.isArray(dataItem)){
-        dataItem.push(value);
-      }
-    });
-
-    return data;
-  };
-
-  // Even/odd row handling
-  cloudStack.evenOdd = function($container, itemSelector, args) {
-    var even = false;
-
-    $container.find(itemSelector).each(function() {
-      var $elem = $(this);
-
-      if (even) {
-        even = false;
-        args.odd($elem);
-      } else {
-        even = true;
-        args.even($elem);
-      }
-    });
-  };
-
-  /**
-   * Localization -- shortcut _l
-   *
-   * Takes string and runs through localization function -- if no code
-   * exists or function isn't present, return string as-is
-   */
-  cloudStack.localize = window._l = function(str) {
-    var localized = cloudStack.localizationFn ?
-          cloudStack.localizationFn(str) : null;
-
-    return localized ? localized : str;
-  };
-
-  /**
-   * Sanitize user input (HTML Encoding) -- shortcut _s
-   *
-   * Strip unwanted characters from user-based input
-   */
-  cloudStack.sanitize = window._s = function(value) {
-    if(typeof(value) == "number") {
-      //alert("number does not need to be sanitized. Only string needs to be sanitized.");
-      return value;
-    }
-    else if(typeof(value) == "boolean") {
-      //alert("boolean does not need to be sanitized. Only string needs to be sanitized.");
-      return value;
-    }
-    else if(typeof(value) == "object") {
-      //alert("object cant not be sanitized. Only string can be sanitized.");
-      return value;
-    }
-    else if(typeof(value) == null || typeof(value) == "undefined") {
-      return '';
-    }
-
-    var sanitized = value
-          .replace(/&/g, "&amp;")
-          .replace(/</g, "&lt;")
-          .replace(/>/g, "&gt;");
-
-    return sanitized;
-  };
-
-  /**
-   * Reverse sanitization (HTML Decoding)
-   */
-  cloudStack.sanitizeReverse = function(value) {
-    var reversedValue = value
-          .replace(/&amp;/g, "&")
-          .replace(/&lt;/g, "<")
-          .replace(/&gt;/g, ">");
-
-    return reversedValue;
-  };
-
-  /**
-   * If the str.length is > maxLen,
-   * then concatenate and add '...' to the end of the string
-   */
-  cloudStack.concat = function(str, maxLen) {
-    if (str.length > maxLen) {
-      return str.substr(0, maxLen) + '...';
-    } else {
-      return str;
-    }
-  };
+    // General utils
+    cloudStack.serializeForm = function($form, options) {
+        if (!options) options = {};
+
+        var data = {};
+
+        $($form.serializeArray()).each(function() {
+            var dataItem = data[this.name];
+            var value = _s(this.value.toString());
+
+            if (options.escapeSlashes) {
+                value = value.replace(/\//g, '__forwardSlash__');
+            }
+
+            if (!dataItem) {
+                data[this.name] = value;
+            } else if (dataItem && !$.isArray(dataItem)) {
+                data[this.name] = [dataItem, value];
+            } else if ($.isArray(dataItem)) {
+                dataItem.push(value);
+            }
+        });
+
+        return data;
+    };
+
+    // Even/odd row handling
+    cloudStack.evenOdd = function($container, itemSelector, args) {
+        var even = false;
+
+        $container.find(itemSelector).each(function() {
+            var $elem = $(this);
+
+            if (even) {
+                even = false;
+                args.odd($elem);
+            } else {
+                even = true;
+                args.even($elem);
+            }
+        });
+    };
+
+    /**
+     * Localization -- shortcut _l
+     *
+     * Takes string and runs through localization function -- if no code
+     * exists or function isn't present, return string as-is
+     */
+    cloudStack.localize = window._l = function(str) {
+        var localized = cloudStack.localizationFn ?
+            cloudStack.localizationFn(str) : null;
+
+        return localized ? localized : str;
+    };
+
+    /**
+     * Sanitize user input (HTML Encoding) -- shortcut _s
+     *
+     * Strip unwanted characters from user-based input
+     */
+    cloudStack.sanitize = window._s = function(value) {
+        if (typeof(value) == "number") {
+            //alert("number does not need to be sanitized. Only string needs to be sanitized.");
+            return value;
+        } else if (typeof(value) == "boolean") {
+            //alert("boolean does not need to be sanitized. Only string needs to be sanitized.");
+            return value;
+        } else if (typeof(value) == "object") {
+            //alert("object cant not be sanitized. Only string can be sanitized.");
+            return value;
+        } else if (typeof(value) == null || typeof(value) == "undefined") {
+            return '';
+        }
+
+        var sanitized = value
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
+
+        return sanitized;
+    };
+
+    /**
+     * Reverse sanitization (HTML Decoding)
+     */
+    cloudStack.sanitizeReverse = function(value) {
+        var reversedValue = value
+            .replace(/&amp;/g, "&")
+            .replace(/&lt;/g, "<")
+            .replace(/&gt;/g, ">");
+
+        return reversedValue;
+    };
+
+    /**
+     * If the str.length is > maxLen,
+     * then concatenate and add '...' to the end of the string
+     */
+    cloudStack.concat = function(str, maxLen) {
+        if (str.length > maxLen) {
+            return str.substr(0, maxLen) + '...';
+        } else {
+            return str;
+        }
+    };
 })(jQuery, cloudStack);


Mime
View raw message