[Kimchi-devel] [PATCH v2 1/2] Issue#364: UI - Column Resizing Function Broken in Host Tab

15 Apr 2014

It doesn't work when resizing columns in a page containing multiple
Grid instances.
  Fix it in this patch.

Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com>
---
 ui/js/src/kimchi.grid.js | 860 +++++++++++++++++++++++++----------------------
 1 file changed, 461 insertions(+), 399 deletions(-)

diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js
index 5f94e79..fa020ba 100644
--- a/ui/js/src/kimchi.grid.js
+++ b/ui/js/src/kimchi.grid.js
@@ -15,206 +15,447 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-kimchi.widget.Grid = function(params) {
-    var containerID = params['container'];
-    var container = $('#' + containerID);
-    var gridID = params['id'];
-    var rowSelection = params['rowSelection'] || 'single';
-    var rowListener = params['onRowSelected'];
-    var htmlStr = [
-      '<div id="', gridID, '" class="grid">',
-        '<div class="grid-content">',
-          '<div class="grid-header">',
-            '<div class="grid-frozen-header-view">',
-              '<table class="grid-frozen-header-container">',
+kimchi.widget.Grid = function(opts) {
+  this.opts = $.extend({}, this.opts, opts);
+  this.createDOM();
+  this.reload();
+};
+
+kimchi.widget.Grid.prototype = (function() {
+  var htmlStr = [
+    '<div id="{id}" class="grid">',
+      '<div class="grid-content">',
+        '<div class="grid-header">',
+          '<div class="grid-frozen-header-view">',
+            '<table class="grid-frozen-header-container">',
+            '</table>',
+          '</div>',
+          '<div class="grid-header-view">',
+            '<div class="grid-header-wrapper">',
+              '<table class="grid-header-container">',
               '</table>',
             '</div>',
-            '<div class="grid-header-view">',
-              '<div class="grid-header-wrapper">',
-                '<table class="grid-header-container">',
-                '</table>',
-              '</div>',
-            '</div>',
           '</div>',
-          '<div class="grid-body">',
-            '<div class="grid-frozen-body-view">',
-              '<div class="grid-frozen-body-wrapper">',
-                '<table class="grid-frozen-body-container">',
-                '</table>',
-              '</div>',
-            '</div>',
-            '<div class="grid-body-view">',
-              '<div class="grid-body-wrapper">',
-                '<table class="grid-body-container">',
-                '</table>',
-              '</div>',
+        '</div>',
+        '<div class="grid-body">',
+          '<div class="grid-frozen-body-view">',
+            '<div class="grid-frozen-body-wrapper">',
+              '<table class="grid-frozen-body-container">',
+              '</table>',
             '</div>',
           '</div>',
-          '<div class="grid-resizer-leftmost hidden"></div>',
-          '<div class="grid-resizer hidden"></div>',
-        '</div>',
-        '<div class="grid-footer"></div>',
-        '<div class="grid-mask hidden">',
-            '<div class="grid-loading">',
-                '<div class="grid-loading-icon"></div>',
-                '<div class="grid-loading-text">',
-                    i18n['KCHGRD6001M'],
-                '</div>',
+          '<div class="grid-body-view">',
+            '<div class="grid-body-wrapper">',
+              '<table class="grid-body-container">',
+              '</table>',
             '</div>',
-        '</div>',
-        '<div class="grid-message hidden">',
-          '<div class="grid-message-text">',
-            i18n['KCHGRD6002M'],
-            '<button class="retry-button btn-small">',
-              i18n['KCHGRD6003M'],
-            '</button>',
           '</div>',
-          '<div class="detailed-title">',
-            i18n['KCHGRD6004M'],
+        '</div>',
+        '<div class="grid-resizer-leftmost hidden"></div>',
+        '<div class="grid-resizer hidden"></div>',
+      '</div>',
+      '<div class="grid-footer"></div>',
+      '<div class="grid-mask hidden">',
+          '<div class="grid-loading">',
+              '<div class="grid-loading-icon"></div>',
+              '<div class="grid-loading-text">',
+                '{loading}',
+              '</div>',
           '</div>',
-          '<div class="detailed-text"></div>',
+      '</div>',
+      '<div class="grid-message hidden">',
+        '<div class="grid-message-text">',
+          '{message}',
+          '<button class="retry-button btn-small">',
+            '{buttonLabel}',
+          '</button>',
+        '</div>',
+        '<div class="detailed-title">',
+          '{detailedLabel}',
         '</div>',
-      '</div>'
-    ];
+        '<div class="detailed-text"></div>',
+      '</div>',
+    '</div>'
+  ].join('');
+
+  var CONTAINER_NORMAL = 0, CONTAINER_FROZEN = 1;
+
+  var setupHeaders = function(header, body, fields) {
+    var colGroup = $('<colgroup></colgroup>').appendTo(header);
+    var headerHeader = $('<thead></thead>');
+    var headerRow = $('<tr></tr>').appendTo(headerHeader);
+    $.each(fields || [], function(i, field) {
+      $('<col class="' +
+        field['class'] +
+      '"/>')
+        .appendTo(colGroup);
+      $('<th><div class="cell-text-wrapper">' +
+        field['label'] +
+      '</div></th>').appendTo(headerRow);
+    });
+    headerHeader.appendTo(header);
+
+    var totalWidth = 0;
+    $('col', colGroup).each(function(index, col) {
+      var width = $(col).width();
+      totalWidth += width;
+      $(col).css('width', width + 'px');
+    });
+    $(body).append(colGroup.clone());
+    return totalWidth;
+  };
+
+  var getValue = function(name, obj) {
+    var result=undefined;
+    if(!Array.isArray(name)) {
+      name=name.parseKey();
+    }
+    if(name.length!=0) {
+      var tmpName=name.shift();
+      if(obj[tmpName]!=undefined) {
+          result=obj[tmpName];
+      }
+      if(name.length!=0) {
+          result=getValue(name,obj[tmpName]);
+      }
+    }
+    return(result);
+  };
+
+  var fillBody = function(container, fields) {
+    var data = this.data;
+    var tbody = ($('tbody', container).length && $('tbody', container))
+      || $('<tbody></tbody>').appendTo(container);
+    tbody.empty();
+    $.each(data, function(i, row) {
+      var rowNode = $('<tr></tr>').appendTo(tbody);
+      $.each(fields, function(fi, field) {
+        var value = getValue(field['name'], row);
+        $('<td><div class="cell-text-wrapper"' +
+          (field['makeTitle'] === true
+            ? ' title="' + value + '"'
+            : ''
+          ) + '>' + value.toString() + '</div></td>'
+        ).appendTo(rowNode);
+      });
+    });
+  };
 
-    var gridNode = $(htmlStr.join(''))
-        .appendTo(container);
+  var fixTableLayout = function(style) {
+    $.each([
+      this.frozenHeaderContainer,
+      this.headerContainer,
+      this.frozenBodyContainer,
+      this.bodyContainer
+    ], function(i, tableNode) {
+      $(tableNode).css('table-layout', style || 'fixed');
+    });
+  };
+
+  var initResizing = function(event) {
+    var resizer = event.data.resizer;
+    var pageX = event.pageX;
+    var tailPos = $(this).width() + $(this).offset()['left'];
+    var atResizer = Math.abs(pageX - tailPos) <= 2;
+    var isResizing = !$(resizer).hasClass('hidden');
+    $('body')[(atResizer || isResizing)
+      ? 'addClass'
+      : 'removeClass'
+    ]('resizing');
+  };
+
+  var clearResizing = function(event) {
+    $(event.data.resizer).hasClass('hidden') &&
+      $('body').removeClass('resizing');
+  };
+
+  var stylingRow = function(row, className, add) {
+    var index = $(row).index() + 1;
+    $('tr', this.frozenBodyContainer)
+      .removeClass(className);
+    $('tr', this.bodyContainer)
+      .removeClass(className);
+
+    if(add === false) {
+      return;
+    }
 
-    var height = gridNode.height();
-    var width = gridNode.width();
+    $('tr:nth-child(' + index + ')', this.frozenBodyContainer)
+      .addClass(className);
+    $('tr:nth-child(' + index + ')', this.bodyContainer)
+      .addClass(className);
+  };
+
+  var setBodyListeners = function() {
+    if(this['opts']['rowSelection'] != 'disabled') {
+      $('tr', this.gridBody).on('mouseover', {
+        grid: this
+      }, function(event) {
+        stylingRow.call(event.data.grid, this, 'hover');
+      });
+
+      $('tr', this.gridBody).on('mouseout', {
+        grid: this
+      }, function(event) {
+        stylingRow.call(event.data.grid, this, 'hover', false);
+      });
+
+      $('tr', this.gridBody).on('click', {
+        grid: this
+      }, function(event) {
+        var grid = event.data.grid;
+        grid.selectedIndex = $(this).index();
+        stylingRow.call(grid, this, 'selected');
+        grid['opts']['onRowSelected'] && grid['opts']['onRowSelected']();
+      });
+    }
 
-    var title = params['title'];
+    $('.grid-body-view', this.domNode).on('scroll', {
+      grid: this
+    }, function(event) {
+      var grid = event.data.grid;
+      $('.grid-header .grid-header-view', grid.domNode)
+        .prop('scrollLeft', this.scrollLeft);
+      $('.grid-body .grid-frozen-body-view', grid.domNode)
+        .prop('scrollTop', this.scrollTop);
+    });
+  };
+
+  var setData = function(data) {
+    this.data = data;
+    fillBody.call(this, this.frozenBodyContainer, this['opts']['frozenFields']);
+    fillBody.call(this, this.bodyContainer, this['opts']['fields']);
+    setBodyListeners.call(this);
+  };
+
+  var getSelected = function() {
+    return this.selectedIndex >= 0
+      ? this.data[this.selectedIndex]
+      : null;
+  };
+
+  var startResizing = function(container, event) {
+    var grid = event.data.grid;
+    kimchi.widget.Grid.beingResized = grid;
+    if(!($('body').hasClass('resizing')
+        && $(grid.resizer).hasClass('hidden'))) {
+      return;
+    }
+
+    grid.columnBeingResized = container;
+    var pageX = event.pageX;
+    var gridOffsetX = grid.domNode.offset()['left'];
+    var leftmostOffsetX = $(container).offset()['left'] - gridOffsetX;
+    var left = pageX - gridOffsetX;
+    var contentHeight = $('.grid-content', grid.domNode).height();
+    $(grid.resizerLeftmost).css({
+      left: leftmostOffsetX + 'px',
+      height: contentHeight + 'px'
+    });
+    $(grid.resizer).css({
+      left: left + 'px',
+      height: contentHeight + 'px'
+    });
+    $(grid.resizerLeftmost).removeClass('hidden');
+    $(grid.resizer).removeClass('hidden');
+    event.preventDefault();
+  };
+
+  var endResizing = function(event) {
+    var grid = kimchi.widget.Grid.beingResized;
+    if(!$('body').hasClass('resizing')) {
+      return;
+    }
+    $(grid.resizerLeftmost).addClass('hidden');
+    $(grid.resizer).addClass('hidden');
+    $('body').removeClass('resizing');
+    var leftmostOffset = $(grid.columnBeingResized).offset()['left'];
+    var left = event.pageX;
+    if(leftmostOffset > left) {
+      return;
+    }
+    resizeColumnWidth.call(
+      grid,
+      $(grid.columnBeingResized).index(),
+      left - leftmostOffset
+    );
+    fixTableLayout.call(grid);
+    grid.columnBeingResized = null;
+    kimchi.widget.Grid.beingResized = null;
+  };
+
+  var resizeColumnWidth = function(index, width) {
+    var width = Math.ceil(width);
+    var widthArray = [];
+    var totalWidth = 0;
+    var header = this.headerContainer;
+    var body = this.bodyContainer;
+    if(this.containerBeingResized === CONTAINER_FROZEN) {
+      header = this.frozenHeaderContainer;
+      body = this.frozenBodyContainer;
+    }
+    $('col', header).each(function(i, colNode) {
+      var w = index === i ? width : $(colNode).width();
+      widthArray.push(w);
+      totalWidth += w;
+    });
+    $.each([header, body], function(i, container) {
+      container.css({
+        'table-layout': 'fixed',
+        width: totalWidth + 'px'
+      });
+      $('col:nth-child(' + (index + 1) + ')', container).css({
+        width: width + 'px'
+      });
+    });
+
+    if(this.containerBeingResized === CONTAINER_FROZEN) {
+      var headerView = $('.grid-header-view', this.domNode);
+      var bodyView = $('.grid-body-view', this.domNode);
+      $.each([headerView, bodyView], function(i, view) {
+        view.css({
+          left: totalWidth + 'px'
+        });
+      });
+    }
+  };
+
+  var positionResizer = function(event) {
+    var grid = event.data.grid;
+    if($(grid.resizer).hasClass('hidden')) {
+      return;
+    }
+
+    var pageX = event.pageX;
+    var gridOffsetX = $(grid.domNode).offset()['left'];
+    var leftMost = $(grid.resizerLeftmost).position()['left'];
+    var offsetX = pageX - gridOffsetX;
+    offsetX = offsetX >= leftMost ? offsetX : leftMost;
+    $(grid.resizer).css('left', offsetX + 'px');
+  };
+
+  var showMessage = function(msg) {
+    $('.detailed-text', this.messageNode).text(msg);
+    $(this.messageNode).removeClass('hidden');
+  };
+
+  var hideMessage = function() {
+    $(this.messageNode).addClass('hidden');
+  };
+
+  var reload = function() {
+    var data = this['opts']['data'];
+    if(!data) {
+      return;
+    }
+
+    $(this.messageNode).addClass('hidden');
+
+    if($.isArray(data)) {
+      return this.setData(data);
+    }
+
+    if($.isFunction(data)) {
+      var loadData = data;
+      $(this.maskNode).removeClass('hidden');
+      loadData($.proxy(function(data) {
+        this.setData(data);
+        $(this.maskNode).addClass('hidden');
+      }, this));
+    }
+  };
+
+  var destroy = function() {
+    $('body').off('mousemove.grid#' + this['opts']['id'], positionResizer);
+    $('body').off('mouseup.grid#' + this['opts']['id'], endResizing);
+  };
+
+  var createDOM = function() {
+    var containerID = this['opts']['container'];
+    var container = $('#' + containerID);
+    var gridID = this['opts']['id'];
+    var rowSelection = this['opts']['rowSelection'] || 'single';
+    var domNode = $(kimchi.template(htmlStr, {
+      id: gridID,
+      loading: i18n['KCHGRD6001M'],
+      message: i18n['KCHGRD6002M'],
+      buttonLabel: i18n['KCHGRD6003M'],
+      detailedLabel: i18n['KCHGRD6004']
+    })).appendTo(container);
+    this.domNode = domNode;
+
+    var height = domNode.height();
+    var width = domNode.width();
+
+    var title = this['opts']['title'];
     var titleNode = null;
     if(title) {
-        titleNode = $('<div class="grid-caption">' + title + '</div>')
-            .prependTo(gridNode);
+      titleNode = $('<div class="grid-caption">' + title + '</div>')
+        .prependTo(domNode);
     }
 
-    var toolbarButtons = params['toolbarButtons'];
+    var toolbarButtons = this['opts']['toolbarButtons'];
     var toolbarNode = null;
     if(toolbarButtons) {
-        toolbarNode = $('<div class="grid-toolbar"></div>');
-        if(titleNode) {
-            titleNode.after(toolbarNode);
-        }
-        else {
-            toolbarNode.prependTo(gridNode);
-        }
-
-        $.each(toolbarButtons, function(i, button) {
-            var btnHTML = [
-                '<button',
-                button['id'] ? (' id="' + button['id'] + '"') : '',
-                ' class="grid-toolbar-button',
-                    button['class'] ? (' ' + button['class']) : '',
-                    '"',
-                    button['disabled'] === true ? ' disabled' : '',
-                    '>',
-                    button['label'],
-                '</button>'
-            ].join('');
-            var btnNode = $(btnHTML).appendTo(toolbarNode);
-            button['onClick'] &&
-                btnNode.on('click', button['onClick']);
-        });
+      toolbarNode = $('<div class="grid-toolbar"></div>');
+      if(titleNode) {
+        titleNode.after(toolbarNode);
+      }
+      else {
+        toolbarNode.prependTo(domNode);
+      }
+
+      $.each(toolbarButtons, function(i, button) {
+        var btnHTML = [
+          '<button',
+            button['id'] ? (' id="' + button['id'] + '"') : '',
+            ' class="grid-toolbar-button',
+              button['class'] ? (' ' + button['class']) : '',
+              '"',
+              button['disabled'] === true ? ' disabled' : '',
+              '>',
+              button['label'],
+          '</button>'
+        ].join('');
+        var btnNode = $(btnHTML).appendTo(toolbarNode);
+        button['onClick'] &&
+          btnNode.on('click', button['onClick']);
+      });
     }
 
-    var setupHeaders = function(header, body, fields) {
-        var colGroup = $('<colgroup></colgroup>').appendTo(header);
-        var headerHeader = $('<thead></thead>');
-        var headerRow = $('<tr></tr>').appendTo(headerHeader);
-        $.each(fields || [], function(i, field) {
-            $('<col class="' +
-                field['class'] +
-            '"/>')
-                .appendTo(colGroup);
-            $('<th><div class="cell-text-wrapper">' +
-                field['label'] +
-            '</div></th>').appendTo(headerRow);
-        });
-        headerHeader.appendTo(header);
-
-        var totalWidth = 0;
-        $('col', header).each(function(index, col) {
-            var width = $(col).width();
-            totalWidth += width;
-            $(col).css('width', width + 'px');
-        });
-        $('colgroup', header).clone().appendTo(body);
-        return totalWidth;
-    };
-
-    var frozenHeaderContainer = $('.grid-frozen-header-container', gridNode);
-    var frozenBodyContainer = $('.grid-frozen-body-container', gridNode);
+    var frozenHeaderContainer = $('.grid-frozen-header-container', domNode);
+    var frozenBodyContainer = $('.grid-frozen-body-container', domNode);
     var frozenWidth = setupHeaders(
         frozenHeaderContainer,
         frozenBodyContainer,
-        params['frozenFields']
+        this['opts']['frozenFields']
     );
+    this.frozenHeaderContainer = frozenHeaderContainer;
+    this.frozenBodyContainer = frozenBodyContainer;
 
-    var headerContainer = $('.grid-header-container', gridNode);
-    var bodyContainer = $('.grid-body-container', gridNode);
-    setupHeaders(headerContainer, bodyContainer, params['fields']);
+    var headerContainer = $('.grid-header-container', domNode);
+    var bodyContainer = $('.grid-body-container', domNode);
+    setupHeaders(headerContainer, bodyContainer, this['opts']['fields']);
+    this.headerContainer = headerContainer;
+    this.bodyContainer = bodyContainer;
 
-    $.each([
-        frozenHeaderContainer,
-        headerContainer,
-        frozenBodyContainer,
-        bodyContainer
-    ], function(i, tableNode) {
-        $(tableNode).css('table-layout', 'auto');
-    });
+    fixTableLayout.call(this, 'auto');
 
-    var gridContentNode = $('.grid-content', gridNode);
+    var gridContentNode = $('.grid-content', domNode);
     var captionHeight = titleNode && $(titleNode).height() || 0;
     var toolbarHeight = toolbarNode && $(toolbarNode).height() || 0;
     gridContentNode.css('top', (captionHeight + toolbarHeight) + 'px');
 
-    var maskNode = $('.grid-mask', gridNode);
+    var maskNode = $('.grid-mask', domNode);
     maskNode.css('top', captionHeight + 'px');
+    this.maskNode = maskNode;
 
-    var messageNode = $('.grid-message', gridNode);
+    var messageNode = $('.grid-message', domNode);
     messageNode.css('top', captionHeight + 'px');
+    this.messageNode = messageNode;
 
-
-    var getValue = function(name, obj) {
-    var result=undefined;
-    if(!Array.isArray(name)) {
-        name=name.parseKey();
-    }
-    if(name.length!=0) {
-        var tmpName=name.shift();
-        if(obj[tmpName]!=undefined) {
-            result=obj[tmpName];
-        }
-        if(name.length!=0) {
-            result=getValue(name,obj[tmpName]);
-        }
-    }
-    return(result);
-    };
-
-    var fillBody = function(container, fields, data) {
-        var tbody = ($('tbody', container).length && $('tbody', container))
-            || $('<tbody></tbody>').appendTo(container);
-        tbody.empty();
-        $.each(data, function(i, row) {
-            var rowNode = $('<tr></tr>').appendTo(tbody);
-            $.each(fields, function(fi, field) {
-                var value = getValue(field['name'], row);
-                $('<td><div class="cell-text-wrapper"' +
-                     (field['makeTitle'] === true
-                         ? ' title="' + value + '"'
-                         : ''
-                     ) + '>' + value.toString() + '</div></td>'
-                ).appendTo(rowNode);
-            });
-        });
-    };
-
-    var frozenHeaderView = $('.grid-frozen-header-view', gridNode);
-    var headerView = $('.grid-header-view', gridNode);
-    var bodyView = $('.grid-body-view', gridNode);
+    var headerView = $('.grid-header-view', domNode);
+    var bodyView = $('.grid-body-view', domNode);
     headerView.css('left', (frozenWidth) + 'px');
     bodyView.css('left', (frozenWidth) + 'px');
 
@@ -222,243 +463,64 @@ kimchi.widget.Grid = function(params) {
     headerContainer.css('width', bodyWidth + 'px');
     bodyContainer.css('width', bodyWidth + 'px');
 
-    var fixTableLayout = function() {
-        $.each([
-            frozenHeaderContainer,
-            headerContainer,
-            frozenBodyContainer,
-            bodyContainer
-        ], function(i, tableNode) {
-            $(tableNode).css('table-layout', 'fixed');
-        });
-    };
-    fixTableLayout();
-
-    var gridHeader = $('.grid-header', gridNode);
-    $('th', gridHeader).on('mouseover mousemove', function(event) {
-        var pageX = event.pageX;
-        var tailPos = $(this).width() + $(this).offset()['left'];
-        var atResizer = Math.abs(pageX - tailPos) <= 2;
-        var isResizing = !resizer.hasClass('hidden');
-        $('body')[(atResizer || isResizing)
-            ? 'addClass'
-            : 'removeClass'
-        ]('resizing');
-    });
-
-    $('th', gridHeader).on('mouseout', function(event) {
-        resizer.hasClass('hidden') &&
-            $('body').removeClass('resizing');
-    });
-
-    var gridBody = $('.grid-body', gridNode);
-    var contentHeight = gridContentNode.height();
-    var resizerLeftmost = $('.grid-resizer-leftmost', gridNode);
-    var resizer = $('.grid-resizer', gridNode);
-    resizerLeftmost.css('height', contentHeight + 'px');
-    resizer.css('height', contentHeight + 'px');
-
-    var stylingRow = function(row, className, add) {
-        var index = $(row).index() + 1;
-        $('tr', frozenBodyContainer)
-            .removeClass(className);
-        $('tr', bodyContainer)
-            .removeClass(className);
-
-        if(add === false) {
-            return;
-        }
-
-        $('tr:nth-child(' + index + ')', frozenBodyContainer)
-            .addClass(className);
-        $('tr:nth-child(' + index + ')', bodyContainer)
-            .addClass(className);
-    };
-
-    var selectedIndex = -1;
-    var setBodyListeners = function() {
-        if(rowSelection != 'disabled') {
-            $('tr', gridBody).on('mouseover', function(event) {
-                stylingRow(this, 'hover');
-            });
-
-            $('tr', gridBody).on('mouseout', function(event) {
-                stylingRow(this, 'hover', false);
-            });
-
-            $('tr', gridBody).on('click', function(event) {
-                selectedIndex = $(this).index();
-                stylingRow(this, 'selected');
-                rowListener && rowListener();
-            });
-        }
-
-        $('.grid-body-view', gridNode).on('scroll', function(event) {
-            $('.grid-header .grid-header-view', gridNode)
-                .prop('scrollLeft', this.scrollLeft);
-            $('.grid-body .grid-frozen-body-view', gridNode)
-                .prop('scrollTop', this.scrollTop);
-        });
-    };
-
-    this.frozenFields = params['frozenFields'];
-    this.fields = params['fields'];
-    this.setData = function(data) {
-        this.data = data;
-        fillBody(frozenBodyContainer, this.frozenFields, data);
-        fillBody(bodyContainer, this.fields, data);
-        setBodyListeners();
-    };
-
-    this.getSelected = function() {
-        return selectedIndex >= 0
-            ? this.data[selectedIndex]
-            : null;
-    };
-
-    var columnBeingResized = null;
-    var CONTAINER_NORMAL = 0, CONTAINER_FROZEN = 1;
-    var containerBeingResized = CONTAINER_NORMAL;
-    var startResizing = function(container, event) {
-        if(!($('body').hasClass('resizing') && resizer.hasClass('hidden'))) {
-            return;
-        }
-
-        columnBeingResized = container;
-        var pageX = event.pageX;
-        var gridOffsetX = gridNode.offset()['left'];
-        var leftmostOffsetX = $(container).offset()['left'] - gridOffsetX;
-        var left = pageX - gridOffsetX;
-        resizerLeftmost.css('left', leftmostOffsetX + 'px');
-        resizer.css('left', left + 'px');
-        resizerLeftmost.removeClass('hidden');
-        resizer.removeClass('hidden');
-        event.preventDefault();
-    };
-
-    var endResizing = function(event) {
-        if(!$('body').hasClass('resizing')) {
-            return;
-        }
-        resizerLeftmost.addClass('hidden');
-        resizer.addClass('hidden');
-        $('body').removeClass('resizing');
-        var leftmostOffset = $(columnBeingResized).offset()['left'];
-        var left = event.pageX;
-        if(leftmostOffset > left) {
-            return;
-        }
-
-        resizeColumnWidth(
-            $(columnBeingResized).index(),
-            left - leftmostOffset
-        );
-        fixTableLayout();
-        columnBeingResized = null;
-    };
-
-    var resizeColumnWidth = function(index, width) {
-        var width = Math.ceil(width);
-        var widthArray = [];
-        var totalWidth = 0;
-        var header = headerContainer;
-        var body = bodyContainer;
-        if(containerBeingResized === CONTAINER_FROZEN) {
-            header = frozenHeaderContainer;
-            body = frozenBodyContainer;
-        }
-        $('col', header).each(function(i, colNode) {
-            var w = index === i ? width : $(colNode).width();
-            widthArray.push(w);
-            totalWidth += w;
-        });
-        $.each([header, body], function(i, container) {
-            container.css({
-                'table-layout': 'fixed',
-                width: totalWidth + 'px'
-            });
-            $('col:nth-child(' + (index + 1) + ')', container).css({
-                width: width + 'px'
-            });
-        });
-
-        if(containerBeingResized === CONTAINER_FROZEN) {
-            $.each([headerView, bodyView], function(i, view) {
-                view.css({
-                    left: totalWidth + 'px'
-                });
-            });
-        }
-    };
-
-    $('th', frozenHeaderContainer).on('mousedown', function(event) {
-        containerBeingResized = CONTAINER_FROZEN;
+    fixTableLayout.call(this);
+
+    var gridBody = $('.grid-body', domNode);
+    this.gridBody = gridBody;
+    this.resizerLeftmost = $('.grid-resizer-leftmost', domNode);
+    this.resizer = $('.grid-resizer', domNode);
+    var gridHeader = $('.grid-header', domNode);
+    $('th', gridHeader).on('mouseover mousemove', {
+      resizer: this.resizer
+    }, initResizing);
+
+    $('th', gridHeader).on('mouseout', {
+      resizer: this.resizer
+    }, clearResizing);
+
+    this.containerBeingResized = CONTAINER_NORMAL;
+    $('th', frozenHeaderContainer).on('mousedown', {
+      grid: this
+    }, function(event) {
+        event.data.grid.containerBeingResized = CONTAINER_FROZEN;
         startResizing(this, event);
     });
-    $('th', headerContainer).on('mousedown', function(event) {
-        containerBeingResized = CONTAINER_NORMAL;
+    $('th', headerContainer).on('mousedown', {
+      grid: this
+    }, function(event) {
+        event.data.grid.containerBeingResized = CONTAINER_NORMAL;
         startResizing(this, event);
     });
 
-    var positionResizer = function(event) {
-        if(resizer.hasClass('hidden')) {
-            return;
-        }
-
-        var pageX = event.pageX;
-        var gridOffsetX = gridNode.offset()['left'];
-        var leftMost = resizerLeftmost.position()['left'];
-        var offsetX = pageX - gridOffsetX;
-        offsetX = offsetX >= leftMost ? offsetX : leftMost;
-        resizer.css('left', offsetX + 'px');
-    };
-
-    $('body').on('mousemove', positionResizer);
-    $('body').on('mouseup', endResizing);
-
-    this.showMessage = function(msg) {
-        $('.detailed-text', messageNode).text(msg);
-        $(messageNode).removeClass('hidden');
-    };
-
-    this.hideMessage = function() {
-        $(messageNode).addClass('hidden');
-    };
-
-    this.destroy = function() {
-        $('body').off('mousemove', positionResizer);
-        $('body').off('mouseup', endResizing);
-    };
-
-    var data = params['data'];
-    var self = this;
-    var reload = function() {
-        if(!data) {
-            return;
-        }
-
-        $(messageNode).addClass('hidden');
-
-        if($.isArray(data)) {
-            self.setData(data);
-            return;
-        }
-
-        if($.isFunction(data)) {
-            var loadData = data;
-            maskNode.removeClass('hidden');
-            loadData(function(data) {
-                self.setData(data);
-                maskNode.addClass('hidden');
-            });
-        }
-    };
-
-    var reloadButton = $('.retry-button', gridNode);
-    $(reloadButton).on('click', function(event) {
-        reload();
-    });
+    $('body').on('mousemove.grid#' + this['opts']['id'], {
+      grid: this
+    }, positionResizer);
+    $('body').on('mouseup.grid#' + this['opts']['id'], endResizing);
 
-    this.reload = reload;
-    reload();
-};
+    var data = this['opts']['data'];
+
+    $('.retry-button', domNode).on('click', {
+      grid: this
+    }, function(event) {
+      grid.reload();
+    });
+  };
+
+  return {
+    opts: {
+      container: null,
+      id: null,
+      rowSelection: 'single',
+      onRowSelected: null,
+      title: null,
+      toolbarButtons: null,
+      frozenFields: null,
+      fields: null
+    },
+    createDOM: createDOM,
+    setData: setData,
+    getSelected: getSelected,
+    reload: reload,
+    destroy: destroy
+  };
+})();
-- 
1.8.1.4

    