diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index 81ef9d186..000000000
Binary files a/.DS_Store and /dev/null differ
diff --git a/.gitignore b/.gitignore
index 8b3887f2b..d2f89b666 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .gitk*
-.idea/*
\ No newline at end of file
+.idea/*
+.DS_Store
diff --git a/README.md b/README.md
new file mode 100644
index 000000000..7eb6fdac4
--- /dev/null
+++ b/README.md
@@ -0,0 +1,27 @@
+# Welcome to SlickGrid
+
+Find documentation and examples in [the wiki](https://github.com/mleibman/SlickGrid/wiki).
+
+
+**UPDATE:  March 5th, 2014 - I have too many things going on in my life right now to really give SlickGrid support and development the time and attention it deserves.  I am not stopping it, but I will most likely be unresponsive for some time.  Sorry.**
+
+**UPDATE:  This repo hasn't been updated in a while. https://github.com/6pac/SlickGrid/wiki seems to be the most active fork at the moment.**
+
+## SlickGrid is an advanced JavaScript grid/spreadsheet component
+
+Some highlights:
+
+* Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
+* Extremely fast rendering speed
+* Supports jQuery UI Themes
+* Background post-rendering for richer cells
+* Configurable & customizable
+* Full keyboard navigation
+* Column resize/reorder/show/hide
+* Column autosizing & force-fit
+* Pluggable cell formatters & editors
+* Support for editing and creating new rows.
+* Grouping, filtering, custom aggregators, and more!
+* Advanced detached & multi-field editors with undo/redo support.
+* “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.
+* Support for [millions of rows](http://stackoverflow.com/a/2569488/1269037)
diff --git a/controls/slick.columnpicker.css b/controls/slick.columnpicker.css
index a2845cc86..bcbb37584 100644
--- a/controls/slick.columnpicker.css
+++ b/controls/slick.columnpicker.css
@@ -4,6 +4,7 @@
   padding: 6px;
   -moz-box-shadow: 2px 2px 2px silver;
   -webkit-box-shadow: 2px 2px 2px silver;
+  box-shadow: 2px 2px 2px silver;
   min-width: 100px;
   cursor: default;
 }
@@ -27,4 +28,4 @@
 
 .slick-columnpicker li a:hover {
   background: white;
-}
\ No newline at end of file
+}
diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js
index ecd0d4dcc..dc1672099 100644
--- a/controls/slick.columnpicker.js
+++ b/controls/slick.columnpicker.js
@@ -9,6 +9,7 @@
 
     function init() {
       grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
+      grid.onColumnsReordered.subscribe(updateColumnOrder);
       options = $.extend({}, defaults, options);
 
       $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
@@ -20,9 +21,16 @@
 
     }
 
+    function destroy() {
+      grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu);
+      grid.onColumnsReordered.unsubscribe(updateColumnOrder);
+      $menu.remove();
+    }
+
     function handleHeaderContextMenu(e, args) {
       e.preventDefault();
       $menu.empty();
+      updateColumnOrder();
       columnCheckboxes = [];
 
       var $li, $input;
@@ -68,6 +76,28 @@
           .fadeIn(options.fadeSpeed);
     }
 
+    function updateColumnOrder() {
+      // Because columns can be reordered, we have to update the `columns`
+      // to reflect the new order, however we can't just take `grid.getColumns()`,
+      // as it does not include columns currently hidden by the picker.
+      // We create a new `columns` structure by leaving currently-hidden
+      // columns in their original ordinal position and interleaving the results
+      // of the current column sort.
+      var current = grid.getColumns().slice(0);
+      var ordered = new Array(columns.length);
+      for (var i = 0; i < ordered.length; i++) {
+        if ( grid.getColumnIndex(columns[i].id) === undefined ) {
+          // If the column doesn't return a value from getColumnIndex,
+          // it is hidden. Leave it in this position.
+          ordered[i] = columns[i];
+        } else {
+          // Otherwise, grab the next visible column.
+          ordered[i] = current.shift();
+        }
+      }
+      columns = ordered;
+    }
+
     function updateColumn(e) {
       if ($(e.target).data("option") == "autoresize") {
         if (e.target.checked) {
@@ -105,7 +135,16 @@
       }
     }
 
+    function getAllColumns() {
+      return columns;
+    }
+
     init();
+
+    return {
+      "getAllColumns": getAllColumns,
+      "destroy": destroy
+    };
   }
 
   // Slick.Controls.ColumnPicker
diff --git a/controls/slick.pager.js b/controls/slick.pager.js
index b9c6b7413..b3242d979 100644
--- a/controls/slick.pager.js
+++ b/controls/slick.pager.js
@@ -133,6 +133,13 @@
       }
 
       if (pagingInfo.pageSize == 0) {
+        var totalRowsCount = dataView.getItems().length;
+        var visibleRowsCount = pagingInfo.totalRows;
+        if (visibleRowsCount < totalRowsCount) {
+          $status.text("Showing " + visibleRowsCount + " of " + totalRowsCount + " rows");
+        } else {
+          $status.text("Showing all " + totalRowsCount + " rows");
+        }
         $status.text("Showing all " + pagingInfo.totalRows + " rows");
       } else {
         $status.text("Showing page " + (pagingInfo.pageNum + 1) + " of " + pagingInfo.totalPages);
diff --git a/examples/example-autotooltips.html b/examples/example-autotooltips.html
new file mode 100644
index 000000000..cdad5488b
--- /dev/null
+++ b/examples/example-autotooltips.html
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid plugin example: AutoTooltips</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid" style="width:600px;height:300px;"></div>
+    </td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>AutoTooltips plugin</li>
+      </ul>
+      <h2>Instructions:</h2>
+      <p>Resize the columns until see ellipsis in column or header.  Hover over cell to see tooltip.</p>
+      <h2>Usage:</h2>
+      <pre style="background-color: white; font-size: 110%; border-radius: 5px; padding: 20px; ">plugin = new Slick.AutoTooltips(pluginOptions);
+grid.registerPlugin(plugin);
+grid.render();</pre>
+
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-autotooltips.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.7.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+<script src="../plugins/slick.autotooltips.js"></script>
+
+<script>
+  var grid;
+  var columns = [
+    {id: "title", name: "Title", field: "title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete"},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: false
+  };
+
+  $(function () {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+    grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
+    grid.render();
+  })
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/example-checkbox-row-select.html b/examples/example-checkbox-row-select.html
index 6eebb16c7..4ad6e9be0 100644
--- a/examples/example-checkbox-row-select.html
+++ b/examples/example-checkbox-row-select.html
@@ -5,6 +5,7 @@
   <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
   <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
   <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
   <style>
     .slick-cell-checkboxsel {
       background: #f0f0f0;
@@ -24,6 +25,11 @@ <h2>Demonstrates:</h2>
     <ul>
       <li>Checkbox row select column</li>
     </ul>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-checkbox-row-select.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+
   </div>
 </div>
 
@@ -31,7 +37,7 @@ <h2>Demonstrates:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.checkboxselectcolumn.js"></script>
@@ -41,6 +47,7 @@ <h2>Demonstrates:</h2>
 <script src="../plugins/slick.cellcopymanager.js"></script>
 <script src="../plugins/slick.cellselectionmodel.js"></script>
 <script src="../plugins/slick.rowselectionmodel.js"></script>
+<script src="../controls/slick.columnpicker.js"></script>
 <script src="../slick.formatters.js"></script>
 <script src="../slick.editors.js"></script>
 <script src="../slick.grid.js"></script>
@@ -81,6 +88,8 @@ <h2>Demonstrates:</h2>
     grid = new Slick.Grid("#myGrid", data, columns, options);
     grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
     grid.registerPlugin(checkboxSelector);
+
+    var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
   })
 </script>
 </body>
diff --git a/examples/example-colspan.html b/examples/example-colspan.html
index c3eb9698c..b59081506 100644
--- a/examples/example-colspan.html
+++ b/examples/example-colspan.html
@@ -16,12 +16,16 @@ <h2>Demonstrates:</h2>
       <ul>
         <li>column span</li>
       </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-colspan.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.cellrangedecorator.js"></script>
@@ -47,7 +51,7 @@ <h2>Demonstrates:</h2>
 
   $(function () {
     var data = [];
-    for (var i = 0; i < 10; i++) {
+    for (var i = 0; i < 500; i++) {
       data[i] = {
         title: "Task " + i,
         duration: "5 days",
diff --git a/examples/example-composite-editor-item-details.html b/examples/example-composite-editor-item-details.html
index 60a140c80..22023dad4 100644
--- a/examples/example-composite-editor-item-details.html
+++ b/examples/example-composite-editor-item-details.html
@@ -70,6 +70,11 @@ <h2>Demonstrates:</h2>
 
     <h2>Options:</h2>
     <button onclick="openDetails()">Open Item Edit for active row</button>
+
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-composite-editor-item-details.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
@@ -95,7 +100,7 @@ <h2>Options:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
 
 <script src="../slick.core.js"></script>
diff --git a/examples/example-custom-column-value-extractor.html b/examples/example-custom-column-value-extractor.html
index f7769fba3..fbab6fa95 100644
--- a/examples/example-custom-column-value-extractor.html
+++ b/examples/example-custom-column-value-extractor.html
@@ -18,12 +18,16 @@ <h2>Demonstrates:</h2>
       <ul>
         <li>using <u>dataItemColumnValueExtractor</u> option to specify a custom column value extractor</li>
       </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-custom-column-value-extractor.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.grid.js"></script>
diff --git a/examples/example-explicit-initialization.html b/examples/example-explicit-initialization.html
index 25cca59ae..8c881b1d5 100644
--- a/examples/example-explicit-initialization.html
+++ b/examples/example-explicit-initialization.html
@@ -25,12 +25,16 @@ <h2>Demonstrates:</h2>
           This example demonstrates creating a SlickGrid inside a detached element and calling <b>init()</b> explicitly
           when the element is added to the DOM.
       </p>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-explicit-initialization.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.grid.js"></script>
diff --git a/examples/example-grouping.html b/examples/example-grouping.html
index e1fb3befc..356ade7d6 100644
--- a/examples/example-grouping.html
+++ b/examples/example-grouping.html
@@ -9,12 +9,20 @@
   <link rel="stylesheet" href="examples.css" type="text/css"/>
   <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
   <style>
-    .cell-title {
+    .cell-effort-driven {
+      text-align: center;
+    }
+
+    .slick-group-title[level='0'] {
       font-weight: bold;
     }
 
-    .cell-effort-driven {
-      text-align: center;
+    .slick-group-title[level='1'] {
+      text-decoration: underline;
+    }
+
+    .slick-group-title[level='2'] {
+      font-style: italic;
     }
   </style>
 </head>
@@ -28,7 +36,7 @@
     <div id="pager" style="width:100%;height:20px;"></div>
   </div>
 
-  <div class="options-panel">
+  <div class="options-panel" style="width:450px;">
     <b>Options:</b>
     <hr/>
     <div style="padding:6px;">
@@ -38,31 +46,44 @@
         <div style="width:100px;display:inline-block;" id="pcSlider"></div>
       </div>
       <br/><br/>
+      <button onclick="loadData(50)">50 rows</button>
+      <button onclick="loadData(50000)">50k rows</button>
+      <button onclick="loadData(500000)">500k rows</button>
       <hr/>
-      <button onclick="clearGrouping()">Clear grouping</button>
+      <button onclick="dataView.setGrouping([])">Clear grouping</button>
       <br/>
       <button onclick="groupByDuration()">Group by duration & sort groups by value</button>
       <br/>
-      <button onclick="groupByDurationOrderByCount()">Group by duration & sort groups by count</button>
+      <button onclick="groupByDurationOrderByCount(false)">Group by duration & sort groups by count</button>
       <br/>
-      <button onclick="groupByDurationOrderByCountGroupCollapsed()">Group by duration & sort groups by count, group
+      <button onclick="groupByDurationOrderByCount(true)">Group by duration & sort groups by count, aggregate
         collapsed
       </button>
       <br/>
       <br/>
-      <button onclick="collapseAllGroups()">Collapse all groups</button>
+      <button onclick="groupByDurationEffortDriven()">Group by duration then effort-driven</button>
       <br/>
-      <button onclick="expandAllGroups()">Expand all groups</button>
+      <button onclick="groupByDurationEffortDrivenPercent()">Group by duration then effort-driven then percent.</button>
+      <br/>
+      <br/>
+      <button onclick="dataView.collapseAllGroups()">Collapse all groups</button>
+      <br/>
+      <button onclick="dataView.expandAllGroups()">Expand all groups</button>
       <br/>
     </div>
     <hr/>
     <h2>Demonstrates:</h2>
     <ul>
       <li>
-        Fully dynamic and interactive grouping with filtering and aggregates over <b>50'000</b> items<br>
+        Fully dynamic and interactive multi-level grouping with filtering and aggregates over <b>50'000</b> items<br>
+        Each grouping level can have its own aggregates (over child rows, child groups, or all descendant rows).<br>
         Personally, this is just the coolest slickest thing I've ever seen done with DHTML grids!
       </li>
     </ul>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-grouping.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
@@ -71,7 +92,7 @@ <h2>Demonstrates:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.formatters.js"></script>
@@ -91,11 +112,12 @@ <h2>Demonstrates:</h2>
 var data = [];
 var columns = [
   {id: "sel", name: "#", field: "num", cssClass: "cell-selection", width: 40, resizable: false, selectable: false, focusable: false },
-  {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", sortable: true, editor: Slick.Editors.Text},
-  {id: "duration", name: "Duration", field: "duration", sortable: true},
+  {id: "title", name: "Title", field: "title", width: 70, minWidth: 50, cssClass: "cell-title", sortable: true, editor: Slick.Editors.Text},
+  {id: "duration", name: "Duration", field: "duration", width: 70, sortable: true, groupTotalsFormatter: sumTotalsFormatter},
   {id: "%", name: "% Complete", field: "percentComplete", width: 80, formatter: Slick.Formatters.PercentCompleteBar, sortable: true, groupTotalsFormatter: avgTotalsFormatter},
   {id: "start", name: "Start", field: "start", minWidth: 60, sortable: true},
   {id: "finish", name: "Finish", field: "finish", minWidth: 60, sortable: true},
+  {id: "cost", name: "Cost", field: "cost", width: 90, sortable: true, groupTotalsFormatter: sumTotalsFormatter},
   {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, sortable: true}
 ];
 
@@ -110,7 +132,19 @@ <h2>Demonstrates:</h2>
 var prevPercentCompleteThreshold = 0;
 
 function avgTotalsFormatter(totals, columnDef) {
-  return "avg: " + Math.round(totals.avg[columnDef.field]) + "%";
+  var val = totals.avg && totals.avg[columnDef.field];
+  if (val != null) {
+    return "avg: " + Math.round(val) + "%";
+  }
+  return "";
+}
+
+function sumTotalsFormatter(totals, columnDef) {
+  var val = totals.sum && totals.sum[columnDef.field];
+  if (val != null) {
+    return "total: " + ((Math.round(parseFloat(val)*100)/100));
+  }
+  return "";
 }
 
 function myFilter(item, args) {
@@ -126,71 +160,129 @@ <h2>Demonstrates:</h2>
   return (x == y ? 0 : (x > y ? 1 : -1));
 }
 
-function collapseAllGroups() {
-  dataView.beginUpdate();
-  for (var i = 0; i < dataView.getGroups().length; i++) {
-    dataView.collapseGroup(dataView.getGroups()[i].value);
-  }
-  dataView.endUpdate();
-}
-
-function expandAllGroups() {
-  dataView.beginUpdate();
-  for (var i = 0; i < dataView.getGroups().length; i++) {
-    dataView.expandGroup(dataView.getGroups()[i].value);
-  }
-  dataView.endUpdate();
+function groupByDuration() {
+  dataView.setGrouping({
+    getter: "duration",
+    formatter: function (g) {
+      return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
+    },
+    aggregators: [
+      new Slick.Data.Aggregators.Avg("percentComplete"),
+      new Slick.Data.Aggregators.Sum("cost")
+    ],
+    aggregateCollapsed: false,
+    lazyTotalsCalculation: true
+  });
 }
 
-function clearGrouping() {
-  dataView.groupBy(null);
+function groupByDurationOrderByCount(aggregateCollapsed) {
+  dataView.setGrouping({
+    getter: "duration",
+    formatter: function (g) {
+      return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
+    },
+    comparer: function (a, b) {
+      return a.count - b.count;
+    },
+    aggregators: [
+      new Slick.Data.Aggregators.Avg("percentComplete"),
+      new Slick.Data.Aggregators.Sum("cost")
+    ],
+    aggregateCollapsed: aggregateCollapsed,
+    lazyTotalsCalculation: true
+  });
 }
 
-function groupByDuration() {
-  dataView.groupBy(
-      "duration",
-      function (g) {
+function groupByDurationEffortDriven() {
+  dataView.setGrouping([
+    {
+      getter: "duration",
+      formatter :function (g) {
         return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
       },
-      function (a, b) {
-        return a.value - b.value;
-      }
-  );
-  dataView.setAggregators([
-    new Slick.Data.Aggregators.Avg("percentComplete")
-  ], false);
+      aggregators: [
+        new Slick.Data.Aggregators.Sum("duration"),
+        new Slick.Data.Aggregators.Sum("cost")
+      ],
+      aggregateCollapsed: true,
+      lazyTotalsCalculation: true
+    },
+    {
+      getter: "effortDriven",
+      formatter :function (g) {
+        return "Effort-Driven:  " + (g.value ? "True" : "False") + "  <span style='color:green'>(" + g.count + " items)</span>";
+      },
+      aggregators: [
+        new Slick.Data.Aggregators.Avg("percentComplete"),
+        new Slick.Data.Aggregators.Sum("cost")
+      ],
+      collapsed: true,
+      lazyTotalsCalculation: true
+    }
+  ]);
 }
 
-function groupByDurationOrderByCount() {
-  dataView.groupBy(
-      "duration",
-      function (g) {
+function groupByDurationEffortDrivenPercent() {
+  dataView.setGrouping([
+    {
+      getter: "duration",
+      formatter: function (g) {
         return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
       },
-      function (a, b) {
-        return a.count - b.count;
-      }
-  );
-  dataView.setAggregators([
-    new Slick.Data.Aggregators.Avg("percentComplete")
-  ], false);
+      aggregators: [
+        new Slick.Data.Aggregators.Sum("duration"),
+        new Slick.Data.Aggregators.Sum("cost")
+      ],
+      aggregateCollapsed: true,
+      lazyTotalsCalculation: true
+    },
+    {
+      getter: "effortDriven",
+      formatter: function (g) {
+        return "Effort-Driven:  " + (g.value ? "True" : "False") + "  <span style='color:green'>(" + g.count + " items)</span>";
+      },
+      aggregators :[
+        new Slick.Data.Aggregators.Sum("duration"),
+        new Slick.Data.Aggregators.Sum("cost")
+      ],
+      lazyTotalsCalculation: true
+    },
+    {
+      getter: "percentComplete",
+      formatter: function (g) {
+        return "% Complete:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
+      },
+      aggregators: [
+        new Slick.Data.Aggregators.Avg("percentComplete")
+      ],
+      aggregateCollapsed: true,
+      collapsed: true,
+      lazyTotalsCalculation: true
+    }
+  ]);
 }
 
-function groupByDurationOrderByCountGroupCollapsed() {
-  dataView.groupBy(
-      "duration",
-      function (g) {
-        return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
-      },
-      function (a, b) {
-        return a.count - b.count;
-      }
-  );
-  dataView.setAggregators([
-    new Slick.Data.Aggregators.Avg("percentComplete")
-  ], true);
+function loadData(count) {
+  var someDates = ["01/01/2009", "02/02/2009", "03/03/2009"];
+  data = [];
+  // prepare the data
+  for (var i = 0; i < count; i++) {
+    var d = (data[i] = {});
+
+    d["id"] = "id_" + i;
+    d["num"] = i;
+    d["title"] = "Task " + i;
+    d["duration"] = Math.round(Math.random() * 30);
+    d["percentComplete"] = Math.round(Math.random() * 100);
+    d["start"] = someDates[ Math.floor((Math.random()*2)) ];
+    d["finish"] = someDates[ Math.floor((Math.random()*2)) ];
+    d["cost"] = Math.round(Math.random() * 10000) / 100;
+    d["effortDriven"] = (i % 5 == 0);
+  }
+  dataView.setItems(data);
 }
 
+
 $(".grid-header .ui-icon")
     .addClass("ui-state-default ui-corner-all")
     .mouseover(function (e) {
@@ -201,20 +293,6 @@ <h2>Demonstrates:</h2>
     });
 
 $(function () {
-  // prepare the data
-  for (var i = 0; i < 50000; i++) {
-    var d = (data[i] = {});
-
-    d["id"] = "id_" + i;
-    d["num"] = i;
-    d["title"] = "Task " + i;
-    d["duration"] = Math.round(Math.random() * 14);
-    d["percentComplete"] = Math.round(Math.random() * 100);
-    d["start"] = "01/01/2009";
-    d["finish"] = "01/05/2009";
-    d["effortDriven"] = (i % 5 == 0);
-  }
-
   var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
   dataView = new Slick.Data.DataView({
     groupItemMetadataProvider: groupItemMetadataProvider,
@@ -309,24 +387,12 @@ <h2>Demonstrates:</h2>
 
   // initialize the model after all the events have been hooked up
   dataView.beginUpdate();
-  dataView.setItems(data);
   dataView.setFilter(myFilter);
   dataView.setFilterArgs({
     percentComplete: percentCompleteThreshold
   });
-  dataView.groupBy(
-      "duration",
-      function (g) {
-        return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
-      },
-      function (a, b) {
-        return a.value - b.value;
-      }
-  );
-  dataView.setAggregators([
-    new Slick.Data.Aggregators.Avg("percentComplete")
-  ], false);
-  dataView.collapseGroup(0);
+  loadData(50);
+  groupByDuration();
   dataView.endUpdate();
 
   $("#gridContainer").resizable();
diff --git a/examples/example-header-row.html b/examples/example-header-row.html
index 6f309bc9b..1d0110c98 100644
--- a/examples/example-header-row.html
+++ b/examples/example-header-row.html
@@ -35,6 +35,10 @@ <h2>Demonstrates:</h2>
       <li>Using a fixed header row to implement column-level filters</li>
       <li>Type numbers in textboxes to filter grid data</li>
     </ul>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-header-row.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
@@ -42,7 +46,7 @@ <h2>Demonstrates:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.dataview.js"></script>
diff --git a/examples/example-multi-column-sort.html b/examples/example-multi-column-sort.html
index 2e4f7a941..6edc0033b 100644
--- a/examples/example-multi-column-sort.html
+++ b/examples/example-multi-column-sort.html
@@ -18,12 +18,16 @@ <h2>Demonstrates:</h2>
       <ul>
         <li>basic grid with multi-column sort option</li>
       </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-multi-column-sort.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.grid.js"></script>
diff --git a/examples/example-optimizing-dataview.html b/examples/example-optimizing-dataview.html
index 5622dc044..31b3cf7f3 100644
--- a/examples/example-optimizing-dataview.html
+++ b/examples/example-optimizing-dataview.html
@@ -61,13 +61,17 @@
       <li>Providing a range of rows for which onRowsChanged even should be fired.</li>
     </ul>
     </p>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-optimizing-dataview.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.formatters.js"></script>
diff --git a/examples/example-plugin-headerbuttons.html b/examples/example-plugin-headerbuttons.html
index 356439a81..15f95989e 100644
--- a/examples/example-plugin-headerbuttons.html
+++ b/examples/example-plugin-headerbuttons.html
@@ -31,6 +31,10 @@
       This example demonstrates using the <b>Slick.Plugins.HeaderButtons</b> plugin to easily add buttons to column
       headers.  These buttons can be specified directly in the column definition, and are very easy to configure and use.
     </p>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-plugin-headerbuttons.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
@@ -38,7 +42,7 @@
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.grid.js"></script>
@@ -48,7 +52,7 @@
   var grid;
   var data = [];
   var options = {
-    enableCellNavigation:true
+    enableCellNavigation: true
   };
   var columns = [];
   var columnsWithHighlightingById = {};
@@ -61,6 +65,7 @@
       name: String.fromCharCode("A".charCodeAt(0) + i),
       field: i,
       width: 90,
+      sortable: true,
       formatter: highlightingFormatter,
       header: {
         buttons: [
diff --git a/examples/example-plugin-headermenu.html b/examples/example-plugin-headermenu.html
index 895919a90..341c997e2 100644
--- a/examples/example-plugin-headermenu.html
+++ b/examples/example-plugin-headermenu.html
@@ -54,11 +54,15 @@
       This example demonstrates using the <b>Slick.Plugins.HeaderMenu</b> plugin to add drop-down menus to column
       headers.  (Hover over the headers.)
     </p>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-plugin-headermenu.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.grid.js"></script>
diff --git a/examples/example-spreadsheet.html b/examples/example-spreadsheet.html
index 9fe72141e..0eadeaa3d 100644
--- a/examples/example-spreadsheet.html
+++ b/examples/example-spreadsheet.html
@@ -29,6 +29,10 @@ <h2>Demonstrates:</h2>
       <li>Use Esc to cancel a copy and paste operation</li>
       <li>Edit the cell and select a cell range to paste the range</li>
     </ul>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-spreadsheet.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
@@ -36,7 +40,7 @@ <h2>Demonstrates:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.autotooltips.js"></script>
diff --git a/examples/example-totals-via-data-provider.html b/examples/example-totals-via-data-provider.html
new file mode 100644
index 000000000..626092f51
--- /dev/null
+++ b/examples/example-totals-via-data-provider.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+  .totals {
+    font-weight: bold;
+    color: gray;
+    font-style: italic;
+  }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <h2>Demonstrates:</h2>
+    <ul>
+      <li>Implementing a data provider to create a totals row at the end of the grid.</li>
+      <li>This is a simplification of what the DataView does. </li>
+    </ul>
+  </div>
+    <h2>View Source:</h2>
+    <ul>
+        <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-totals-via-data-provider.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+    </ul>
+</div>
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.7.min.js"></script>
+<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.editors.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var data = [];
+  var options = {
+    enableCellNavigation: true,
+    headerRowHeight: 30,
+    editable: true
+  };
+
+  var columns = [];
+  for (var i = 0; i < 10; i++) {
+    columns.push({
+      id: i,
+      name: String.fromCharCode("A".charCodeAt(0) + i),
+      field: i,
+      width: 60,
+      editor: Slick.Editors.Integer
+    });
+  }
+
+
+
+  function TotalsDataProvider(data, columns) {
+    var totals = {};
+    var totalsMetadata = {
+      // Style the totals row differently.
+      cssClasses: "totals",
+      columns: {}
+    };
+
+    // Make the totals not editable.
+    for (var i = 0; i < columns.length; i++) {
+      totalsMetadata.columns[i] = { editor: null };
+    }
+
+
+    this.getLength = function() {
+      return data.length + 1;
+    };
+
+    this.getItem = function(index) {
+      return (index < data.length) ? data[index] : totals;
+    };
+
+    this.updateTotals = function() {
+      var columnIdx = columns.length;
+      while (columnIdx--) {
+        var columnId = columns[columnIdx].id;
+        var total = 0;
+        var i = data.length;
+        while (i--) {
+          total += (parseInt(data[i][columnId], 10) || 0);
+        }
+        totals[columnId] = "Sum:  " + total;
+      }
+    };
+
+    this.getItemMetadata = function(index) {
+      return (index != data.length) ? null : totalsMetadata;
+    };
+
+    this.updateTotals();
+  }
+
+
+
+  $(function () {
+    for (var i = 0; i < 10; i++) {
+      var d = (data[i] = {});
+      d["id"] = i;
+      for (var j = 0; j < columns.length; j++) {
+        d[j] = Math.round(Math.random() * 10);
+      }
+    }
+
+    var dataProvider = new TotalsDataProvider(data, columns);
+
+    grid = new Slick.Grid("#myGrid", dataProvider, columns, options);
+
+    grid.onCellChange.subscribe(function(e, args) {
+      // The data has changed - recalculate the totals.
+      dataProvider.updateTotals();
+
+      // Rerender the totals row (last row).
+      grid.invalidateRow(dataProvider.getLength() - 1);
+      grid.render();
+    });
+  })
+</script>
+</body>
+</html>
diff --git a/examples/example1-simple.html b/examples/example1-simple.html
index 6f151d414..5c50a9e5f 100644
--- a/examples/example1-simple.html
+++ b/examples/example1-simple.html
@@ -18,12 +18,16 @@ <h2>Demonstrates:</h2>
       <ul>
         <li>basic grid with minimal configuration</li>
       </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.grid.js"></script>
diff --git a/examples/example10-async-post-render.html b/examples/example10-async-post-render.html
index e72226f48..9f911b522 100644
--- a/examples/example10-async-post-render.html
+++ b/examples/example10-async-post-render.html
@@ -52,13 +52,17 @@ <h2>Demonstrates:</h2>
     The graphs themselves are created using the excellent <a href="http://www.omnipotent.net/jquery.sparkline/"
                                                              target="_blank">jQuery Sparklines</a> library.
   </p>
+    <h2>View Source:</h2>
+    <ul>
+        <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example10-async-post-render.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+    </ul>
 </div>
 
 <script src="../lib/firebugx.js"></script>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 <script src="../lib/jquery.sparkline.min.js"></script>
 
 <script src="../slick.core.js"></script>
diff --git a/examples/example11-autoheight.html b/examples/example11-autoheight.html
index f818ca982..a777a0304 100644
--- a/examples/example11-autoheight.html
+++ b/examples/example11-autoheight.html
@@ -39,11 +39,15 @@ <h2>Demonstrates:</h2>
   <ul>
     <li>autoHeight:true grid option</li>
   </ul>
+    <h2>View Source:</h2>
+    <ul>
+        <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example11-autoheight.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+    </ul>
 </div>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.grid.js"></script>
diff --git a/examples/example12-fillbrowser.html b/examples/example12-fillbrowser.html
index c17496c34..0f9ff200e 100644
--- a/examples/example12-fillbrowser.html
+++ b/examples/example12-fillbrowser.html
@@ -50,10 +50,14 @@ <h2>Demonstrates:</h2>
     <li>Grid resizing when browser window changes size</li>
     <li>Overall performance of the grid when displaying large tabular data (17 columns x 10,000 rows)</li>
   </ul>
+    <h2>View Source:</h2>
+    <ul>
+        <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example12-fillbrowser.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+    </ul>
 </div>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.grid.js"></script>
diff --git a/examples/example13-getItem-sorting.html b/examples/example13-getItem-sorting.html
index 6825021fc..b971e93ff 100644
--- a/examples/example13-getItem-sorting.html
+++ b/examples/example13-getItem-sorting.html
@@ -49,10 +49,14 @@ <h2>Demonstrates:</h2>
     <li>Sorting grid items by an index</li>
     <li>Using the getItem method to provide data</li>
   </ul>
+    <h2>View Source:</h2>
+    <ul>
+        <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example13-getItem-sorting.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+    </ul>
 </div>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 <script src="../slick.core.js"></script>
 <script src="../slick.grid.js"></script>
 
diff --git a/examples/example14-highlighting.html b/examples/example14-highlighting.html
index 5b8228062..e85e947aa 100644
--- a/examples/example14-highlighting.html
+++ b/examples/example14-highlighting.html
@@ -47,6 +47,10 @@ <h2>Demonstrates</h2>
     <h2>Controls</h2>
     <button onclick="simulateRealTimeUpdates()">Start simulation</button>
     <button onclick="findCurrentServer()">Find current server</button>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example14-highlighting.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
@@ -54,7 +58,7 @@ <h2>Controls</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.cellselectionmodel.js"></script>
diff --git a/examples/example2-formatters.html b/examples/example2-formatters.html
index fd1b366de..d89be12c9 100644
--- a/examples/example2-formatters.html
+++ b/examples/example2-formatters.html
@@ -17,6 +17,9 @@
   </style>
 </head>
 <body>
+
+<input type=text>
+
 <table width="100%">
   <tr>
     <td valign="top" width="50%">
@@ -28,25 +31,36 @@ <h2>Demonstrates:</h2>
         <li>width, minWidth, maxWidth, resizable, cssClass column attributes</li>
         <li>custom column formatters</li>
       </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example2-formatters.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
 
+<input type=text>
+
 <script src="../lib/firebugx.js"></script>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.formatters.js"></script>
 <script src="../slick.grid.js"></script>
 
 <script>
+    function formatter(row, cell, value, columnDef, dataContext) {
+        return value;
+    }
+
+
   var grid;
   var data = [];
   var columns = [
-    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title"},
+    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},
     {id: "duration", name: "Duration", field: "duration"},
     {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
     {id: "start", name: "Start", field: "start", minWidth: 60},
@@ -61,10 +75,10 @@ <h2>Demonstrates:</h2>
   };
 
   $(function () {
-    for (var i = 0; i < 500; i++) {
+    for (var i = 0; i < 5; i++) {
       var d = (data[i] = {});
 
-      d["title"] = "Task " + i;
+      d["title"] = "<a href='#' tabindex='0'>Task</a> " + i;
       d["duration"] = "5 days";
       d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110));
       d["start"] = "01/01/2009";
diff --git a/examples/example3-editing.html b/examples/example3-editing.html
index 506bdab92..a990f0ade 100644
--- a/examples/example3-editing.html
+++ b/examples/example3-editing.html
@@ -34,6 +34,10 @@ <h2>Options:</h2>
     <button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button>
     &nbsp;
     <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example3-editing.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
@@ -41,7 +45,7 @@ <h2>Options:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.cellrangedecorator.js"></script>
diff --git a/examples/example3a-compound-editors.html b/examples/example3a-compound-editors.html
index 24e631ed0..a61706521 100644
--- a/examples/example3a-compound-editors.html
+++ b/examples/example3a-compound-editors.html
@@ -26,6 +26,12 @@ <h2>Demonstrates:</h2>
       <li>providing validation from the editor</li>
       <li>hooking into validation events</li>
     </ul>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example3a-compound-editors.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+
+
   </div>
 </div>
 
@@ -33,7 +39,7 @@ <h2>Demonstrates:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.editors.js"></script>
diff --git a/examples/example3b-editing-with-undo.html b/examples/example3b-editing-with-undo.html
index d48c87b0f..c8182e9b0 100644
--- a/examples/example3b-editing-with-undo.html
+++ b/examples/example3b-editing-with-undo.html
@@ -30,6 +30,10 @@ <h2>Demonstrates:</h2>
 
     <h2>Controls:</h2>
     <button onclick="undo()"><img src="../images/arrow_undo.png" align="absmiddle"> Undo</button>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example3b-editing-with-undo.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
   </div>
 </div>
 
@@ -37,7 +41,7 @@ <h2>Controls:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.formatters.js"></script>
diff --git a/examples/example4-model.html b/examples/example4-model.html
index bebd733e2..ea7277164 100644
--- a/examples/example4-model.html
+++ b/examples/example4-model.html
@@ -77,6 +77,11 @@ <h2>Demonstrates:</h2>
         <li>Paging.</li>
         <li>inline filter panel</li>
       </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example4-model.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+
     </div>
   </div>
 </div>
@@ -91,7 +96,7 @@ <h2>Demonstrates:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.formatters.js"></script>
diff --git a/examples/example5-collapsing.html b/examples/example5-collapsing.html
index 9202c3b54..9524f58b7 100644
--- a/examples/example5-collapsing.html
+++ b/examples/example5-collapsing.html
@@ -54,6 +54,11 @@ <h2>Demonstrates:</h2>
       <ul>
         <li>implementing expand/collapse as a filter for DataView</li>
       </ul>
+
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example5-collapsing.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
@@ -62,7 +67,7 @@ <h2>Demonstrates:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.formatters.js"></script>
@@ -152,20 +157,19 @@ <h2>Demonstrates:</h2>
   // prepare the data
   for (var i = 0; i < 1000; i++) {
     var d = (data[i] = {});
-    var parent = null;
+    var parent;
 
-    if (Math.random() > 0.8) {
+    if (Math.random() > 0.8 && i > 0) {
       indent++;
-      parent = i - 1;
-      parents.push(parent);
+      parents.push(i - 1);
     } else if (Math.random() < 0.3 && indent > 0) {
       indent--;
-      parent = parents.pop();
-    } else if (parents.length > 0) {
+      parents.pop();
+    } 
+	
+    if (parents.length > 0) {
       parent = parents[parents.length - 1];
-    }
-
-    if (indent == 0) {
+    } else {
       parent = null;
     }
 
diff --git a/examples/example6-ajax-loading.html b/examples/example6-ajax-loading.html
index a85fa2dd5..749919c49 100644
--- a/examples/example6-ajax-loading.html
+++ b/examples/example6-ajax-loading.html
@@ -37,10 +37,10 @@
 <body>
 <div style="width:700px;float:left;">
   <div class="grid-header" style="width:100%">
-    <label>Digg stories</label>
+    <label>Hackernews stories</label>
         <span style="float:right;display:inline-block;">
           Search:
-          <input type="text" id="txtSearch" value="apple">
+          <input type="text" id="txtSearch" value="github">
         </span>
   </div>
   <div id="myGrid" style="width:100%;height:600px;"></div>
@@ -55,18 +55,22 @@ <h2>Demonstrates:</h2>
 
   <h2>WARNING:</h2>
   <ul>
-    <li>Digg API uses request rate limiting. You may occasionally get an error if you do a frequent
-      scrolling/resorting/searching.
+    <li>API access to Hackernews provided through ThriftDB has some latency when paging through results. Be patient.
     </li>
   </ul>
+
+    <h2>View Source:</h2>
+    <ul>
+        <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example6-ajax-loading.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+    </ul>
 </div>
 
 <script src="../lib/firebugx.js"></script>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+<script src="../lib/jquery.jsonp-2.4.min.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.remotemodel.js"></script>
@@ -77,15 +81,25 @@ <h2>WARNING:</h2>
   var loader = new Slick.Data.RemoteModel();
 
   var storyTitleFormatter = function (row, cell, value, columnDef, dataContext) {
-    return "<b><a href='" + dataContext["link"] + "' target=_blank>" +
-        dataContext["title"] + "</a></b><br/>" + dataContext["description"];
+    s ="<b><a href='" + dataContext["url"] + "' target=_blank>" +
+              dataContext["title"] + "</a></b><br/>";
+    desc = dataContext["text"];
+    if (desc) { // on Hackernews many stories don't have a description
+        s += desc;
+    }
+    return s;
+  };
+
+  var dateFormatter = function (row, cell, value, columnDef, dataContext) {
+    return (value.getMonth()+1) + "/" + value.getDate() + "/" + value.getFullYear();
   };
 
 
   var columns = [
     {id: "num", name: "#", field: "index", width: 40},
-    {id: "story", name: "Story", width: 580, formatter: storyTitleFormatter, cssClass: "cell-story"},
-    {id: "diggs", name: "Diggs", field: "diggs", width: 60, sortable: true}
+    {id: "story", name: "Story", width: 520, formatter: storyTitleFormatter, cssClass: "cell-story"},
+    {id: "date", name: "Date", field: "create_ts", width: 60, formatter: dateFormatter, sortable: true},
+    {id: "points", name: "Points", field: "points", width: 60, sortable: true}
   ];
 
   var options = {
@@ -145,6 +159,10 @@ <h2>WARNING:</h2>
       }
     });
 
+    loader.setSearch($("#txtSearch").val());
+    loader.setSort("create_ts", -1);
+    grid.setSortColumn("date", false);
+
     // load the first page
     grid.onViewportChanged.notify();
   })
diff --git a/examples/example7-events.html b/examples/example7-events.html
index fc5122397..a8b0b4c0b 100644
--- a/examples/example7-events.html
+++ b/examples/example7-events.html
@@ -47,6 +47,10 @@ <h2>Demonstrates:</h2>
         <li>Right-click the row to open the context menu</li>
         <li>Click the priority cell to toggle values</li>
       </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example7-events.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </td>
   </tr>
 </table>
@@ -61,7 +65,7 @@ <h2>Demonstrates:</h2>
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.editors.js"></script>
@@ -109,6 +113,10 @@ <h2>Demonstrates:</h2>
     grid.onClick.subscribe(function (e) {
       var cell = grid.getCellFromEvent(e);
       if (grid.getColumns()[cell.cell].id == "priority") {
+        if (!grid.getEditorLock().commitCurrentEdit()) {
+          return;
+        }
+
         var states = { "Low": "Medium", "Medium": "High", "High": "Low" };
         data[cell.row].priority = states[data[cell.row].priority];
         grid.updateRow(cell.row);
@@ -121,7 +129,9 @@ <h2>Demonstrates:</h2>
     if (!$(e.target).is("li")) {
       return;
     }
-
+    if (!grid.getEditorLock().commitCurrentEdit()) {
+      return;
+    }
     var row = $(this).data("row");
     data[row].priority = $(e.target).attr("data");
     grid.updateRow(row);
diff --git a/examples/example8-alternative-display.html b/examples/example8-alternative-display.html
index 64a5e6955..fdba4f9fa 100644
--- a/examples/example8-alternative-display.html
+++ b/examples/example8-alternative-display.html
@@ -73,6 +73,11 @@ <h2>Demonstrates:</h2>
           SlickGrid's virtual rendering technology.
         </li>
       </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example8-alternative-display.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+
     </td>
   </tr>
 </table>
@@ -93,7 +98,7 @@ <h2>Demonstrates:</h2>
 <script src="../lib/firebugx.js"></script>
 
 <script src="../lib/jquery-1.7.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.grid.js"></script>
diff --git a/examples/example9-row-reordering.html b/examples/example9-row-reordering.html
index ed54f6077..672dac328 100644
--- a/examples/example9-row-reordering.html
+++ b/examples/example9-row-reordering.html
@@ -7,10 +7,6 @@
   <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
   <link rel="stylesheet" href="examples.css" type="text/css"/>
   <style>
-    .cell-title {
-      zfont-weight: bold;
-    }
-
     .cell-effort-driven {
       text-align: center;
     }
@@ -76,6 +72,10 @@
       <div id="dropzone" class="recycle-bin">
         Recycle Bin
       </div>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example9-row-reordering.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
     </div>
   </div>
 </div>
@@ -84,8 +84,8 @@
 
 <script src="../lib/jquery-1.7.min.js"></script>
 <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script src="../lib/jquery.event.drag-2.0.min.js"></script>
-<script src="../lib/jquery.event.drop-2.0.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+<script src="../lib/jquery.event.drop-2.2.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.cellrangeselector.js"></script>
@@ -269,7 +269,6 @@
     if (dd.mode != "recycle") {
       return;
     }
-    e.stopImmediatePropagation();
     dd.helper.css({top: e.pageY + 5, left: e.pageX + 5});
   });
 
@@ -277,7 +276,6 @@
     if (dd.mode != "recycle") {
       return;
     }
-    e.stopImmediatePropagation();
     dd.helper.remove();
     $(dd.available).css("background", "beige");
   });
diff --git a/examples/examples.css b/examples/examples.css
index a0caa7d86..bc5d93131 100644
--- a/examples/examples.css
+++ b/examples/examples.css
@@ -1,4 +1,4 @@
-@import url('slick-default-theme.css');
+@import url('../slick-default-theme.css');
 
 * {
   font-family: arial;
@@ -8,7 +8,7 @@
 body {
   background: beige;
   padding: 0;
-  margin: 8;
+  margin: 8px;
 }
 
 h2 {
diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 000000000..e0cae436c
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>SlickGrid Examples</title>
+  <style>
+    body {
+      font-family: Helvetica, arial, freesans, clean, sans-serif;
+      font-size: 15px;
+    }
+
+    a {
+      color: #4183c4;
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    li {
+      margin-bottom: 15px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Examples</h1>
+  <div>
+    <ul>
+      <li><a href="example1-simple.html">Basic use with minimal configuration</a></li>
+      <li><a href="example2-formatters.html">Adding some formatting</a></li>
+      <li><a href="example7-events.html">Handling events</a></li>
+      <li><a href="example14-highlighting.html">Highlighting and flashing cells</a></li>
+      <li><a href="example3-editing.html">Making it editable</a></li>
+      <li><a href="example3a-compound-editors.html">Writing compound editors</a></li>
+      <li><a href="example3b-editing-with-undo.html">Implementing Undo</a></li>
+      <li><a href="example-composite-editor-item-details.html">Using a CompositeEditor to implement detached item edit form</a></li>
+      <li>(most comprehensive) <a href="example4-model.html">Using a filtered data view to drive the grid</a></li>
+      <li><a href="example5-collapsing.html">Adding tree functionality (expand/collapse) to the grid</a></li>
+      <li><a href="example6-ajax-loading.html"><span class="caps">AJAX</span>-loading data with search</a></li>
+      <li><a href="example8-alternative-display.html">Using pre-compiled micro-templates to render cells</a></li>
+      <li><a href="example9-row-reordering.html">Row selection &amp; reordering</a></li>
+      <li><a href="example10-async-post-render.html">Using background post-rendering to add graphs</a></li>
+      <li><a href="example11-autoheight.html" title="autoHeight">No vertical scrolling</a></li>
+      <li><a href="example12-fillbrowser.html">Filling the whole window</a></li>
+      <li><a href="example13-getItem-sorting.html">Sorting by an index, getItem method</a></li>
+      <li><a href="example-header-row.html">Using fixed header row for quick filters</a></li>
+      <li><a href="example-checkbox-row-select.html">Plugin:  Checkbox row selectors with CheckboxSelectColumn plugin</a></li>
+      <li><a href="example-spreadsheet.html">Spreadsheet: cell range selection, copy’n’paste and Excel-style formula editor</a></li>
+      <li><a href="example-grouping.html">Interactive grouping and aggregates</a>.</li>
+      <li><a href="example-colspan.html">Colspan</a></li>
+      <li><a href="example-optimizing-dataview.html">Optimizing DataView for 500’000 rows</a></li>
+      <li><a href="example-explicit-initialization.html">Explicit initialization</a></li>
+      <li><a href="example-multi-column-sort.html">Multi-column sorting</a></li>
+      <li><a href="example-custom-column-value-extractor.html">Using dataItemColumnValueExtractor option to specify a custom column value extractor</a></li>
+      <li><a href="example-plugin-headerbuttons.html">Plugin: Column header buttons</a></li>
+      <li><a href="example-plugin-headermenu.html">Plugin: Column header menu</a></li>
+      <li><a href="example-autotooltips.html">Plugin: Auto tooltips</a></li>
+    </ul>
+  </div>
+</body>
+</html>
diff --git a/images/arrow_redo.png b/images/arrow_redo.png
index fdc394c7c..4f7f55d6f 100644
Binary files a/images/arrow_redo.png and b/images/arrow_redo.png differ
diff --git a/images/arrow_right_peppermint.png b/images/arrow_right_peppermint.png
index 1804fa9f9..872256786 100644
Binary files a/images/arrow_right_peppermint.png and b/images/arrow_right_peppermint.png differ
diff --git a/images/arrow_right_spearmint.png b/images/arrow_right_spearmint.png
index 298515ab6..277ddde38 100644
Binary files a/images/arrow_right_spearmint.png and b/images/arrow_right_spearmint.png differ
diff --git a/images/arrow_undo.png b/images/arrow_undo.png
index 6972c5e59..bc9924ac0 100644
Binary files a/images/arrow_undo.png and b/images/arrow_undo.png differ
diff --git a/images/bullet_blue.png b/images/bullet_blue.png
index a7651ec8a..79d978c36 100644
Binary files a/images/bullet_blue.png and b/images/bullet_blue.png differ
diff --git a/images/bullet_star.png b/images/bullet_star.png
index 3829023b8..142ea482a 100644
Binary files a/images/bullet_star.png and b/images/bullet_star.png differ
diff --git a/images/bullet_toggle_minus.png b/images/bullet_toggle_minus.png
index b47ce55f6..f5aa0450d 100644
Binary files a/images/bullet_toggle_minus.png and b/images/bullet_toggle_minus.png differ
diff --git a/images/bullet_toggle_plus.png b/images/bullet_toggle_plus.png
index 9ab4a8966..a96505342 100644
Binary files a/images/bullet_toggle_plus.png and b/images/bullet_toggle_plus.png differ
diff --git a/images/drag-handle.png b/images/drag-handle.png
index 86727b194..ad7531cf0 100644
Binary files a/images/drag-handle.png and b/images/drag-handle.png differ
diff --git a/images/help.png b/images/help.png
index 0eff0a5cb..85eca0950 100644
Binary files a/images/help.png and b/images/help.png differ
diff --git a/images/sort-asc.png b/images/sort-asc.png
index e6b6264fc..8604ff4e0 100644
Binary files a/images/sort-asc.png and b/images/sort-asc.png differ
diff --git a/images/sort-desc.png b/images/sort-desc.png
index 74ad1540e..a2a6adf93 100644
Binary files a/images/sort-desc.png and b/images/sort-desc.png differ
diff --git a/images/stripes.png b/images/stripes.png
index 0c293a927..c3c4b28a8 100644
Binary files a/images/stripes.png and b/images/stripes.png differ
diff --git a/images/tag_red.png b/images/tag_red.png
index 6ebb37d25..d290fcd79 100644
Binary files a/images/tag_red.png and b/images/tag_red.png differ
diff --git a/images/tick.png b/images/tick.png
index a9925a06a..3899d71df 100644
Binary files a/images/tick.png and b/images/tick.png differ
diff --git a/lib/jquery.event.drag-2.0.min.js b/lib/jquery.event.drag-2.0.min.js
deleted file mode 100644
index 2cb7fee0e..000000000
--- a/lib/jquery.event.drag-2.0.min.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*! 
- * jquery.event.drag - v 2.0.0 
- * Copyright (c) 2010 Three Dub Media - http://threedubmedia.com
- * Open Source MIT License - http://threedubmedia.com/code/license
- */
-;(function(f){f.fn.drag=function(b,a,d){var e=typeof b=="string"?b:"",k=f.isFunction(b)?b:f.isFunction(a)?a:null;if(e.indexOf("drag")!==0)e="drag"+e;d=(b==k?a:d)||{};return k?this.bind(e,d,k):this.trigger(e)};var i=f.event,h=i.special,c=h.drag={defaults:{which:1,distance:0,not:":input",handle:null,relative:false,drop:true,click:false},datakey:"dragdata",livekey:"livedrag",add:function(b){var a=f.data(this,c.datakey),d=b.data||{};a.related+=1;if(!a.live&&b.selector){a.live=true;i.add(this,"draginit."+ c.livekey,c.delegate)}f.each(c.defaults,function(e){if(d[e]!==undefined)a[e]=d[e]})},remove:function(){f.data(this,c.datakey).related-=1},setup:function(){if(!f.data(this,c.datakey)){var b=f.extend({related:0},c.defaults);f.data(this,c.datakey,b);i.add(this,"mousedown",c.init,b);this.attachEvent&&this.attachEvent("ondragstart",c.dontstart)}},teardown:function(){if(!f.data(this,c.datakey).related){f.removeData(this,c.datakey);i.remove(this,"mousedown",c.init);i.remove(this,"draginit",c.delegate);c.textselect(true); this.detachEvent&&this.detachEvent("ondragstart",c.dontstart)}},init:function(b){var a=b.data,d;if(!(a.which>0&&b.which!=a.which))if(!f(b.target).is(a.not))if(!(a.handle&&!f(b.target).closest(a.handle,b.currentTarget).length)){a.propagates=1;a.interactions=[c.interaction(this,a)];a.target=b.target;a.pageX=b.pageX;a.pageY=b.pageY;a.dragging=null;d=c.hijack(b,"draginit",a);if(a.propagates){if((d=c.flatten(d))&&d.length){a.interactions=[];f.each(d,function(){a.interactions.push(c.interaction(this,a))})}a.propagates= a.interactions.length;a.drop!==false&&h.drop&&h.drop.handler(b,a);c.textselect(false);i.add(document,"mousemove mouseup",c.handler,a);return false}}},interaction:function(b,a){return{drag:b,callback:new c.callback,droppable:[],offset:f(b)[a.relative?"position":"offset"]()||{top:0,left:0}}},handler:function(b){var a=b.data;switch(b.type){case !a.dragging&&"mousemove":if(Math.pow(b.pageX-a.pageX,2)+Math.pow(b.pageY-a.pageY,2)<Math.pow(a.distance,2))break;b.target=a.target;c.hijack(b,"dragstart",a); if(a.propagates)a.dragging=true;case "mousemove":if(a.dragging){c.hijack(b,"drag",a);if(a.propagates){a.drop!==false&&h.drop&&h.drop.handler(b,a);break}b.type="mouseup"}case "mouseup":i.remove(document,"mousemove mouseup",c.handler);if(a.dragging){a.drop!==false&&h.drop&&h.drop.handler(b,a);c.hijack(b,"dragend",a)}c.textselect(true);if(a.click===false&&a.dragging){jQuery.event.triggered=true;setTimeout(function(){jQuery.event.triggered=false},20);a.dragging=false}break}},delegate:function(b){var a= [],d,e=f.data(this,"events")||{};f.each(e.live||[],function(k,j){if(j.preType.indexOf("drag")===0)if(d=f(b.target).closest(j.selector,b.currentTarget)[0]){i.add(d,j.origType+"."+c.livekey,j.origHandler,j.data);f.inArray(d,a)<0&&a.push(d)}});if(!a.length)return false;return f(a).bind("dragend."+c.livekey,function(){i.remove(this,"."+c.livekey)})},hijack:function(b,a,d,e,k){if(d){var j={event:b.originalEvent,type:b.type},n=a.indexOf("drop")?"drag":"drop",l,o=e||0,g,m;e=!isNaN(e)?e:d.interactions.length; b.type=a;b.originalEvent=null;d.results=[];do if(g=d.interactions[o])if(!(a!=="dragend"&&g.cancelled)){m=c.properties(b,d,g);g.results=[];f(k||g[n]||d.droppable).each(function(q,p){l=(m.target=p)?i.handle.call(p,b,m):null;if(l===false){if(n=="drag"){g.cancelled=true;d.propagates-=1}if(a=="drop")g[n][q]=null}else if(a=="dropinit")g.droppable.push(c.element(l)||p);if(a=="dragstart")g.proxy=f(c.element(l)||g.drag)[0];g.results.push(l);delete b.result;if(a!=="dropinit")return l});d.results[o]=c.flatten(g.results); if(a=="dropinit")g.droppable=c.flatten(g.droppable);a=="dragstart"&&!g.cancelled&&m.update()}while(++o<e);b.type=j.type;b.originalEvent=j.event;return c.flatten(d.results)}},properties:function(b,a,d){var e=d.callback;e.drag=d.drag;e.proxy=d.proxy||d.drag;e.startX=a.pageX;e.startY=a.pageY;e.deltaX=b.pageX-a.pageX;e.deltaY=b.pageY-a.pageY;e.originalX=d.offset.left;e.originalY=d.offset.top;e.offsetX=b.pageX-(a.pageX-e.originalX);e.offsetY=b.pageY-(a.pageY-e.originalY);e.drop=c.flatten((d.drop||[]).slice()); e.available=c.flatten((d.droppable||[]).slice());return e},element:function(b){if(b&&(b.jquery||b.nodeType==1))return b},flatten:function(b){return f.map(b,function(a){return a&&a.jquery?f.makeArray(a):a&&a.length?c.flatten(a):a})},textselect:function(b){f(document)[b?"unbind":"bind"]("selectstart",c.dontstart).attr("unselectable",b?"off":"on").css("MozUserSelect",b?"":"none")},dontstart:function(){return false},callback:function(){}};c.callback.prototype={update:function(){h.drop&&this.available.length&& f.each(this.available,function(b){h.drop.locate(this,b)})}};h.draginit=h.dragstart=h.dragend=c})(jQuery);
\ No newline at end of file
diff --git a/lib/jquery.event.drag-2.2.js b/lib/jquery.event.drag-2.2.js
new file mode 100644
index 000000000..f2c1d57e6
--- /dev/null
+++ b/lib/jquery.event.drag-2.2.js
@@ -0,0 +1,402 @@
+/*! 
+ * jquery.event.drag - v 2.2
+ * Copyright (c) 2010 Three Dub Media - http://threedubmedia.com
+ * Open Source MIT License - http://threedubmedia.com/code/license
+ */
+// Created: 2008-06-04 
+// Updated: 2012-05-21
+// REQUIRES: jquery 1.7.x
+
+;(function( $ ){
+
+// add the jquery instance method
+$.fn.drag = function( str, arg, opts ){
+	// figure out the event type
+	var type = typeof str == "string" ? str : "",
+	// figure out the event handler...
+	fn = $.isFunction( str ) ? str : $.isFunction( arg ) ? arg : null;
+	// fix the event type
+	if ( type.indexOf("drag") !== 0 ) 
+		type = "drag"+ type;
+	// were options passed
+	opts = ( str == fn ? arg : opts ) || {};
+	// trigger or bind event handler
+	return fn ? this.bind( type, opts, fn ) : this.trigger( type );
+};
+
+// local refs (increase compression)
+var $event = $.event, 
+$special = $event.special,
+// configure the drag special event 
+drag = $special.drag = {
+	
+	// these are the default settings
+	defaults: {
+		which: 1, // mouse button pressed to start drag sequence
+		distance: 0, // distance dragged before dragstart
+		not: ':input', // selector to suppress dragging on target elements
+		handle: null, // selector to match handle target elements
+		relative: false, // true to use "position", false to use "offset"
+		drop: true, // false to suppress drop events, true or selector to allow
+		click: false // false to suppress click events after dragend (no proxy)
+	},
+	
+	// the key name for stored drag data
+	datakey: "dragdata",
+	
+	// prevent bubbling for better performance
+	noBubble: true,
+	
+	// count bound related events
+	add: function( obj ){ 
+		// read the interaction data
+		var data = $.data( this, drag.datakey ),
+		// read any passed options 
+		opts = obj.data || {};
+		// count another realted event
+		data.related += 1;
+		// extend data options bound with this event
+		// don't iterate "opts" in case it is a node 
+		$.each( drag.defaults, function( key, def ){
+			if ( opts[ key ] !== undefined )
+				data[ key ] = opts[ key ];
+		});
+	},
+	
+	// forget unbound related events
+	remove: function(){
+		$.data( this, drag.datakey ).related -= 1;
+	},
+	
+	// configure interaction, capture settings
+	setup: function(){
+		// check for related events
+		if ( $.data( this, drag.datakey ) ) 
+			return;
+		// initialize the drag data with copied defaults
+		var data = $.extend({ related:0 }, drag.defaults );
+		// store the interaction data
+		$.data( this, drag.datakey, data );
+		// bind the mousedown event, which starts drag interactions
+		$event.add( this, "touchstart mousedown", drag.init, data );
+		// prevent image dragging in IE...
+		if ( this.attachEvent ) 
+			this.attachEvent("ondragstart", drag.dontstart ); 
+	},
+	
+	// destroy configured interaction
+	teardown: function(){
+		var data = $.data( this, drag.datakey ) || {};
+		// check for related events
+		if ( data.related ) 
+			return;
+		// remove the stored data
+		$.removeData( this, drag.datakey );
+		// remove the mousedown event
+		$event.remove( this, "touchstart mousedown", drag.init );
+		// enable text selection
+		drag.textselect( true ); 
+		// un-prevent image dragging in IE...
+		if ( this.detachEvent ) 
+			this.detachEvent("ondragstart", drag.dontstart ); 
+	},
+		
+	// initialize the interaction
+	init: function( event ){ 
+		// sorry, only one touch at a time
+		if ( drag.touched ) 
+			return;
+		// the drag/drop interaction data
+		var dd = event.data, results;
+		// check the which directive
+		if ( event.which != 0 && dd.which > 0 && event.which != dd.which ) 
+			return; 
+		// check for suppressed selector
+		if ( $( event.target ).is( dd.not ) ) 
+			return;
+		// check for handle selector
+		if ( dd.handle && !$( event.target ).closest( dd.handle, event.currentTarget ).length ) 
+			return;
+
+		drag.touched = event.type == 'touchstart' ? this : null;
+		dd.propagates = 1;
+		dd.mousedown = this;
+		dd.interactions = [ drag.interaction( this, dd ) ];
+		dd.target = event.target;
+		dd.pageX = event.pageX;
+		dd.pageY = event.pageY;
+		dd.dragging = null;
+		// handle draginit event... 
+		results = drag.hijack( event, "draginit", dd );
+		// early cancel
+		if ( !dd.propagates )
+			return;
+		// flatten the result set
+		results = drag.flatten( results );
+		// insert new interaction elements
+		if ( results && results.length ){
+			dd.interactions = [];
+			$.each( results, function(){
+				dd.interactions.push( drag.interaction( this, dd ) );
+			});
+		}
+		// remember how many interactions are propagating
+		dd.propagates = dd.interactions.length;
+		// locate and init the drop targets
+		if ( dd.drop !== false && $special.drop ) 
+			$special.drop.handler( event, dd );
+		// disable text selection
+		drag.textselect( false ); 
+		// bind additional events...
+		if ( drag.touched )
+			$event.add( drag.touched, "touchmove touchend", drag.handler, dd );
+		else 
+			$event.add( document, "mousemove mouseup", drag.handler, dd );
+		// helps prevent text selection or scrolling
+		if ( !drag.touched || dd.live )
+			return false;
+	},	
+	
+	// returns an interaction object
+	interaction: function( elem, dd ){
+		var offset = $( elem )[ dd.relative ? "position" : "offset" ]() || { top:0, left:0 };
+		return {
+			drag: elem, 
+			callback: new drag.callback(), 
+			droppable: [],
+			offset: offset
+		};
+	},
+	
+	// handle drag-releatd DOM events
+	handler: function( event ){ 
+		// read the data before hijacking anything
+		var dd = event.data;	
+		// handle various events
+		switch ( event.type ){
+			// mousemove, check distance, start dragging
+			case !dd.dragging && 'touchmove': 
+				event.preventDefault();
+			case !dd.dragging && 'mousemove':
+				//  drag tolerance, x≤ + y≤ = distance≤
+				if ( Math.pow(  event.pageX-dd.pageX, 2 ) + Math.pow(  event.pageY-dd.pageY, 2 ) < Math.pow( dd.distance, 2 ) ) 
+					break; // distance tolerance not reached
+				event.target = dd.target; // force target from "mousedown" event (fix distance issue)
+				drag.hijack( event, "dragstart", dd ); // trigger "dragstart"
+				if ( dd.propagates ) // "dragstart" not rejected
+					dd.dragging = true; // activate interaction
+			// mousemove, dragging
+			case 'touchmove':
+				event.preventDefault();
+			case 'mousemove':
+				if ( dd.dragging ){
+					// trigger "drag"		
+					drag.hijack( event, "drag", dd );
+					if ( dd.propagates ){
+						// manage drop events
+						if ( dd.drop !== false && $special.drop )
+							$special.drop.handler( event, dd ); // "dropstart", "dropend"							
+						break; // "drag" not rejected, stop		
+					}
+					event.type = "mouseup"; // helps "drop" handler behave
+				}
+			// mouseup, stop dragging
+			case 'touchend': 
+			case 'mouseup': 
+			default:
+				if ( drag.touched )
+					$event.remove( drag.touched, "touchmove touchend", drag.handler ); // remove touch events
+				else 
+					$event.remove( document, "mousemove mouseup", drag.handler ); // remove page events	
+				if ( dd.dragging ){
+					if ( dd.drop !== false && $special.drop )
+						$special.drop.handler( event, dd ); // "drop"
+					drag.hijack( event, "dragend", dd ); // trigger "dragend"	
+				}
+				drag.textselect( true ); // enable text selection
+				// if suppressing click events...
+				if ( dd.click === false && dd.dragging )
+					$.data( dd.mousedown, "suppress.click", new Date().getTime() + 5 );
+				dd.dragging = drag.touched = false; // deactivate element	
+				break;
+		}
+	},
+		
+	// re-use event object for custom events
+	hijack: function( event, type, dd, x, elem ){
+		// not configured
+		if ( !dd ) 
+			return;
+		// remember the original event and type
+		var orig = { event:event.originalEvent, type:event.type },
+		// is the event drag related or drog related?
+		mode = type.indexOf("drop") ? "drag" : "drop",
+		// iteration vars
+		result, i = x || 0, ia, $elems, callback,
+		len = !isNaN( x ) ? x : dd.interactions.length;
+		// modify the event type
+		event.type = type;
+		// remove the original event
+		event.originalEvent = null;
+		// initialize the results
+		dd.results = [];
+		// handle each interacted element
+		do if ( ia = dd.interactions[ i ] ){
+			// validate the interaction
+			if ( type !== "dragend" && ia.cancelled )
+				continue;
+			// set the dragdrop properties on the event object
+			callback = drag.properties( event, dd, ia );
+			// prepare for more results
+			ia.results = [];
+			// handle each element
+			$( elem || ia[ mode ] || dd.droppable ).each(function( p, subject ){
+				// identify drag or drop targets individually
+				callback.target = subject;
+				// force propagtion of the custom event
+				event.isPropagationStopped = function(){ return false; };
+				// handle the event	
+				result = subject ? $event.dispatch.call( subject, event, callback ) : null;
+				// stop the drag interaction for this element
+				if ( result === false ){
+					if ( mode == "drag" ){
+						ia.cancelled = true;
+						dd.propagates -= 1;
+					}
+					if ( type == "drop" ){
+						ia[ mode ][p] = null;
+					}
+				}
+				// assign any dropinit elements
+				else if ( type == "dropinit" )
+					ia.droppable.push( drag.element( result ) || subject );
+				// accept a returned proxy element 
+				if ( type == "dragstart" )
+					ia.proxy = $( drag.element( result ) || ia.drag )[0];
+				// remember this result	
+				ia.results.push( result );
+				// forget the event result, for recycling
+				delete event.result;
+				// break on cancelled handler
+				if ( type !== "dropinit" )
+					return result;
+			});	
+			// flatten the results	
+			dd.results[ i ] = drag.flatten( ia.results );	
+			// accept a set of valid drop targets
+			if ( type == "dropinit" )
+				ia.droppable = drag.flatten( ia.droppable );
+			// locate drop targets
+			if ( type == "dragstart" && !ia.cancelled )
+				callback.update(); 
+		}
+		while ( ++i < len )
+		// restore the original event & type
+		event.type = orig.type;
+		event.originalEvent = orig.event;
+		// return all handler results
+		return drag.flatten( dd.results );
+	},
+		
+	// extend the callback object with drag/drop properties...
+	properties: function( event, dd, ia ){		
+		var obj = ia.callback;
+		// elements
+		obj.drag = ia.drag;
+		obj.proxy = ia.proxy || ia.drag;
+		// starting mouse position
+		obj.startX = dd.pageX;
+		obj.startY = dd.pageY;
+		// current distance dragged
+		obj.deltaX = event.pageX - dd.pageX;
+		obj.deltaY = event.pageY - dd.pageY;
+		// original element position
+		obj.originalX = ia.offset.left;
+		obj.originalY = ia.offset.top;
+		// adjusted element position
+		obj.offsetX = obj.originalX + obj.deltaX; 
+		obj.offsetY = obj.originalY + obj.deltaY;
+		// assign the drop targets information
+		obj.drop = drag.flatten( ( ia.drop || [] ).slice() );
+		obj.available = drag.flatten( ( ia.droppable || [] ).slice() );
+		return obj;	
+	},
+	
+	// determine is the argument is an element or jquery instance
+	element: function( arg ){
+		if ( arg && ( arg.jquery || arg.nodeType == 1 ) )
+			return arg;
+	},
+	
+	// flatten nested jquery objects and arrays into a single dimension array
+	flatten: function( arr ){
+		return $.map( arr, function( member ){
+			return member && member.jquery ? $.makeArray( member ) : 
+				member && member.length ? drag.flatten( member ) : member;
+		});
+	},
+	
+	// toggles text selection attributes ON (true) or OFF (false)
+	textselect: function( bool ){ 
+		$( document )[ bool ? "unbind" : "bind" ]("selectstart", drag.dontstart )
+			.css("MozUserSelect", bool ? "" : "none" );
+		// .attr("unselectable", bool ? "off" : "on" )
+		document.unselectable = bool ? "off" : "on"; 
+	},
+	
+	// suppress "selectstart" and "ondragstart" events
+	dontstart: function(){ 
+		return false; 
+	},
+	
+	// a callback instance contructor
+	callback: function(){}
+	
+};
+
+// callback methods
+drag.callback.prototype = {
+	update: function(){
+		if ( $special.drop && this.available.length )
+			$.each( this.available, function( i ){
+				$special.drop.locate( this, i );
+			});
+	}
+};
+
+// patch $.event.$dispatch to allow suppressing clicks
+var $dispatch = $event.dispatch;
+$event.dispatch = function( event ){
+	if ( $.data( this, "suppress."+ event.type ) - new Date().getTime() > 0 ){
+		$.removeData( this, "suppress."+ event.type );
+		return;
+	}
+	return $dispatch.apply( this, arguments );
+};
+
+// event fix hooks for touch events...
+var touchHooks = 
+$event.fixHooks.touchstart = 
+$event.fixHooks.touchmove = 
+$event.fixHooks.touchend =
+$event.fixHooks.touchcancel = {
+	props: "clientX clientY pageX pageY screenX screenY".split( " " ),
+	filter: function( event, orig ) {
+		if ( orig ){
+			var touched = ( orig.touches && orig.touches[0] )
+				|| ( orig.changedTouches && orig.changedTouches[0] )
+				|| null; 
+			// iOS webkit: touchstart, touchmove, touchend
+			if ( touched ) 
+				$.each( touchHooks.props, function( i, prop ){
+					event[ prop ] = touched[ prop ];
+				});
+		}
+		return event;
+	}
+};
+
+// share the same special event configuration with related events...
+$special.draginit = $special.dragstart = $special.dragend = drag;
+
+})( jQuery );
\ No newline at end of file
diff --git a/lib/jquery.event.drop-2.0.min.js b/lib/jquery.event.drop-2.0.min.js
deleted file mode 100644
index b98857517..000000000
--- a/lib/jquery.event.drop-2.0.min.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*! 
- * jquery.event.drop - v 2.0.0 
- * Copyright (c) 2010 Three Dub Media - http://threedubmedia.com
- * Open Source MIT License - http://threedubmedia.com/code/license
- */
-;(function(f){f.fn.drop=function(c,a,d){var g=typeof c=="string"?c:"",e=f.isFunction(c)?c:f.isFunction(a)?a:null;if(g.indexOf("drop")!==0)g="drop"+g;d=(c==e?a:d)||{};return e?this.bind(g,d,e):this.trigger(g)};f.drop=function(c){c=c||{};b.multi=c.multi===true?Infinity:c.multi===false?1:!isNaN(c.multi)?c.multi:b.multi;b.delay=c.delay||b.delay;b.tolerance=f.isFunction(c.tolerance)?c.tolerance:c.tolerance===null?null:b.tolerance;b.mode=c.mode||b.mode||"intersect"};var l=f.event,i=l.special,b=f.event.special.drop= {multi:1,delay:20,mode:"overlap",targets:[],datakey:"dropdata",livekey:"livedrop",add:function(c){var a=f.data(this,b.datakey);a.related+=1;if(!a.live&&c.selector){a.live=true;l.add(this,"dropinit."+b.livekey,b.delegate)}},remove:function(){f.data(this,b.datakey).related-=1},setup:function(){if(!f.data(this,b.datakey)){f.data(this,b.datakey,{related:0,active:[],anyactive:0,winner:0,location:{}});b.targets.push(this)}},teardown:function(){if(!f.data(this,b.datakey).related){f.removeData(this,b.datakey); l.remove(this,"dropinit",b.delegate);var c=this;b.targets=f.grep(b.targets,function(a){return a!==c})}},handler:function(c,a){var d;if(a)switch(c.type){case "mousedown":d=f(b.targets);if(typeof a.drop=="string")d=d.filter(a.drop);d.each(function(){var g=f.data(this,b.datakey);g.active=[];g.anyactive=0;g.winner=0});a.droppable=d;b.delegates=[];i.drag.hijack(c,"dropinit",a);b.delegates=f.unique(i.drag.flatten(b.delegates));break;case "mousemove":b.event=c;b.timer||b.tolerate(a);break;case "mouseup":b.timer= clearTimeout(b.timer);if(a.propagates){i.drag.hijack(c,"drop",a);i.drag.hijack(c,"dropend",a);f.each(b.delegates||[],function(){l.remove(this,"."+b.livekey)})}break}},delegate:function(c){var a=[],d,g=f.data(this,"events")||{};f.each(g.live||[],function(e,h){if(h.preType.indexOf("drop")===0){d=f(c.currentTarget).find(h.selector);d.length&&d.each(function(){l.add(this,h.origType+"."+b.livekey,h.origHandler,h.data);f.inArray(this,a)<0&&a.push(this)})}});b.delegates.push(a);return a.length?f(a):false}, locate:function(c,a){var d=f.data(c,b.datakey),g=f(c),e=g.offset()||{},h=g.outerHeight();g=g.outerWidth();e={elem:c,width:g,height:h,top:e.top,left:e.left,right:e.left+g,bottom:e.top+h};if(d){d.location=e;d.index=a;d.elem=c}return e},contains:function(c,a){return(a[0]||a.left)>=c.left&&(a[0]||a.right)<=c.right&&(a[1]||a.top)>=c.top&&(a[1]||a.bottom)<=c.bottom},modes:{intersect:function(c,a,d){return this.contains(d,[c.pageX,c.pageY])?1E9:this.modes.overlap.apply(this,arguments)},overlap:function(c, a,d){return Math.max(0,Math.min(d.bottom,a.bottom)-Math.max(d.top,a.top))*Math.max(0,Math.min(d.right,a.right)-Math.max(d.left,a.left))},fit:function(c,a,d){return this.contains(d,a)?1:0},middle:function(c,a,d){return this.contains(d,[a.left+a.width*0.5,a.top+a.height*0.5])?1:0}},sort:function(c,a){return a.winner-c.winner||c.index-a.index},tolerate:function(c){var a,d,g,e,h,m,j=0,k,p=c.interactions.length,n=[b.event.pageX,b.event.pageY],o=b.tolerance||b.modes[b.mode];do if(k=c.interactions[j]){if(!k)return; k.drop=[];h=[];m=k.droppable.length;if(o)g=b.locate(k.proxy);a=0;do if(d=k.droppable[a]){e=f.data(d,b.datakey);if(d=e.location){e.winner=o?o.call(b,b.event,g,d):b.contains(d,n)?1:0;h.push(e)}}while(++a<m);h.sort(b.sort);a=0;do if(e=h[a])if(e.winner&&k.drop.length<b.multi){if(!e.active[j]&&!e.anyactive)if(i.drag.hijack(b.event,"dropstart",c,j,e.elem)[0]!==false){e.active[j]=1;e.anyactive+=1}else e.winner=0;e.winner&&k.drop.push(e.elem)}else if(e.active[j]&&e.anyactive==1){i.drag.hijack(b.event,"dropend", c,j,e.elem);e.active[j]=0;e.anyactive-=1}while(++a<m)}while(++j<p);if(b.last&&n[0]==b.last.pageX&&n[1]==b.last.pageY)delete b.timer;else b.timer=setTimeout(function(){b.tolerate(c)},b.delay);b.last=b.event}};i.dropinit=i.dropstart=i.dropend=b})(jQuery);
\ No newline at end of file
diff --git a/lib/jquery.event.drop-2.2.js b/lib/jquery.event.drop-2.2.js
new file mode 100644
index 000000000..7599ef91e
--- /dev/null
+++ b/lib/jquery.event.drop-2.2.js
@@ -0,0 +1,302 @@
+/*! 
+ * jquery.event.drop - v 2.2
+ * Copyright (c) 2010 Three Dub Media - http://threedubmedia.com
+ * Open Source MIT License - http://threedubmedia.com/code/license
+ */
+// Created: 2008-06-04 
+// Updated: 2012-05-21
+// REQUIRES: jquery 1.7.x, event.drag 2.2
+
+;(function($){ // secure $ jQuery alias
+
+// Events: drop, dropstart, dropend
+
+// add the jquery instance method
+$.fn.drop = function( str, arg, opts ){
+	// figure out the event type
+	var type = typeof str == "string" ? str : "",
+	// figure out the event handler...
+	fn = $.isFunction( str ) ? str : $.isFunction( arg ) ? arg : null;
+	// fix the event type
+	if ( type.indexOf("drop") !== 0 ) 
+		type = "drop"+ type;
+	// were options passed
+	opts = ( str == fn ? arg : opts ) || {};
+	// trigger or bind event handler
+	return fn ? this.bind( type, opts, fn ) : this.trigger( type );
+};
+
+// DROP MANAGEMENT UTILITY
+// returns filtered drop target elements, caches their positions
+$.drop = function( opts ){ 
+	opts = opts || {};
+	// safely set new options...
+	drop.multi = opts.multi === true ? Infinity : 
+		opts.multi === false ? 1 : !isNaN( opts.multi ) ? opts.multi : drop.multi;
+	drop.delay = opts.delay || drop.delay;
+	drop.tolerance = $.isFunction( opts.tolerance ) ? opts.tolerance : 
+		opts.tolerance === null ? null : drop.tolerance;
+	drop.mode = opts.mode || drop.mode || 'intersect';
+};
+
+// local refs (increase compression)
+var $event = $.event, 
+$special = $event.special,
+// configure the drop special event
+drop = $.event.special.drop = {
+
+	// these are the default settings
+	multi: 1, // allow multiple drop winners per dragged element
+	delay: 20, // async timeout delay
+	mode: 'overlap', // drop tolerance mode
+		
+	// internal cache
+	targets: [], 
+	
+	// the key name for stored drop data
+	datakey: "dropdata",
+		
+	// prevent bubbling for better performance
+	noBubble: true,
+	
+	// count bound related events
+	add: function( obj ){ 
+		// read the interaction data
+		var data = $.data( this, drop.datakey );
+		// count another realted event
+		data.related += 1;
+	},
+	
+	// forget unbound related events
+	remove: function(){
+		$.data( this, drop.datakey ).related -= 1;
+	},
+	
+	// configure the interactions
+	setup: function(){
+		// check for related events
+		if ( $.data( this, drop.datakey ) ) 
+			return;
+		// initialize the drop element data
+		var data = { 
+			related: 0,
+			active: [],
+			anyactive: 0,
+			winner: 0,
+			location: {}
+		};
+		// store the drop data on the element
+		$.data( this, drop.datakey, data );
+		// store the drop target in internal cache
+		drop.targets.push( this );
+	},
+	
+	// destroy the configure interaction	
+	teardown: function(){ 
+		var data = $.data( this, drop.datakey ) || {};
+		// check for related events
+		if ( data.related ) 
+			return;
+		// remove the stored data
+		$.removeData( this, drop.datakey );
+		// reference the targeted element
+		var element = this;
+		// remove from the internal cache
+		drop.targets = $.grep( drop.targets, function( target ){ 
+			return ( target !== element ); 
+		});
+	},
+	
+	// shared event handler
+	handler: function( event, dd ){ 
+		// local vars
+		var results, $targets;
+		// make sure the right data is available
+		if ( !dd ) 
+			return;
+		// handle various events
+		switch ( event.type ){
+			// draginit, from $.event.special.drag
+			case 'mousedown': // DROPINIT >>
+			case 'touchstart': // DROPINIT >>
+				// collect and assign the drop targets
+				$targets =  $( drop.targets );
+				if ( typeof dd.drop == "string" )
+					$targets = $targets.filter( dd.drop );
+				// reset drop data winner properties
+				$targets.each(function(){
+					var data = $.data( this, drop.datakey );
+					data.active = [];
+					data.anyactive = 0;
+					data.winner = 0;
+				});
+				// set available target elements
+				dd.droppable = $targets;
+				// activate drop targets for the initial element being dragged
+				$special.drag.hijack( event, "dropinit", dd ); 
+				break;
+			// drag, from $.event.special.drag
+			case 'mousemove': // TOLERATE >>
+			case 'touchmove': // TOLERATE >>
+				drop.event = event; // store the mousemove event
+				if ( !drop.timer )
+					// monitor drop targets
+					drop.tolerate( dd ); 
+				break;
+			// dragend, from $.event.special.drag
+			case 'mouseup': // DROP >> DROPEND >>
+			case 'touchend': // DROP >> DROPEND >>
+				drop.timer = clearTimeout( drop.timer ); // delete timer	
+				if ( dd.propagates ){
+					$special.drag.hijack( event, "drop", dd ); 
+					$special.drag.hijack( event, "dropend", dd ); 
+				}
+				break;
+				
+		}
+	},
+		
+	// returns the location positions of an element
+	locate: function( elem, index ){ 
+		var data = $.data( elem, drop.datakey ),
+		$elem = $( elem ), 
+		posi = $elem.offset() || {}, 
+		height = $elem.outerHeight(), 
+		width = $elem.outerWidth(),
+		location = { 
+			elem: elem, 
+			width: width, 
+			height: height,
+			top: posi.top, 
+			left: posi.left, 
+			right: posi.left + width, 
+			bottom: posi.top + height
+		};
+		// drag elements might not have dropdata
+		if ( data ){
+			data.location = location;
+			data.index = index;
+			data.elem = elem;
+		}
+		return location;
+	},
+	
+	// test the location positions of an element against another OR an X,Y coord
+	contains: function( target, test ){ // target { location } contains test [x,y] or { location }
+		return ( ( test[0] || test.left ) >= target.left && ( test[0] || test.right ) <= target.right
+			&& ( test[1] || test.top ) >= target.top && ( test[1] || test.bottom ) <= target.bottom ); 
+	},
+	
+	// stored tolerance modes
+	modes: { // fn scope: "$.event.special.drop" object 
+		// target with mouse wins, else target with most overlap wins
+		'intersect': function( event, proxy, target ){
+			return this.contains( target, [ event.pageX, event.pageY ] ) ? // check cursor
+				1e9 : this.modes.overlap.apply( this, arguments ); // check overlap
+		},
+		// target with most overlap wins	
+		'overlap': function( event, proxy, target ){
+			// calculate the area of overlap...
+			return Math.max( 0, Math.min( target.bottom, proxy.bottom ) - Math.max( target.top, proxy.top ) )
+				* Math.max( 0, Math.min( target.right, proxy.right ) - Math.max( target.left, proxy.left ) );
+		},
+		// proxy is completely contained within target bounds	
+		'fit': function( event, proxy, target ){
+			return this.contains( target, proxy ) ? 1 : 0;
+		},
+		// center of the proxy is contained within target bounds	
+		'middle': function( event, proxy, target ){
+			return this.contains( target, [ proxy.left + proxy.width * .5, proxy.top + proxy.height * .5 ] ) ? 1 : 0;
+		}
+	},	
+	
+	// sort drop target cache by by winner (dsc), then index (asc)
+	sort: function( a, b ){
+		return ( b.winner - a.winner ) || ( a.index - b.index );
+	},
+		
+	// async, recursive tolerance execution
+	tolerate: function( dd ){		
+		// declare local refs
+		var i, drp, drg, data, arr, len, elem,
+		// interaction iteration variables
+		x = 0, ia, end = dd.interactions.length,
+		// determine the mouse coords
+		xy = [ drop.event.pageX, drop.event.pageY ],
+		// custom or stored tolerance fn
+		tolerance = drop.tolerance || drop.modes[ drop.mode ];
+		// go through each passed interaction...
+		do if ( ia = dd.interactions[x] ){
+			// check valid interaction
+			if ( !ia )
+				return; 
+			// initialize or clear the drop data
+			ia.drop = [];
+			// holds the drop elements
+			arr = []; 
+			len = ia.droppable.length;
+			// determine the proxy location, if needed
+			if ( tolerance )
+				drg = drop.locate( ia.proxy ); 
+			// reset the loop
+			i = 0;
+			// loop each stored drop target
+			do if ( elem = ia.droppable[i] ){ 
+				data = $.data( elem, drop.datakey );
+				drp = data.location;
+				if ( !drp ) continue;
+				// find a winner: tolerance function is defined, call it
+				data.winner = tolerance ? tolerance.call( drop, drop.event, drg, drp ) 
+					// mouse position is always the fallback
+					: drop.contains( drp, xy ) ? 1 : 0; 
+				arr.push( data );	
+			} while ( ++i < len ); // loop 
+			// sort the drop targets
+			arr.sort( drop.sort );			
+			// reset the loop
+			i = 0;
+			// loop through all of the targets again
+			do if ( data = arr[ i ] ){
+				// winners...
+				if ( data.winner && ia.drop.length < drop.multi ){
+					// new winner... dropstart
+					if ( !data.active[x] && !data.anyactive ){
+						// check to make sure that this is not prevented
+						if ( $special.drag.hijack( drop.event, "dropstart", dd, x, data.elem )[0] !== false ){ 	
+							data.active[x] = 1;
+							data.anyactive += 1;
+						}
+						// if false, it is not a winner
+						else
+							data.winner = 0;
+					}
+					// if it is still a winner
+					if ( data.winner )
+						ia.drop.push( data.elem );
+				}
+				// losers... 
+				else if ( data.active[x] && data.anyactive == 1 ){
+					// former winner... dropend
+					$special.drag.hijack( drop.event, "dropend", dd, x, data.elem ); 
+					data.active[x] = 0;
+					data.anyactive -= 1;
+				}
+			} while ( ++i < len ); // loop 		
+		} while ( ++x < end ) // loop
+		// check if the mouse is still moving or is idle
+		if ( drop.last && xy[0] == drop.last.pageX && xy[1] == drop.last.pageY ) 
+			delete drop.timer; // idle, don't recurse
+		else  // recurse
+			drop.timer = setTimeout(function(){ 
+				drop.tolerate( dd ); 
+			}, drop.delay );
+		// remember event, to compare idleness
+		drop.last = drop.event; 
+	}
+	
+};
+
+// share the same special event configuration with related events...
+$special.dropinit = $special.dropstart = $special.dropend = drop;
+
+})(jQuery); // confine scope	
\ No newline at end of file
diff --git a/lib/jquery.jsonp-1.1.0.min.js b/lib/jquery.jsonp-1.1.0.min.js
deleted file mode 100644
index 7c47fbd76..000000000
--- a/lib/jquery.jsonp-1.1.0.min.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// jquery.jsonp 1.1.0 (c)2009 Julian Aubourg | MIT License
-// http://code.google.com/p/jquery-jsonp/
-(function(d){var b=function(n){return n!==undefined&&n!==null},m=function(p,n,o){b(p)&&p.apply(n,o)},e=function(n){setTimeout(n,0)},f="",a="&",k="?",l="success",g="error",i=d("head"),h={},c={callback:"C",url:location.href},j=function(s){s=d.extend({},c,s);var r=s.beforeSend,A=0;s.abort=function(){A=1};if(b(r)&&(r(s,s)===false||A)){return s}var q=s.success,o=s.complete,v=s.error,C=s.dataFilter,G=s.callbackParameter,w=s.callback,D=s.cache,n=s.pageCache,t=s.url,I=s.data,x=s.timeout,z,H,F,E;t=b(t)?t:f;I=b(I)?((typeof I)=="string"?I:d.param(I)):f;b(G)&&(I+=(I==f?f:a)+escape(G)+"=?");!D&&!n&&(I+=(I==f?f:a)+"_"+(new Date()).getTime()+"=");z=t.split(k);if(I!=f){H=I.split(k);E=z.length-1;E&&(z[E]+=a+H.shift());z=z.concat(H)}F=z.length-2;F&&(z[F]+=w+z.pop());var p=z.join(k),B=function(J){b(C)&&(J=C.apply(s,[J]));m(q,s,[J,l]);m(o,s,[s,l])},y=function(J){m(v,s,[s,J]);m(o,s,[s,J])},u=h[p];if(n&&b(u)){e(function(){b(u.s)?B(u.s):y(g)});return s}e(function(){if(A){return}var J=d("<iframe />").appendTo(i),L=J[0],N=L.contentWindow||L.contentDocument,P=N.document,K,Q,R=function(S,T){n&&!b(T)&&(h[p]=f);K();y(b(T)?T:g)},M=function(T){N[T]=undefined;try{delete N[T]}catch(S){}},O=w=="E"?"X":"E";if(!b(P)){P=N;N=P.getParentNode()}P.open();N[w]=function(S){A=1;n&&(h[p]={s:S});e(function(){K();B(S)})};N[O]=function(S){(!S||S=="complete")&&!A++&&e(R)};s.abort=K=function(){clearTimeout(Q);P.open();M(O);M(w);P.write(f);P.close();J.remove()};P.write(['<html><head><script src="',p,'" onload="',O,'()" onreadystatechange="',O,'(this.readyState)"><\/script></head><body onload="',O,'()"></body></html>'].join(f));P.close();x>0&&(Q=setTimeout(function(){!A&&R(f,"timeout")},x))});return s};j.setup=function(n){d.extend(c,n)};d.jsonp=j})(jQuery);
\ No newline at end of file
diff --git a/lib/jquery.jsonp-2.4.min.js b/lib/jquery.jsonp-2.4.min.js
new file mode 100644
index 000000000..e7c6f5734
--- /dev/null
+++ b/lib/jquery.jsonp-2.4.min.js
@@ -0,0 +1,3 @@
+// jquery.jsonp 2.4.0 (c)2012 Julian Aubourg | MIT License
+// https://github.com/jaubourg/jquery-jsonp
+(function(e){function t(){}function n(e){C=[e]}function r(e,t,n){return e&&e.apply&&e.apply(t.context||t,n)}function i(e){return/\?/.test(e)?"&":"?"}function O(c){function Y(e){z++||(W(),j&&(T[I]={s:[e]}),D&&(e=D.apply(c,[e])),r(O,c,[e,b,c]),r(_,c,[c,b]))}function Z(e){z++||(W(),j&&e!=w&&(T[I]=e),r(M,c,[c,e]),r(_,c,[c,e]))}c=e.extend({},k,c);var O=c.success,M=c.error,_=c.complete,D=c.dataFilter,P=c.callbackParameter,H=c.callback,B=c.cache,j=c.pageCache,F=c.charset,I=c.url,q=c.data,R=c.timeout,U,z=0,W=t,X,V,J,K,Q,G;return S&&S(function(e){e.done(O).fail(M),O=e.resolve,M=e.reject}).promise(c),c.abort=function(){!(z++)&&W()},r(c.beforeSend,c,[c])===!1||z?c:(I=I||u,q=q?typeof q=="string"?q:e.param(q,c.traditional):u,I+=q?i(I)+q:u,P&&(I+=i(I)+encodeURIComponent(P)+"=?"),!B&&!j&&(I+=i(I)+"_"+(new Date).getTime()+"="),I=I.replace(/=\?(&|$)/,"="+H+"$1"),j&&(U=T[I])?U.s?Y(U.s[0]):Z(U):(E[H]=n,K=e(y)[0],K.id=l+N++,F&&(K[o]=F),L&&L.version()<11.6?(Q=e(y)[0]).text="document.getElementById('"+K.id+"')."+p+"()":K[s]=s,A&&(K.htmlFor=K.id,K.event=h),K[d]=K[p]=K[v]=function(e){if(!K[m]||!/i/.test(K[m])){try{K[h]&&K[h]()}catch(t){}e=C,C=0,e?Y(e[0]):Z(a)}},K.src=I,W=function(e){G&&clearTimeout(G),K[v]=K[d]=K[p]=null,x[g](K),Q&&x[g](Q)},x[f](K,J=x.firstChild),Q&&x[f](Q,J),G=R>0&&setTimeout(function(){Z(w)},R)),c)}var s="async",o="charset",u="",a="error",f="insertBefore",l="_jqjsp",c="on",h=c+"click",p=c+a,d=c+"load",v=c+"readystatechange",m="readyState",g="removeChild",y="<script>",b="success",w="timeout",E=window,S=e.Deferred,x=e("head")[0]||document.documentElement,T={},N=0,C,k={callback:l,url:location.href},L=E.opera,A=!!e("<div>").html("<!--[if IE]><i><![endif]-->").find("i").length;O.setup=function(t){e.extend(k,t)},e.jsonp=O})(jQuery)
\ No newline at end of file
diff --git a/plugins/slick.autotooltips.js b/plugins/slick.autotooltips.js
index a9cea49f9..955684f2a 100644
--- a/plugins/slick.autotooltips.js
+++ b/plugins/slick.autotooltips.js
@@ -1,45 +1,80 @@
 (function ($) {
-  // register namespace
+  // Register namespace
   $.extend(true, window, {
     "Slick": {
       "AutoTooltips": AutoTooltips
     }
   });
 
-
+  /**
+   * AutoTooltips plugin to show/hide tooltips when columns are too narrow to fit content.
+   * @constructor
+   * @param {boolean} [options.enableForCells=true]        - Enable tooltip for grid cells
+   * @param {boolean} [options.enableForHeaderCells=false] - Enable tooltip for header cells
+   * @param {number}  [options.maxToolTipLength=null]      - The maximum length for a tooltip
+   */
   function AutoTooltips(options) {
     var _grid;
     var _self = this;
     var _defaults = {
+      enableForCells: true,
+      enableForHeaderCells: false,
       maxToolTipLength: null
     };
-
+    
+    /**
+     * Initialize plugin.
+     */
     function init(grid) {
       options = $.extend(true, {}, _defaults, options);
       _grid = grid;
-      _grid.onMouseEnter.subscribe(handleMouseEnter);
+      if (options.enableForCells) _grid.onMouseEnter.subscribe(handleMouseEnter);
+      if (options.enableForHeaderCells) _grid.onHeaderMouseEnter.subscribe(handleHeaderMouseEnter);
     }
-
+    
+    /**
+     * Destroy plugin.
+     */
     function destroy() {
-      _grid.onMouseEnter.unsubscribe(handleMouseEnter);
+      if (options.enableForCells) _grid.onMouseEnter.unsubscribe(handleMouseEnter);
+      if (options.enableForHeaderCells) _grid.onHeaderMouseEnter.unsubscribe(handleHeaderMouseEnter);
     }
-
-    function handleMouseEnter(e, args) {
+    
+    /**
+     * Handle mouse entering grid cell to add/remove tooltip.
+     * @param {jQuery.Event} e - The event
+     */
+    function handleMouseEnter(e) {
       var cell = _grid.getCellFromEvent(e);
       if (cell) {
-        var node = _grid.getCellNode(cell.row, cell.cell);
-        if ($(node).innerWidth() < node.scrollWidth) {
-          var text = $.trim($(node).text());
+        var $node = $(_grid.getCellNode(cell.row, cell.cell));
+        var text;
+        if ($node.innerWidth() < $node[0].scrollWidth) {
+          text = $.trim($node.text());
           if (options.maxToolTipLength && text.length > options.maxToolTipLength) {
             text = text.substr(0, options.maxToolTipLength - 3) + "...";
           }
-          $(node).attr("title", text);
         } else {
-          $(node).attr("title", "");
+          text = "";
         }
+        $node.attr("title", text);
       }
     }
-
+    
+    /**
+     * Handle mouse entering header cell to add/remove tooltip.
+     * @param {jQuery.Event} e     - The event
+     * @param {object} args.column - The column definition
+     */
+    function handleHeaderMouseEnter(e, args) {
+      var column = args.column,
+          $node = $(e.target).closest(".slick-header-column");
+      if (!column.toolTip) {
+        $node.attr("title", ($node.innerWidth() < $node[0].scrollWidth) ? column.name : "");
+      }
+    }
+    
+    // Public API
     $.extend(this, {
       "init": init,
       "destroy": destroy
diff --git a/plugins/slick.cellrangedecorator.js b/plugins/slick.cellrangedecorator.js
index a511a59d6..0cbe71d48 100644
--- a/plugins/slick.cellrangedecorator.js
+++ b/plugins/slick.cellrangedecorator.js
@@ -20,6 +20,7 @@
   function CellRangeDecorator(grid, options) {
     var _elem;
     var _defaults = {
+      selectionCssClass: 'slick-range-decorator',
       selectionCss: {
         "zIndex": "9999",
         "border": "2px dashed red"
@@ -32,6 +33,7 @@
     function show(range) {
       if (!_elem) {
         _elem = $("<div></div>", {css: options.selectionCss})
+            .addClass(options.selectionCssClass)
             .css("position", "absolute")
             .appendTo(grid.getCanvasNode());
       }
@@ -61,4 +63,4 @@
       "hide": hide
     });
   }
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/plugins/slick.cellrangeselector.js b/plugins/slick.cellrangeselector.js
index 76af7feeb..520b17f3c 100644
--- a/plugins/slick.cellrangeselector.js
+++ b/plugins/slick.cellrangeselector.js
@@ -54,6 +54,8 @@
         return;
       }
 
+      _grid.focus();
+
       var start = _grid.getCellFromPoint(
           dd.startX - $(_canvas).offset().left,
           dd.startY - $(_canvas).offset().top);
diff --git a/plugins/slick.cellselectionmodel.js b/plugins/slick.cellselectionmodel.js
index fa91d3cee..74bc3eb70 100644
--- a/plugins/slick.cellselectionmodel.js
+++ b/plugins/slick.cellselectionmodel.js
@@ -28,6 +28,7 @@
       _grid = grid;
       _canvas = _grid.getCanvasNode();
       _grid.onActiveCellChanged.subscribe(handleActiveCellChange);
+      _grid.onKeyDown.subscribe(handleKeyDown);
       grid.registerPlugin(_selector);
       _selector.onCellRangeSelected.subscribe(handleCellRangeSelected);
       _selector.onBeforeCellRangeSelected.subscribe(handleBeforeCellRangeSelected);
@@ -35,6 +36,7 @@
 
     function destroy() {
       _grid.onActiveCellChanged.unsubscribe(handleActiveCellChange);
+      _grid.onKeyDown.unsubscribe(handleKeyDown);
       _selector.onCellRangeSelected.unsubscribe(handleCellRangeSelected);
       _selector.onBeforeCellRangeSelected.unsubscribe(handleBeforeCellRangeSelected);
       _grid.unregisterPlugin(_selector);
@@ -74,10 +76,70 @@
     }
 
     function handleActiveCellChange(e, args) {
-      if (_options.selectActiveCell) {
+      if (_options.selectActiveCell && args.row != null && args.cell != null) {
         setSelectedRanges([new Slick.Range(args.row, args.cell)]);
       }
     }
+    
+    function handleKeyDown(e) {
+      /***
+       * Кey codes
+       * 37 left
+       * 38 up
+       * 39 right
+       * 40 down                     
+       */                                         
+      var ranges, last;
+      var active = _grid.getActiveCell(); 
+
+      if ( active && e.shiftKey && !e.ctrlKey && !e.altKey && 
+          (e.which == 37 || e.which == 39 || e.which == 38 || e.which == 40) ) {
+      
+        ranges = getSelectedRanges();
+        if (!ranges.length)
+         ranges.push(new Slick.Range(active.row, active.cell));
+         
+        // keyboard can work with last range only          
+        last = ranges.pop();
+        
+        // can't handle selection out of active cell
+        if (!last.contains(active.row, active.cell))
+          last = new Slick.Range(active.row, active.cell);
+        
+        var dRow = last.toRow - last.fromRow,
+            dCell = last.toCell - last.fromCell,
+            // walking direction
+            dirRow = active.row == last.fromRow ? 1 : -1,
+            dirCell = active.cell == last.fromCell ? 1 : -1;
+                 
+        if (e.which == 37) {
+          dCell -= dirCell; 
+        } else if (e.which == 39) {
+          dCell += dirCell ; 
+        } else if (e.which == 38) {
+          dRow -= dirRow; 
+        } else if (e.which == 40) {
+          dRow += dirRow; 
+        }
+        
+        // define new selection range 
+        var new_last = new Slick.Range(active.row, active.cell, active.row + dirRow*dRow, active.cell + dirCell*dCell);
+        if (removeInvalidRanges([new_last]).length) {
+          ranges.push(new_last);
+          var viewRow = dirRow > 0 ? new_last.toRow : new_last.fromRow;
+          var viewCell = dirCell > 0 ? new_last.toCell : new_last.fromCell;
+         _grid.scrollRowIntoView(viewRow);
+         _grid.scrollCellIntoView(viewRow, viewCell);
+        }
+        else 
+          ranges.push(last);
+
+        setSelectedRanges(ranges);  
+       
+        e.preventDefault();
+        e.stopPropagation();        
+      }           
+    }
 
     $.extend(this, {
       "getSelectedRanges": getSelectedRanges,
@@ -89,4 +151,4 @@
       "onSelectedRangesChanged": new Slick.Event()
     });
   }
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/plugins/slick.headerbuttons.css b/plugins/slick.headerbuttons.css
index 9bd05cdc8..0ba79ea0d 100644
--- a/plugins/slick.headerbuttons.css
+++ b/plugins/slick.headerbuttons.css
@@ -1,4 +1,5 @@
-.slick-column-name {
+.slick-column-name,
+.slick-sort-indicator {
   /**
    * This makes all "float:right" elements after it that spill over to the next line
    * display way below the lower boundary of the column thus hiding them.
diff --git a/plugins/slick.headermenu.css b/plugins/slick.headermenu.css
index e20aeedac..8b0b6a9f7 100644
--- a/plugins/slick.headermenu.css
+++ b/plugins/slick.headermenu.css
@@ -7,6 +7,7 @@
   width: 14px;
   background-repeat: no-repeat;
   background-position: left center;
+  background-image: url(../images/down.gif);
   cursor: pointer;
 
   display: none;
diff --git a/plugins/slick.headermenu.js b/plugins/slick.headermenu.js
index bc63a388b..ec8244daa 100644
--- a/plugins/slick.headermenu.js
+++ b/plugins/slick.headermenu.js
@@ -83,7 +83,7 @@
     var _handler = new Slick.EventHandler();
     var _defaults = {
       buttonCssClass: null,
-      buttonImage: "../images/down.gif"
+      buttonImage: null
     };
     var $menu;
     var $activeHeaderColumn;
@@ -182,7 +182,7 @@
 
       if (!$menu) {
         $menu = $("<div class='slick-header-menu'></div>")
-          .appendTo(document.body);
+          .appendTo(_grid.getContainerNode());
       }
       $menu.empty();
 
@@ -225,14 +225,17 @@
 
       // Position the menu.
       $menu
-        .css("top", $(this).offset().top + $(this).height())
-        .css("left", $(this).offset().left);
+        .offset({ top: $(this).offset().top + $(this).height(), left: $(this).offset().left });
 
 
       // Mark the header as active to keep the highlighting.
       $activeHeaderColumn = $menuButton.closest(".slick-header-column");
       $activeHeaderColumn
         .addClass("slick-header-column-active");
+
+      // Stop propagation so that it doesn't register as a header click event.
+      e.preventDefault();
+      e.stopPropagation();
     }
 
 
@@ -269,4 +272,4 @@
       "onCommand": new Slick.Event()
     });
   }
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/plugins/slick.rowselectionmodel.js b/plugins/slick.rowselectionmodel.js
index fbf846801..0de8dd3a4 100644
--- a/plugins/slick.rowselectionmodel.js
+++ b/plugins/slick.rowselectionmodel.js
@@ -90,7 +90,7 @@
     }
 
     function handleActiveCellChange(e, data) {
-      if (_options.selectActiveRow) {
+      if (_options.selectActiveRow && data.row != null) {
         setSelectedRanges([new Slick.Range(data.row, 0, data.row, _grid.getColumns().length - 1)]);
       }
     }
@@ -134,34 +134,34 @@
         return false;
       }
 
+      if (!_grid.getOptions().multiSelect || (
+          !e.ctrlKey && !e.shiftKey && !e.metaKey)) {
+        return false;
+      }
+
       var selection = rangesToRows(_ranges);
       var idx = $.inArray(cell.row, selection);
 
-      if (!e.ctrlKey && !e.shiftKey && !e.metaKey) {
-        return false;
-      }
-      else if (_grid.getOptions().multiSelect) {
-        if (idx === -1 && (e.ctrlKey || e.metaKey)) {
-          selection.push(cell.row);
-          _grid.setActiveCell(cell.row, cell.cell);
-        } else if (idx !== -1 && (e.ctrlKey || e.metaKey)) {
-          selection = $.grep(selection, function (o, i) {
-            return (o !== cell.row);
-          });
-          _grid.setActiveCell(cell.row, cell.cell);
-        } else if (selection.length && e.shiftKey) {
-          var last = selection.pop();
-          var from = Math.min(cell.row, last);
-          var to = Math.max(cell.row, last);
-          selection = [];
-          for (var i = from; i <= to; i++) {
-            if (i !== last) {
-              selection.push(i);
-            }
+      if (idx === -1 && (e.ctrlKey || e.metaKey)) {
+        selection.push(cell.row);
+        _grid.setActiveCell(cell.row, cell.cell);
+      } else if (idx !== -1 && (e.ctrlKey || e.metaKey)) {
+        selection = $.grep(selection, function (o, i) {
+          return (o !== cell.row);
+        });
+        _grid.setActiveCell(cell.row, cell.cell);
+      } else if (selection.length && e.shiftKey) {
+        var last = selection.pop();
+        var from = Math.min(cell.row, last);
+        var to = Math.max(cell.row, last);
+        selection = [];
+        for (var i = from; i <= to; i++) {
+          if (i !== last) {
+            selection.push(i);
           }
-          selection.push(last);
-          _grid.setActiveCell(cell.row, cell.cell);
         }
+        selection.push(last);
+        _grid.setActiveCell(cell.row, cell.cell);
       }
 
       _ranges = rowsToRanges(selection);
diff --git a/examples/slick-default-theme.css b/slick-default-theme.css
similarity index 66%
rename from examples/slick-default-theme.css
rename to slick-default-theme.css
index 67cb04b53..efc741543 100644
--- a/examples/slick-default-theme.css
+++ b/slick-default-theme.css
@@ -6,17 +6,17 @@ classes should alter those!
 */
 
 .slick-header-columns {
-  background: url('../images/header-columns-bg.gif') repeat-x center bottom;
+  background: url('images/header-columns-bg.gif') repeat-x center bottom;
   border-bottom: 1px solid silver;
 }
 
 .slick-header-column {
-  background: url('../images/header-columns-bg.gif') repeat-x center bottom;
+  background: url('images/header-columns-bg.gif') repeat-x center bottom;
   border-right: 1px solid silver;
 }
 
 .slick-header-column:hover, .slick-header-column-active {
-  background: white url('../images/header-columns-over-bg.gif') repeat-x center bottom;
+  background: white url('images/header-columns-over-bg.gif') repeat-x center bottom;
 }
 
 .slick-headerrow {
@@ -61,11 +61,11 @@ classes should alter those!
 }
 
 .slick-group-toggle.expanded {
-  background: url(../images/collapse.gif) no-repeat center center;
+  background: url(images/collapse.gif) no-repeat center center;
 }
 
 .slick-group-toggle.collapsed {
-  background: url(../images/expand.gif) no-repeat center center;
+  background: url(images/expand.gif) no-repeat center center;
 }
 
 .slick-group-totals {
@@ -101,4 +101,18 @@ classes should alter those!
 
 .slick-cell.invalid {
   border-color: red;
+  -moz-animation-duration: 0.2s;
+  -webkit-animation-duration: 0.2s;
+  -moz-animation-name: slickgrid-invalid-hilite;
+  -webkit-animation-name: slickgrid-invalid-hilite;  
+}
+
+@-moz-keyframes slickgrid-invalid-hilite {
+  from { box-shadow: 0 0 6px red; }
+  to { box-shadow: none; }
+}
+
+@-webkit-keyframes slickgrid-invalid-hilite {
+  from { box-shadow: 0 0 6px red; }
+  to { box-shadow: none; }
 }
\ No newline at end of file
diff --git a/slick.core.js b/slick.core.js
index 9a6d75935..2f097b1db 100644
--- a/slick.core.js
+++ b/slick.core.js
@@ -271,7 +271,13 @@
    */
   function Group() {
     this.__group = true;
-    this.__updated = false;
+
+    /**
+     * Grouping level, starting with 0.
+     * @property level
+     * @type {Number}
+     */
+    this.level = 0;
 
     /***
      * Number of rows in the group.
@@ -307,6 +313,28 @@
      * @type {GroupTotals}
      */
     this.totals = null;
+
+    /**
+     * Rows that are part of the group.
+     * @property rows
+     * @type {Array}
+     */
+    this.rows = [];
+
+    /**
+     * Sub-groups that are part of the group.
+     * @property groups
+     * @type {Array}
+     */
+    this.groups = null;
+
+    /**
+     * A unique key used to identify the group.  This key can be used in calls to DataView
+     * collapseGroup() or expandGroup().
+     * @property groupingKey
+     * @type {Object}
+     */
+    this.groupingKey = null;
   }
 
   Group.prototype = new NonDataItem();
@@ -320,7 +348,8 @@
   Group.prototype.equals = function (group) {
     return this.value === group.value &&
         this.count === group.count &&
-        this.collapsed === group.collapsed;
+        this.collapsed === group.collapsed &&
+        this.title === group.title;
   };
 
   /***
@@ -341,6 +370,14 @@
      * @type {Group}
      */
     this.group = null;
+
+    /***
+     * Whether the totals have been fully initialized / calculated.
+     * Will be set to false for lazy-calculated group totals.
+     * @param initialized
+     * @type {Boolean}
+     */
+    this.initialized = false;
   }
 
   GroupTotals.prototype = new NonDataItem();
diff --git a/slick.dataview.js b/slick.dataview.js
index 29a6205ec..f1c1b5e34 100644
--- a/slick.dataview.js
+++ b/slick.dataview.js
@@ -50,15 +50,23 @@
     var filterCache = [];
 
     // grouping
-    var groupingGetter;
-    var groupingGetterIsAFn;
-    var groupingFormatter;
-    var groupingComparer;
+    var groupingInfoDefaults = {
+      getter: null,
+      formatter: null,
+      comparer: function(a, b) { return a.value - b.value; },
+      predefinedValues: [],
+      aggregators: [],
+      aggregateEmpty: false,
+      aggregateCollapsed: false,
+      aggregateChildGroups: false,
+      collapsed: false,
+      displayTotalsRow: true,
+      lazyTotalsCalculation: false
+    };
+    var groupingInfos = [];
     var groups = [];
-    var collapsedGroups = {};
-    var aggregators;
-    var aggregateCollapsed = false;
-    var compiledAccumulators;
+    var toggledGroupsByLevel = [];
+    var groupingDelimiter = ':|:';
 
     var pagesize = 0;
     var pagenum = 0;
@@ -207,33 +215,65 @@
       refresh();
     }
 
-    function groupBy(valueGetter, valueFormatter, sortComparer) {
+    function getGrouping() {
+      return groupingInfos;
+    }
+
+    function setGrouping(groupingInfo) {
       if (!options.groupItemMetadataProvider) {
         options.groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
       }
 
-      groupingGetter = valueGetter;
-      groupingGetterIsAFn = typeof groupingGetter === "function";
-      groupingFormatter = valueFormatter;
-      groupingComparer = sortComparer;
-      collapsedGroups = {};
       groups = [];
+      toggledGroupsByLevel = [];
+      groupingInfo = groupingInfo || [];
+      groupingInfos = (groupingInfo instanceof Array) ? groupingInfo : [groupingInfo];
+
+      for (var i = 0; i < groupingInfos.length; i++) {
+        var gi = groupingInfos[i] = $.extend(true, {}, groupingInfoDefaults, groupingInfos[i]);
+        gi.getterIsAFn = typeof gi.getter === "function";
+
+        // pre-compile accumulator loops
+        gi.compiledAccumulators = [];
+        var idx = gi.aggregators.length;
+        while (idx--) {
+          gi.compiledAccumulators[idx] = compileAccumulatorLoop(gi.aggregators[idx]);
+        }
+
+        toggledGroupsByLevel[i] = {};
+      }
+
       refresh();
     }
 
-    function setAggregators(groupAggregators, includeCollapsed) {
-      aggregators = groupAggregators;
-      aggregateCollapsed = (includeCollapsed !== undefined)
-          ? includeCollapsed : aggregateCollapsed;
+    /**
+     * @deprecated Please use {@link setGrouping}.
+     */
+    function groupBy(valueGetter, valueFormatter, sortComparer) {
+      if (valueGetter == null) {
+        setGrouping([]);
+        return;
+      }
 
-      // pre-compile accumulator loops
-      compiledAccumulators = [];
-      var idx = aggregators.length;
-      while (idx--) {
-        compiledAccumulators[idx] = compileAccumulatorLoop(aggregators[idx]);
+      setGrouping({
+        getter: valueGetter,
+        formatter: valueFormatter,
+        comparer: sortComparer
+      });
+    }
+
+    /**
+     * @deprecated Please use {@link setGrouping}.
+     */
+    function setAggregators(groupAggregators, includeCollapsed) {
+      if (!groupingInfos.length) {
+        throw new Error("At least one grouping must be specified before calling setAggregators().");
       }
 
-      refresh();
+      groupingInfos[0].aggregators = groupAggregators;
+      groupingInfos[0].aggregateCollapsed = includeCollapsed;
+
+      setGrouping(groupingInfos);
     }
 
     function getItemByIdx(i) {
@@ -265,7 +305,7 @@
     function mapIdsToRows(idArray) {
       var rows = [];
       ensureRowsByIdCache();
-      for (var i = 0; i < idArray.length; i++) {
+      for (var i = 0, l = idArray.length; i < l; i++) {
         var row = rowsById[idArray[i]];
         if (row != null) {
           rows[rows.length] = row;
@@ -276,7 +316,7 @@
 
     function mapRowsToIds(rowArray) {
       var ids = [];
-      for (var i = 0; i < rowArray.length; i++) {
+      for (var i = 0, l = rowArray.length; i < l; i++) {
         if (rowArray[i] < rows.length) {
           ids[ids.length] = rows[rowArray[i]][idProperty];
         }
@@ -324,7 +364,22 @@
     }
 
     function getItem(i) {
-      return rows[i];
+      var item = rows[i];
+
+      // if this is a group row, make sure totals are calculated and update the title
+      if (item && item.__group && item.totals && !item.totals.initialized) {
+        var gi = groupingInfos[item.level];
+        if (!gi.displayTotalsRow) {
+          calculateTotals(item.totals);
+          item.title = gi.formatter ? gi.formatter(item) : item.value;
+        }
+      }
+      // if this is a totals row, make sure it's calculated
+      else if (item && item.__groupTotals && !item.initialized) {
+        calculateTotals(item);
+      }
+
+      return item;
     }
 
     function getItemMetadata(i) {
@@ -333,7 +388,7 @@
         return null;
       }
 
-      // overrides for group rows
+      // overrides for grouping rows
       if (item.__group) {
         return options.groupItemMetadataProvider.getGroupRowMetadata(item);
       }
@@ -346,37 +401,105 @@
       return null;
     }
 
-    function collapseGroup(groupingValue) {
-      collapsedGroups[groupingValue] = true;
+    function expandCollapseAllGroups(level, collapse) {
+      if (level == null) {
+        for (var i = 0; i < groupingInfos.length; i++) {
+          toggledGroupsByLevel[i] = {};
+          groupingInfos[i].collapsed = collapse;
+        }
+      } else {
+        toggledGroupsByLevel[level] = {};
+        groupingInfos[level].collapsed = collapse;
+      }
       refresh();
     }
 
-    function expandGroup(groupingValue) {
-      delete collapsedGroups[groupingValue];
+    /**
+     * @param level {Number} Optional level to collapse.  If not specified, applies to all levels.
+     */
+    function collapseAllGroups(level) {
+      expandCollapseAllGroups(level, true);
+    }
+
+    /**
+     * @param level {Number} Optional level to expand.  If not specified, applies to all levels.
+     */
+    function expandAllGroups(level) {
+      expandCollapseAllGroups(level, false);
+    }
+
+    function expandCollapseGroup(level, groupingKey, collapse) {
+      toggledGroupsByLevel[level][groupingKey] = groupingInfos[level].collapsed ^ collapse;
       refresh();
     }
 
+    /**
+     * @param varArgs Either a Slick.Group's "groupingKey" property, or a
+     *     variable argument list of grouping values denoting a unique path to the row.  For
+     *     example, calling collapseGroup('high', '10%') will collapse the '10%' subgroup of
+     *     the 'high' group.
+     */
+    function collapseGroup(varArgs) {
+      var args = Array.prototype.slice.call(arguments);
+      var arg0 = args[0];
+      if (args.length == 1 && arg0.indexOf(groupingDelimiter) != -1) {
+        expandCollapseGroup(arg0.split(groupingDelimiter).length - 1, arg0, true);
+      } else {
+        expandCollapseGroup(args.length - 1, args.join(groupingDelimiter), true);
+      }
+    }
+
+    /**
+     * @param varArgs Either a Slick.Group's "groupingKey" property, or a
+     *     variable argument list of grouping values denoting a unique path to the row.  For
+     *     example, calling expandGroup('high', '10%') will expand the '10%' subgroup of
+     *     the 'high' group.
+     */
+    function expandGroup(varArgs) {
+      var args = Array.prototype.slice.call(arguments);
+      var arg0 = args[0];
+      if (args.length == 1 && arg0.indexOf(groupingDelimiter) != -1) {
+        expandCollapseGroup(arg0.split(groupingDelimiter).length - 1, arg0, false);
+      } else {
+        expandCollapseGroup(args.length - 1, args.join(groupingDelimiter), false);
+      }
+    }
+
     function getGroups() {
       return groups;
     }
 
-    function extractGroups(rows) {
+    function extractGroups(rows, parentGroup) {
       var group;
       var val;
       var groups = [];
-      var groupsByVal = [];
+      var groupsByVal = {};
       var r;
+      var level = parentGroup ? parentGroup.level + 1 : 0;
+      var gi = groupingInfos[level];
+
+      for (var i = 0, l = gi.predefinedValues.length; i < l; i++) {
+        val = gi.predefinedValues[i];
+        group = groupsByVal[val];
+        if (!group) {
+          group = new Slick.Group();
+          group.value = val;
+          group.level = level;
+          group.groupingKey = (parentGroup ? parentGroup.groupingKey + groupingDelimiter : '') + val;
+          groups[groups.length] = group;
+          groupsByVal[val] = group;
+        }
+      }
 
       for (var i = 0, l = rows.length; i < l; i++) {
         r = rows[i];
-        val = (groupingGetterIsAFn) ? groupingGetter(r) : r[groupingGetter];
-        val = val || 0;
+        val = gi.getterIsAFn ? gi.getter(r) : r[gi.getter];
         group = groupsByVal[val];
         if (!group) {
           group = new Slick.Group();
-          group.count = 0;
           group.value = val;
-          group.rows = [];
+          group.level = level;
+          group.groupingKey = (parentGroup ? parentGroup.groupingKey + groupingDelimiter : '') + val;
           groups[groups.length] = group;
           groupsByVal[val] = group;
         }
@@ -384,57 +507,101 @@
         group.rows[group.count++] = r;
       }
 
+      if (level < groupingInfos.length - 1) {
+        for (var i = 0; i < groups.length; i++) {
+          group = groups[i];
+          group.groups = extractGroups(group.rows, group);
+        }
+      }      
+
+      groups.sort(groupingInfos[level].comparer);
+
       return groups;
     }
 
-    // TODO:  lazy totals calculation
-    function calculateGroupTotals(group) {
-      if (group.collapsed && !aggregateCollapsed) {
-        return;
+    function calculateTotals(totals) {
+      var group = totals.group;
+      var gi = groupingInfos[group.level];
+      var isLeafLevel = (group.level == groupingInfos.length);
+      var agg, idx = gi.aggregators.length;
+
+      if (!isLeafLevel && gi.aggregateChildGroups) {
+        // make sure all the subgroups are calculated
+        var i = group.groups.length;
+        while (i--) {
+          if (!group.groups[i].initialized) {
+            calculateTotals(group.groups[i]);
+          }
+        }
       }
 
-      // TODO:  try moving iterating over groups into compiled accumulator
-      var totals = new Slick.GroupTotals();
-      var agg, idx = aggregators.length;
       while (idx--) {
-        agg = aggregators[idx];
+        agg = gi.aggregators[idx];
         agg.init();
-        compiledAccumulators[idx].call(agg, group.rows);
+        if (!isLeafLevel && gi.aggregateChildGroups) {
+          gi.compiledAccumulators[idx].call(agg, group.groups);
+        } else {
+          gi.compiledAccumulators[idx].call(agg, group.rows);
+        }
         agg.storeResult(totals);
       }
-      totals.group = group;
-      group.totals = totals;
+      totals.initialized = true;
     }
 
-    function calculateTotals(groups) {
-      var idx = groups.length;
-      while (idx--) {
-        calculateGroupTotals(groups[idx]);
+    function addGroupTotals(group) {
+      var gi = groupingInfos[group.level];
+      var totals = new Slick.GroupTotals();
+      totals.group = group;
+      group.totals = totals;
+      if (!gi.lazyTotalsCalculation) {
+        calculateTotals(totals);
       }
     }
 
-    function finalizeGroups(groups) {
+    function addTotals(groups, level) {
+      level = level || 0;
+      var gi = groupingInfos[level];
+      var groupCollapsed = gi.collapsed;
+      var toggledGroups = toggledGroupsByLevel[level];      
       var idx = groups.length, g;
       while (idx--) {
         g = groups[idx];
-        g.collapsed = (g.value in collapsedGroups);
-        g.title = groupingFormatter ? groupingFormatter(g) : g.value;
+
+        if (g.collapsed && !gi.aggregateCollapsed) {
+          continue;
+        }
+
+        // Do a depth-first aggregation so that parent group aggregators can access subgroup totals.
+        if (g.groups) {
+          addTotals(g.groups, level + 1);
+        }
+
+        if (gi.aggregators.length && (
+            gi.aggregateEmpty || g.rows.length || (g.groups && g.groups.length))) {
+          addGroupTotals(g);
+        }
+
+        g.collapsed = groupCollapsed ^ toggledGroups[g.groupingKey];
+        g.title = gi.formatter ? gi.formatter(g) : g.value;
       }
-    }
+    } 
 
-    function flattenGroupedRows(groups) {
-      var groupedRows = [], gl = 0, g;
+    function flattenGroupedRows(groups, level) {
+      level = level || 0;
+      var gi = groupingInfos[level];
+      var groupedRows = [], rows, gl = 0, g;
       for (var i = 0, l = groups.length; i < l; i++) {
         g = groups[i];
         groupedRows[gl++] = g;
 
         if (!g.collapsed) {
-          for (var j = 0, jj = g.rows.length; j < jj; j++) {
-            groupedRows[gl++] = g.rows[j];
+          rows = g.groups ? flattenGroupedRows(g.groups, level + 1) : g.rows;
+          for (var j = 0, jj = rows.length; j < jj; j++) {
+            groupedRows[gl++] = rows[j];
           }
         }
 
-        if (g.totals && (!g.collapsed || aggregateCollapsed)) {
+        if (g.totals && gi.displayTotalsRow && (!g.collapsed || gi.aggregateCollapsed)) {
           groupedRows[gl++] = g.totals;
         }
       }
@@ -457,7 +624,7 @@
           "for (var " + accumulatorInfo.params[0] + ", _i=0, _il=_items.length; _i<_il; _i++) {" +
               accumulatorInfo.params[0] + " = _items[_i]; " +
               accumulatorInfo.body +
-              "}"
+          "}"
       );
       fn.displayName = fn.name = "compiledAccumulatorLoop";
       return fn;
@@ -467,10 +634,10 @@
       var filterInfo = getFunctionInfo(filter);
 
       var filterBody = filterInfo.body
-          .replace(/return false[;}]/gi, "{ continue _coreloop; }")
-          .replace(/return true[;}]/gi, "{ _retval[_idx++] = $item$; continue _coreloop; }")
-          .replace(/return ([^;}]+?);/gi,
-          "{ if ($1) { _retval[_idx++] = $item$; }; continue _coreloop; }");
+          .replace(/return false\s*([;}]|$)/gi, "{ continue _coreloop; }$1")
+          .replace(/return true\s*([;}]|$)/gi, "{ _retval[_idx++] = $item$; continue _coreloop; }$1")
+          .replace(/return ([^;}]+?)\s*([;}]|$)/gi,
+          "{ if ($1) { _retval[_idx++] = $item$; }; continue _coreloop; }$2");
 
       // This preserves the function template code after JS compression,
       // so that replace() commands still work as expected.
@@ -499,10 +666,10 @@
       var filterInfo = getFunctionInfo(filter);
 
       var filterBody = filterInfo.body
-          .replace(/return false[;}]/gi, "{ continue _coreloop; }")
-          .replace(/return true[;}]/gi, "{ _cache[_i] = true;_retval[_idx++] = $item$; continue _coreloop; }")
-          .replace(/return ([^;}]+?);/gi,
-          "{ if ((_cache[_i] = $1)) { _retval[_idx++] = $item$; }; continue _coreloop; }");
+          .replace(/return false\s*([;}]|$)/gi, "{ continue _coreloop; }$1")
+          .replace(/return true\s*([;}]|$)/gi, "{ _cache[_i] = true;_retval[_idx++] = $item$; continue _coreloop; }$1")
+          .replace(/return ([^;}]+?)\s*([;}]|$)/gi,
+          "{ if ((_cache[_i] = $1)) { _retval[_idx++] = $item$; }; continue _coreloop; }$2");
 
       // This preserves the function template code after JS compression,
       // so that replace() commands still work as expected.
@@ -613,11 +780,10 @@
           item = newRows[i];
           r = rows[i];
 
-          if ((groupingGetter && (eitherIsNonData = (item.__nonDataRow) || (r.__nonDataRow)) &&
+          if ((groupingInfos.length && (eitherIsNonData = (item.__nonDataRow) || (r.__nonDataRow)) &&
               item.__group !== r.__group ||
-              item.__updated ||
               item.__group && !item.equals(r))
-              || (aggregators && eitherIsNonData &&
+              || (eitherIsNonData &&
               // no good way to compare totals since they are arbitrary DTOs
               // deep object comparison is pretty expensive
               // always considering them 'dirty' seems easier for the time being
@@ -645,14 +811,10 @@
       var newRows = filteredItems.rows;
 
       groups = [];
-      if (groupingGetter != null) {
+      if (groupingInfos.length) {
         groups = extractGroups(newRows);
         if (groups.length) {
-          finalizeGroups(groups);
-          if (aggregators) {
-            calculateTotals(groups);
-          }
-          groups.sort(groupingComparer);
+          addTotals(groups);
           newRows = flattenGroupedRows(groups);
         }
       }
@@ -696,27 +858,74 @@
       }
     }
 
-    function syncGridSelection(grid, preserveHidden) {
+    /***
+     * Wires the grid and the DataView together to keep row selection tied to item ids.
+     * This is useful since, without it, the grid only knows about rows, so if the items
+     * move around, the same rows stay selected instead of the selection moving along
+     * with the items.
+     *
+     * NOTE:  This doesn't work with cell selection model.
+     *
+     * @param grid {Slick.Grid} The grid to sync selection with.
+     * @param preserveHidden {Boolean} Whether to keep selected items that go out of the
+     *     view due to them getting filtered out.
+     * @param preserveHiddenOnSelectionChange {Boolean} Whether to keep selected items
+     *     that are currently out of the view (see preserveHidden) as selected when selection
+     *     changes.
+     * @return {Slick.Event} An event that notifies when an internal list of selected row ids
+     *     changes.  This is useful since, in combination with the above two options, it allows
+     *     access to the full list selected row ids, and not just the ones visible to the grid.
+     * @method syncGridSelection
+     */
+    function syncGridSelection(grid, preserveHidden, preserveHiddenOnSelectionChange) {
       var self = this;
-      var selectedRowIds = self.mapRowsToIds(grid.getSelectedRows());;
       var inHandler;
+      var selectedRowIds = self.mapRowsToIds(grid.getSelectedRows());
+      var onSelectedRowIdsChanged = new Slick.Event();
 
-      grid.onSelectedRowsChanged.subscribe(function(e, args) {
-        if (inHandler) { return; }
-        selectedRowIds = self.mapRowsToIds(grid.getSelectedRows());
-      });
+      function setSelectedRowIds(rowIds) {
+        if (selectedRowIds.join(",") == rowIds.join(",")) {
+          return;
+        }
+
+        selectedRowIds = rowIds;
+
+        onSelectedRowIdsChanged.notify({
+          "grid": grid,
+          "ids": selectedRowIds
+        }, new Slick.EventData(), self);
+      }
 
-      this.onRowsChanged.subscribe(function(e, args) {
+      function update() {
         if (selectedRowIds.length > 0) {
           inHandler = true;
           var selectedRows = self.mapIdsToRows(selectedRowIds);
           if (!preserveHidden) {
-            selectedRowIds = self.mapRowsToIds(selectedRows);
+            setSelectedRowIds(self.mapRowsToIds(selectedRows));       
           }
           grid.setSelectedRows(selectedRows);
           inHandler = false;
         }
+      }
+
+      grid.onSelectedRowsChanged.subscribe(function(e, args) {
+        if (inHandler) { return; }
+        var newSelectedRowIds = self.mapRowsToIds(grid.getSelectedRows());
+        if (!preserveHiddenOnSelectionChange || !grid.getOptions().multiSelect) {
+          setSelectedRowIds(newSelectedRowIds);
+        } else {
+          // keep the ones that are hidden
+          var existing = $.grep(selectedRowIds, function(id) { return self.getRowById(id) === undefined; });
+          // add the newly selected ones
+          setSelectedRowIds(existing.concat(newSelectedRowIds));
+        }
       });
+
+      this.onRowsChanged.subscribe(update);
+
+      this.onRowCountChanged.subscribe(update);
+
+      return onSelectedRowIdsChanged;
     }
 
     function syncGridCellCssStyles(grid, key) {
@@ -735,15 +944,7 @@
         }
       }
 
-      grid.onCellCssStylesChanged.subscribe(function(e, args) {
-        if (inHandler) { return; }
-        if (key != args.key) { return; }
-        if (args.hash) {
-          storeCellCssStyles(args.hash);
-        }
-      });
-
-      this.onRowsChanged.subscribe(function(e, args) {
+      function update() {
         if (hashById) {
           inHandler = true;
           ensureRowsByIdCache();
@@ -757,10 +958,22 @@
           grid.setCellCssStyles(key, newHash);
           inHandler = false;
         }
+      }
+
+      grid.onCellCssStylesChanged.subscribe(function(e, args) {
+        if (inHandler) { return; }
+        if (key != args.key) { return; }
+        if (args.hash) {
+          storeCellCssStyles(args.hash);
+        }
       });
+
+      this.onRowsChanged.subscribe(update);
+
+      this.onRowCountChanged.subscribe(update);
     }
 
-    return {
+    $.extend(this, {
       // methods
       "beginUpdate": beginUpdate,
       "endUpdate": endUpdate,
@@ -772,8 +985,12 @@
       "sort": sort,
       "fastSort": fastSort,
       "reSort": reSort,
+      "setGrouping": setGrouping,
+      "getGrouping": getGrouping,
       "groupBy": groupBy,
       "setAggregators": setAggregators,
+      "collapseAllGroups": collapseAllGroups,
+      "expandAllGroups": expandAllGroups,
       "collapseGroup": collapseGroup,
       "expandGroup": expandGroup,
       "getGroups": getGroups,
@@ -802,7 +1019,7 @@
       "onRowCountChanged": onRowCountChanged,
       "onRowsChanged": onRowsChanged,
       "onPagingInfoChanged": onPagingInfoChanged
-    };
+    });
   }
 
   function AvgAggregator(field) {
@@ -817,7 +1034,7 @@
     this.accumulate = function (item) {
       var val = item[this.field_];
       this.count_++;
-      if (val != null && val != "" && val != NaN) {
+      if (val != null && val !== "" && val !== NaN) {
         this.nonNullCount_++;
         this.sum_ += parseFloat(val);
       }
@@ -842,7 +1059,7 @@
 
     this.accumulate = function (item) {
       var val = item[this.field_];
-      if (val != null && val != "" && val != NaN) {
+      if (val != null && val !== "" && val !== NaN) {
         if (this.min_ == null || val < this.min_) {
           this.min_ = val;
         }
@@ -866,7 +1083,7 @@
 
     this.accumulate = function (item) {
       var val = item[this.field_];
-      if (val != null && val != "" && val != NaN) {
+      if (val != null && val !== "" && val !== NaN) {
         if (this.max_ == null || val > this.max_) {
           this.max_ = val;
         }
@@ -890,7 +1107,7 @@
 
     this.accumulate = function (item) {
       var val = item[this.field_];
-      if (val != null && val != "" && val != NaN) {
+      if (val != null && val !== "" && val !== NaN) {
         this.sum_ += parseFloat(val);
       }
     };
@@ -906,4 +1123,4 @@
   // TODO:  add more built-in aggregators
   // TODO:  merge common aggregators in one to prevent needles iterating
 
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/slick.editors.js b/slick.editors.js
index 0454450c0..04b20d2fa 100644
--- a/slick.editors.js
+++ b/slick.editors.js
@@ -302,16 +302,16 @@
     };
 
     this.loadValue = function (item) {
-      defaultValue = item[args.column.field];
+      defaultValue = !!item[args.column.field];
       if (defaultValue) {
-        $select.attr("checked", "checked");
+        $select.prop('checked', true);
       } else {
-        $select.removeAttr("checked");
+        $select.prop('checked', false);
       }
     };
 
     this.serializeValue = function () {
-      return $select.attr("checked");
+      return $select.prop('checked');
     };
 
     this.applyValue = function (item, state) {
@@ -319,7 +319,7 @@
     };
 
     this.isValueChanged = function () {
-      return ($select.attr("checked") != defaultValue);
+      return (this.serializeValue() !== defaultValue);
     };
 
     this.validate = function () {
diff --git a/slick.formatters.js b/slick.formatters.js
index ef56671a5..a31aaf931 100644
--- a/slick.formatters.js
+++ b/slick.formatters.js
@@ -1,5 +1,9 @@
 /***
  * Contains basic SlickGrid formatters.
+ * 
+ * NOTE:  These are merely examples.  You will most likely need to implement something more
+ *        robust/extensible/localizable/etc. for your use!
+ * 
  * @module Formatters
  * @namespace Slick
  */
@@ -52,4 +56,4 @@
   function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
     return value ? "<img src='../images/tick.png'>" : "";
   }
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/slick.grid.css b/slick.grid.css
index 526fb2983..6a416db1e 100644
--- a/slick.grid.css
+++ b/slick.grid.css
@@ -22,6 +22,7 @@ classes should alter those!
   position: relative;
   display: inline-block;
   overflow: hidden;
+  -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   height: 16px;
   line-height: 16px;
@@ -47,6 +48,8 @@ classes should alter those!
   width: 8px;
   height: 5px;
   margin-left: 4px;
+  margin-top: 6px;
+  float: left;
 }
 
 .slick-sort-indicator-desc {
@@ -85,21 +88,17 @@ classes should alter those!
 
 .slick-cell, .slick-headerrow-column {
   position: absolute;
-
   border: 1px solid transparent;
   border-right: 1px dotted silver;
   border-bottom-color: silver;
-
   overflow: hidden;
+  -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
-  white-space: nowrap;
   vertical-align: middle;
   z-index: 1;
   padding: 1px 2px 2px 1px;
   margin: 0;
-
   white-space: nowrap;
-
   cursor: default;
 }
 
@@ -115,6 +114,7 @@ classes should alter those!
   background: rgba(0, 0, 255, 0.2);
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
+  -o-transition: all 0.5s;
   transition: all 0.5s;
 }
 
@@ -154,4 +154,4 @@ classes should alter those!
   z-index: 10;
   position: absolute;
   border: 2px dashed black;
-}
\ No newline at end of file
+}
diff --git a/slick.grid.js b/slick.grid.js
index 279019d9a..c12bae9bb 100644
--- a/slick.grid.js
+++ b/slick.grid.js
@@ -1,3241 +1,3422 @@
-/**
- * @license
- * (c) 2009-2012 Michael Leibman
- * michael{dot}leibman{at}gmail{dot}com
- * http://github.com/mleibman/slickgrid
- *
- * Distributed under MIT license.
- * All rights reserved.
- *
- * SlickGrid v2.1
- *
- * NOTES:
- *     Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods.
- *     This increases the speed dramatically, but can only be done safely because there are no event handlers
- *     or data associated with any cell/row DOM nodes.  Cell editors must make sure they implement .destroy()
- *     and do proper cleanup.
- */
-
-// make sure required JavaScript modules are loaded
-if (typeof jQuery === "undefined") {
-  throw "SlickGrid requires jquery module to be loaded";
-}
-if (!jQuery.fn.drag) {
-  throw "SlickGrid requires jquery.event.drag module to be loaded";
-}
-if (typeof Slick === "undefined") {
-  throw "slick.core.js not loaded";
-}
-
-
-(function ($) {
-  // Slick.Grid
-  $.extend(true, window, {
-    Slick: {
-      Grid: SlickGrid
-    }
-  });
-
-  // shared across all grids on the page
-  var scrollbarDimensions;
-  var maxSupportedCssHeight;  // browser's breaking point
-
-  //////////////////////////////////////////////////////////////////////////////////////////////
-  // SlickGrid class implementation (available as Slick.Grid)
-
-  /**
-   * Creates a new instance of the grid.
-   * @class SlickGrid
-   * @constructor
-   * @param {Node}              container   Container node to create the grid in.
-   * @param {Array,Object}      data        An array of objects for databinding.
-   * @param {Array}             columns     An array of column definitions.
-   * @param {Object}            options     Grid options.
-   **/
-  function SlickGrid(container, data, columns, options) {
-    // settings
-    var defaults = {
-      explicitInitialization: false,
-      rowHeight: 25,
-      defaultColumnWidth: 80,
-      enableAddRow: false,
-      leaveSpaceForNewRows: false,
-      editable: false,
-      autoEdit: true,
-      enableCellNavigation: true,
-      enableColumnReorder: true,
-      asyncEditorLoading: false,
-      asyncEditorLoadDelay: 100,
-      forceFitColumns: false,
-      enableAsyncPostRender: false,
-      asyncPostRenderDelay: 50,
-      autoHeight: false,
-      editorLock: Slick.GlobalEditorLock,
-      showHeaderRow: false,
-      headerRowHeight: 25,
-      showTopPanel: false,
-      topPanelHeight: 25,
-      formatterFactory: null,
-      editorFactory: null,
-      cellFlashingCssClass: "flashing",
-      selectedCellCssClass: "selected",
-      multiSelect: true,
-      enableTextSelectionOnCells: false,
-      dataItemColumnValueExtractor: null,
-      fullWidthRows: false,
-      multiColumnSort: false,
-      defaultFormatter: defaultFormatter,
-      forceSyncScrolling: false
-    };
-
-    var columnDefaults = {
-      name: "",
-      resizable: true,
-      sortable: false,
-      minWidth: 30,
-      rerenderOnResize: false,
-      headerCssClass: null,
-      defaultSortAsc: true
-    };
-
-    // scroller
-    var th;   // virtual height
-    var h;    // real scrollable height
-    var ph;   // page height
-    var n;    // number of pages
-    var cj;   // "jumpiness" coefficient
-
-    var page = 0;       // current page
-    var offset = 0;     // current page offset
-    var vScrollDir = 1;
-
-    // private
-    var initialized = false;
-    var $container;
-    var uid = "slickgrid_" + Math.round(1000000 * Math.random());
-    var self = this;
-    var $focusSink;
-    var $headerScroller;
-    var $headers;
-    var $headerRow, $headerRowScroller, $headerRowSpacer;
-    var $topPanelScroller;
-    var $topPanel;
-    var $viewport;
-    var $canvas;
-    var $style;
-    var $boundAncestors;
-    var stylesheet, columnCssRulesL, columnCssRulesR;
-    var viewportH, viewportW;
-    var canvasWidth;
-    var viewportHasHScroll, viewportHasVScroll;
-    var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding
-        cellWidthDiff = 0, cellHeightDiff = 0;
-    var absoluteColumnMinWidth;
-    var numberOfRows = 0;
-
-    var activePosX;
-    var activeRow, activeCell;
-    var activeCellNode = null;
-    var currentEditor = null;
-    var serializedEditorValue;
-    var editController;
-
-    var rowsCache = {};
-    var renderedRows = 0;
-    var numVisibleRows;
-    var prevScrollTop = 0;
-    var scrollTop = 0;
-    var lastRenderedScrollTop = 0;
-    var lastRenderedScrollLeft = 0;
-    var prevScrollLeft = 0;
-    var scrollLeft = 0;
-
-    var selectionModel;
-    var selectedRows = [];
-
-    var plugins = [];
-    var cellCssClasses = {};
-
-    var columnsById = {};
-    var sortColumns = [];
-    var columnPosLeft = [];
-    var columnPosRight = [];
-
-
-    // async call handles
-    var h_editorLoader = null;
-    var h_render = null;
-    var h_postrender = null;
-    var postProcessedRows = {};
-    var postProcessToRow = null;
-    var postProcessFromRow = null;
-
-    // perf counters
-    var counter_rows_rendered = 0;
-    var counter_rows_removed = 0;
-
-
-    //////////////////////////////////////////////////////////////////////////////////////////////
-    // Initialization
-
-    function init() {
-      $container = $(container);
-      if ($container.length < 1) {
-        throw new Error("SlickGrid requires a valid container, " + container + " does not exist in the DOM.");
-      }
-
-      // calculate these only once and share between grid instances
-      maxSupportedCssHeight = maxSupportedCssHeight || getMaxSupportedCssHeight();
-      scrollbarDimensions = scrollbarDimensions || measureScrollbar();
-
-      options = $.extend({}, defaults, options);
-      validateAndEnforceOptions();
-      columnDefaults.width = options.defaultColumnWidth;
-
-      columnsById = {};
-      for (var i = 0; i < columns.length; i++) {
-        var m = columns[i] = $.extend({}, columnDefaults, columns[i]);
-        columnsById[m.id] = i;
-        if (m.minWidth && m.width < m.minWidth) {
-          m.width = m.minWidth;
-        }
-        if (m.maxWidth && m.width > m.maxWidth) {
-          m.width = m.maxWidth;
-        }
-      }
-
-      // validate loaded JavaScript modules against requested options
-      if (options.enableColumnReorder && !$.fn.sortable) {
-        throw new Error("SlickGrid's 'enableColumnReorder = true' option requires jquery-ui.sortable module to be loaded");
-      }
-
-      editController = {
-        "commitCurrentEdit": commitCurrentEdit,
-        "cancelCurrentEdit": cancelCurrentEdit
-      };
-
-      $container
-          .empty()
-          .css("overflow", "hidden")
-          .css("outline", 0)
-          .addClass(uid)
-          .addClass("ui-widget");
-
-      // set up a positioning container if needed
-      if (!/relative|absolute|fixed/.test($container.css("position"))) {
-        $container.css("position", "relative");
-      }
-
-      $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container);
-
-      $headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
-      $headers = $("<div class='slick-header-columns' style='left:-1000px' />").appendTo($headerScroller);
-      $headers.width(getHeadersWidth());
-
-      $headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
-      $headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller);
-      $headerRowSpacer = $("<div style='display:block;height:1px;position:absolute;top:0;left:0;'></div>")
-          .css("width", getCanvasWidth() + scrollbarDimensions.width + "px")
-          .appendTo($headerRowScroller);
-
-      $topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
-      $topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller);
-
-      if (!options.showTopPanel) {
-        $topPanelScroller.hide();
-      }
-
-      if (!options.showHeaderRow) {
-        $headerRowScroller.hide();
-      }
-
-      $viewport = $("<div class='slick-viewport' style='width:100%;overflow:auto;outline:0;position:relative;;'>").appendTo($container);
-      $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
-
-      $canvas = $("<div class='grid-canvas' />").appendTo($viewport);
-
-      if (!options.explicitInitialization) {
-        finishInitialization();
-      }
-    }
-
-    function finishInitialization() {
-      if (!initialized) {
-        initialized = true;
-
-        viewportW = parseFloat($.css($container[0], "width", true));
-
-        // header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?)
-        // calculate the diff so we can set consistent sizes
-        measureCellPaddingAndBorder();
-
-        // for usability reasons, all text selection in SlickGrid is disabled
-        // with the exception of input and textarea elements (selection must
-        // be enabled there so that editors work as expected); note that
-        // selection in grid cells (grid body) is already unavailable in
-        // all browsers except IE
-        disableSelection($headers); // disable all text selection in header (including input and textarea)
-
-        if (!options.enableTextSelectionOnCells) {
-          // disable text selection in grid cells except in input and textarea elements
-          // (this is IE-specific, because selectstart event will only fire in IE)
-          $viewport.bind("selectstart.ui", function (event) {
-            return $(event.target).is("input,textarea");
-          });
-        }
-
-        updateColumnCaches();
-        createColumnHeaders();
-        setupColumnSort();
-        createCssRules();
-        resizeCanvas();
-        bindAncestorScrollEvents();
-
-        $container
-            .bind("resize.slickgrid", resizeCanvas);
-        $viewport
-            .bind("scroll", handleScroll);
-        $headerScroller
-            .bind("contextmenu", handleHeaderContextMenu)
-            .bind("click", handleHeaderClick)
-            .delegate(".slick-header-column", "mouseenter", handleHeaderMouseEnter)
-            .delegate(".slick-header-column", "mouseleave", handleHeaderMouseLeave);
-        $headerRowScroller
-            .bind("scroll", handleHeaderRowScroll);
-        $focusSink
-            .bind("keydown", handleKeyDown);
-        $canvas
-            .bind("keydown", handleKeyDown)
-            .bind("click", handleClick)
-            .bind("dblclick", handleDblClick)
-            .bind("contextmenu", handleContextMenu)
-            .bind("draginit", handleDragInit)
-            .bind("dragstart", handleDragStart)
-            .bind("drag", handleDrag)
-            .bind("dragend", handleDragEnd)
-            .delegate(".slick-cell", "mouseenter", handleMouseEnter)
-            .delegate(".slick-cell", "mouseleave", handleMouseLeave);
-      }
-    }
-
-    function registerPlugin(plugin) {
-      plugins.unshift(plugin);
-      plugin.init(self);
-    }
-
-    function unregisterPlugin(plugin) {
-      for (var i = plugins.length; i >= 0; i--) {
-        if (plugins[i] === plugin) {
-          if (plugins[i].destroy) {
-            plugins[i].destroy();
-          }
-          plugins.splice(i, 1);
-          break;
-        }
-      }
-    }
-
-    function setSelectionModel(model) {
-      if (selectionModel) {
-        selectionModel.onSelectedRangesChanged.unsubscribe(handleSelectedRangesChanged);
-        if (selectionModel.destroy) {
-          selectionModel.destroy();
-        }
-      }
-
-      selectionModel = model;
-      if (selectionModel) {
-        selectionModel.init(self);
-        selectionModel.onSelectedRangesChanged.subscribe(handleSelectedRangesChanged);
-      }
-    }
-
-    function getSelectionModel() {
-      return selectionModel;
-    }
-
-    function getCanvasNode() {
-      return $canvas[0];
-    }
-
-    function measureScrollbar() {
-      var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body");
-      var dim = {
-        width: $c.width() - $c[0].clientWidth,
-        height: $c.height() - $c[0].clientHeight
-      };
-      $c.remove();
-      return dim;
-    }
-
-    function getHeadersWidth() {
-      var headersWidth = 0;
-      for (var i = 0, ii = columns.length; i < ii; i++) {
-        var width = columns[i].width;
-        headersWidth += width;
-      }
-      headersWidth += scrollbarDimensions.width;
-      return Math.max(headersWidth, viewportW) + 1000;
-    }
-
-    function getCanvasWidth() {
-      var availableWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;
-      var rowWidth = 0;
-      var i = columns.length;
-      while (i--) {
-        rowWidth += columns[i].width;
-      }
-      return options.fullWidthRows ? Math.max(rowWidth, availableWidth) : rowWidth;
-    }
-
-    function updateCanvasWidth(forceColumnWidthsUpdate) {
-      var oldCanvasWidth = canvasWidth;
-      canvasWidth = getCanvasWidth();
-
-      if (canvasWidth != oldCanvasWidth) {
-        $canvas.width(canvasWidth);
-        $headerRow.width(canvasWidth);
-        $headers.width(getHeadersWidth());
-        viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width);
-      }
-
-      $headerRowSpacer.width(canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0));
-
-      if (canvasWidth != oldCanvasWidth || forceColumnWidthsUpdate) {
-        applyColumnWidths();
-      }
-    }
-
-    function disableSelection($target) {
-      if ($target && $target.jquery) {
-        $target
-            .attr("unselectable", "on")
-            .css("MozUserSelect", "none")
-            .bind("selectstart.ui", function () {
-              return false;
-            }); // from jquery:ui.core.js 1.7.2
-      }
-    }
-
-    function getMaxSupportedCssHeight() {
-      var supportedHeight = 1000000;
-      // FF reports the height back but still renders blank after ~6M px
-      var testUpTo = ($.browser.mozilla) ? 6000000 : 1000000000;
-      var div = $("<div style='display:none' />").appendTo(document.body);
-
-      while (true) {
-        var test = supportedHeight * 2;
-        div.css("height", test);
-        if (test > testUpTo || div.height() !== test) {
-          break;
-        } else {
-          supportedHeight = test;
-        }
-      }
-
-      div.remove();
-      return supportedHeight;
-    }
-
-    // TODO:  this is static.  need to handle page mutation.
-    function bindAncestorScrollEvents() {
-      var elem = $canvas[0];
-      while ((elem = elem.parentNode) != document.body && elem != null) {
-        // bind to scroll containers only
-        if (elem == $viewport[0] || elem.scrollWidth != elem.clientWidth || elem.scrollHeight != elem.clientHeight) {
-          var $elem = $(elem);
-          if (!$boundAncestors) {
-            $boundAncestors = $elem;
-          } else {
-            $boundAncestors = $boundAncestors.add($elem);
-          }
-          $elem.bind("scroll." + uid, handleActiveCellPositionChange);
-        }
-      }
-    }
-
-    function unbindAncestorScrollEvents() {
-      if (!$boundAncestors) {
-        return;
-      }
-      $boundAncestors.unbind("scroll." + uid);
-      $boundAncestors = null;
-    }
-
-    function updateColumnHeader(columnId, title, toolTip) {
-      if (!initialized) { return; }
-      var idx = getColumnIndex(columnId);
-      if (idx == null) {
-        return;
-      }
-
-      var columnDef = columns[idx];
-      var $header = $headers.children().eq(idx);
-      if ($header) {
-        if (title !== undefined) {
-          columns[idx].name = title;
-        }
-        if (toolTip !== undefined) {
-          columns[idx].toolTip = toolTip;
-        }
-
-        trigger(self.onBeforeHeaderCellDestroy, {
-          "node": $header[0],
-          "column": columnDef
-        });
-
-        $header
-            .attr("title", toolTip || "")
-            .children().eq(0).html(title);
-
-        trigger(self.onHeaderCellRendered, {
-          "node": $header[0],
-          "column": columnDef
-        });
-      }
-    }
-
-    function getHeaderRow() {
-      return $headerRow[0];
-    }
-
-    function getHeaderRowColumn(columnId) {
-      var idx = getColumnIndex(columnId);
-      var $header = $headerRow.children().eq(idx);
-      return $header && $header[0];
-    }
-
-    function createColumnHeaders() {
-      function hoverBegin() {
-        $(this).addClass("ui-state-hover");
-      }
-
-      function hoverEnd() {
-        $(this).removeClass("ui-state-hover");
-      }
-
-      $headers.find(".slick-header-column")
-        .each(function() {
-          var columnDef = $(this).data("column");
-          if (columnDef) {
-            trigger(self.onBeforeHeaderCellDestroy, {
-              "node": this,
-              "column": columnDef
-            });
-          }
-        });
-      $headers.empty();
-      $headers.width(getHeadersWidth());
-
-      $headerRow.find(".slick-headerrow-column")
-        .each(function() {
-          var columnDef = $(this).data("column");
-          if (columnDef) {
-            trigger(self.onBeforeHeaderRowCellDestroy, {
-              "node": this,
-              "column": columnDef
-            });
-          }
-        });
-      $headerRow.empty();
-
-      for (var i = 0; i < columns.length; i++) {
-        var m = columns[i];
-
-        var header = $("<div class='ui-state-default slick-header-column' id='" + uid + m.id + "' />")
-            .html("<span class='slick-column-name'>" + m.name + "</span>")
-            .width(m.width - headerColumnWidthDiff)
-            .attr("title", m.toolTip || "")
-            .data("column", m)
-            .addClass(m.headerCssClass || "")
-            .appendTo($headers);
-
-        if (options.enableColumnReorder || m.sortable) {
-          header.hover(hoverBegin, hoverEnd);
-        }
-
-        if (m.sortable) {
-          header.append("<span class='slick-sort-indicator' />");
-        }
-
-        trigger(self.onHeaderCellRendered, {
-          "node": header[0],
-          "column": m
-        });
-
-        if (options.showHeaderRow) {
-          var headerRowCell = $("<div class='ui-state-default slick-headerrow-column l" + i + " r" + i + "'></div>")
-              .data("column", m)
-              .appendTo($headerRow);
-
-          trigger(self.onHeaderRowCellRendered, {
-            "node": headerRowCell[0],
-            "column": m
-          });
-        }
-      }
-
-      setSortColumns(sortColumns);
-      setupColumnResize();
-      if (options.enableColumnReorder) {
-        setupColumnReorder();
-      }
-    }
-
-    function setupColumnSort() {
-      $headers.click(function (e) {
-        // temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328)
-        e.metaKey = e.metaKey || e.ctrlKey;
-
-        if ($(e.target).hasClass("slick-resizable-handle")) {
-          return;
-        }
-
-        var $col = $(e.target).closest(".slick-header-column");
-        if (!$col.length) {
-          return;
-        }
-
-        var column = $col.data("column");
-        if (column.sortable) {
-          if (!getEditorLock().commitCurrentEdit()) {
-            return;
-          }
-
-          var sortOpts = null;
-          var i = 0;
-          for (; i < sortColumns.length; i++) {
-            if (sortColumns[i].columnId == column.id) {
-              sortOpts = sortColumns[i];
-              sortOpts.sortAsc = !sortOpts.sortAsc;
-              break;
-            }
-          }
-
-          if (e.metaKey && options.multiColumnSort) {
-            if (sortOpts) {
-              sortColumns.splice(i, 1);
-            }
-          }
-          else {
-            if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) {
-              sortColumns = [];
-            }
-
-            if (!sortOpts) {
-              sortOpts = { columnId: column.id, sortAsc: column.defaultSortAsc };
-              sortColumns.push(sortOpts);
-            } else if (sortColumns.length == 0) {
-              sortColumns.push(sortOpts);
-            }
-          }
-
-          setSortColumns(sortColumns);
-
-          if (!options.multiColumnSort) {
-            trigger(self.onSort, {
-              multiColumnSort: false,
-              sortCol: column,
-              sortAsc: sortOpts.sortAsc}, e);
-          } else {
-            trigger(self.onSort, {
-              multiColumnSort: true,
-              sortCols: $.map(sortColumns, function(col) {
-                return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc };
-              })}, e);
-          }
-        }
-      });
-    }
-
-    function setupColumnReorder() {
-      $headers.sortable("destroy");
-      $headers.sortable({
-        containment: "parent",
-        axis: "x",
-        cursor: "default",
-        tolerance: "intersection",
-        helper: "clone",
-        placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",
-        forcePlaceholderSize: true,
-        start: function (e, ui) {
-          $(ui.helper).addClass("slick-header-column-active");
-        },
-        beforeStop: function (e, ui) {
-          $(ui.helper).removeClass("slick-header-column-active");
-        },
-        stop: function (e) {
-          if (!getEditorLock().commitCurrentEdit()) {
-            $(this).sortable("cancel");
-            return;
-          }
-
-          var reorderedIds = $headers.sortable("toArray");
-          var reorderedColumns = [];
-          for (var i = 0; i < reorderedIds.length; i++) {
-            reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]);
-          }
-          setColumns(reorderedColumns);
-
-          trigger(self.onColumnsReordered, {});
-          e.stopPropagation();
-          setupColumnResize();
-        }
-      });
-    }
-
-    function setupColumnResize() {
-      var $col, j, c, pageX, columnElements, minPageX, maxPageX, firstResizable, lastResizable;
-      columnElements = $headers.children();
-      columnElements.find(".slick-resizable-handle").remove();
-      columnElements.each(function (i, e) {
-        if (columns[i].resizable) {
-          if (firstResizable === undefined) {
-            firstResizable = i;
-          }
-          lastResizable = i;
-        }
-      });
-      if (firstResizable === undefined) {
-        return;
-      }
-      columnElements.each(function (i, e) {
-        if (i < firstResizable || (options.forceFitColumns && i >= lastResizable)) {
-          return;
-        }
-        $col = $(e);
-        $("<div class='slick-resizable-handle' />")
-            .appendTo(e)
-            .bind("dragstart", function (e, dd) {
-              if (!getEditorLock().commitCurrentEdit()) {
-                return false;
-              }
-              pageX = e.pageX;
-              $(this).parent().addClass("slick-header-column-active");
-              var shrinkLeewayOnRight = null, stretchLeewayOnRight = null;
-              // lock each column's width option to current width
-              columnElements.each(function (i, e) {
-                columns[i].previousWidth = $(e).outerWidth();
-              });
-              if (options.forceFitColumns) {
-                shrinkLeewayOnRight = 0;
-                stretchLeewayOnRight = 0;
-                // colums on right affect maxPageX/minPageX
-                for (j = i + 1; j < columnElements.length; j++) {
-                  c = columns[j];
-                  if (c.resizable) {
-                    if (stretchLeewayOnRight !== null) {
-                      if (c.maxWidth) {
-                        stretchLeewayOnRight += c.maxWidth - c.previousWidth;
-                      } else {
-                        stretchLeewayOnRight = null;
-                      }
-                    }
-                    shrinkLeewayOnRight += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth);
-                  }
-                }
-              }
-              var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0;
-              for (j = 0; j <= i; j++) {
-                // columns on left only affect minPageX
-                c = columns[j];
-                if (c.resizable) {
-                  if (stretchLeewayOnLeft !== null) {
-                    if (c.maxWidth) {
-                      stretchLeewayOnLeft += c.maxWidth - c.previousWidth;
-                    } else {
-                      stretchLeewayOnLeft = null;
-                    }
-                  }
-                  shrinkLeewayOnLeft += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth);
-                }
-              }
-              if (shrinkLeewayOnRight === null) {
-                shrinkLeewayOnRight = 100000;
-              }
-              if (shrinkLeewayOnLeft === null) {
-                shrinkLeewayOnLeft = 100000;
-              }
-              if (stretchLeewayOnRight === null) {
-                stretchLeewayOnRight = 100000;
-              }
-              if (stretchLeewayOnLeft === null) {
-                stretchLeewayOnLeft = 100000;
-              }
-              maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft);
-              minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight);
-            })
-            .bind("drag", function (e, dd) {
-              var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, e.pageX)) - pageX, x;
-              if (d < 0) { // shrink column
-                x = d;
-                for (j = i; j >= 0; j--) {
-                  c = columns[j];
-                  if (c.resizable) {
-                    actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);
-                    if (x && c.previousWidth + x < actualMinWidth) {
-                      x += c.previousWidth - actualMinWidth;
-                      c.width = actualMinWidth;
-                    } else {
-                      c.width = c.previousWidth + x;
-                      x = 0;
-                    }
-                  }
-                }
-
-                if (options.forceFitColumns) {
-                  x = -d;
-                  for (j = i + 1; j < columnElements.length; j++) {
-                    c = columns[j];
-                    if (c.resizable) {
-                      if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
-                        x -= c.maxWidth - c.previousWidth;
-                        c.width = c.maxWidth;
-                      } else {
-                        c.width = c.previousWidth + x;
-                        x = 0;
-                      }
-                    }
-                  }
-                }
-              } else { // stretch column
-                x = d;
-                for (j = i; j >= 0; j--) {
-                  c = columns[j];
-                  if (c.resizable) {
-                    if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
-                      x -= c.maxWidth - c.previousWidth;
-                      c.width = c.maxWidth;
-                    } else {
-                      c.width = c.previousWidth + x;
-                      x = 0;
-                    }
-                  }
-                }
-
-                if (options.forceFitColumns) {
-                  x = -d;
-                  for (j = i + 1; j < columnElements.length; j++) {
-                    c = columns[j];
-                    if (c.resizable) {
-                      actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);
-                      if (x && c.previousWidth + x < actualMinWidth) {
-                        x += c.previousWidth - actualMinWidth;
-                        c.width = actualMinWidth;
-                      } else {
-                        c.width = c.previousWidth + x;
-                        x = 0;
-                      }
-                    }
-                  }
-                }
-              }
-              applyColumnHeaderWidths();
-              if (options.syncColumnCellResize) {
-                applyColumnWidths();
-              }
-            })
-            .bind("dragend", function (e, dd) {
-              var newWidth;
-              $(this).parent().removeClass("slick-header-column-active");
-              for (j = 0; j < columnElements.length; j++) {
-                c = columns[j];
-                newWidth = $(columnElements[j]).outerWidth();
-
-                if (c.previousWidth !== newWidth && c.rerenderOnResize) {
-                  invalidateAllRows();
-                }
-              }
-              updateCanvasWidth(true);
-              render();
-              trigger(self.onColumnsResized, {});
-            });
-      });
-    }
-
-    function getVBoxDelta($el) {
-      var p = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
-      var delta = 0;
-      $.each(p, function (n, val) {
-        delta += parseFloat($el.css(val)) || 0;
-      });
-      return delta;
-    }
-
-    function measureCellPaddingAndBorder() {
-      var el;
-      var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"];
-      var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
-
-      el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers);
-      headerColumnWidthDiff = headerColumnHeightDiff = 0;
-      $.each(h, function (n, val) {
-        headerColumnWidthDiff += parseFloat(el.css(val)) || 0;
-      });
-      $.each(v, function (n, val) {
-        headerColumnHeightDiff += parseFloat(el.css(val)) || 0;
-      });
-      el.remove();
-
-      var r = $("<div class='slick-row' />").appendTo($canvas);
-      el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);
-      cellWidthDiff = cellHeightDiff = 0;
-      $.each(h, function (n, val) {
-        cellWidthDiff += parseFloat(el.css(val)) || 0;
-      });
-      $.each(v, function (n, val) {
-        cellHeightDiff += parseFloat(el.css(val)) || 0;
-      });
-      r.remove();
-
-      absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff);
-    }
-
-    function createCssRules() {
-      $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));
-      var rowHeight = (options.rowHeight - cellHeightDiff);
-      var rules = [
-        "." + uid + " .slick-header-column { left: 1000px; }",
-        "." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }",
-        "." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }",
-        "." + uid + " .slick-cell { height:" + rowHeight + "px; }",
-        "." + uid + " .slick-row { height:" + options.rowHeight + "px; }"
-      ];
-
-      for (var i = 0; i < columns.length; i++) {
-        rules.push("." + uid + " .l" + i + " { }");
-        rules.push("." + uid + " .r" + i + " { }");
-      }
-
-      if ($style[0].styleSheet) { // IE
-        $style[0].styleSheet.cssText = rules.join(" ");
-      } else {
-        $style[0].appendChild(document.createTextNode(rules.join(" ")));
-      }
-    }
-
-    function getColumnCssRules(idx) {
-      if (!stylesheet) {
-        var sheets = document.styleSheets;
-        for (var i = 0; i < sheets.length; i++) {
-          if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
-            stylesheet = sheets[i];
-            break;
-          }
-        }
-
-        if (!stylesheet) {
-          throw new Error("Cannot find stylesheet.");
-        }
-
-        // find and cache column CSS rules
-        columnCssRulesL = [];
-        columnCssRulesR = [];
-        var cssRules = (stylesheet.cssRules || stylesheet.rules);
-        var matches, columnIdx;
-        for (var i = 0; i < cssRules.length; i++) {
-          var selector = cssRules[i].selectorText;
-          if (matches = /\.l\d+/.exec(selector)) {
-            columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
-            columnCssRulesL[columnIdx] = cssRules[i];
-          } else if (matches = /\.r\d+/.exec(selector)) {
-            columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
-            columnCssRulesR[columnIdx] = cssRules[i];
-          }
-        }
-      }
-
-      return {
-        "left": columnCssRulesL[idx],
-        "right": columnCssRulesR[idx]
-      };
-    }
-
-    function removeCssRules() {
-      $style.remove();
-      stylesheet = null;
-    }
-
-    function destroy() {
-      getEditorLock().cancelCurrentEdit();
-
-      trigger(self.onBeforeDestroy, {});
-
-      var i = plugins.length;
-      while(i--) {
-        unregisterPlugin(plugins[i]);
-      }
-
-      if (options.enableColumnReorder && $headers.sortable) {
-        $headers.sortable("destroy");
-      }
-
-      unbindAncestorScrollEvents();
-      $container.unbind(".slickgrid");
-      removeCssRules();
-
-      $canvas.unbind("draginit dragstart dragend drag");
-      $container.empty().removeClass(uid);
-    }
-
-
-    //////////////////////////////////////////////////////////////////////////////////////////////
-    // General
-
-    function trigger(evt, args, e) {
-      e = e || new Slick.EventData();
-      args = args || {};
-      args.grid = self;
-      return evt.notify(args, e, self);
-    }
-
-    function getEditorLock() {
-      return options.editorLock;
-    }
-
-    function getEditController() {
-      return editController;
-    }
-
-    function getColumnIndex(id) {
-      return columnsById[id];
-    }
-
-    function autosizeColumns() {
-      var i, c,
-          widths = [],
-          shrinkLeeway = 0,
-          total = 0,
-          prevTotal,
-          availWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;
-
-      for (i = 0; i < columns.length; i++) {
-        c = columns[i];
-        widths.push(c.width);
-        total += c.width;
-        if (c.resizable) {
-          shrinkLeeway += c.width - Math.max(c.minWidth, absoluteColumnMinWidth);
-        }
-      }
-
-      // shrink
-      prevTotal = total;
-      while (total > availWidth && shrinkLeeway) {
-        var shrinkProportion = (total - availWidth) / shrinkLeeway;
-        for (i = 0; i < columns.length && total > availWidth; i++) {
-          c = columns[i];
-          var width = widths[i];
-          if (!c.resizable || width <= c.minWidth || width <= absoluteColumnMinWidth) {
-            continue;
-          }
-          var absMinWidth = Math.max(c.minWidth, absoluteColumnMinWidth);
-          var shrinkSize = Math.floor(shrinkProportion * (width - absMinWidth)) || 1;
-          shrinkSize = Math.min(shrinkSize, width - absMinWidth);
-          total -= shrinkSize;
-          shrinkLeeway -= shrinkSize;
-          widths[i] -= shrinkSize;
-        }
-        if (prevTotal == total) {  // avoid infinite loop
-          break;
-        }
-        prevTotal = total;
-      }
-
-      // grow
-      prevTotal = total;
-      while (total < availWidth) {
-        var growProportion = availWidth / total;
-        for (i = 0; i < columns.length && total < availWidth; i++) {
-          c = columns[i];
-          if (!c.resizable || c.maxWidth <= c.width) {
-            continue;
-          }
-          var growSize = Math.min(Math.floor(growProportion * c.width) - c.width, (c.maxWidth - c.width) || 1000000) || 1;
-          total += growSize;
-          widths[i] += growSize;
-        }
-        if (prevTotal == total) {  // avoid infinite loop
-          break;
-        }
-        prevTotal = total;
-      }
-
-      var reRender = false;
-      for (i = 0; i < columns.length; i++) {
-        if (columns[i].rerenderOnResize && columns[i].width != widths[i]) {
-          reRender = true;
-        }
-        columns[i].width = widths[i];
-      }
-
-      applyColumnHeaderWidths();
-      updateCanvasWidth(true);
-      if (reRender) {
-        invalidateAllRows();
-        render();
-      }
-    }
-
-    function applyColumnHeaderWidths() {
-      if (!initialized) { return; }
-      var h;
-      for (var i = 0, headers = $headers.children(), ii = headers.length; i < ii; i++) {
-        h = $(headers[i]);
-        if (h.width() !== columns[i].width - headerColumnWidthDiff) {
-          h.width(columns[i].width - headerColumnWidthDiff);
-        }
-      }
-
-      updateColumnCaches();
-    }
-
-    function applyColumnWidths() {
-      var x = 0, w, rule;
-      for (var i = 0; i < columns.length; i++) {
-        w = columns[i].width;
-
-        rule = getColumnCssRules(i);
-        rule.left.style.left = x + "px";
-        rule.right.style.right = (canvasWidth - x - w) + "px";
-
-        x += columns[i].width;
-      }
-    }
-
-    function setSortColumn(columnId, ascending) {
-      setSortColumns([{ columnId: columnId, sortAsc: ascending}]);
-    }
-
-    function setSortColumns(cols) {
-      sortColumns = cols;
-
-      var headerColumnEls = $headers.children();
-      headerColumnEls
-          .removeClass("slick-header-column-sorted")
-          .find(".slick-sort-indicator")
-              .removeClass("slick-sort-indicator-asc slick-sort-indicator-desc");
-
-      $.each(sortColumns, function(i, col) {
-        if (col.sortAsc == null) {
-          col.sortAsc = true;
-        }
-        var columnIndex = getColumnIndex(col.columnId);
-        if (columnIndex != null) {
-          headerColumnEls.eq(columnIndex)
-              .addClass("slick-header-column-sorted")
-              .find(".slick-sort-indicator")
-                  .addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");
-        }
-      });
-    }
-
-    function getSortColumns() {
-      return sortColumns;
-    }
-
-    function handleSelectedRangesChanged(e, ranges) {
-      selectedRows = [];
-      var hash = {};
-      for (var i = 0; i < ranges.length; i++) {
-        for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
-          if (!hash[j]) {  // prevent duplicates
-            selectedRows.push(j);
-            hash[j] = {};
-          }
-          for (var k = ranges[i].fromCell; k <= ranges[i].toCell; k++) {
-            if (canCellBeSelected(j, k)) {
-              hash[j][columns[k].id] = options.selectedCellCssClass;
-            }
-          }
-        }
-      }
-
-      setCellCssStyles(options.selectedCellCssClass, hash);
-
-      trigger(self.onSelectedRowsChanged, {rows: getSelectedRows()}, e);
-    }
-
-    function getColumns() {
-      return columns;
-    }
-
-    function updateColumnCaches() {
-      // Pre-calculate cell boundaries.
-      columnPosLeft = [];
-      columnPosRight = [];
-      var x = 0;
-      for (var i = 0, ii = columns.length; i < ii; i++) {
-        columnPosLeft[i] = x;
-        columnPosRight[i] = x + columns[i].width;
-        x += columns[i].width;
-      }
-    }
-
-    function setColumns(columnDefinitions) {
-      columns = columnDefinitions;
-
-      columnsById = {};
-      for (var i = 0; i < columns.length; i++) {
-        var m = columns[i] = $.extend({}, columnDefaults, columns[i]);
-        columnsById[m.id] = i;
-        if (m.minWidth && m.width < m.minWidth) {
-          m.width = m.minWidth;
-        }
-        if (m.maxWidth && m.width > m.maxWidth) {
-          m.width = m.maxWidth;
-        }
-      }
-
-      updateColumnCaches();
-
-      if (initialized) {
-        invalidateAllRows();
-        createColumnHeaders();
-        removeCssRules();
-        createCssRules();
-        resizeCanvas();
-        applyColumnWidths();
-        handleScroll();
-      }
-    }
-
-    function getOptions() {
-      return options;
-    }
-
-    function setOptions(args) {
-      if (!getEditorLock().commitCurrentEdit()) {
-        return;
-      }
-
-      makeActiveCellNormal();
-
-      if (options.enableAddRow !== args.enableAddRow) {
-        invalidateRow(getDataLength());
-      }
-
-      options = $.extend(options, args);
-      validateAndEnforceOptions();
-
-      $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
-      render();
-    }
-
-    function validateAndEnforceOptions() {
-      if (options.autoHeight) {
-        options.leaveSpaceForNewRows = false;
-      }
-    }
-
-    function setData(newData, scrollToTop) {
-      data = newData;
-      invalidateAllRows();
-      updateRowCount();
-      if (scrollToTop) {
-        scrollTo(0);
-      }
-    }
-
-    function getData() {
-      return data;
-    }
-
-    function getDataLength() {
-      if (data.getLength) {
-        return data.getLength();
-      } else {
-        return data.length;
-      }
-    }
-
-    function getDataItem(i) {
-      if (data.getItem) {
-        return data.getItem(i);
-      } else {
-        return data[i];
-      }
-    }
-
-    function getTopPanel() {
-      return $topPanel[0];
-    }
-
-    function setTopPanelVisibility(visible) {
-      if (options.showTopPanel != visible) {
-        options.showTopPanel = visible;
-        if (visible) {
-          $topPanelScroller.slideDown("fast", resizeCanvas);
-        } else {
-          $topPanelScroller.slideUp("fast", resizeCanvas);
-        }
-      }
-    }
-
-    function setHeaderRowVisibility(visible) {
-      if (options.showHeaderRow != visible) {
-        options.showHeaderRow = visible;
-        if (visible) {
-          $headerRowScroller.slideDown("fast", resizeCanvas);
-        } else {
-          $headerRowScroller.slideUp("fast", resizeCanvas);
-        }
-      }
-    }
-
-    //////////////////////////////////////////////////////////////////////////////////////////////
-    // Rendering / Scrolling
-
-    function scrollTo(y) {
-      y = Math.max(y, 0);
-      y = Math.min(y, th - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0));
-
-      var oldOffset = offset;
-
-      page = Math.min(n - 1, Math.floor(y / ph));
-      offset = Math.round(page * cj);
-      var newScrollTop = y - offset;
-
-      if (offset != oldOffset) {
-        var range = getVisibleRange(newScrollTop);
-        cleanupRows(range);
-        updateRowPositions();
-      }
-
-      if (prevScrollTop != newScrollTop) {
-        vScrollDir = (prevScrollTop + oldOffset < newScrollTop + offset) ? 1 : -1;
-        $viewport[0].scrollTop = (lastRenderedScrollTop = scrollTop = prevScrollTop = newScrollTop);
-
-        trigger(self.onViewportChanged, {});
-      }
-    }
-
-    function defaultFormatter(row, cell, value, columnDef, dataContext) {
-      if (value == null) {
-        return "";
-      } else {
-        return value.toString().replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
-      }
-    }
-
-    function getFormatter(row, column) {
-      var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
-
-      // look up by id, then index
-      var columnOverrides = rowMetadata &&
-          rowMetadata.columns &&
-          (rowMetadata.columns[column.id] || rowMetadata.columns[getColumnIndex(column.id)]);
-
-      return (columnOverrides && columnOverrides.formatter) ||
-          (rowMetadata && rowMetadata.formatter) ||
-          column.formatter ||
-          (options.formatterFactory && options.formatterFactory.getFormatter(column)) ||
-          options.defaultFormatter;
-    }
-
-    function getEditor(row, cell) {
-      var column = columns[cell];
-      var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
-      var columnMetadata = rowMetadata && rowMetadata.columns;
-
-      if (columnMetadata && columnMetadata[column.id] && columnMetadata[column.id].editor !== undefined) {
-        return columnMetadata[column.id].editor;
-      }
-      if (columnMetadata && columnMetadata[cell] && columnMetadata[cell].editor !== undefined) {
-        return columnMetadata[cell].editor;
-      }
-
-      return column.editor || (options.editorFactory && options.editorFactory.getEditor(column));
-    }
-
-    function getDataItemValueForColumn(item, columnDef) {
-      if (options.dataItemColumnValueExtractor) {
-        return options.dataItemColumnValueExtractor(item, columnDef);
-      }
-      return item[columnDef.field];
-    }
-
-    function appendRowHtml(stringArray, row, range) {
-      var d = getDataItem(row);
-      var dataLoading = row < getDataLength() && !d;
-      var rowCss = "slick-row" +
-          (dataLoading ? " loading" : "") +
-          (row === activeRow ? " active" : "") +
-          (row % 2 == 1 ? " odd" : " even");
-
-      var metadata = data.getItemMetadata && data.getItemMetadata(row);
-
-      if (metadata && metadata.cssClasses) {
-        rowCss += " " + metadata.cssClasses;
-      }
-
-      stringArray.push("<div class='ui-widget-content " + rowCss + "' style='top:" + (options.rowHeight * row - offset) + "px'>");
-
-      var colspan, m;
-      for (var i = 0, ii = columns.length; i < ii; i++) {
-        m = columns[i];
-        colspan = 1;
-        if (metadata && metadata.columns) {
-          var columnData = metadata.columns[m.id] || metadata.columns[i];
-          colspan = (columnData && columnData.colspan) || 1;
-          if (colspan === "*") {
-            colspan = ii - i;
-          }
-        }
-
-        // Do not render cells outside of the viewport.
-        if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) {
-          if (columnPosLeft[i] > range.rightPx) {
-            // All columns to the right are outside the range.
-            break;
-          }
-
-          appendCellHtml(stringArray, row, i, colspan);
-        }
-
-        if (colspan > 1) {
-          i += (colspan - 1);
-        }
-      }
-
-      stringArray.push("</div>");
-    }
-
-    function appendCellHtml(stringArray, row, cell, colspan) {
-      var m = columns[cell];
-      var d = getDataItem(row);
-      var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
-          (m.cssClass ? " " + m.cssClass : "");
-      if (row === activeRow && cell === activeCell) {
-        cellCss += (" active");
-      }
-
-      // TODO:  merge them together in the setter
-      for (var key in cellCssClasses) {
-        if (cellCssClasses[key][row] && cellCssClasses[key][row][m.id]) {
-          cellCss += (" " + cellCssClasses[key][row][m.id]);
-        }
-      }
-
-      stringArray.push("<div class='" + cellCss + "'>");
-
-      // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet)
-      if (d) {
-        var value = getDataItemValueForColumn(d, m);
-        stringArray.push(getFormatter(row, m)(row, cell, value, m, d));
-      }
-
-      stringArray.push("</div>");
-
-      rowsCache[row].cellRenderQueue.push(cell);
-      rowsCache[row].cellColSpans[cell] = colspan;
-    }
-
-
-    function cleanupRows(rangeToKeep) {
-      for (var i in rowsCache) {
-        if (((i = parseInt(i, 10)) !== activeRow) && (i < rangeToKeep.top || i > rangeToKeep.bottom)) {
-          removeRowFromCache(i);
-        }
-      }
-    }
-
-    function invalidate() {
-      updateRowCount();
-      invalidateAllRows();
-      render();
-    }
-
-    function invalidateAllRows() {
-      if (currentEditor) {
-        makeActiveCellNormal();
-      }
-      for (var row in rowsCache) {
-        removeRowFromCache(row);
-      }
-    }
-
-    function removeRowFromCache(row) {
-      var cacheEntry = rowsCache[row];
-      if (!cacheEntry) {
-        return;
-      }
-      $canvas[0].removeChild(cacheEntry.rowNode);
-      delete rowsCache[row];
-      delete postProcessedRows[row];
-      renderedRows--;
-      counter_rows_removed++;
-    }
-
-    function invalidateRows(rows) {
-      var i, rl;
-      if (!rows || !rows.length) {
-        return;
-      }
-      vScrollDir = 0;
-      for (i = 0, rl = rows.length; i < rl; i++) {
-        if (currentEditor && activeRow === rows[i]) {
-          makeActiveCellNormal();
-        }
-        if (rowsCache[rows[i]]) {
-          removeRowFromCache(rows[i]);
-        }
-      }
-    }
-
-    function invalidateRow(row) {
-      invalidateRows([row]);
-    }
-
-    function updateCell(row, cell) {
-      var cellNode = getCellNode(row, cell);
-      if (!cellNode) {
-        return;
-      }
-
-      var m = columns[cell], d = getDataItem(row);
-      if (currentEditor && activeRow === row && activeCell === cell) {
-        currentEditor.loadValue(d);
-      } else {
-        cellNode.innerHTML = d ? getFormatter(row, m)(row, cell, getDataItemValueForColumn(d, m), m, d) : "";
-        invalidatePostProcessingResults(row);
-      }
-    }
-
-    function updateRow(row) {
-      var cacheEntry = rowsCache[row];
-      if (!cacheEntry) {
-        return;
-      }
-
-      ensureCellNodesInRowsCache(row);
-
-      for (var columnIdx in cacheEntry.cellNodesByColumnIdx) {
-        if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) {
-          continue;
-        }
-
-        columnIdx = columnIdx | 0;
-        var m = columns[columnIdx],
-            d = getDataItem(row),
-            node = cacheEntry.cellNodesByColumnIdx[columnIdx];
-
-        if (row === activeRow && columnIdx === activeCell && currentEditor) {
-          currentEditor.loadValue(d);
-        } else if (d) {
-          node.innerHTML = getFormatter(row, m)(row, columnIdx, getDataItemValueForColumn(d, m), m, d);
-        } else {
-          node.innerHTML = "";
-        }
-      }
-
-      invalidatePostProcessingResults(row);
-    }
-
-    function getViewportHeight() {
-      return parseFloat($.css($container[0], "height", true)) -
-          parseFloat($.css($container[0], "paddingTop", true)) -
-          parseFloat($.css($container[0], "paddingBottom", true)) -
-          parseFloat($.css($headerScroller[0], "height")) - getVBoxDelta($headerScroller) -
-          (options.showTopPanel ? options.topPanelHeight + getVBoxDelta($topPanelScroller) : 0) -
-          (options.showHeaderRow ? options.headerRowHeight + getVBoxDelta($headerRowScroller) : 0);
-    }
-
-    function resizeCanvas() {
-      if (!initialized) { return; }
-      if (options.autoHeight) {
-        viewportH = options.rowHeight * (getDataLength() + (options.enableAddRow ? 1 : 0));
-      } else {
-        viewportH = getViewportHeight();
-      }
-
-      numVisibleRows = Math.ceil(viewportH / options.rowHeight);
-      viewportW = parseFloat($.css($container[0], "width", true));
-      if (!options.autoHeight) {
-        $viewport.height(viewportH);
-      }
-
-      if (options.forceFitColumns) {
-        autosizeColumns();
-      }
-
-      updateRowCount();
-      handleScroll();
-      render();
-    }
-
-    function updateRowCount() {
-      if (!initialized) { return; }
-      numberOfRows = getDataLength() +
-          (options.enableAddRow ? 1 : 0) +
-          (options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0);
-
-      var oldViewportHasVScroll = viewportHasVScroll;
-      // with autoHeight, we do not need to accommodate the vertical scroll bar
-      viewportHasVScroll = !options.autoHeight && (numberOfRows * options.rowHeight > viewportH);
-
-      // remove the rows that are now outside of the data range
-      // this helps avoid redundant calls to .removeRow() when the size of the data decreased by thousands of rows
-      var l = options.enableAddRow ? getDataLength() : getDataLength() - 1;
-      for (var i in rowsCache) {
-        if (i >= l) {
-          removeRowFromCache(i);
-        }
-      }
-
-      if (activeCellNode && activeRow > l) {
-        resetActiveCell();
-      }
-
-      var oldH = h;
-      th = Math.max(options.rowHeight * numberOfRows, viewportH - scrollbarDimensions.height);
-      if (th < maxSupportedCssHeight) {
-        // just one page
-        h = ph = th;
-        n = 1;
-        cj = 0;
-      } else {
-        // break into pages
-        h = maxSupportedCssHeight;
-        ph = h / 100;
-        n = Math.floor(th / ph);
-        cj = (th - h) / (n - 1);
-      }
-
-      if (h !== oldH) {
-        $canvas.css("height", h);
-        scrollTop = $viewport[0].scrollTop;
-      }
-
-      var oldScrollTopInRange = (scrollTop + offset <= th - viewportH);
-
-      if (th == 0 || scrollTop == 0) {
-        page = offset = 0;
-      } else if (oldScrollTopInRange) {
-        // maintain virtual position
-        scrollTo(scrollTop + offset);
-      } else {
-        // scroll to bottom
-        scrollTo(th - viewportH);
-      }
-
-      if (h != oldH && options.autoHeight) {
-        resizeCanvas();
-      }
-
-      if (options.forceFitColumns && oldViewportHasVScroll != viewportHasVScroll) {
-        autosizeColumns();
-      }
-      updateCanvasWidth(false);
-    }
-
-    function getVisibleRange(viewportTop, viewportLeft) {
-      if (viewportTop == null) {
-        viewportTop = scrollTop;
-      }
-      if (viewportLeft == null) {
-        viewportLeft = scrollLeft;
-      }
-
-      return {
-        top: Math.floor((viewportTop + offset) / options.rowHeight),
-        bottom: Math.ceil((viewportTop + offset + viewportH) / options.rowHeight),
-        leftPx: viewportLeft,
-        rightPx: viewportLeft + viewportW
-      };
-    }
-
-    function getRenderedRange(viewportTop, viewportLeft) {
-      var range = getVisibleRange(viewportTop, viewportLeft);
-      var buffer = Math.round(viewportH / options.rowHeight);
-      var minBuffer = 3;
-
-      if (vScrollDir == -1) {
-        range.top -= buffer;
-        range.bottom += minBuffer;
-      } else if (vScrollDir == 1) {
-        range.top -= minBuffer;
-        range.bottom += buffer;
-      } else {
-        range.top -= minBuffer;
-        range.bottom += minBuffer;
-      }
-
-      range.top = Math.max(0, range.top);
-      range.bottom = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, range.bottom);
-
-      range.leftPx -= viewportW;
-      range.rightPx += viewportW;
-
-      range.leftPx = Math.max(0, range.leftPx);
-      range.rightPx = Math.min(canvasWidth, range.rightPx);
-
-      return range;
-    }
-
-    function ensureCellNodesInRowsCache(row) {
-      var cacheEntry = rowsCache[row];
-      if (cacheEntry) {
-        if (cacheEntry.cellRenderQueue.length) {
-          var lastChild = cacheEntry.rowNode.lastChild;
-          while (cacheEntry.cellRenderQueue.length) {
-            var columnIdx = cacheEntry.cellRenderQueue.pop();
-            cacheEntry.cellNodesByColumnIdx[columnIdx] = lastChild;
-            lastChild = lastChild.previousSibling;
-          }
-        }
-      }
-    }
-
-    function cleanUpCells(range, row) {
-      var totalCellsRemoved = 0;
-      var cacheEntry = rowsCache[row];
-
-      // Remove cells outside the range.
-      var cellsToRemove = [];
-      for (var i in cacheEntry.cellNodesByColumnIdx) {
-        // I really hate it when people mess with Array.prototype.
-        if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(i)) {
-          continue;
-        }
-
-        // This is a string, so it needs to be cast back to a number.
-        i = i | 0;
-
-        var colspan = cacheEntry.cellColSpans[i];
-        if (columnPosLeft[i] > range.rightPx ||
-          columnPosRight[Math.min(columns.length - 1, i + colspan - 1)] < range.leftPx) {
-          if (!(row == activeRow && i == activeCell)) {
-            cellsToRemove.push(i);
-          }
-        }
-      }
-
-      var cellToRemove;
-      while ((cellToRemove = cellsToRemove.pop()) != null) {
-        cacheEntry.rowNode.removeChild(cacheEntry.cellNodesByColumnIdx[cellToRemove]);
-        delete cacheEntry.cellColSpans[cellToRemove];
-        delete cacheEntry.cellNodesByColumnIdx[cellToRemove];
-        if (postProcessedRows[row]) {
-          delete postProcessedRows[row][cellToRemove];
-        }
-        totalCellsRemoved++;
-      }
-    }
-
-    function cleanUpAndRenderCells(range) {
-      var cacheEntry;
-      var stringArray = [];
-      var processedRows = [];
-      var cellsAdded;
-      var totalCellsAdded = 0;
-      var colspan;
-
-      for (var row = range.top; row <= range.bottom; row++) {
-        cacheEntry = rowsCache[row];
-        if (!cacheEntry) {
-          continue;
-        }
-
-        // cellRenderQueue populated in renderRows() needs to be cleared first
-        ensureCellNodesInRowsCache(row);
-
-        cleanUpCells(range, row);
-
-        // Render missing cells.
-        cellsAdded = 0;
-
-        var metadata = data.getItemMetadata && data.getItemMetadata(row);
-        metadata = metadata && metadata.columns;
-
-        // TODO:  shorten this loop (index? heuristics? binary search?)
-        for (var i = 0, ii = columns.length; i < ii; i++) {
-          // Cells to the right are outside the range.
-          if (columnPosLeft[i] > range.rightPx) {
-            break;
-          }
-
-          // Already rendered.
-          if ((colspan = cacheEntry.cellColSpans[i]) != null) {
-            i += (colspan > 1 ? colspan - 1 : 0);
-            continue;
-          }
-
-          colspan = 1;
-          if (metadata) {
-            var columnData = metadata[columns[i].id] || metadata[i];
-            colspan = (columnData && columnData.colspan) || 1;
-            if (colspan === "*") {
-              colspan = ii - i;
-            }
-          }
-
-          if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) {
-            appendCellHtml(stringArray, row, i, colspan);
-            cellsAdded++;
-          }
-
-          i += (colspan > 1 ? colspan - 1 : 0);
-        }
-
-        if (cellsAdded) {
-          totalCellsAdded += cellsAdded;
-          processedRows.push(row);
-        }
-      }
-
-      if (!stringArray.length) {
-        return;
-      }
-
-      var x = document.createElement("div");
-      x.innerHTML = stringArray.join("");
-
-      var processedRow;
-      var node;
-      while ((processedRow = processedRows.pop()) != null) {
-        cacheEntry = rowsCache[processedRow];
-        var columnIdx;
-        while ((columnIdx = cacheEntry.cellRenderQueue.pop()) != null) {
-          node = x.lastChild;
-          cacheEntry.rowNode.appendChild(node);
-          cacheEntry.cellNodesByColumnIdx[columnIdx] = node;
-        }
-      }
-    }
-
-    function renderRows(range) {
-      var parentNode = $canvas[0],
-          stringArray = [],
-          rows = [],
-          needToReselectCell = false;
-
-      for (var i = range.top; i <= range.bottom; i++) {
-        if (rowsCache[i]) {
-          continue;
-        }
-        renderedRows++;
-        rows.push(i);
-
-        // Create an entry right away so that appendRowHtml() can
-        // start populatating it.
-        rowsCache[i] = {
-          "rowNode": null,
-
-          // ColSpans of rendered cells (by column idx).
-          // Can also be used for checking whether a cell has been rendered.
-          "cellColSpans": [],
-
-          // Cell nodes (by column idx).  Lazy-populated by ensureCellNodesInRowsCache().
-          "cellNodesByColumnIdx": [],
-
-          // Column indices of cell nodes that have been rendered, but not yet indexed in
-          // cellNodesByColumnIdx.  These are in the same order as cell nodes added at the
-          // end of the row.
-          "cellRenderQueue": []
-        };
-
-        appendRowHtml(stringArray, i, range);
-        if (activeCellNode && activeRow === i) {
-          needToReselectCell = true;
-        }
-        counter_rows_rendered++;
-      }
-
-      if (!rows.length) { return; }
-
-      var x = document.createElement("div");
-      x.innerHTML = stringArray.join("");
-
-      for (var i = 0, ii = rows.length; i < ii; i++) {
-        rowsCache[rows[i]].rowNode = parentNode.appendChild(x.firstChild);
-      }
-
-      if (needToReselectCell) {
-        activeCellNode = getCellNode(activeRow, activeCell);
-      }
-    }
-
-    function startPostProcessing() {
-      if (!options.enableAsyncPostRender) {
-        return;
-      }
-      clearTimeout(h_postrender);
-      h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);
-    }
-
-    function invalidatePostProcessingResults(row) {
-      delete postProcessedRows[row];
-      postProcessFromRow = Math.min(postProcessFromRow, row);
-      postProcessToRow = Math.max(postProcessToRow, row);
-      startPostProcessing();
-    }
-
-    function updateRowPositions() {
-      for (var row in rowsCache) {
-        rowsCache[row].rowNode.style.top = (row * options.rowHeight - offset) + "px";
-      }
-    }
-
-    function render() {
-      if (!initialized) { return; }
-      var visible = getVisibleRange();
-      var rendered = getRenderedRange();
-
-      // remove rows no longer in the viewport
-      cleanupRows(rendered);
-
-      // add new rows & missing cells in existing rows
-      if (lastRenderedScrollLeft != scrollLeft) {
-        cleanUpAndRenderCells(rendered);
-      }
-
-      // render missing rows
-      renderRows(rendered);
-
-      postProcessFromRow = visible.top;
-      postProcessToRow = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, visible.bottom);
-      startPostProcessing();
-
-      lastRenderedScrollTop = scrollTop;
-      lastRenderedScrollLeft = scrollLeft;
-      h_render = null;
-    }
-
-    function handleHeaderRowScroll() {
-      var scrollLeft = $headerRowScroller[0].scrollLeft;
-      if (scrollLeft != $viewport[0].scrollLeft) {
-        $viewport[0].scrollLeft = scrollLeft;
-      }
-    }
-
-    function handleScroll() {
-      scrollTop = $viewport[0].scrollTop;
-      scrollLeft = $viewport[0].scrollLeft;
-      var vScrollDist = Math.abs(scrollTop - prevScrollTop);
-      var hScrollDist = Math.abs(scrollLeft - prevScrollLeft);
-
-      if (hScrollDist) {
-        prevScrollLeft = scrollLeft;
-        $headerScroller[0].scrollLeft = scrollLeft;
-        $topPanelScroller[0].scrollLeft = scrollLeft;
-        $headerRowScroller[0].scrollLeft = scrollLeft;
-      }
-
-      if (vScrollDist) {
-        vScrollDir = prevScrollTop < scrollTop ? 1 : -1;
-        prevScrollTop = scrollTop;
-
-        // switch virtual pages if needed
-        if (vScrollDist < viewportH) {
-          scrollTo(scrollTop + offset);
-        } else {
-          var oldOffset = offset;
-          if (h == viewportH) {
-            page = 0;
-          } else {
-            page = Math.min(n - 1, Math.floor(scrollTop * ((th - viewportH) / (h - viewportH)) * (1 / ph)));
-          }
-          offset = Math.round(page * cj);
-          if (oldOffset != offset) {
-            invalidateAllRows();
-          }
-        }
-      }
-
-      if (hScrollDist || vScrollDist) {
-        if (h_render) {
-          clearTimeout(h_render);
-        }
-
-        if (Math.abs(lastRenderedScrollTop - scrollTop) > 20 ||
-            Math.abs(lastRenderedScrollLeft - scrollLeft) > 20) {
-          if (options.forceSyncScrolling || (
-              Math.abs(lastRenderedScrollTop - scrollTop) < viewportH &&
-              Math.abs(lastRenderedScrollLeft - scrollLeft) < viewportW)) {
-            render();
-          } else {
-            h_render = setTimeout(render, 50);
-          }
-
-          trigger(self.onViewportChanged, {});
-        }
-      }
-
-      trigger(self.onScroll, {scrollLeft: scrollLeft, scrollTop: scrollTop});
-    }
-
-    function asyncPostProcessRows() {
-      while (postProcessFromRow <= postProcessToRow) {
-        var row = (vScrollDir >= 0) ? postProcessFromRow++ : postProcessToRow--;
-        var cacheEntry = rowsCache[row];
-        if (!cacheEntry || row >= getDataLength()) {
-          continue;
-        }
-
-        if (!postProcessedRows[row]) {
-          postProcessedRows[row] = {};
-        }
-
-        ensureCellNodesInRowsCache(row);
-        for (var columnIdx in cacheEntry.cellNodesByColumnIdx) {
-          if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) {
-            continue;
-          }
-
-          columnIdx = columnIdx | 0;
-
-          var m = columns[columnIdx];
-          if (m.asyncPostRender && !postProcessedRows[row][columnIdx]) {
-            var node = cacheEntry.cellNodesByColumnIdx[columnIdx];
-            if (node) {
-              m.asyncPostRender(node, postProcessFromRow, getDataItem(row), m);
-            }
-            postProcessedRows[row][columnIdx] = true;
-          }
-        }
-
-        h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);
-        return;
-      }
-    }
-
-    function updateCellCssStylesOnRenderedRows(addedHash, removedHash) {
-      var node, columnId, addedRowHash, removedRowHash;
-      for (var row in rowsCache) {
-        removedRowHash = removedHash && removedHash[row];
-        addedRowHash = addedHash && addedHash[row];
-
-        if (removedRowHash) {
-          for (columnId in removedRowHash) {
-            if (!addedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) {
-              node = getCellNode(row, getColumnIndex(columnId));
-              if (node) {
-                $(node).removeClass(removedRowHash[columnId]);
-              }
-            }
-          }
-        }
-
-        if (addedRowHash) {
-          for (columnId in addedRowHash) {
-            if (!removedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) {
-              node = getCellNode(row, getColumnIndex(columnId));
-              if (node) {
-                $(node).addClass(addedRowHash[columnId]);
-              }
-            }
-          }
-        }
-      }
-    }
-
-    function addCellCssStyles(key, hash) {
-      if (cellCssClasses[key]) {
-        throw "addCellCssStyles: cell CSS hash with key '" + key + "' already exists.";
-      }
-
-      cellCssClasses[key] = hash;
-      updateCellCssStylesOnRenderedRows(hash, null);
-
-      trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash });
-    }
-
-    function removeCellCssStyles(key) {
-      if (!cellCssClasses[key]) {
-        return;
-      }
-
-      updateCellCssStylesOnRenderedRows(null, cellCssClasses[key]);
-      delete cellCssClasses[key];
-
-      trigger(self.onCellCssStylesChanged, { "key": key, "hash": null });
-    }
-
-    function setCellCssStyles(key, hash) {
-      var prevHash = cellCssClasses[key];
-
-      cellCssClasses[key] = hash;
-      updateCellCssStylesOnRenderedRows(hash, prevHash);
-
-      trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash });
-    }
-
-    function getCellCssStyles(key) {
-      return cellCssClasses[key];
-    }
-
-    function flashCell(row, cell, speed) {
-      speed = speed || 100;
-      if (rowsCache[row]) {
-        var $cell = $(getCellNode(row, cell));
-
-        function toggleCellClass(times) {
-          if (!times) {
-            return;
-          }
-          setTimeout(function () {
-                $cell.queue(function () {
-                  $cell.toggleClass(options.cellFlashingCssClass).dequeue();
-                  toggleCellClass(times - 1);
-                });
-              },
-              speed);
-        }
-
-        toggleCellClass(4);
-      }
-    }
-
-    //////////////////////////////////////////////////////////////////////////////////////////////
-    // Interactivity
-
-    function handleDragInit(e, dd) {
-      var cell = getCellFromEvent(e);
-      if (!cell || !cellExists(cell.row, cell.cell)) {
-        return false;
-      }
-
-      retval = trigger(self.onDragInit, dd, e);
-      if (e.isImmediatePropagationStopped()) {
-        return retval;
-      }
-
-      // if nobody claims to be handling drag'n'drop by stopping immediate propagation,
-      // cancel out of it
-      return false;
-    }
-
-    function handleDragStart(e, dd) {
-      var cell = getCellFromEvent(e);
-      if (!cell || !cellExists(cell.row, cell.cell)) {
-        return false;
-      }
-
-      var retval = trigger(self.onDragStart, dd, e);
-      if (e.isImmediatePropagationStopped()) {
-        return retval;
-      }
-
-      return false;
-    }
-
-    function handleDrag(e, dd) {
-      return trigger(self.onDrag, dd, e);
-    }
-
-    function handleDragEnd(e, dd) {
-      trigger(self.onDragEnd, dd, e);
-    }
-
-    function handleKeyDown(e) {
-      trigger(self.onKeyDown, {row: activeRow, cell: activeCell}, e);
-      var handled = e.isImmediatePropagationStopped();
-
-      if (!handled) {
-        if (!e.shiftKey && !e.altKey && !e.ctrlKey) {
-          if (e.which == 27) {
-            if (!getEditorLock().isActive()) {
-              return; // no editing mode to cancel, allow bubbling and default processing (exit without cancelling the event)
-            }
-            cancelEditAndSetFocus();
-          } else if (e.which == 37) {
-            navigateLeft();
-          } else if (e.which == 39) {
-            navigateRight();
-          } else if (e.which == 38) {
-            navigateUp();
-          } else if (e.which == 40) {
-            navigateDown();
-          } else if (e.which == 9) {
-            navigateNext();
-          } else if (e.which == 13) {
-            if (options.editable) {
-              if (currentEditor) {
-                // adding new row
-                if (activeRow === getDataLength()) {
-                  navigateDown();
-                }
-                else {
-                  commitEditAndSetFocus();
-                }
-              } else {
-                if (getEditorLock().commitCurrentEdit()) {
-                  makeActiveCellEditable();
-                }
-              }
-            }
-          } else {
-            return;
-          }
-        } else if (e.which == 9 && e.shiftKey && !e.ctrlKey && !e.altKey) {
-          navigatePrev();
-        } else {
-          return;
-        }
-      }
-
-      // the event has been handled so don't let parent element (bubbling/propagation) or browser (default) handle it
-      e.stopPropagation();
-      e.preventDefault();
-      try {
-        e.originalEvent.keyCode = 0; // prevent default behaviour for special keys in IE browsers (F3, F5, etc.)
-      }
-        // ignore exceptions - setting the original event's keycode throws access denied exception for "Ctrl"
-        // (hitting control key only, nothing else), "Shift" (maybe others)
-      catch (error) {
-      }
-    }
-
-    function handleClick(e) {
-      if (!currentEditor) {
-        // if this click resulted in some cell child node getting focus,
-        // don't steal it back - keyboard events will still bubble up
-        if (e.target != document.activeElement) {
-          setFocus();
-        }
-      }
-
-      var cell = getCellFromEvent(e);
-      if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
-        return;
-      }
-
-      trigger(self.onClick, {row: cell.row, cell: cell.cell}, e);
-      if (e.isImmediatePropagationStopped()) {
-        return;
-      }
-
-      if ((activeCell != cell.cell || activeRow != cell.row) && canCellBeActive(cell.row, cell.cell)) {
-        if (!getEditorLock().isActive() || getEditorLock().commitCurrentEdit()) {
-          scrollRowIntoView(cell.row, false);
-          setActiveCellInternal(getCellNode(cell.row, cell.cell), (cell.row === getDataLength()) || options.autoEdit);
-        }
-      }
-    }
-
-    function handleContextMenu(e) {
-      var $cell = $(e.target).closest(".slick-cell", $canvas);
-      if ($cell.length === 0) {
-        return;
-      }
-
-      // are we editing this cell?
-      if (activeCellNode === $cell[0] && currentEditor !== null) {
-        return;
-      }
-
-      trigger(self.onContextMenu, {}, e);
-    }
-
-    function handleDblClick(e) {
-      var cell = getCellFromEvent(e);
-      if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
-        return;
-      }
-
-      trigger(self.onDblClick, {row: cell.row, cell: cell.cell}, e);
-      if (e.isImmediatePropagationStopped()) {
-        return;
-      }
-
-      if (options.editable) {
-        gotoCell(cell.row, cell.cell, true);
-      }
-    }
-
-    function handleHeaderMouseEnter(e) {
-      trigger(self.onHeaderMouseEnter, {
-        "column": $(this).data("column")
-      }, e);
-    }
-
-    function handleHeaderMouseLeave(e) {
-      trigger(self.onHeaderMouseLeave, {
-        "column": $(this).data("column")
-      }, e);
-    }
-
-    function handleHeaderContextMenu(e) {
-      var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");
-      var column = $header && $header.data("column");
-      trigger(self.onHeaderContextMenu, {column: column}, e);
-    }
-
-    function handleHeaderClick(e) {
-      var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");
-      var column = $header && $header.data("column");
-      if (column) {
-        trigger(self.onHeaderClick, {column: column}, e);
-      }
-    }
-
-    function handleMouseEnter(e) {
-      trigger(self.onMouseEnter, {}, e);
-    }
-
-    function handleMouseLeave(e) {
-      trigger(self.onMouseLeave, {}, e);
-    }
-
-    function cellExists(row, cell) {
-      return !(row < 0 || row >= getDataLength() || cell < 0 || cell >= columns.length);
-    }
-
-    function getCellFromPoint(x, y) {
-      var row = Math.floor((y + offset) / options.rowHeight);
-      var cell = 0;
-
-      var w = 0;
-      for (var i = 0; i < columns.length && w < x; i++) {
-        w += columns[i].width;
-        cell++;
-      }
-
-      if (cell < 0) {
-        cell = 0;
-      }
-
-      return {row: row, cell: cell - 1};
-    }
-
-    function getCellFromNode(cellNode) {
-      // read column number from .l<columnNumber> CSS class
-      var cls = /l\d+/.exec(cellNode.className);
-      if (!cls) {
-        throw "getCellFromNode: cannot get cell - " + cellNode.className;
-      }
-      return parseInt(cls[0].substr(1, cls[0].length - 1), 10);
-    }
-
-    function getRowFromNode(rowNode) {
-      for (var row in rowsCache) {
-        if (rowsCache[row].rowNode === rowNode) {
-          return row | 0;
-        }
-      }
-
-      return null;
-    }
-
-    function getCellFromEvent(e) {
-      var $cell = $(e.target).closest(".slick-cell", $canvas);
-      if (!$cell.length) {
-        return null;
-      }
-
-      var row = getRowFromNode($cell[0].parentNode);
-      var cell = getCellFromNode($cell[0]);
-
-      if (row == null || cell == null) {
-        return null;
-      } else {
-        return {
-          "row": row,
-          "cell": cell
-        };
-      }
-    }
-
-    function getCellNodeBox(row, cell) {
-      if (!cellExists(row, cell)) {
-        return null;
-      }
-
-      var y1 = row * options.rowHeight - offset;
-      var y2 = y1 + options.rowHeight - 1;
-      var x1 = 0;
-      for (var i = 0; i < cell; i++) {
-        x1 += columns[i].width;
-      }
-      var x2 = x1 + columns[cell].width;
-
-      return {
-        top: y1,
-        left: x1,
-        bottom: y2,
-        right: x2
-      };
-    }
-
-    //////////////////////////////////////////////////////////////////////////////////////////////
-    // Cell switching
-
-    function resetActiveCell() {
-      setActiveCellInternal(null, false);
-    }
-
-    function setFocus() {
-      $focusSink[0].focus();
-    }
-
-    function scrollCellIntoView(row, cell) {
-      var colspan = getColspan(row, cell);
-      var left = columnPosLeft[cell],
-        right = columnPosRight[cell + (colspan > 1 ? colspan - 1 : 0)],
-        scrollRight = scrollLeft + viewportW;
-
-      if (left < scrollLeft) {
-        $viewport.scrollLeft(left);
-        handleScroll();
-        render();
-      } else if (right > scrollRight) {
-        $viewport.scrollLeft(Math.min(left, right - $viewport[0].clientWidth));
-        handleScroll();
-        render();
-      }
-    }
-
-    function setActiveCellInternal(newCell, editMode) {
-      if (activeCellNode !== null) {
-        makeActiveCellNormal();
-        $(activeCellNode).removeClass("active");
-        if (rowsCache[activeRow]) {
-          $(rowsCache[activeRow].rowNode).removeClass("active");
-        }
-      }
-
-      var activeCellChanged = (activeCellNode !== newCell);
-      activeCellNode = newCell;
-
-      if (activeCellNode != null) {
-        activeRow = getRowFromNode(activeCellNode.parentNode);
-        activeCell = activePosX = getCellFromNode(activeCellNode);
-
-        $(activeCellNode).addClass("active");
-        $(rowsCache[activeRow].rowNode).addClass("active");
-
-        if (options.editable && editMode && isCellPotentiallyEditable(activeRow, activeCell)) {
-          clearTimeout(h_editorLoader);
-
-          if (options.asyncEditorLoading) {
-            h_editorLoader = setTimeout(function () {
-              makeActiveCellEditable();
-            }, options.asyncEditorLoadDelay);
-          } else {
-            makeActiveCellEditable();
-          }
-        }
-      } else {
-        activeRow = activeCell = null;
-      }
-
-      if (activeCellChanged) {
-        trigger(self.onActiveCellChanged, getActiveCell());
-      }
-    }
-
-    function clearTextSelection() {
-      if (document.selection && document.selection.empty) {
-        document.selection.empty();
-      } else if (window.getSelection) {
-        var sel = window.getSelection();
-        if (sel && sel.removeAllRanges) {
-          sel.removeAllRanges();
-        }
-      }
-    }
-
-    function isCellPotentiallyEditable(row, cell) {
-      // is the data for this row loaded?
-      if (row < getDataLength() && !getDataItem(row)) {
-        return false;
-      }
-
-      // are we in the Add New row?  can we create new from this cell?
-      if (columns[cell].cannotTriggerInsert && row >= getDataLength()) {
-        return false;
-      }
-
-      // does this cell have an editor?
-      if (!getEditor(row, cell)) {
-        return false;
-      }
-
-      return true;
-    }
-
-    function makeActiveCellNormal() {
-      if (!currentEditor) {
-        return;
-      }
-      trigger(self.onBeforeCellEditorDestroy, {editor: currentEditor});
-      currentEditor.destroy();
-      currentEditor = null;
-
-      if (activeCellNode) {
-        var d = getDataItem(activeRow);
-        $(activeCellNode).removeClass("editable invalid");
-        if (d) {
-          var column = columns[activeCell];
-          var formatter = getFormatter(activeRow, column);
-          activeCellNode.innerHTML = formatter(activeRow, activeCell, getDataItemValueForColumn(d, column), column, getDataItem(activeRow));
-          invalidatePostProcessingResults(activeRow);
-        }
-      }
-
-      // if there previously was text selected on a page (such as selected text in the edit cell just removed),
-      // IE can't set focus to anything else correctly
-      if ($.browser.msie) {
-        clearTextSelection();
-      }
-
-      getEditorLock().deactivate(editController);
-    }
-
-    function makeActiveCellEditable(editor) {
-      if (!activeCellNode) {
-        return;
-      }
-      if (!options.editable) {
-        throw "Grid : makeActiveCellEditable : should never get called when options.editable is false";
-      }
-
-      // cancel pending async call if there is one
-      clearTimeout(h_editorLoader);
-
-      if (!isCellPotentiallyEditable(activeRow, activeCell)) {
-        return;
-      }
-
-      var columnDef = columns[activeCell];
-      var item = getDataItem(activeRow);
-
-      if (trigger(self.onBeforeEditCell, {row: activeRow, cell: activeCell, item: item, column: columnDef}) === false) {
-        setFocus();
-        return;
-      }
-
-      getEditorLock().activate(editController);
-      $(activeCellNode).addClass("editable");
-
-      // don't clear the cell if a custom editor is passed through
-      if (!editor) {
-        activeCellNode.innerHTML = "";
-      }
-
-      currentEditor = new (editor || getEditor(activeRow, activeCell))({
-        grid: self,
-        gridPosition: absBox($container[0]),
-        position: absBox(activeCellNode),
-        container: activeCellNode,
-        column: columnDef,
-        item: item || {},
-        commitChanges: commitEditAndSetFocus,
-        cancelChanges: cancelEditAndSetFocus
-      });
-
-      if (item) {
-        currentEditor.loadValue(item);
-      }
-
-      serializedEditorValue = currentEditor.serializeValue();
-
-      if (currentEditor.position) {
-        handleActiveCellPositionChange();
-      }
-    }
-
-    function commitEditAndSetFocus() {
-      // if the commit fails, it would do so due to a validation error
-      // if so, do not steal the focus from the editor
-      if (getEditorLock().commitCurrentEdit()) {
-        setFocus();
-        if (options.autoEdit) {
-          navigateDown();
-        }
-      }
-    }
-
-    function cancelEditAndSetFocus() {
-      if (getEditorLock().cancelCurrentEdit()) {
-        setFocus();
-      }
-    }
-
-    function absBox(elem) {
-      var box = {
-        top: elem.offsetTop,
-        left: elem.offsetLeft,
-        bottom: 0,
-        right: 0,
-        width: $(elem).outerWidth(),
-        height: $(elem).outerHeight(),
-        visible: true};
-      box.bottom = box.top + box.height;
-      box.right = box.left + box.width;
-
-      // walk up the tree
-      var offsetParent = elem.offsetParent;
-      while ((elem = elem.parentNode) != document.body) {
-        if (box.visible && elem.scrollHeight != elem.offsetHeight && $(elem).css("overflowY") != "visible") {
-          box.visible = box.bottom > elem.scrollTop && box.top < elem.scrollTop + elem.clientHeight;
-        }
-
-        if (box.visible && elem.scrollWidth != elem.offsetWidth && $(elem).css("overflowX") != "visible") {
-          box.visible = box.right > elem.scrollLeft && box.left < elem.scrollLeft + elem.clientWidth;
-        }
-
-        box.left -= elem.scrollLeft;
-        box.top -= elem.scrollTop;
-
-        if (elem === offsetParent) {
-          box.left += elem.offsetLeft;
-          box.top += elem.offsetTop;
-          offsetParent = elem.offsetParent;
-        }
-
-        box.bottom = box.top + box.height;
-        box.right = box.left + box.width;
-      }
-
-      return box;
-    }
-
-    function getActiveCellPosition() {
-      return absBox(activeCellNode);
-    }
-
-    function getGridPosition() {
-      return absBox($container[0])
-    }
-
-    function handleActiveCellPositionChange() {
-      if (!activeCellNode) {
-        return;
-      }
-
-      trigger(self.onActiveCellPositionChanged, {});
-
-      if (currentEditor) {
-        var cellBox = getActiveCellPosition();
-        if (currentEditor.show && currentEditor.hide) {
-          if (!cellBox.visible) {
-            currentEditor.hide();
-          } else {
-            currentEditor.show();
-          }
-        }
-
-        if (currentEditor.position) {
-          currentEditor.position(cellBox);
-        }
-      }
-    }
-
-    function getCellEditor() {
-      return currentEditor;
-    }
-
-    function getActiveCell() {
-      if (!activeCellNode) {
-        return null;
-      } else {
-        return {row: activeRow, cell: activeCell};
-      }
-    }
-
-    function getActiveCellNode() {
-      return activeCellNode;
-    }
-
-    function scrollRowIntoView(row, doPaging) {
-      var rowAtTop = row * options.rowHeight;
-      var rowAtBottom = (row + 1) * options.rowHeight - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0);
-
-      // need to page down?
-      if ((row + 1) * options.rowHeight > scrollTop + viewportH + offset) {
-        scrollTo(doPaging ? rowAtTop : rowAtBottom);
-        render();
-      }
-      // or page up?
-      else if (row * options.rowHeight < scrollTop + offset) {
-        scrollTo(doPaging ? rowAtBottom : rowAtTop);
-        render();
-      }
-    }
-
-    function scrollRowToTop(row) {
-      scrollTo(row * options.rowHeight);
-      render();
-    }
-
-    function getColspan(row, cell) {
-      var metadata = data.getItemMetadata && data.getItemMetadata(row);
-      if (!metadata || !metadata.columns) {
-        return 1;
-      }
-
-      var columnData = metadata.columns[columns[cell].id] || metadata.columns[cell];
-      var colspan = (columnData && columnData.colspan);
-      if (colspan === "*") {
-        colspan = columns.length - cell;
-      } else {
-        colspan = colspan || 1;
-      }
-
-      return colspan;
-    }
-
-    function findFirstFocusableCell(row) {
-      var cell = 0;
-      while (cell < columns.length) {
-        if (canCellBeActive(row, cell)) {
-          return cell;
-        }
-        cell += getColspan(row, cell);
-      }
-      return null;
-    }
-
-    function findLastFocusableCell(row) {
-      var cell = 0;
-      var lastFocusableCell = null;
-      while (cell < columns.length) {
-        if (canCellBeActive(row, cell)) {
-          lastFocusableCell = cell;
-        }
-        cell += getColspan(row, cell);
-      }
-      return lastFocusableCell;
-    }
-
-    function gotoRight(row, cell, posX) {
-      if (cell >= columns.length) {
-        return null;
-      }
-
-      do {
-        cell += getColspan(row, cell);
-      }
-      while (cell < columns.length && !canCellBeActive(row, cell));
-
-      if (cell < columns.length) {
-        return {
-          "row": row,
-          "cell": cell,
-          "posX": cell
-        };
-      }
-      return null;
-    }
-
-    function gotoLeft(row, cell, posX) {
-      if (cell <= 0) {
-        return null;
-      }
-
-      var firstFocusableCell = findFirstFocusableCell(row);
-      if (firstFocusableCell === null || firstFocusableCell >= cell) {
-        return null;
-      }
-
-      var prev = {
-        "row": row,
-        "cell": firstFocusableCell,
-        "posX": firstFocusableCell
-      };
-      var pos;
-      while (true) {
-        pos = gotoRight(prev.row, prev.cell, prev.posX);
-        if (!pos) {
-          return null;
-        }
-        if (pos.cell >= cell) {
-          return prev;
-        }
-        prev = pos;
-      }
-    }
-
-    function gotoDown(row, cell, posX) {
-      var prevCell;
-      while (true) {
-        if (++row >= getDataLength() + (options.enableAddRow ? 1 : 0)) {
-          return null;
-        }
-
-        prevCell = cell = 0;
-        while (cell <= posX) {
-          prevCell = cell;
-          cell += getColspan(row, cell);
-        }
-
-        if (canCellBeActive(row, prevCell)) {
-          return {
-            "row": row,
-            "cell": prevCell,
-            "posX": posX
-          };
-        }
-      }
-    }
-
-    function gotoUp(row, cell, posX) {
-      var prevCell;
-      while (true) {
-        if (--row < 0) {
-          return null;
-        }
-
-        prevCell = cell = 0;
-        while (cell <= posX) {
-          prevCell = cell;
-          cell += getColspan(row, cell);
-        }
-
-        if (canCellBeActive(row, prevCell)) {
-          return {
-            "row": row,
-            "cell": prevCell,
-            "posX": posX
-          };
-        }
-      }
-    }
-
-    function gotoNext(row, cell, posX) {
-      var pos = gotoRight(row, cell, posX);
-      if (pos) {
-        return pos;
-      }
-
-      var firstFocusableCell = null;
-      while (++row < getDataLength() + (options.enableAddRow ? 1 : 0)) {
-        firstFocusableCell = findFirstFocusableCell(row);
-        if (firstFocusableCell !== null) {
-          return {
-            "row": row,
-            "cell": firstFocusableCell,
-            "posX": firstFocusableCell
-          };
-        }
-      }
-      return null;
-    }
-
-    function gotoPrev(row, cell, posX) {
-      var pos;
-      var lastSelectableCell;
-      while (!pos) {
-        pos = gotoLeft(row, cell, posX);
-        if (pos) {
-          break;
-        }
-        if (--row < 0) {
-          return null;
-        }
-
-        cell = 0;
-        lastSelectableCell = findLastFocusableCell(row);
-        if (lastSelectableCell !== null) {
-          pos = {
-            "row": row,
-            "cell": lastSelectableCell,
-            "posX": lastSelectableCell
-          };
-        }
-      }
-      return pos;
-    }
-
-    function navigateRight() {
-      navigate("right");
-    }
-
-    function navigateLeft() {
-      navigate("left");
-    }
-
-    function navigateDown() {
-      navigate("down");
-    }
-
-    function navigateUp() {
-      navigate("up");
-    }
-
-    function navigateNext() {
-      navigate("next");
-    }
-
-    function navigatePrev() {
-      navigate("prev");
-    }
-
-    function navigate(dir) {
-      if (!activeCellNode || !options.enableCellNavigation) {
-        return;
-      }
-      if (!getEditorLock().commitCurrentEdit()) {
-        return;
-      }
-      setFocus();
-
-      var stepFunctions = {
-        "up": gotoUp,
-        "down": gotoDown,
-        "left": gotoLeft,
-        "right": gotoRight,
-        "prev": gotoPrev,
-        "next": gotoNext
-      };
-      var stepFn = stepFunctions[dir];
-      var pos = stepFn(activeRow, activeCell, activePosX);
-      if (pos) {
-        var isAddNewRow = (pos.row == getDataLength());
-        scrollRowIntoView(pos.row, !isAddNewRow);
-        scrollCellIntoView(pos.row, pos.cell);
-        setActiveCellInternal(getCellNode(pos.row, pos.cell), isAddNewRow || options.autoEdit);
-        activePosX = pos.posX;
-      } else {
-        setActiveCellInternal(getCellNode(activeRow, activeCell), (activeRow == getDataLength()) || options.autoEdit);
-      }
-    }
-
-    function getCellNode(row, cell) {
-      if (rowsCache[row]) {
-        ensureCellNodesInRowsCache(row);
-        return rowsCache[row].cellNodesByColumnIdx[cell];
-      }
-      return null;
-    }
-
-    function setActiveCell(row, cell) {
-      if (!initialized) { return; }
-      if (row > getDataLength() || row < 0 || cell >= columns.length || cell < 0) {
-        return;
-      }
-
-      if (!options.enableCellNavigation) {
-        return;
-      }
-
-      scrollRowIntoView(row, false);
-      scrollCellIntoView(row, cell);
-      setActiveCellInternal(getCellNode(row, cell), false);
-    }
-
-    function canCellBeActive(row, cell) {
-      if (!options.enableCellNavigation || row >= getDataLength() + (options.enableAddRow ? 1 : 0) ||
-          row < 0 || cell >= columns.length || cell < 0) {
-        return false;
-      }
-
-      var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
-      if (rowMetadata && typeof rowMetadata.focusable === "boolean") {
-        return rowMetadata.focusable;
-      }
-
-      var columnMetadata = rowMetadata && rowMetadata.columns;
-      if (columnMetadata && columnMetadata[columns[cell].id] && typeof columnMetadata[columns[cell].id].focusable === "boolean") {
-        return columnMetadata[columns[cell].id].focusable;
-      }
-      if (columnMetadata && columnMetadata[cell] && typeof columnMetadata[cell].focusable === "boolean") {
-        return columnMetadata[cell].focusable;
-      }
-
-      if (typeof columns[cell].focusable === "boolean") {
-        return columns[cell].focusable;
-      }
-
-      return true;
-    }
-
-    function canCellBeSelected(row, cell) {
-      if (row >= getDataLength() || row < 0 || cell >= columns.length || cell < 0) {
-        return false;
-      }
-
-      var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
-      if (rowMetadata && typeof rowMetadata.selectable === "boolean") {
-        return rowMetadata.selectable;
-      }
-
-      var columnMetadata = rowMetadata && rowMetadata.columns && (rowMetadata.columns[columns[cell].id] || rowMetadata.columns[cell]);
-      if (columnMetadata && typeof columnMetadata.selectable === "boolean") {
-        return columnMetadata.selectable;
-      }
-
-      if (typeof columns[cell].selectable === "boolean") {
-        return columns[cell].selectable;
-      }
-
-      return true;
-    }
-
-    function gotoCell(row, cell, forceEdit) {
-      if (!initialized) { return; }
-      if (!canCellBeActive(row, cell)) {
-        return;
-      }
-
-      if (!getEditorLock().commitCurrentEdit()) {
-        return;
-      }
-
-      scrollRowIntoView(row, false);
-      scrollCellIntoView(row, cell);
-
-      var newCell = getCellNode(row, cell);
-
-      // if selecting the 'add new' row, start editing right away
-      setActiveCellInternal(newCell, forceEdit || (row === getDataLength()) || options.autoEdit);
-
-      // if no editor was created, set the focus back on the grid
-      if (!currentEditor) {
-        setFocus();
-      }
-    }
-
-
-    //////////////////////////////////////////////////////////////////////////////////////////////
-    // IEditor implementation for the editor lock
-
-    function commitCurrentEdit() {
-      var item = getDataItem(activeRow);
-      var column = columns[activeCell];
-
-      if (currentEditor) {
-        if (currentEditor.isValueChanged()) {
-          var validationResults = currentEditor.validate();
-
-          if (validationResults.valid) {
-            if (activeRow < getDataLength()) {
-              var editCommand = {
-                row: activeRow,
-                cell: activeCell,
-                editor: currentEditor,
-                serializedValue: currentEditor.serializeValue(),
-                prevSerializedValue: serializedEditorValue,
-                execute: function () {
-                  this.editor.applyValue(item, this.serializedValue);
-                  updateRow(this.row);
-                },
-                undo: function () {
-                  this.editor.applyValue(item, this.prevSerializedValue);
-                  updateRow(this.row);
-                }
-              };
-
-              if (options.editCommandHandler) {
-                makeActiveCellNormal();
-                options.editCommandHandler(item, column, editCommand);
-              } else {
-                editCommand.execute();
-                makeActiveCellNormal();
-              }
-
-              trigger(self.onCellChange, {
-                row: activeRow,
-                cell: activeCell,
-                item: item
-              });
-            } else {
-              var newItem = {};
-              currentEditor.applyValue(newItem, currentEditor.serializeValue());
-              makeActiveCellNormal();
-              trigger(self.onAddNewRow, {item: newItem, column: column});
-            }
-
-            // check whether the lock has been re-acquired by event handlers
-            return !getEditorLock().isActive();
-          } else {
-            // TODO: remove and put in onValidationError handlers in examples
-            $(activeCellNode).addClass("invalid");
-            $(activeCellNode).stop(true, true).effect("highlight", {color: "red"}, 300);
-
-            trigger(self.onValidationError, {
-              editor: currentEditor,
-              cellNode: activeCellNode,
-              validationResults: validationResults,
-              row: activeRow,
-              cell: activeCell,
-              column: column
-            });
-
-            currentEditor.focus();
-            return false;
-          }
-        }
-
-        makeActiveCellNormal();
-      }
-      return true;
-    }
-
-    function cancelCurrentEdit() {
-      makeActiveCellNormal();
-      return true;
-    }
-
-    function rowsToRanges(rows) {
-      var ranges = [];
-      var lastCell = columns.length - 1;
-      for (var i = 0; i < rows.length; i++) {
-        ranges.push(new Slick.Range(rows[i], 0, rows[i], lastCell));
-      }
-      return ranges;
-    }
-
-    function getSelectedRows() {
-      if (!selectionModel) {
-        throw "Selection model is not set";
-      }
-      return selectedRows;
-    }
-
-    function setSelectedRows(rows) {
-      if (!selectionModel) {
-        throw "Selection model is not set";
-      }
-      selectionModel.setSelectedRanges(rowsToRanges(rows));
-    }
-
-
-    //////////////////////////////////////////////////////////////////////////////////////////////
-    // Debug
-
-    this.debug = function () {
-      var s = "";
-
-      s += ("\n" + "counter_rows_rendered:  " + counter_rows_rendered);
-      s += ("\n" + "counter_rows_removed:  " + counter_rows_removed);
-      s += ("\n" + "renderedRows:  " + renderedRows);
-      s += ("\n" + "numVisibleRows:  " + numVisibleRows);
-      s += ("\n" + "maxSupportedCssHeight:  " + maxSupportedCssHeight);
-      s += ("\n" + "n(umber of pages):  " + n);
-      s += ("\n" + "(current) page:  " + page);
-      s += ("\n" + "page height (ph):  " + ph);
-      s += ("\n" + "vScrollDir:  " + vScrollDir);
-
-      alert(s);
-    };
-
-    // a debug helper to be able to access private members
-    this.eval = function (expr) {
-      return eval(expr);
-    };
-
-    //////////////////////////////////////////////////////////////////////////////////////////////
-    // Public API
-
-    $.extend(this, {
-      "slickGridVersion": "2.1",
-
-      // Events
-      "onScroll": new Slick.Event(),
-      "onSort": new Slick.Event(),
-      "onHeaderMouseEnter": new Slick.Event(),
-      "onHeaderMouseLeave": new Slick.Event(),
-      "onHeaderContextMenu": new Slick.Event(),
-      "onHeaderClick": new Slick.Event(),
-      "onHeaderCellRendered": new Slick.Event(),
-      "onBeforeHeaderCellDestroy": new Slick.Event(),
-      "onHeaderRowCellRendered": new Slick.Event(),
-      "onBeforeHeaderRowCellDestroy": new Slick.Event(),
-      "onMouseEnter": new Slick.Event(),
-      "onMouseLeave": new Slick.Event(),
-      "onClick": new Slick.Event(),
-      "onDblClick": new Slick.Event(),
-      "onContextMenu": new Slick.Event(),
-      "onKeyDown": new Slick.Event(),
-      "onAddNewRow": new Slick.Event(),
-      "onValidationError": new Slick.Event(),
-      "onViewportChanged": new Slick.Event(),
-      "onColumnsReordered": new Slick.Event(),
-      "onColumnsResized": new Slick.Event(),
-      "onCellChange": new Slick.Event(),
-      "onBeforeEditCell": new Slick.Event(),
-      "onBeforeCellEditorDestroy": new Slick.Event(),
-      "onBeforeDestroy": new Slick.Event(),
-      "onActiveCellChanged": new Slick.Event(),
-      "onActiveCellPositionChanged": new Slick.Event(),
-      "onDragInit": new Slick.Event(),
-      "onDragStart": new Slick.Event(),
-      "onDrag": new Slick.Event(),
-      "onDragEnd": new Slick.Event(),
-      "onSelectedRowsChanged": new Slick.Event(),
-      "onCellCssStylesChanged": new Slick.Event(),
-
-      // Methods
-      "registerPlugin": registerPlugin,
-      "unregisterPlugin": unregisterPlugin,
-      "getColumns": getColumns,
-      "setColumns": setColumns,
-      "getColumnIndex": getColumnIndex,
-      "updateColumnHeader": updateColumnHeader,
-      "setSortColumn": setSortColumn,
-      "setSortColumns": setSortColumns,
-      "getSortColumns": getSortColumns,
-      "autosizeColumns": autosizeColumns,
-      "getOptions": getOptions,
-      "setOptions": setOptions,
-      "getData": getData,
-      "getDataLength": getDataLength,
-      "getDataItem": getDataItem,
-      "setData": setData,
-      "getSelectionModel": getSelectionModel,
-      "setSelectionModel": setSelectionModel,
-      "getSelectedRows": getSelectedRows,
-      "setSelectedRows": setSelectedRows,
-
-      "render": render,
-      "invalidate": invalidate,
-      "invalidateRow": invalidateRow,
-      "invalidateRows": invalidateRows,
-      "invalidateAllRows": invalidateAllRows,
-      "updateCell": updateCell,
-      "updateRow": updateRow,
-      "getViewport": getVisibleRange,
-      "getRenderedRange": getRenderedRange,
-      "resizeCanvas": resizeCanvas,
-      "updateRowCount": updateRowCount,
-      "scrollRowIntoView": scrollRowIntoView,
-      "scrollRowToTop": scrollRowToTop,
-      "scrollCellIntoView": scrollCellIntoView,
-      "getCanvasNode": getCanvasNode,
-      "focus": setFocus,
-
-      "getCellFromPoint": getCellFromPoint,
-      "getCellFromEvent": getCellFromEvent,
-      "getActiveCell": getActiveCell,
-      "setActiveCell": setActiveCell,
-      "getActiveCellNode": getActiveCellNode,
-      "getActiveCellPosition": getActiveCellPosition,
-      "resetActiveCell": resetActiveCell,
-      "editActiveCell": makeActiveCellEditable,
-      "getCellEditor": getCellEditor,
-      "getCellNode": getCellNode,
-      "getCellNodeBox": getCellNodeBox,
-      "canCellBeSelected": canCellBeSelected,
-      "canCellBeActive": canCellBeActive,
-      "navigatePrev": navigatePrev,
-      "navigateNext": navigateNext,
-      "navigateUp": navigateUp,
-      "navigateDown": navigateDown,
-      "navigateLeft": navigateLeft,
-      "navigateRight": navigateRight,
-      "gotoCell": gotoCell,
-      "getTopPanel": getTopPanel,
-      "setTopPanelVisibility": setTopPanelVisibility,
-      "setHeaderRowVisibility": setHeaderRowVisibility,
-      "getHeaderRow": getHeaderRow,
-      "getHeaderRowColumn": getHeaderRowColumn,
-      "getGridPosition": getGridPosition,
-      "flashCell": flashCell,
-      "addCellCssStyles": addCellCssStyles,
-      "setCellCssStyles": setCellCssStyles,
-      "removeCellCssStyles": removeCellCssStyles,
-      "getCellCssStyles": getCellCssStyles,
-
-      "init": finishInitialization,
-      "destroy": destroy,
-
-      // IEditor implementation
-      "getEditorLock": getEditorLock,
-      "getEditController": getEditController
-    });
-
-    init();
-  }
-}(jQuery));
+/**
+ * @license
+ * (c) 2009-2013 Michael Leibman
+ * michael{dot}leibman{at}gmail{dot}com
+ * http://github.com/mleibman/slickgrid
+ *
+ * Distributed under MIT license.
+ * All rights reserved.
+ *
+ * SlickGrid v2.2
+ *
+ * NOTES:
+ *     Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods.
+ *     This increases the speed dramatically, but can only be done safely because there are no event handlers
+ *     or data associated with any cell/row DOM nodes.  Cell editors must make sure they implement .destroy()
+ *     and do proper cleanup.
+ */
+
+// make sure required JavaScript modules are loaded
+if (typeof jQuery === "undefined") {
+  throw "SlickGrid requires jquery module to be loaded";
+}
+if (!jQuery.fn.drag) {
+  throw "SlickGrid requires jquery.event.drag module to be loaded";
+}
+if (typeof Slick === "undefined") {
+  throw "slick.core.js not loaded";
+}
+
+
+(function ($) {
+  // Slick.Grid
+  $.extend(true, window, {
+    Slick: {
+      Grid: SlickGrid
+    }
+  });
+
+  // shared across all grids on the page
+  var scrollbarDimensions;
+  var maxSupportedCssHeight;  // browser's breaking point
+
+  //////////////////////////////////////////////////////////////////////////////////////////////
+  // SlickGrid class implementation (available as Slick.Grid)
+
+  /**
+   * Creates a new instance of the grid.
+   * @class SlickGrid
+   * @constructor
+   * @param {Node}              container   Container node to create the grid in.
+   * @param {Array,Object}      data        An array of objects for databinding.
+   * @param {Array}             columns     An array of column definitions.
+   * @param {Object}            options     Grid options.
+   **/
+  function SlickGrid(container, data, columns, options) {
+    // settings
+    var defaults = {
+      explicitInitialization: false,
+      rowHeight: 25,
+      defaultColumnWidth: 80,
+      enableAddRow: false,
+      leaveSpaceForNewRows: false,
+      editable: false,
+      autoEdit: true,
+      enableCellNavigation: true,
+      enableColumnReorder: true,
+      asyncEditorLoading: false,
+      asyncEditorLoadDelay: 100,
+      forceFitColumns: false,
+      enableAsyncPostRender: false,
+      asyncPostRenderDelay: 50,
+      autoHeight: false,
+      editorLock: Slick.GlobalEditorLock,
+      showHeaderRow: false,
+      headerRowHeight: 25,
+      showTopPanel: false,
+      topPanelHeight: 25,
+      formatterFactory: null,
+      editorFactory: null,
+      cellFlashingCssClass: "flashing",
+      selectedCellCssClass: "selected",
+      multiSelect: true,
+      enableTextSelectionOnCells: false,
+      dataItemColumnValueExtractor: null,
+      fullWidthRows: false,
+      multiColumnSort: false,
+      defaultFormatter: defaultFormatter,
+      forceSyncScrolling: false,
+      addNewRowCssClass: "new-row"
+    };
+
+    var columnDefaults = {
+      name: "",
+      resizable: true,
+      sortable: false,
+      minWidth: 30,
+      rerenderOnResize: false,
+      headerCssClass: null,
+      defaultSortAsc: true,
+      focusable: true,
+      selectable: true
+    };
+
+    // scroller
+    var th;   // virtual height
+    var h;    // real scrollable height
+    var ph;   // page height
+    var n;    // number of pages
+    var cj;   // "jumpiness" coefficient
+
+    var page = 0;       // current page
+    var offset = 0;     // current page offset
+    var vScrollDir = 1;
+
+    // private
+    var initialized = false;
+    var $container;
+    var uid = "slickgrid_" + Math.round(1000000 * Math.random());
+    var self = this;
+    var $focusSink, $focusSink2;
+    var $headerScroller;
+    var $headers;
+    var $headerRow, $headerRowScroller, $headerRowSpacer;
+    var $topPanelScroller;
+    var $topPanel;
+    var $viewport;
+    var $canvas;
+    var $style;
+    var $boundAncestors;
+    var stylesheet, columnCssRulesL, columnCssRulesR;
+    var viewportH, viewportW;
+    var canvasWidth;
+    var viewportHasHScroll, viewportHasVScroll;
+    var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding
+        cellWidthDiff = 0, cellHeightDiff = 0;
+    var absoluteColumnMinWidth;
+
+    var tabbingDirection = 1;
+    var activePosX;
+    var activeRow, activeCell;
+    var activeCellNode = null;
+    var currentEditor = null;
+    var serializedEditorValue;
+    var editController;
+
+    var rowsCache = {};
+    var renderedRows = 0;
+    var numVisibleRows;
+    var prevScrollTop = 0;
+    var scrollTop = 0;
+    var lastRenderedScrollTop = 0;
+    var lastRenderedScrollLeft = 0;
+    var prevScrollLeft = 0;
+    var scrollLeft = 0;
+
+    var selectionModel;
+    var selectedRows = [];
+
+    var plugins = [];
+    var cellCssClasses = {};
+
+    var columnsById = {};
+    var sortColumns = [];
+    var columnPosLeft = [];
+    var columnPosRight = [];
+
+
+    // async call handles
+    var h_editorLoader = null;
+    var h_render = null;
+    var h_postrender = null;
+    var postProcessedRows = {};
+    var postProcessToRow = null;
+    var postProcessFromRow = null;
+
+    // perf counters
+    var counter_rows_rendered = 0;
+    var counter_rows_removed = 0;
+
+    // These two variables work around a bug with inertial scrolling in Webkit/Blink on Mac.
+    // See http://crbug.com/312427.
+    var rowNodeFromLastMouseWheelEvent;  // this node must not be deleted while inertial scrolling
+    var zombieRowNodeFromLastMouseWheelEvent;  // node that was hidden instead of getting deleted
+
+
+    //////////////////////////////////////////////////////////////////////////////////////////////
+    // Initialization
+
+    function init() {
+      $container = $(container);
+      if ($container.length < 1) {
+        throw new Error("SlickGrid requires a valid container, " + container + " does not exist in the DOM.");
+      }
+
+      // calculate these only once and share between grid instances
+      maxSupportedCssHeight = maxSupportedCssHeight || getMaxSupportedCssHeight();
+      scrollbarDimensions = scrollbarDimensions || measureScrollbar();
+
+      options = $.extend({}, defaults, options);
+      validateAndEnforceOptions();
+      columnDefaults.width = options.defaultColumnWidth;
+
+      columnsById = {};
+      for (var i = 0; i < columns.length; i++) {
+        var m = columns[i] = $.extend({}, columnDefaults, columns[i]);
+        columnsById[m.id] = i;
+        if (m.minWidth && m.width < m.minWidth) {
+          m.width = m.minWidth;
+        }
+        if (m.maxWidth && m.width > m.maxWidth) {
+          m.width = m.maxWidth;
+        }
+      }
+
+      // validate loaded JavaScript modules against requested options
+      if (options.enableColumnReorder && !$.fn.sortable) {
+        throw new Error("SlickGrid's 'enableColumnReorder = true' option requires jquery-ui.sortable module to be loaded");
+      }
+
+      editController = {
+        "commitCurrentEdit": commitCurrentEdit,
+        "cancelCurrentEdit": cancelCurrentEdit
+      };
+
+      $container
+          .empty()
+          .css("overflow", "hidden")
+          .css("outline", 0)
+          .addClass(uid)
+          .addClass("ui-widget");
+
+      // set up a positioning container if needed
+      if (!/relative|absolute|fixed/.test($container.css("position"))) {
+        $container.css("position", "relative");
+      }
+
+      $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container);
+
+      $headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
+      $headers = $("<div class='slick-header-columns' style='left:-1000px' />").appendTo($headerScroller);
+      $headers.width(getHeadersWidth());
+
+      $headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
+      $headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller);
+      $headerRowSpacer = $("<div style='display:block;height:1px;position:absolute;top:0;left:0;'></div>")
+          .css("width", getCanvasWidth() + scrollbarDimensions.width + "px")
+          .appendTo($headerRowScroller);
+
+      $topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
+      $topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller);
+
+      if (!options.showTopPanel) {
+        $topPanelScroller.hide();
+      }
+
+      if (!options.showHeaderRow) {
+        $headerRowScroller.hide();
+      }
+
+      $viewport = $("<div class='slick-viewport' style='width:100%;overflow:auto;outline:0;position:relative;;'>").appendTo($container);
+      $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
+
+      $canvas = $("<div class='grid-canvas' />").appendTo($viewport);
+
+      $focusSink2 = $focusSink.clone().appendTo($container);
+
+      if (!options.explicitInitialization) {
+        finishInitialization();
+      }
+    }
+
+    function finishInitialization() {
+      if (!initialized) {
+        initialized = true;
+
+        viewportW = parseFloat($.css($container[0], "width", true));
+
+        // header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?)
+        // calculate the diff so we can set consistent sizes
+        measureCellPaddingAndBorder();
+
+        // for usability reasons, all text selection in SlickGrid is disabled
+        // with the exception of input and textarea elements (selection must
+        // be enabled there so that editors work as expected); note that
+        // selection in grid cells (grid body) is already unavailable in
+        // all browsers except IE
+        disableSelection($headers); // disable all text selection in header (including input and textarea)
+
+        if (!options.enableTextSelectionOnCells) {
+          // disable text selection in grid cells except in input and textarea elements
+          // (this is IE-specific, because selectstart event will only fire in IE)
+          $viewport.bind("selectstart.ui", function (event) {
+            return $(event.target).is("input,textarea");
+          });
+        }
+
+        updateColumnCaches();
+        createColumnHeaders();
+        setupColumnSort();
+        createCssRules();
+        resizeCanvas();
+        bindAncestorScrollEvents();
+
+        $container
+            .bind("resize.slickgrid", resizeCanvas);
+        $viewport
+            //.bind("click", handleClick)
+            .bind("scroll", handleScroll);
+        $headerScroller
+            .bind("contextmenu", handleHeaderContextMenu)
+            .bind("click", handleHeaderClick)
+            .delegate(".slick-header-column", "mouseenter", handleHeaderMouseEnter)
+            .delegate(".slick-header-column", "mouseleave", handleHeaderMouseLeave);
+        $headerRowScroller
+            .bind("scroll", handleHeaderRowScroll);
+        $focusSink.add($focusSink2)
+            .bind("keydown", handleKeyDown);
+        $canvas
+            .bind("keydown", handleKeyDown)
+            .bind("click", handleClick)
+            .bind("dblclick", handleDblClick)
+            .bind("contextmenu", handleContextMenu)
+            .bind("draginit", handleDragInit)
+            .bind("dragstart", {distance: 3}, handleDragStart)
+            .bind("drag", handleDrag)
+            .bind("dragend", handleDragEnd)
+            .delegate(".slick-cell", "mouseenter", handleMouseEnter)
+            .delegate(".slick-cell", "mouseleave", handleMouseLeave);
+
+        // Work around http://crbug.com/312427.
+        if (navigator.userAgent.toLowerCase().match(/webkit/) &&
+            navigator.userAgent.toLowerCase().match(/macintosh/)) {
+          $canvas.bind("mousewheel", handleMouseWheel);
+        }
+      }
+    }
+
+    function registerPlugin(plugin) {
+      plugins.unshift(plugin);
+      plugin.init(self);
+    }
+
+    function unregisterPlugin(plugin) {
+      for (var i = plugins.length; i >= 0; i--) {
+        if (plugins[i] === plugin) {
+          if (plugins[i].destroy) {
+            plugins[i].destroy();
+          }
+          plugins.splice(i, 1);
+          break;
+        }
+      }
+    }
+
+    function setSelectionModel(model) {
+      if (selectionModel) {
+        selectionModel.onSelectedRangesChanged.unsubscribe(handleSelectedRangesChanged);
+        if (selectionModel.destroy) {
+          selectionModel.destroy();
+        }
+      }
+
+      selectionModel = model;
+      if (selectionModel) {
+        selectionModel.init(self);
+        selectionModel.onSelectedRangesChanged.subscribe(handleSelectedRangesChanged);
+      }
+    }
+
+    function getSelectionModel() {
+      return selectionModel;
+    }
+
+    function getCanvasNode() {
+      return $canvas[0];
+    }
+
+    function measureScrollbar() {
+      var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body");
+      var dim = {
+        width: $c.width() - $c[0].clientWidth,
+        height: $c.height() - $c[0].clientHeight
+      };
+      $c.remove();
+      return dim;
+    }
+
+    function getHeadersWidth() {
+      var headersWidth = 0;
+      for (var i = 0, ii = columns.length; i < ii; i++) {
+        var width = columns[i].width;
+        headersWidth += width;
+      }
+      headersWidth += scrollbarDimensions.width;
+      return Math.max(headersWidth, viewportW) + 1000;
+    }
+
+    function getCanvasWidth() {
+      var availableWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;
+      var rowWidth = 0;
+      var i = columns.length;
+      while (i--) {
+        rowWidth += columns[i].width;
+      }
+      return options.fullWidthRows ? Math.max(rowWidth, availableWidth) : rowWidth;
+    }
+
+    function updateCanvasWidth(forceColumnWidthsUpdate) {
+      var oldCanvasWidth = canvasWidth;
+      canvasWidth = getCanvasWidth();
+
+      if (canvasWidth != oldCanvasWidth) {
+        $canvas.width(canvasWidth);
+        $headerRow.width(canvasWidth);
+        $headers.width(getHeadersWidth());
+        viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width);
+      }
+
+      $headerRowSpacer.width(canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0));
+
+      if (canvasWidth != oldCanvasWidth || forceColumnWidthsUpdate) {
+        applyColumnWidths();
+      }
+    }
+
+    function disableSelection($target) {
+      if ($target && $target.jquery) {
+        $target
+            .attr("unselectable", "on")
+            .css("MozUserSelect", "none")
+            .bind("selectstart.ui", function () {
+              return false;
+            }); // from jquery:ui.core.js 1.7.2
+      }
+    }
+
+    function getMaxSupportedCssHeight() {
+      var supportedHeight = 1000000;
+      // FF reports the height back but still renders blank after ~6M px
+      var testUpTo = navigator.userAgent.toLowerCase().match(/firefox/) ? 6000000 : 1000000000;
+      var div = $("<div style='display:none' />").appendTo(document.body);
+
+      while (true) {
+        var test = supportedHeight * 2;
+        div.css("height", test);
+        if (test > testUpTo || div.height() !== test) {
+          break;
+        } else {
+          supportedHeight = test;
+        }
+      }
+
+      div.remove();
+      return supportedHeight;
+    }
+
+    // TODO:  this is static.  need to handle page mutation.
+    function bindAncestorScrollEvents() {
+      var elem = $canvas[0];
+      while ((elem = elem.parentNode) != document.body && elem != null) {
+        // bind to scroll containers only
+        if (elem == $viewport[0] || elem.scrollWidth != elem.clientWidth || elem.scrollHeight != elem.clientHeight) {
+          var $elem = $(elem);
+          if (!$boundAncestors) {
+            $boundAncestors = $elem;
+          } else {
+            $boundAncestors = $boundAncestors.add($elem);
+          }
+          $elem.bind("scroll." + uid, handleActiveCellPositionChange);
+        }
+      }
+    }
+
+    function unbindAncestorScrollEvents() {
+      if (!$boundAncestors) {
+        return;
+      }
+      $boundAncestors.unbind("scroll." + uid);
+      $boundAncestors = null;
+    }
+
+    function updateColumnHeader(columnId, title, toolTip) {
+      if (!initialized) { return; }
+      var idx = getColumnIndex(columnId);
+      if (idx == null) {
+        return;
+      }
+
+      var columnDef = columns[idx];
+      var $header = $headers.children().eq(idx);
+      if ($header) {
+        if (title !== undefined) {
+          columns[idx].name = title;
+        }
+        if (toolTip !== undefined) {
+          columns[idx].toolTip = toolTip;
+        }
+
+        trigger(self.onBeforeHeaderCellDestroy, {
+          "node": $header[0],
+          "column": columnDef
+        });
+
+        $header
+            .attr("title", toolTip || "")
+            .children().eq(0).html(title);
+
+        trigger(self.onHeaderCellRendered, {
+          "node": $header[0],
+          "column": columnDef
+        });
+      }
+    }
+
+    function getHeaderRow() {
+      return $headerRow[0];
+    }
+
+    function getHeaderRowColumn(columnId) {
+      var idx = getColumnIndex(columnId);
+      var $header = $headerRow.children().eq(idx);
+      return $header && $header[0];
+    }
+
+    function createColumnHeaders() {
+      function onMouseEnter() {
+        $(this).addClass("ui-state-hover");
+      }
+
+      function onMouseLeave() {
+        $(this).removeClass("ui-state-hover");
+      }
+
+      $headers.find(".slick-header-column")
+        .each(function() {
+          var columnDef = $(this).data("column");
+          if (columnDef) {
+            trigger(self.onBeforeHeaderCellDestroy, {
+              "node": this,
+              "column": columnDef
+            });
+          }
+        });
+      $headers.empty();
+      $headers.width(getHeadersWidth());
+
+      $headerRow.find(".slick-headerrow-column")
+        .each(function() {
+          var columnDef = $(this).data("column");
+          if (columnDef) {
+            trigger(self.onBeforeHeaderRowCellDestroy, {
+              "node": this,
+              "column": columnDef
+            });
+          }
+        });
+      $headerRow.empty();
+
+      for (var i = 0; i < columns.length; i++) {
+        var m = columns[i];
+
+        var header = $("<div class='ui-state-default slick-header-column' />")
+            .html("<span class='slick-column-name'>" + m.name + "</span>")
+            .width(m.width - headerColumnWidthDiff)
+            .attr("id", "" + uid + m.id)
+            .attr("title", m.toolTip || "")
+            .data("column", m)
+            .addClass(m.headerCssClass || "")
+            .appendTo($headers);
+
+        if (options.enableColumnReorder || m.sortable) {
+          header
+            .on('mouseenter', onMouseEnter)
+            .on('mouseleave', onMouseLeave);
+        }
+
+        if (m.sortable) {
+          header.addClass("slick-header-sortable");
+          header.append("<span class='slick-sort-indicator' />");
+        }
+
+        trigger(self.onHeaderCellRendered, {
+          "node": header[0],
+          "column": m
+        });
+
+        if (options.showHeaderRow) {
+          var headerRowCell = $("<div class='ui-state-default slick-headerrow-column l" + i + " r" + i + "'></div>")
+              .data("column", m)
+              .appendTo($headerRow);
+
+          trigger(self.onHeaderRowCellRendered, {
+            "node": headerRowCell[0],
+            "column": m
+          });
+        }
+      }
+
+      setSortColumns(sortColumns);
+      setupColumnResize();
+      if (options.enableColumnReorder) {
+        setupColumnReorder();
+      }
+    }
+
+    function setupColumnSort() {
+      $headers.click(function (e) {
+        // temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328)
+        e.metaKey = e.metaKey || e.ctrlKey;
+
+        if ($(e.target).hasClass("slick-resizable-handle")) {
+          return;
+        }
+
+        var $col = $(e.target).closest(".slick-header-column");
+        if (!$col.length) {
+          return;
+        }
+
+        var column = $col.data("column");
+        if (column.sortable) {
+          if (!getEditorLock().commitCurrentEdit()) {
+            return;
+          }
+
+          var sortOpts = null;
+          var i = 0;
+          for (; i < sortColumns.length; i++) {
+            if (sortColumns[i].columnId == column.id) {
+              sortOpts = sortColumns[i];
+              sortOpts.sortAsc = !sortOpts.sortAsc;
+              break;
+            }
+          }
+
+          if (e.metaKey && options.multiColumnSort) {
+            if (sortOpts) {
+              sortColumns.splice(i, 1);
+            }
+          }
+          else {
+            if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) {
+              sortColumns = [];
+            }
+
+            if (!sortOpts) {
+              sortOpts = { columnId: column.id, sortAsc: column.defaultSortAsc };
+              sortColumns.push(sortOpts);
+            } else if (sortColumns.length == 0) {
+              sortColumns.push(sortOpts);
+            }
+          }
+
+          setSortColumns(sortColumns);
+
+          if (!options.multiColumnSort) {
+            trigger(self.onSort, {
+              multiColumnSort: false,
+              sortCol: column,
+              sortAsc: sortOpts.sortAsc}, e);
+          } else {
+            trigger(self.onSort, {
+              multiColumnSort: true,
+              sortCols: $.map(sortColumns, function(col) {
+                return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc };
+              })}, e);
+          }
+        }
+      });
+    }
+
+    function setupColumnReorder() {
+      $headers.filter(":ui-sortable").sortable("destroy");
+      $headers.sortable({
+        containment: "parent",
+        distance: 3,
+        axis: "x",
+        cursor: "default",
+        tolerance: "intersection",
+        helper: "clone",
+        placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",
+        start: function (e, ui) {
+          ui.placeholder.width(ui.helper.outerWidth() - headerColumnWidthDiff);
+          $(ui.helper).addClass("slick-header-column-active");
+        },
+        beforeStop: function (e, ui) {
+          $(ui.helper).removeClass("slick-header-column-active");
+        },
+        stop: function (e) {
+          if (!getEditorLock().commitCurrentEdit()) {
+            $(this).sortable("cancel");
+            return;
+          }
+
+          var reorderedIds = $headers.sortable("toArray");
+          var reorderedColumns = [];
+          for (var i = 0; i < reorderedIds.length; i++) {
+            reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]);
+          }
+          setColumns(reorderedColumns);
+
+          trigger(self.onColumnsReordered, {});
+          e.stopPropagation();
+          setupColumnResize();
+        }
+      });
+    }
+
+    function setupColumnResize() {
+      var $col, j, c, pageX, columnElements, minPageX, maxPageX, firstResizable, lastResizable;
+      columnElements = $headers.children();
+      columnElements.find(".slick-resizable-handle").remove();
+      columnElements.each(function (i, e) {
+        if (columns[i].resizable) {
+          if (firstResizable === undefined) {
+            firstResizable = i;
+          }
+          lastResizable = i;
+        }
+      });
+      if (firstResizable === undefined) {
+        return;
+      }
+      columnElements.each(function (i, e) {
+        if (i < firstResizable || (options.forceFitColumns && i >= lastResizable)) {
+          return;
+        }
+        $col = $(e);
+        $("<div class='slick-resizable-handle' />")
+            .appendTo(e)
+            .bind("dragstart", function (e, dd) {
+              if (!getEditorLock().commitCurrentEdit()) {
+                return false;
+              }
+              pageX = e.pageX;
+              $(this).parent().addClass("slick-header-column-active");
+              var shrinkLeewayOnRight = null, stretchLeewayOnRight = null;
+              // lock each column's width option to current width
+              columnElements.each(function (i, e) {
+                columns[i].previousWidth = $(e).outerWidth();
+              });
+              if (options.forceFitColumns) {
+                shrinkLeewayOnRight = 0;
+                stretchLeewayOnRight = 0;
+                // colums on right affect maxPageX/minPageX
+                for (j = i + 1; j < columnElements.length; j++) {
+                  c = columns[j];
+                  if (c.resizable) {
+                    if (stretchLeewayOnRight !== null) {
+                      if (c.maxWidth) {
+                        stretchLeewayOnRight += c.maxWidth - c.previousWidth;
+                      } else {
+                        stretchLeewayOnRight = null;
+                      }
+                    }
+                    shrinkLeewayOnRight += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth);
+                  }
+                }
+              }
+              var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0;
+              for (j = 0; j <= i; j++) {
+                // columns on left only affect minPageX
+                c = columns[j];
+                if (c.resizable) {
+                  if (stretchLeewayOnLeft !== null) {
+                    if (c.maxWidth) {
+                      stretchLeewayOnLeft += c.maxWidth - c.previousWidth;
+                    } else {
+                      stretchLeewayOnLeft = null;
+                    }
+                  }
+                  shrinkLeewayOnLeft += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth);
+                }
+              }
+              if (shrinkLeewayOnRight === null) {
+                shrinkLeewayOnRight = 100000;
+              }
+              if (shrinkLeewayOnLeft === null) {
+                shrinkLeewayOnLeft = 100000;
+              }
+              if (stretchLeewayOnRight === null) {
+                stretchLeewayOnRight = 100000;
+              }
+              if (stretchLeewayOnLeft === null) {
+                stretchLeewayOnLeft = 100000;
+              }
+              maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft);
+              minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight);
+            })
+            .bind("drag", function (e, dd) {
+              var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, e.pageX)) - pageX, x;
+              if (d < 0) { // shrink column
+                x = d;
+                for (j = i; j >= 0; j--) {
+                  c = columns[j];
+                  if (c.resizable) {
+                    actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);
+                    if (x && c.previousWidth + x < actualMinWidth) {
+                      x += c.previousWidth - actualMinWidth;
+                      c.width = actualMinWidth;
+                    } else {
+                      c.width = c.previousWidth + x;
+                      x = 0;
+                    }
+                  }
+                }
+
+                if (options.forceFitColumns) {
+                  x = -d;
+                  for (j = i + 1; j < columnElements.length; j++) {
+                    c = columns[j];
+                    if (c.resizable) {
+                      if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
+                        x -= c.maxWidth - c.previousWidth;
+                        c.width = c.maxWidth;
+                      } else {
+                        c.width = c.previousWidth + x;
+                        x = 0;
+                      }
+                    }
+                  }
+                }
+              } else { // stretch column
+                x = d;
+                for (j = i; j >= 0; j--) {
+                  c = columns[j];
+                  if (c.resizable) {
+                    if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
+                      x -= c.maxWidth - c.previousWidth;
+                      c.width = c.maxWidth;
+                    } else {
+                      c.width = c.previousWidth + x;
+                      x = 0;
+                    }
+                  }
+                }
+
+                if (options.forceFitColumns) {
+                  x = -d;
+                  for (j = i + 1; j < columnElements.length; j++) {
+                    c = columns[j];
+                    if (c.resizable) {
+                      actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);
+                      if (x && c.previousWidth + x < actualMinWidth) {
+                        x += c.previousWidth - actualMinWidth;
+                        c.width = actualMinWidth;
+                      } else {
+                        c.width = c.previousWidth + x;
+                        x = 0;
+                      }
+                    }
+                  }
+                }
+              }
+              applyColumnHeaderWidths();
+              if (options.syncColumnCellResize) {
+                applyColumnWidths();
+              }
+            })
+            .bind("dragend", function (e, dd) {
+              var newWidth;
+              $(this).parent().removeClass("slick-header-column-active");
+              for (j = 0; j < columnElements.length; j++) {
+                c = columns[j];
+                newWidth = $(columnElements[j]).outerWidth();
+
+                if (c.previousWidth !== newWidth && c.rerenderOnResize) {
+                  invalidateAllRows();
+                }
+              }
+              updateCanvasWidth(true);
+              render();
+              trigger(self.onColumnsResized, {});
+            });
+      });
+    }
+
+    function getVBoxDelta($el) {
+      var p = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
+      var delta = 0;
+      $.each(p, function (n, val) {
+        delta += parseFloat($el.css(val)) || 0;
+      });
+      return delta;
+    }
+
+    function measureCellPaddingAndBorder() {
+      var el;
+      var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"];
+      var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
+
+      el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers);
+      headerColumnWidthDiff = headerColumnHeightDiff = 0;
+      if (el.css("box-sizing") != "border-box" && el.css("-moz-box-sizing") != "border-box" && el.css("-webkit-box-sizing") != "border-box") {
+        $.each(h, function (n, val) {
+          headerColumnWidthDiff += parseFloat(el.css(val)) || 0;
+        });
+        $.each(v, function (n, val) {
+          headerColumnHeightDiff += parseFloat(el.css(val)) || 0;
+        });
+      }
+      el.remove();
+
+      var r = $("<div class='slick-row' />").appendTo($canvas);
+      el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);
+      cellWidthDiff = cellHeightDiff = 0;
+      if (el.css("box-sizing") != "border-box" && el.css("-moz-box-sizing") != "border-box" && el.css("-webkit-box-sizing") != "border-box") {
+        $.each(h, function (n, val) {
+          cellWidthDiff += parseFloat(el.css(val)) || 0;
+        });
+        $.each(v, function (n, val) {
+          cellHeightDiff += parseFloat(el.css(val)) || 0;
+        });
+      }
+      r.remove();
+
+      absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff);
+    }
+
+    function createCssRules() {
+      $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));
+      var rowHeight = (options.rowHeight - cellHeightDiff);
+      var rules = [
+        "." + uid + " .slick-header-column { left: 1000px; }",
+        "." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }",
+        "." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }",
+        "." + uid + " .slick-cell { height:" + rowHeight + "px; }",
+        "." + uid + " .slick-row { height:" + options.rowHeight + "px; }"
+      ];
+
+      for (var i = 0; i < columns.length; i++) {
+        rules.push("." + uid + " .l" + i + " { }");
+        rules.push("." + uid + " .r" + i + " { }");
+      }
+
+      if ($style[0].styleSheet) { // IE
+        $style[0].styleSheet.cssText = rules.join(" ");
+      } else {
+        $style[0].appendChild(document.createTextNode(rules.join(" ")));
+      }
+    }
+
+    function getColumnCssRules(idx) {
+      if (!stylesheet) {
+        var sheets = document.styleSheets;
+        for (var i = 0; i < sheets.length; i++) {
+          if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
+            stylesheet = sheets[i];
+            break;
+          }
+        }
+
+        if (!stylesheet) {
+          throw new Error("Cannot find stylesheet.");
+        }
+
+        // find and cache column CSS rules
+        columnCssRulesL = [];
+        columnCssRulesR = [];
+        var cssRules = (stylesheet.cssRules || stylesheet.rules);
+        var matches, columnIdx;
+        for (var i = 0; i < cssRules.length; i++) {
+          var selector = cssRules[i].selectorText;
+          if (matches = /\.l\d+/.exec(selector)) {
+            columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
+            columnCssRulesL[columnIdx] = cssRules[i];
+          } else if (matches = /\.r\d+/.exec(selector)) {
+            columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
+            columnCssRulesR[columnIdx] = cssRules[i];
+          }
+        }
+      }
+
+      return {
+        "left": columnCssRulesL[idx],
+        "right": columnCssRulesR[idx]
+      };
+    }
+
+    function removeCssRules() {
+      $style.remove();
+      stylesheet = null;
+    }
+
+    function destroy() {
+      getEditorLock().cancelCurrentEdit();
+
+      trigger(self.onBeforeDestroy, {});
+
+      var i = plugins.length;
+      while(i--) {
+        unregisterPlugin(plugins[i]);
+      }
+
+      if (options.enableColumnReorder) {
+          $headers.filter(":ui-sortable").sortable("destroy");
+      }
+
+      unbindAncestorScrollEvents();
+      $container.unbind(".slickgrid");
+      removeCssRules();
+
+      $canvas.unbind("draginit dragstart dragend drag");
+      $container.empty().removeClass(uid);
+    }
+
+
+    //////////////////////////////////////////////////////////////////////////////////////////////
+    // General
+
+    function trigger(evt, args, e) {
+      e = e || new Slick.EventData();
+      args = args || {};
+      args.grid = self;
+      return evt.notify(args, e, self);
+    }
+
+    function getEditorLock() {
+      return options.editorLock;
+    }
+
+    function getEditController() {
+      return editController;
+    }
+
+    function getColumnIndex(id) {
+      return columnsById[id];
+    }
+
+    function autosizeColumns() {
+      var i, c,
+          widths = [],
+          shrinkLeeway = 0,
+          total = 0,
+          prevTotal,
+          availWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;
+
+      for (i = 0; i < columns.length; i++) {
+        c = columns[i];
+        widths.push(c.width);
+        total += c.width;
+        if (c.resizable) {
+          shrinkLeeway += c.width - Math.max(c.minWidth, absoluteColumnMinWidth);
+        }
+      }
+
+      // shrink
+      prevTotal = total;
+      while (total > availWidth && shrinkLeeway) {
+        var shrinkProportion = (total - availWidth) / shrinkLeeway;
+        for (i = 0; i < columns.length && total > availWidth; i++) {
+          c = columns[i];
+          var width = widths[i];
+          if (!c.resizable || width <= c.minWidth || width <= absoluteColumnMinWidth) {
+            continue;
+          }
+          var absMinWidth = Math.max(c.minWidth, absoluteColumnMinWidth);
+          var shrinkSize = Math.floor(shrinkProportion * (width - absMinWidth)) || 1;
+          shrinkSize = Math.min(shrinkSize, width - absMinWidth);
+          total -= shrinkSize;
+          shrinkLeeway -= shrinkSize;
+          widths[i] -= shrinkSize;
+        }
+        if (prevTotal <= total) {  // avoid infinite loop
+          break;
+        }
+        prevTotal = total;
+      }
+
+      // grow
+      prevTotal = total;
+      while (total < availWidth) {
+        var growProportion = availWidth / total;
+        for (i = 0; i < columns.length && total < availWidth; i++) {
+          c = columns[i];
+          var currentWidth = widths[i];
+          var growSize;
+
+          if (!c.resizable || c.maxWidth <= currentWidth) {
+            growSize = 0;
+          } else {
+            growSize = Math.min(Math.floor(growProportion * currentWidth) - currentWidth, (c.maxWidth - currentWidth) || 1000000) || 1;
+          }
+          total += growSize;
+          widths[i] += growSize;
+        }
+        if (prevTotal >= total) {  // avoid infinite loop
+          break;
+        }
+        prevTotal = total;
+      }
+
+      var reRender = false;
+      for (i = 0; i < columns.length; i++) {
+        if (columns[i].rerenderOnResize && columns[i].width != widths[i]) {
+          reRender = true;
+        }
+        columns[i].width = widths[i];
+      }
+
+      applyColumnHeaderWidths();
+      updateCanvasWidth(true);
+      if (reRender) {
+        invalidateAllRows();
+        render();
+      }
+    }
+
+    function applyColumnHeaderWidths() {
+      if (!initialized) { return; }
+      var h;
+      for (var i = 0, headers = $headers.children(), ii = headers.length; i < ii; i++) {
+        h = $(headers[i]);
+        if (h.width() !== columns[i].width - headerColumnWidthDiff) {
+          h.width(columns[i].width - headerColumnWidthDiff);
+        }
+      }
+
+      updateColumnCaches();
+    }
+
+    function applyColumnWidths() {
+      var x = 0, w, rule;
+      for (var i = 0; i < columns.length; i++) {
+        w = columns[i].width;
+
+        rule = getColumnCssRules(i);
+        rule.left.style.left = x + "px";
+        rule.right.style.right = (canvasWidth - x - w) + "px";
+
+        x += columns[i].width;
+      }
+    }
+
+    function setSortColumn(columnId, ascending) {
+      setSortColumns([{ columnId: columnId, sortAsc: ascending}]);
+    }
+
+    function setSortColumns(cols) {
+      sortColumns = cols;
+
+      var headerColumnEls = $headers.children();
+      headerColumnEls
+          .removeClass("slick-header-column-sorted")
+          .find(".slick-sort-indicator")
+              .removeClass("slick-sort-indicator-asc slick-sort-indicator-desc");
+
+      $.each(sortColumns, function(i, col) {
+        if (col.sortAsc == null) {
+          col.sortAsc = true;
+        }
+        var columnIndex = getColumnIndex(col.columnId);
+        if (columnIndex != null) {
+          headerColumnEls.eq(columnIndex)
+              .addClass("slick-header-column-sorted")
+              .find(".slick-sort-indicator")
+                  .addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");
+        }
+      });
+    }
+
+    function getSortColumns() {
+      return sortColumns;
+    }
+
+    function handleSelectedRangesChanged(e, ranges) {
+      selectedRows = [];
+      var hash = {};
+      for (var i = 0; i < ranges.length; i++) {
+        for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
+          if (!hash[j]) {  // prevent duplicates
+            selectedRows.push(j);
+            hash[j] = {};
+          }
+          for (var k = ranges[i].fromCell; k <= ranges[i].toCell; k++) {
+            if (canCellBeSelected(j, k)) {
+              hash[j][columns[k].id] = options.selectedCellCssClass;
+            }
+          }
+        }
+      }
+
+      setCellCssStyles(options.selectedCellCssClass, hash);
+
+      trigger(self.onSelectedRowsChanged, {rows: getSelectedRows()}, e);
+    }
+
+    function getColumns() {
+      return columns;
+    }
+
+    function updateColumnCaches() {
+      // Pre-calculate cell boundaries.
+      columnPosLeft = [];
+      columnPosRight = [];
+      var x = 0;
+      for (var i = 0, ii = columns.length; i < ii; i++) {
+        columnPosLeft[i] = x;
+        columnPosRight[i] = x + columns[i].width;
+        x += columns[i].width;
+      }
+    }
+
+    function setColumns(columnDefinitions) {
+      columns = columnDefinitions;
+
+      columnsById = {};
+      for (var i = 0; i < columns.length; i++) {
+        var m = columns[i] = $.extend({}, columnDefaults, columns[i]);
+        columnsById[m.id] = i;
+        if (m.minWidth && m.width < m.minWidth) {
+          m.width = m.minWidth;
+        }
+        if (m.maxWidth && m.width > m.maxWidth) {
+          m.width = m.maxWidth;
+        }
+      }
+
+      updateColumnCaches();
+
+      if (initialized) {
+        invalidateAllRows();
+        createColumnHeaders();
+        removeCssRules();
+        createCssRules();
+        resizeCanvas();
+        applyColumnWidths();
+        handleScroll();
+      }
+    }
+
+    function getOptions() {
+      return options;
+    }
+
+    function setOptions(args) {
+      if (!getEditorLock().commitCurrentEdit()) {
+        return;
+      }
+
+      makeActiveCellNormal();
+
+      if (options.enableAddRow !== args.enableAddRow) {
+        invalidateRow(getDataLength());
+      }
+
+      options = $.extend(options, args);
+      validateAndEnforceOptions();
+
+      $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
+      render();
+    }
+
+    function validateAndEnforceOptions() {
+      if (options.autoHeight) {
+        options.leaveSpaceForNewRows = false;
+      }
+    }
+
+    function setData(newData, scrollToTop) {
+      data = newData;
+      invalidateAllRows();
+      updateRowCount();
+      if (scrollToTop) {
+        scrollTo(0);
+      }
+    }
+
+    function getData() {
+      return data;
+    }
+
+    function getDataLength() {
+      if (data.getLength) {
+        return data.getLength();
+      } else {
+        return data.length;
+      }
+    }
+
+    function getDataLengthIncludingAddNew() {
+      return getDataLength() + (options.enableAddRow ? 1 : 0);
+    }
+
+    function getDataItem(i) {
+      if (data.getItem) {
+        return data.getItem(i);
+      } else {
+        return data[i];
+      }
+    }
+
+    function getTopPanel() {
+      return $topPanel[0];
+    }
+
+    function setTopPanelVisibility(visible) {
+      if (options.showTopPanel != visible) {
+        options.showTopPanel = visible;
+        if (visible) {
+          $topPanelScroller.slideDown("fast", resizeCanvas);
+        } else {
+          $topPanelScroller.slideUp("fast", resizeCanvas);
+        }
+      }
+    }
+
+    function setHeaderRowVisibility(visible) {
+      if (options.showHeaderRow != visible) {
+        options.showHeaderRow = visible;
+        if (visible) {
+          $headerRowScroller.slideDown("fast", resizeCanvas);
+        } else {
+          $headerRowScroller.slideUp("fast", resizeCanvas);
+        }
+      }
+    }
+
+    function getContainerNode() {
+      return $container.get(0);
+    }
+
+    //////////////////////////////////////////////////////////////////////////////////////////////
+    // Rendering / Scrolling
+
+    function getRowTop(row) {
+      return options.rowHeight * row - offset;
+    }
+
+    function getRowFromPosition(y) {
+      return Math.floor((y + offset) / options.rowHeight);
+    }
+
+    function scrollTo(y) {
+      y = Math.max(y, 0);
+      y = Math.min(y, th - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0));
+
+      var oldOffset = offset;
+
+      page = Math.min(n - 1, Math.floor(y / ph));
+      offset = Math.round(page * cj);
+      var newScrollTop = y - offset;
+
+      if (offset != oldOffset) {
+        var range = getVisibleRange(newScrollTop);
+        cleanupRows(range);
+        updateRowPositions();
+      }
+
+      if (prevScrollTop != newScrollTop) {
+        vScrollDir = (prevScrollTop + oldOffset < newScrollTop + offset) ? 1 : -1;
+        $viewport[0].scrollTop = (lastRenderedScrollTop = scrollTop = prevScrollTop = newScrollTop);
+
+        trigger(self.onViewportChanged, {});
+      }
+    }
+
+    function defaultFormatter(row, cell, value, columnDef, dataContext) {
+      if (value == null) {
+        return "";
+      } else {
+        return (value + "").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+      }
+    }
+
+    function getFormatter(row, column) {
+      var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
+
+      // look up by id, then index
+      var columnOverrides = rowMetadata &&
+          rowMetadata.columns &&
+          (rowMetadata.columns[column.id] || rowMetadata.columns[getColumnIndex(column.id)]);
+
+      return (columnOverrides && columnOverrides.formatter) ||
+          (rowMetadata && rowMetadata.formatter) ||
+          column.formatter ||
+          (options.formatterFactory && options.formatterFactory.getFormatter(column)) ||
+          options.defaultFormatter;
+    }
+
+    function getEditor(row, cell) {
+      var column = columns[cell];
+      var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
+      var columnMetadata = rowMetadata && rowMetadata.columns;
+
+      if (columnMetadata && columnMetadata[column.id] && columnMetadata[column.id].editor !== undefined) {
+        return columnMetadata[column.id].editor;
+      }
+      if (columnMetadata && columnMetadata[cell] && columnMetadata[cell].editor !== undefined) {
+        return columnMetadata[cell].editor;
+      }
+
+      return column.editor || (options.editorFactory && options.editorFactory.getEditor(column));
+    }
+
+    function getDataItemValueForColumn(item, columnDef) {
+      if (options.dataItemColumnValueExtractor) {
+        return options.dataItemColumnValueExtractor(item, columnDef);
+      }
+      return item[columnDef.field];
+    }
+
+    function appendRowHtml(stringArray, row, range, dataLength) {
+      var d = getDataItem(row);
+      var dataLoading = row < dataLength && !d;
+      var rowCss = "slick-row" +
+          (dataLoading ? " loading" : "") +
+          (row === activeRow ? " active" : "") +
+          (row % 2 == 1 ? " odd" : " even");
+
+      if (!d) {
+        rowCss += " " + options.addNewRowCssClass;
+      }
+
+      var metadata = data.getItemMetadata && data.getItemMetadata(row);
+
+      if (metadata && metadata.cssClasses) {
+        rowCss += " " + metadata.cssClasses;
+      }
+
+      stringArray.push("<div class='ui-widget-content " + rowCss + "' style='top:" + getRowTop(row) + "px'>");
+
+      var colspan, m;
+      for (var i = 0, ii = columns.length; i < ii; i++) {
+        m = columns[i];
+        colspan = 1;
+        if (metadata && metadata.columns) {
+          var columnData = metadata.columns[m.id] || metadata.columns[i];
+          colspan = (columnData && columnData.colspan) || 1;
+          if (colspan === "*") {
+            colspan = ii - i;
+          }
+        }
+
+        // Do not render cells outside of the viewport.
+        if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) {
+          if (columnPosLeft[i] > range.rightPx) {
+            // All columns to the right are outside the range.
+            break;
+          }
+
+          appendCellHtml(stringArray, row, i, colspan, d);
+        }
+
+        if (colspan > 1) {
+          i += (colspan - 1);
+        }
+      }
+
+      stringArray.push("</div>");
+    }
+
+    function appendCellHtml(stringArray, row, cell, colspan, item) {
+      var m = columns[cell];
+      var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
+          (m.cssClass ? " " + m.cssClass : "");
+      if (row === activeRow && cell === activeCell) {
+        cellCss += (" active");
+      }
+
+      // TODO:  merge them together in the setter
+      for (var key in cellCssClasses) {
+        if (cellCssClasses[key][row] && cellCssClasses[key][row][m.id]) {
+          cellCss += (" " + cellCssClasses[key][row][m.id]);
+        }
+      }
+
+      stringArray.push("<div class='" + cellCss + "'>");
+
+      // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet)
+      if (item) {
+        var value = getDataItemValueForColumn(item, m);
+        stringArray.push(getFormatter(row, m)(row, cell, value, m, item));
+      }
+
+      stringArray.push("</div>");
+
+      rowsCache[row].cellRenderQueue.push(cell);
+      rowsCache[row].cellColSpans[cell] = colspan;
+    }
+
+
+    function cleanupRows(rangeToKeep) {
+      for (var i in rowsCache) {
+        if (((i = parseInt(i, 10)) !== activeRow) && (i < rangeToKeep.top || i > rangeToKeep.bottom)) {
+          removeRowFromCache(i);
+        }
+      }
+    }
+
+    function invalidate() {
+      updateRowCount();
+      invalidateAllRows();
+      render();
+    }
+
+    function invalidateAllRows() {
+      if (currentEditor) {
+        makeActiveCellNormal();
+      }
+      for (var row in rowsCache) {
+        removeRowFromCache(row);
+      }
+    }
+
+    function removeRowFromCache(row) {
+      var cacheEntry = rowsCache[row];
+      if (!cacheEntry) {
+        return;
+      }
+
+      if (rowNodeFromLastMouseWheelEvent == cacheEntry.rowNode) {
+        cacheEntry.rowNode.style.display = 'none';
+        zombieRowNodeFromLastMouseWheelEvent = rowNodeFromLastMouseWheelEvent;
+      } else {
+        $canvas[0].removeChild(cacheEntry.rowNode);
+      }
+      
+      delete rowsCache[row];
+      delete postProcessedRows[row];
+      renderedRows--;
+      counter_rows_removed++;
+    }
+
+    function invalidateRows(rows) {
+      var i, rl;
+      if (!rows || !rows.length) {
+        return;
+      }
+      vScrollDir = 0;
+      for (i = 0, rl = rows.length; i < rl; i++) {
+        if (currentEditor && activeRow === rows[i]) {
+          makeActiveCellNormal();
+        }
+        if (rowsCache[rows[i]]) {
+          removeRowFromCache(rows[i]);
+        }
+      }
+    }
+
+    function invalidateRow(row) {
+      invalidateRows([row]);
+    }
+
+    function updateCell(row, cell) {
+      var cellNode = getCellNode(row, cell);
+      if (!cellNode) {
+        return;
+      }
+
+      var m = columns[cell], d = getDataItem(row);
+      if (currentEditor && activeRow === row && activeCell === cell) {
+        currentEditor.loadValue(d);
+      } else {
+        cellNode.innerHTML = d ? getFormatter(row, m)(row, cell, getDataItemValueForColumn(d, m), m, d) : "";
+        invalidatePostProcessingResults(row);
+      }
+    }
+
+    function updateRow(row) {
+      var cacheEntry = rowsCache[row];
+      if (!cacheEntry) {
+        return;
+      }
+
+      ensureCellNodesInRowsCache(row);
+
+      var d = getDataItem(row);
+
+      for (var columnIdx in cacheEntry.cellNodesByColumnIdx) {
+        if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) {
+          continue;
+        }
+
+        columnIdx = columnIdx | 0;
+        var m = columns[columnIdx],
+            node = cacheEntry.cellNodesByColumnIdx[columnIdx];
+
+        if (row === activeRow && columnIdx === activeCell && currentEditor) {
+          currentEditor.loadValue(d);
+        } else if (d) {
+          node.innerHTML = getFormatter(row, m)(row, columnIdx, getDataItemValueForColumn(d, m), m, d);
+        } else {
+          node.innerHTML = "";
+        }
+      }
+
+      invalidatePostProcessingResults(row);
+    }
+
+    function getViewportHeight() {
+      return parseFloat($.css($container[0], "height", true)) -
+          parseFloat($.css($container[0], "paddingTop", true)) -
+          parseFloat($.css($container[0], "paddingBottom", true)) -
+          parseFloat($.css($headerScroller[0], "height")) - getVBoxDelta($headerScroller) -
+          (options.showTopPanel ? options.topPanelHeight + getVBoxDelta($topPanelScroller) : 0) -
+          (options.showHeaderRow ? options.headerRowHeight + getVBoxDelta($headerRowScroller) : 0);
+    }
+
+    function resizeCanvas() {
+      if (!initialized) { return; }
+      if (options.autoHeight) {
+        viewportH = options.rowHeight * getDataLengthIncludingAddNew();
+      } else {
+        viewportH = getViewportHeight();
+      }
+
+      numVisibleRows = Math.ceil(viewportH / options.rowHeight);
+      viewportW = parseFloat($.css($container[0], "width", true));
+      if (!options.autoHeight) {
+        $viewport.height(viewportH);
+      }
+
+      if (options.forceFitColumns) {
+        autosizeColumns();
+      }
+
+      updateRowCount();
+      handleScroll();
+      // Since the width has changed, force the render() to reevaluate virtually rendered cells.
+      lastRenderedScrollLeft = -1;
+      render();
+    }
+
+    function updateRowCount() {
+      if (!initialized) { return; }
+
+      var dataLengthIncludingAddNew = getDataLengthIncludingAddNew();
+      var numberOfRows = dataLengthIncludingAddNew +
+          (options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0);
+
+      var oldViewportHasVScroll = viewportHasVScroll;
+      // with autoHeight, we do not need to accommodate the vertical scroll bar
+      viewportHasVScroll = !options.autoHeight && (numberOfRows * options.rowHeight > viewportH);
+
+      makeActiveCellNormal();
+
+      // remove the rows that are now outside of the data range
+      // this helps avoid redundant calls to .removeRow() when the size of the data decreased by thousands of rows
+      var l = dataLengthIncludingAddNew - 1;
+      for (var i in rowsCache) {
+        if (i >= l) {
+          removeRowFromCache(i);
+        }
+      }
+
+      if (activeCellNode && activeRow > l) {
+        resetActiveCell();
+      }
+
+      var oldH = h;
+      th = Math.max(options.rowHeight * numberOfRows, viewportH - scrollbarDimensions.height);
+      if (th < maxSupportedCssHeight) {
+        // just one page
+        h = ph = th;
+        n = 1;
+        cj = 0;
+      } else {
+        // break into pages
+        h = maxSupportedCssHeight;
+        ph = h / 100;
+        n = Math.floor(th / ph);
+        cj = (th - h) / (n - 1);
+      }
+
+      if (h !== oldH) {
+        $canvas.css("height", h);
+        scrollTop = $viewport[0].scrollTop;
+      }
+
+      var oldScrollTopInRange = (scrollTop + offset <= th - viewportH);
+
+      if (th == 0 || scrollTop == 0) {
+        page = offset = 0;
+      } else if (oldScrollTopInRange) {
+        // maintain virtual position
+        scrollTo(scrollTop + offset);
+      } else {
+        // scroll to bottom
+        scrollTo(th - viewportH);
+      }
+
+      if (h != oldH && options.autoHeight) {
+        resizeCanvas();
+      }
+
+      if (options.forceFitColumns && oldViewportHasVScroll != viewportHasVScroll) {
+        autosizeColumns();
+      }
+      updateCanvasWidth(false);
+    }
+
+    function getVisibleRange(viewportTop, viewportLeft) {
+      if (viewportTop == null) {
+        viewportTop = scrollTop;
+      }
+      if (viewportLeft == null) {
+        viewportLeft = scrollLeft;
+      }
+
+      return {
+        top: getRowFromPosition(viewportTop),
+        bottom: getRowFromPosition(viewportTop + viewportH) + 1,
+        leftPx: viewportLeft,
+        rightPx: viewportLeft + viewportW
+      };
+    }
+
+    function getRenderedRange(viewportTop, viewportLeft) {
+      var range = getVisibleRange(viewportTop, viewportLeft);
+      var buffer = Math.round(viewportH / options.rowHeight);
+      var minBuffer = 3;
+
+      if (vScrollDir == -1) {
+        range.top -= buffer;
+        range.bottom += minBuffer;
+      } else if (vScrollDir == 1) {
+        range.top -= minBuffer;
+        range.bottom += buffer;
+      } else {
+        range.top -= minBuffer;
+        range.bottom += minBuffer;
+      }
+
+      range.top = Math.max(0, range.top);
+      range.bottom = Math.min(getDataLengthIncludingAddNew() - 1, range.bottom);
+
+      range.leftPx -= viewportW;
+      range.rightPx += viewportW;
+
+      range.leftPx = Math.max(0, range.leftPx);
+      range.rightPx = Math.min(canvasWidth, range.rightPx);
+
+      return range;
+    }
+
+    function ensureCellNodesInRowsCache(row) {
+      var cacheEntry = rowsCache[row];
+      if (cacheEntry) {
+        if (cacheEntry.cellRenderQueue.length) {
+          var lastChild = cacheEntry.rowNode.lastChild;
+          while (cacheEntry.cellRenderQueue.length) {
+            var columnIdx = cacheEntry.cellRenderQueue.pop();
+            cacheEntry.cellNodesByColumnIdx[columnIdx] = lastChild;
+            lastChild = lastChild.previousSibling;
+          }
+        }
+      }
+    }
+
+    function cleanUpCells(range, row) {
+      var totalCellsRemoved = 0;
+      var cacheEntry = rowsCache[row];
+
+      // Remove cells outside the range.
+      var cellsToRemove = [];
+      for (var i in cacheEntry.cellNodesByColumnIdx) {
+        // I really hate it when people mess with Array.prototype.
+        if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(i)) {
+          continue;
+        }
+
+        // This is a string, so it needs to be cast back to a number.
+        i = i | 0;
+
+        var colspan = cacheEntry.cellColSpans[i];
+        if (columnPosLeft[i] > range.rightPx ||
+          columnPosRight[Math.min(columns.length - 1, i + colspan - 1)] < range.leftPx) {
+          if (!(row == activeRow && i == activeCell)) {
+            cellsToRemove.push(i);
+          }
+        }
+      }
+
+      var cellToRemove;
+      while ((cellToRemove = cellsToRemove.pop()) != null) {
+        cacheEntry.rowNode.removeChild(cacheEntry.cellNodesByColumnIdx[cellToRemove]);
+        delete cacheEntry.cellColSpans[cellToRemove];
+        delete cacheEntry.cellNodesByColumnIdx[cellToRemove];
+        if (postProcessedRows[row]) {
+          delete postProcessedRows[row][cellToRemove];
+        }
+        totalCellsRemoved++;
+      }
+    }
+
+    function cleanUpAndRenderCells(range) {
+      var cacheEntry;
+      var stringArray = [];
+      var processedRows = [];
+      var cellsAdded;
+      var totalCellsAdded = 0;
+      var colspan;
+
+      for (var row = range.top, btm = range.bottom; row <= btm; row++) {
+        cacheEntry = rowsCache[row];
+        if (!cacheEntry) {
+          continue;
+        }
+
+        // cellRenderQueue populated in renderRows() needs to be cleared first
+        ensureCellNodesInRowsCache(row);
+
+        cleanUpCells(range, row);
+
+        // Render missing cells.
+        cellsAdded = 0;
+
+        var metadata = data.getItemMetadata && data.getItemMetadata(row);
+        metadata = metadata && metadata.columns;
+
+        var d = getDataItem(row);
+
+        // TODO:  shorten this loop (index? heuristics? binary search?)
+        for (var i = 0, ii = columns.length; i < ii; i++) {
+          // Cells to the right are outside the range.
+          if (columnPosLeft[i] > range.rightPx) {
+            break;
+          }
+
+          // Already rendered.
+          if ((colspan = cacheEntry.cellColSpans[i]) != null) {
+            i += (colspan > 1 ? colspan - 1 : 0);
+            continue;
+          }
+
+          colspan = 1;
+          if (metadata) {
+            var columnData = metadata[columns[i].id] || metadata[i];
+            colspan = (columnData && columnData.colspan) || 1;
+            if (colspan === "*") {
+              colspan = ii - i;
+            }
+          }
+
+          if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) {
+            appendCellHtml(stringArray, row, i, colspan, d);
+            cellsAdded++;
+          }
+
+          i += (colspan > 1 ? colspan - 1 : 0);
+        }
+
+        if (cellsAdded) {
+          totalCellsAdded += cellsAdded;
+          processedRows.push(row);
+        }
+      }
+
+      if (!stringArray.length) {
+        return;
+      }
+
+      var x = document.createElement("div");
+      x.innerHTML = stringArray.join("");
+
+      var processedRow;
+      var node;
+      while ((processedRow = processedRows.pop()) != null) {
+        cacheEntry = rowsCache[processedRow];
+        var columnIdx;
+        while ((columnIdx = cacheEntry.cellRenderQueue.pop()) != null) {
+          node = x.lastChild;
+          cacheEntry.rowNode.appendChild(node);
+          cacheEntry.cellNodesByColumnIdx[columnIdx] = node;
+        }
+      }
+    }
+
+    function renderRows(range) {
+      var parentNode = $canvas[0],
+          stringArray = [],
+          rows = [],
+          needToReselectCell = false,
+          dataLength = getDataLength();
+
+      for (var i = range.top, ii = range.bottom; i <= ii; i++) {
+        if (rowsCache[i]) {
+          continue;
+        }
+        renderedRows++;
+        rows.push(i);
+
+        // Create an entry right away so that appendRowHtml() can
+        // start populatating it.
+        rowsCache[i] = {
+          "rowNode": null,
+
+          // ColSpans of rendered cells (by column idx).
+          // Can also be used for checking whether a cell has been rendered.
+          "cellColSpans": [],
+
+          // Cell nodes (by column idx).  Lazy-populated by ensureCellNodesInRowsCache().
+          "cellNodesByColumnIdx": [],
+
+          // Column indices of cell nodes that have been rendered, but not yet indexed in
+          // cellNodesByColumnIdx.  These are in the same order as cell nodes added at the
+          // end of the row.
+          "cellRenderQueue": []
+        };
+
+        appendRowHtml(stringArray, i, range, dataLength);
+        if (activeCellNode && activeRow === i) {
+          needToReselectCell = true;
+        }
+        counter_rows_rendered++;
+      }
+
+      if (!rows.length) { return; }
+
+      var x = document.createElement("div");
+      x.innerHTML = stringArray.join("");
+
+      for (var i = 0, ii = rows.length; i < ii; i++) {
+        rowsCache[rows[i]].rowNode = parentNode.appendChild(x.firstChild);
+      }
+
+      if (needToReselectCell) {
+        activeCellNode = getCellNode(activeRow, activeCell);
+      }
+    }
+
+    function startPostProcessing() {
+      if (!options.enableAsyncPostRender) {
+        return;
+      }
+      clearTimeout(h_postrender);
+      h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);
+    }
+
+    function invalidatePostProcessingResults(row) {
+      delete postProcessedRows[row];
+      postProcessFromRow = Math.min(postProcessFromRow, row);
+      postProcessToRow = Math.max(postProcessToRow, row);
+      startPostProcessing();
+    }
+
+    function updateRowPositions() {
+      for (var row in rowsCache) {
+        rowsCache[row].rowNode.style.top = getRowTop(row) + "px";
+      }
+    }
+
+    function render() {
+      if (!initialized) { return; }
+      var visible = getVisibleRange();
+      var rendered = getRenderedRange();
+
+      // remove rows no longer in the viewport
+      cleanupRows(rendered);
+
+      // add new rows & missing cells in existing rows
+      if (lastRenderedScrollLeft != scrollLeft) {
+        cleanUpAndRenderCells(rendered);
+      }
+
+      // render missing rows
+      renderRows(rendered);
+
+      postProcessFromRow = visible.top;
+      postProcessToRow = Math.min(getDataLengthIncludingAddNew() - 1, visible.bottom);
+      startPostProcessing();
+
+      lastRenderedScrollTop = scrollTop;
+      lastRenderedScrollLeft = scrollLeft;
+      h_render = null;
+    }
+
+    function handleHeaderRowScroll() {
+      var scrollLeft = $headerRowScroller[0].scrollLeft;
+      if (scrollLeft != $viewport[0].scrollLeft) {
+        $viewport[0].scrollLeft = scrollLeft;
+      }
+    }
+
+    function handleScroll() {
+      scrollTop = $viewport[0].scrollTop;
+      scrollLeft = $viewport[0].scrollLeft;
+      var vScrollDist = Math.abs(scrollTop - prevScrollTop);
+      var hScrollDist = Math.abs(scrollLeft - prevScrollLeft);
+
+      if (hScrollDist) {
+        prevScrollLeft = scrollLeft;
+        $headerScroller[0].scrollLeft = scrollLeft;
+        $topPanelScroller[0].scrollLeft = scrollLeft;
+        $headerRowScroller[0].scrollLeft = scrollLeft;
+      }
+
+      if (vScrollDist) {
+        vScrollDir = prevScrollTop < scrollTop ? 1 : -1;
+        prevScrollTop = scrollTop;
+
+        // switch virtual pages if needed
+        if (vScrollDist < viewportH) {
+          scrollTo(scrollTop + offset);
+        } else {
+          var oldOffset = offset;
+          if (h == viewportH) {
+            page = 0;
+          } else {
+            page = Math.min(n - 1, Math.floor(scrollTop * ((th - viewportH) / (h - viewportH)) * (1 / ph)));
+          }
+          offset = Math.round(page * cj);
+          if (oldOffset != offset) {
+            invalidateAllRows();
+          }
+        }
+      }
+
+      if (hScrollDist || vScrollDist) {
+        if (h_render) {
+          clearTimeout(h_render);
+        }
+
+        if (Math.abs(lastRenderedScrollTop - scrollTop) > 20 ||
+            Math.abs(lastRenderedScrollLeft - scrollLeft) > 20) {
+          if (options.forceSyncScrolling || (
+              Math.abs(lastRenderedScrollTop - scrollTop) < viewportH &&
+              Math.abs(lastRenderedScrollLeft - scrollLeft) < viewportW)) {
+            render();
+          } else {
+            h_render = setTimeout(render, 50);
+          }
+
+          trigger(self.onViewportChanged, {});
+        }
+      }
+
+      trigger(self.onScroll, {scrollLeft: scrollLeft, scrollTop: scrollTop});
+    }
+
+    function asyncPostProcessRows() {
+      var dataLength = getDataLength();
+      while (postProcessFromRow <= postProcessToRow) {
+        var row = (vScrollDir >= 0) ? postProcessFromRow++ : postProcessToRow--;
+        var cacheEntry = rowsCache[row];
+        if (!cacheEntry || row >= dataLength) {
+          continue;
+        }
+
+        if (!postProcessedRows[row]) {
+          postProcessedRows[row] = {};
+        }
+
+        ensureCellNodesInRowsCache(row);
+        for (var columnIdx in cacheEntry.cellNodesByColumnIdx) {
+          if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) {
+            continue;
+          }
+
+          columnIdx = columnIdx | 0;
+
+          var m = columns[columnIdx];
+          if (m.asyncPostRender && !postProcessedRows[row][columnIdx]) {
+            var node = cacheEntry.cellNodesByColumnIdx[columnIdx];
+            if (node) {
+              m.asyncPostRender(node, row, getDataItem(row), m);
+            }
+            postProcessedRows[row][columnIdx] = true;
+          }
+        }
+
+        h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);
+        return;
+      }
+    }
+
+    function updateCellCssStylesOnRenderedRows(addedHash, removedHash) {
+      var node, columnId, addedRowHash, removedRowHash;
+      for (var row in rowsCache) {
+        removedRowHash = removedHash && removedHash[row];
+        addedRowHash = addedHash && addedHash[row];
+
+        if (removedRowHash) {
+          for (columnId in removedRowHash) {
+            if (!addedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) {
+              node = getCellNode(row, getColumnIndex(columnId));
+              if (node) {
+                $(node).removeClass(removedRowHash[columnId]);
+              }
+            }
+          }
+        }
+
+        if (addedRowHash) {
+          for (columnId in addedRowHash) {
+            if (!removedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) {
+              node = getCellNode(row, getColumnIndex(columnId));
+              if (node) {
+                $(node).addClass(addedRowHash[columnId]);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    function addCellCssStyles(key, hash) {
+      if (cellCssClasses[key]) {
+        throw "addCellCssStyles: cell CSS hash with key '" + key + "' already exists.";
+      }
+
+      cellCssClasses[key] = hash;
+      updateCellCssStylesOnRenderedRows(hash, null);
+
+      trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash });
+    }
+
+    function removeCellCssStyles(key) {
+      if (!cellCssClasses[key]) {
+        return;
+      }
+
+      updateCellCssStylesOnRenderedRows(null, cellCssClasses[key]);
+      delete cellCssClasses[key];
+
+      trigger(self.onCellCssStylesChanged, { "key": key, "hash": null });
+    }
+
+    function setCellCssStyles(key, hash) {
+      var prevHash = cellCssClasses[key];
+
+      cellCssClasses[key] = hash;
+      updateCellCssStylesOnRenderedRows(hash, prevHash);
+
+      trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash });
+    }
+
+    function getCellCssStyles(key) {
+      return cellCssClasses[key];
+    }
+
+    function flashCell(row, cell, speed) {
+      speed = speed || 100;
+      if (rowsCache[row]) {
+        var $cell = $(getCellNode(row, cell));
+
+        function toggleCellClass(times) {
+          if (!times) {
+            return;
+          }
+          setTimeout(function () {
+                $cell.queue(function () {
+                  $cell.toggleClass(options.cellFlashingCssClass).dequeue();
+                  toggleCellClass(times - 1);
+                });
+              },
+              speed);
+        }
+
+        toggleCellClass(4);
+      }
+    }
+
+    //////////////////////////////////////////////////////////////////////////////////////////////
+    // Interactivity
+
+    function handleMouseWheel(e) {
+      var rowNode = $(e.target).closest(".slick-row")[0];
+      if (rowNode != rowNodeFromLastMouseWheelEvent) {
+        if (zombieRowNodeFromLastMouseWheelEvent && zombieRowNodeFromLastMouseWheelEvent != rowNode) {
+          $canvas[0].removeChild(zombieRowNodeFromLastMouseWheelEvent);
+          zombieRowNodeFromLastMouseWheelEvent = null;
+        }
+        rowNodeFromLastMouseWheelEvent = rowNode;      
+      }
+    }
+
+    function handleDragInit(e, dd) {
+      var cell = getCellFromEvent(e);
+      if (!cell || !cellExists(cell.row, cell.cell)) {
+        return false;
+      }
+
+      var retval = trigger(self.onDragInit, dd, e);
+      if (e.isImmediatePropagationStopped()) {
+        return retval;
+      }
+
+      // if nobody claims to be handling drag'n'drop by stopping immediate propagation,
+      // cancel out of it
+      return false;
+    }
+
+    function handleDragStart(e, dd) {
+      var cell = getCellFromEvent(e);
+      if (!cell || !cellExists(cell.row, cell.cell)) {
+        return false;
+      }
+
+      var retval = trigger(self.onDragStart, dd, e);
+      if (e.isImmediatePropagationStopped()) {
+        return retval;
+      }
+
+      return false;
+    }
+
+    function handleDrag(e, dd) {
+      return trigger(self.onDrag, dd, e);
+    }
+
+    function handleDragEnd(e, dd) {
+      trigger(self.onDragEnd, dd, e);
+    }
+
+    function handleKeyDown(e) {
+      trigger(self.onKeyDown, {row: activeRow, cell: activeCell}, e);
+      var handled = e.isImmediatePropagationStopped();
+
+      if (!handled) {
+        if (!e.shiftKey && !e.altKey && !e.ctrlKey) {
+          if (e.which == 27) {
+            if (!getEditorLock().isActive()) {
+              return; // no editing mode to cancel, allow bubbling and default processing (exit without cancelling the event)
+            }
+            cancelEditAndSetFocus();
+          } else if (e.which == 34) {
+            navigatePageDown();
+            handled = true;           
+          } else if (e.which == 33) {
+            navigatePageUp();
+            handled = true;
+          } else if (e.which == 37) {
+            handled = navigateLeft();
+          } else if (e.which == 39) {
+            handled = navigateRight();
+          } else if (e.which == 38) {
+            handled = navigateUp();
+          } else if (e.which == 40) {
+            handled = navigateDown();
+          } else if (e.which == 9) {
+            handled = navigateNext();
+          } else if (e.which == 13) {
+            if (options.editable) {
+              if (currentEditor) {
+                // adding new row
+                if (activeRow === getDataLength()) {
+                  navigateDown();
+                } else {
+                  commitEditAndSetFocus();
+                }
+              } else {
+                if (getEditorLock().commitCurrentEdit()) {
+                  makeActiveCellEditable();
+                }
+              }
+            }
+            handled = true;
+          }
+        } else if (e.which == 9 && e.shiftKey && !e.ctrlKey && !e.altKey) {
+          handled = navigatePrev();
+        }
+      }
+
+      if (handled) {
+        // the event has been handled so don't let parent element (bubbling/propagation) or browser (default) handle it
+        e.stopPropagation();
+        e.preventDefault();
+        try {
+          e.originalEvent.keyCode = 0; // prevent default behaviour for special keys in IE browsers (F3, F5, etc.)
+        }
+        // ignore exceptions - setting the original event's keycode throws access denied exception for "Ctrl"
+        // (hitting control key only, nothing else), "Shift" (maybe others)
+        catch (error) {
+        }
+      }
+    }
+
+    function handleClick(e) {
+      if (!currentEditor) {
+        // if this click resulted in some cell child node getting focus,
+        // don't steal it back - keyboard events will still bubble up
+        // IE9+ seems to default DIVs to tabIndex=0 instead of -1, so check for cell clicks directly.
+        if (e.target != document.activeElement || $(e.target).hasClass("slick-cell")) {
+          setFocus();
+        }
+      }
+
+      var cell = getCellFromEvent(e);
+      if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
+        return;
+      }
+
+      trigger(self.onClick, {row: cell.row, cell: cell.cell}, e);
+      if (e.isImmediatePropagationStopped()) {
+        return;
+      }
+
+      if ((activeCell != cell.cell || activeRow != cell.row) && canCellBeActive(cell.row, cell.cell)) {
+        if (!getEditorLock().isActive() || getEditorLock().commitCurrentEdit()) {
+          scrollRowIntoView(cell.row, false);
+          setActiveCellInternal(getCellNode(cell.row, cell.cell));
+        }
+      }
+    }
+
+    function handleContextMenu(e) {
+      var $cell = $(e.target).closest(".slick-cell", $canvas);
+      if ($cell.length === 0) {
+        return;
+      }
+
+      // are we editing this cell?
+      if (activeCellNode === $cell[0] && currentEditor !== null) {
+        return;
+      }
+
+      trigger(self.onContextMenu, {}, e);
+    }
+
+    function handleDblClick(e) {
+      var cell = getCellFromEvent(e);
+      if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
+        return;
+      }
+
+      trigger(self.onDblClick, {row: cell.row, cell: cell.cell}, e);
+      if (e.isImmediatePropagationStopped()) {
+        return;
+      }
+
+      if (options.editable) {
+        gotoCell(cell.row, cell.cell, true);
+      }
+    }
+
+    function handleHeaderMouseEnter(e) {
+      trigger(self.onHeaderMouseEnter, {
+        "column": $(this).data("column")
+      }, e);
+    }
+
+    function handleHeaderMouseLeave(e) {
+      trigger(self.onHeaderMouseLeave, {
+        "column": $(this).data("column")
+      }, e);
+    }
+
+    function handleHeaderContextMenu(e) {
+      var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");
+      var column = $header && $header.data("column");
+      trigger(self.onHeaderContextMenu, {column: column}, e);
+    }
+
+    function handleHeaderClick(e) {
+      var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");
+      var column = $header && $header.data("column");
+      if (column) {
+        trigger(self.onHeaderClick, {column: column}, e);
+      }
+    }
+
+    function handleMouseEnter(e) {
+      trigger(self.onMouseEnter, {}, e);
+    }
+
+    function handleMouseLeave(e) {
+      trigger(self.onMouseLeave, {}, e);
+    }
+
+    function cellExists(row, cell) {
+      return !(row < 0 || row >= getDataLength() || cell < 0 || cell >= columns.length);
+    }
+
+    function getCellFromPoint(x, y) {
+      var row = getRowFromPosition(y);
+      var cell = 0;
+
+      var w = 0;
+      for (var i = 0; i < columns.length && w < x; i++) {
+        w += columns[i].width;
+        cell++;
+      }
+
+      if (cell < 0) {
+        cell = 0;
+      }
+
+      return {row: row, cell: cell - 1};
+    }
+
+    function getCellFromNode(cellNode) {
+      // read column number from .l<columnNumber> CSS class
+      var cls = /l\d+/.exec(cellNode.className);
+      if (!cls) {
+        throw "getCellFromNode: cannot get cell - " + cellNode.className;
+      }
+      return parseInt(cls[0].substr(1, cls[0].length - 1), 10);
+    }
+
+    function getRowFromNode(rowNode) {
+      for (var row in rowsCache) {
+        if (rowsCache[row].rowNode === rowNode) {
+          return row | 0;
+        }
+      }
+
+      return null;
+    }
+
+    function getCellFromEvent(e) {
+      var $cell = $(e.target).closest(".slick-cell", $canvas);
+      if (!$cell.length) {
+        return null;
+      }
+
+      var row = getRowFromNode($cell[0].parentNode);
+      var cell = getCellFromNode($cell[0]);
+
+      if (row == null || cell == null) {
+        return null;
+      } else {
+        return {
+          "row": row,
+          "cell": cell
+        };
+      }
+    }
+
+    function getCellNodeBox(row, cell) {
+      if (!cellExists(row, cell)) {
+        return null;
+      }
+
+      var y1 = getRowTop(row);
+      var y2 = y1 + options.rowHeight - 1;
+      var x1 = 0;
+      for (var i = 0; i < cell; i++) {
+        x1 += columns[i].width;
+      }
+      var x2 = x1 + columns[cell].width;
+
+      return {
+        top: y1,
+        left: x1,
+        bottom: y2,
+        right: x2
+      };
+    }
+
+    //////////////////////////////////////////////////////////////////////////////////////////////
+    // Cell switching
+
+    function resetActiveCell() {
+      setActiveCellInternal(null, false);
+    }
+
+    function setFocus() {
+      if (tabbingDirection == -1) {
+        $focusSink[0].focus();
+      } else {
+        $focusSink2[0].focus();
+      }
+    }
+
+    function scrollCellIntoView(row, cell, doPaging) {
+      scrollRowIntoView(row, doPaging);
+
+      var colspan = getColspan(row, cell);
+      var left = columnPosLeft[cell],
+        right = columnPosRight[cell + (colspan > 1 ? colspan - 1 : 0)],
+        scrollRight = scrollLeft + viewportW;
+
+      if (left < scrollLeft) {
+        $viewport.scrollLeft(left);
+        handleScroll();
+        render();
+      } else if (right > scrollRight) {
+        $viewport.scrollLeft(Math.min(left, right - $viewport[0].clientWidth));
+        handleScroll();
+        render();
+      }
+    }
+
+    function setActiveCellInternal(newCell, opt_editMode) {
+      if (activeCellNode !== null) {
+        makeActiveCellNormal();
+        $(activeCellNode).removeClass("active");
+        if (rowsCache[activeRow]) {
+          $(rowsCache[activeRow].rowNode).removeClass("active");
+        }
+      }
+
+      var activeCellChanged = (activeCellNode !== newCell);
+      activeCellNode = newCell;
+
+      if (activeCellNode != null) {
+        activeRow = getRowFromNode(activeCellNode.parentNode);
+        activeCell = activePosX = getCellFromNode(activeCellNode);
+
+        if (opt_editMode == null) {
+          opt_editMode = (activeRow == getDataLength()) || options.autoEdit;
+        }
+
+        $(activeCellNode).addClass("active");
+        $(rowsCache[activeRow].rowNode).addClass("active");
+
+        if (options.editable && opt_editMode && isCellPotentiallyEditable(activeRow, activeCell)) {
+          clearTimeout(h_editorLoader);
+
+          if (options.asyncEditorLoading) {
+            h_editorLoader = setTimeout(function () {
+              makeActiveCellEditable();
+            }, options.asyncEditorLoadDelay);
+          } else {
+            makeActiveCellEditable();
+          }
+        }
+      } else {
+        activeRow = activeCell = null;
+      }
+
+      if (activeCellChanged) {
+        trigger(self.onActiveCellChanged, getActiveCell());
+      }
+    }
+
+    function clearTextSelection() {
+      if (document.selection && document.selection.empty) {
+        try {
+          //IE fails here if selected element is not in dom
+          document.selection.empty();
+        } catch (e) { }
+      } else if (window.getSelection) {
+        var sel = window.getSelection();
+        if (sel && sel.removeAllRanges) {
+          sel.removeAllRanges();
+        }
+      }
+    }
+
+    function isCellPotentiallyEditable(row, cell) {
+      var dataLength = getDataLength();
+      // is the data for this row loaded?
+      if (row < dataLength && !getDataItem(row)) {
+        return false;
+      }
+
+      // are we in the Add New row?  can we create new from this cell?
+      if (columns[cell].cannotTriggerInsert && row >= dataLength) {
+        return false;
+      }
+
+      // does this cell have an editor?
+      if (!getEditor(row, cell)) {
+        return false;
+      }
+
+      return true;
+    }
+
+    function makeActiveCellNormal() {
+      if (!currentEditor) {
+        return;
+      }
+      trigger(self.onBeforeCellEditorDestroy, {editor: currentEditor});
+      currentEditor.destroy();
+      currentEditor = null;
+
+      if (activeCellNode) {
+        var d = getDataItem(activeRow);
+        $(activeCellNode).removeClass("editable invalid");
+        if (d) {
+          var column = columns[activeCell];
+          var formatter = getFormatter(activeRow, column);
+          activeCellNode.innerHTML = formatter(activeRow, activeCell, getDataItemValueForColumn(d, column), column, d);
+          invalidatePostProcessingResults(activeRow);
+        }
+      }
+
+      // if there previously was text selected on a page (such as selected text in the edit cell just removed),
+      // IE can't set focus to anything else correctly
+      if (navigator.userAgent.toLowerCase().match(/msie/)) {
+        clearTextSelection();
+      }
+
+      getEditorLock().deactivate(editController);
+    }
+
+    function makeActiveCellEditable(editor) {
+      if (!activeCellNode) {
+        return;
+      }
+      if (!options.editable) {
+        throw "Grid : makeActiveCellEditable : should never get called when options.editable is false";
+      }
+
+      // cancel pending async call if there is one
+      clearTimeout(h_editorLoader);
+
+      if (!isCellPotentiallyEditable(activeRow, activeCell)) {
+        return;
+      }
+
+      var columnDef = columns[activeCell];
+      var item = getDataItem(activeRow);
+
+      if (trigger(self.onBeforeEditCell, {row: activeRow, cell: activeCell, item: item, column: columnDef}) === false) {
+        setFocus();
+        return;
+      }
+
+      getEditorLock().activate(editController);
+      $(activeCellNode).addClass("editable");
+
+      // don't clear the cell if a custom editor is passed through
+      if (!editor) {
+        activeCellNode.innerHTML = "";
+      }
+
+      currentEditor = new (editor || getEditor(activeRow, activeCell))({
+        grid: self,
+        gridPosition: absBox($container[0]),
+        position: absBox(activeCellNode),
+        container: activeCellNode,
+        column: columnDef,
+        item: item || {},
+        commitChanges: commitEditAndSetFocus,
+        cancelChanges: cancelEditAndSetFocus
+      });
+
+      if (item) {
+        currentEditor.loadValue(item);
+      }
+
+      serializedEditorValue = currentEditor.serializeValue();
+
+      if (currentEditor.position) {
+        handleActiveCellPositionChange();
+      }
+    }
+
+    function commitEditAndSetFocus() {
+      // if the commit fails, it would do so due to a validation error
+      // if so, do not steal the focus from the editor
+      if (getEditorLock().commitCurrentEdit()) {
+        setFocus();
+        if (options.autoEdit) {
+          navigateDown();
+        }
+      }
+    }
+
+    function cancelEditAndSetFocus() {
+      if (getEditorLock().cancelCurrentEdit()) {
+        setFocus();
+      }
+    }
+
+    function absBox(elem) {
+      var box = {
+        top: elem.offsetTop,
+        left: elem.offsetLeft,
+        bottom: 0,
+        right: 0,
+        width: $(elem).outerWidth(),
+        height: $(elem).outerHeight(),
+        visible: true};
+      box.bottom = box.top + box.height;
+      box.right = box.left + box.width;
+
+      // walk up the tree
+      var offsetParent = elem.offsetParent;
+      while ((elem = elem.parentNode) != document.body) {
+        if (box.visible && elem.scrollHeight != elem.offsetHeight && $(elem).css("overflowY") != "visible") {
+          box.visible = box.bottom > elem.scrollTop && box.top < elem.scrollTop + elem.clientHeight;
+        }
+
+        if (box.visible && elem.scrollWidth != elem.offsetWidth && $(elem).css("overflowX") != "visible") {
+          box.visible = box.right > elem.scrollLeft && box.left < elem.scrollLeft + elem.clientWidth;
+        }
+
+        box.left -= elem.scrollLeft;
+        box.top -= elem.scrollTop;
+
+        if (elem === offsetParent) {
+          box.left += elem.offsetLeft;
+          box.top += elem.offsetTop;
+          offsetParent = elem.offsetParent;
+        }
+
+        box.bottom = box.top + box.height;
+        box.right = box.left + box.width;
+      }
+
+      return box;
+    }
+
+    function getActiveCellPosition() {
+      return absBox(activeCellNode);
+    }
+
+    function getGridPosition() {
+      return absBox($container[0])
+    }
+
+    function handleActiveCellPositionChange() {
+      if (!activeCellNode) {
+        return;
+      }
+
+      trigger(self.onActiveCellPositionChanged, {});
+
+      if (currentEditor) {
+        var cellBox = getActiveCellPosition();
+        if (currentEditor.show && currentEditor.hide) {
+          if (!cellBox.visible) {
+            currentEditor.hide();
+          } else {
+            currentEditor.show();
+          }
+        }
+
+        if (currentEditor.position) {
+          currentEditor.position(cellBox);
+        }
+      }
+    }
+
+    function getCellEditor() {
+      return currentEditor;
+    }
+
+    function getActiveCell() {
+      if (!activeCellNode) {
+        return null;
+      } else {
+        return {row: activeRow, cell: activeCell};
+      }
+    }
+
+    function getActiveCellNode() {
+      return activeCellNode;
+    }
+
+    function scrollRowIntoView(row, doPaging) {
+      var rowAtTop = row * options.rowHeight;
+      var rowAtBottom = (row + 1) * options.rowHeight - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0);
+
+      // need to page down?
+      if ((row + 1) * options.rowHeight > scrollTop + viewportH + offset) {
+        scrollTo(doPaging ? rowAtTop : rowAtBottom);
+        render();
+      }
+      // or page up?
+      else if (row * options.rowHeight < scrollTop + offset) {
+        scrollTo(doPaging ? rowAtBottom : rowAtTop);
+        render();
+      }
+    }
+
+    function scrollRowToTop(row) {
+      scrollTo(row * options.rowHeight);
+      render();
+    }
+
+    function scrollPage(dir) {
+      var deltaRows = dir * numVisibleRows;
+      scrollTo((getRowFromPosition(scrollTop) + deltaRows) * options.rowHeight);
+      render();
+
+      if (options.enableCellNavigation && activeRow != null) {
+        var row = activeRow + deltaRows;
+        var dataLengthIncludingAddNew = getDataLengthIncludingAddNew();
+        if (row >= dataLengthIncludingAddNew) {
+          row = dataLengthIncludingAddNew - 1;
+        }
+        if (row < 0) {
+          row = 0;
+        }
+
+        var cell = 0, prevCell = null;
+        var prevActivePosX = activePosX;
+        while (cell <= activePosX) {
+          if (canCellBeActive(row, cell)) {
+            prevCell = cell;  
+          }
+          cell += getColspan(row, cell);
+        }
+
+        if (prevCell !== null) {
+          setActiveCellInternal(getCellNode(row, prevCell));
+          activePosX = prevActivePosX;
+        } else {
+          resetActiveCell();
+        }
+      }
+    }
+
+    function navigatePageDown() {
+      scrollPage(1);
+    }
+
+    function navigatePageUp() {
+      scrollPage(-1);
+    }
+
+    function getColspan(row, cell) {
+      var metadata = data.getItemMetadata && data.getItemMetadata(row);
+      if (!metadata || !metadata.columns) {
+        return 1;
+      }
+
+      var columnData = metadata.columns[columns[cell].id] || metadata.columns[cell];
+      var colspan = (columnData && columnData.colspan);
+      if (colspan === "*") {
+        colspan = columns.length - cell;
+      } else {
+        colspan = colspan || 1;
+      }
+
+      return colspan;
+    }
+
+    function findFirstFocusableCell(row) {
+      var cell = 0;
+      while (cell < columns.length) {
+        if (canCellBeActive(row, cell)) {
+          return cell;
+        }
+        cell += getColspan(row, cell);
+      }
+      return null;
+    }
+
+    function findLastFocusableCell(row) {
+      var cell = 0;
+      var lastFocusableCell = null;
+      while (cell < columns.length) {
+        if (canCellBeActive(row, cell)) {
+          lastFocusableCell = cell;
+        }
+        cell += getColspan(row, cell);
+      }
+      return lastFocusableCell;
+    }
+
+    function gotoRight(row, cell, posX) {
+      if (cell >= columns.length) {
+        return null;
+      }
+
+      do {
+        cell += getColspan(row, cell);
+      }
+      while (cell < columns.length && !canCellBeActive(row, cell));
+
+      if (cell < columns.length) {
+        return {
+          "row": row,
+          "cell": cell,
+          "posX": cell
+        };
+      }
+      return null;
+    }
+
+    function gotoLeft(row, cell, posX) {
+      if (cell <= 0) {
+        return null;
+      }
+
+      var firstFocusableCell = findFirstFocusableCell(row);
+      if (firstFocusableCell === null || firstFocusableCell >= cell) {
+        return null;
+      }
+
+      var prev = {
+        "row": row,
+        "cell": firstFocusableCell,
+        "posX": firstFocusableCell
+      };
+      var pos;
+      while (true) {
+        pos = gotoRight(prev.row, prev.cell, prev.posX);
+        if (!pos) {
+          return null;
+        }
+        if (pos.cell >= cell) {
+          return prev;
+        }
+        prev = pos;
+      }
+    }
+
+    function gotoDown(row, cell, posX) {
+      var prevCell;
+      var dataLengthIncludingAddNew = getDataLengthIncludingAddNew();
+      while (true) {
+        if (++row >= dataLengthIncludingAddNew) {
+          return null;
+        }
+
+        prevCell = cell = 0;
+        while (cell <= posX) {
+          prevCell = cell;
+          cell += getColspan(row, cell);
+        }
+
+        if (canCellBeActive(row, prevCell)) {
+          return {
+            "row": row,
+            "cell": prevCell,
+            "posX": posX
+          };
+        }
+      }
+    }
+
+    function gotoUp(row, cell, posX) {
+      var prevCell;
+      while (true) {
+        if (--row < 0) {
+          return null;
+        }
+
+        prevCell = cell = 0;
+        while (cell <= posX) {
+          prevCell = cell;
+          cell += getColspan(row, cell);
+        }
+
+        if (canCellBeActive(row, prevCell)) {
+          return {
+            "row": row,
+            "cell": prevCell,
+            "posX": posX
+          };
+        }
+      }
+    }
+
+    function gotoNext(row, cell, posX) {
+      if (row == null && cell == null) {
+        row = cell = posX = 0;
+        if (canCellBeActive(row, cell)) {
+          return {
+            "row": row,
+            "cell": cell,
+            "posX": cell
+          };
+        }
+      }
+
+      var pos = gotoRight(row, cell, posX);
+      if (pos) {
+        return pos;
+      }
+
+      var firstFocusableCell = null;
+      var dataLengthIncludingAddNew = getDataLengthIncludingAddNew();
+      while (++row < dataLengthIncludingAddNew) {
+        firstFocusableCell = findFirstFocusableCell(row);
+        if (firstFocusableCell !== null) {
+          return {
+            "row": row,
+            "cell": firstFocusableCell,
+            "posX": firstFocusableCell
+          };
+        }
+      }
+      return null;
+    }
+
+    function gotoPrev(row, cell, posX) {
+      if (row == null && cell == null) {
+        row = getDataLengthIncludingAddNew() - 1;
+        cell = posX = columns.length - 1;
+        if (canCellBeActive(row, cell)) {
+          return {
+            "row": row,
+            "cell": cell,
+            "posX": cell
+          };
+        }
+      }
+
+      var pos;
+      var lastSelectableCell;
+      while (!pos) {
+        pos = gotoLeft(row, cell, posX);
+        if (pos) {
+          break;
+        }
+        if (--row < 0) {
+          return null;
+        }
+
+        cell = 0;
+        lastSelectableCell = findLastFocusableCell(row);
+        if (lastSelectableCell !== null) {
+          pos = {
+            "row": row,
+            "cell": lastSelectableCell,
+            "posX": lastSelectableCell
+          };
+        }
+      }
+      return pos;
+    }
+
+    function navigateRight() {
+      return navigate("right");
+    }
+
+    function navigateLeft() {
+      return navigate("left");
+    }
+
+    function navigateDown() {
+      return navigate("down");
+    }
+
+    function navigateUp() {
+      return navigate("up");
+    }
+
+    function navigateNext() {
+      return navigate("next");
+    }
+
+    function navigatePrev() {
+      return navigate("prev");
+    }
+
+    /**
+     * @param {string} dir Navigation direction.
+     * @return {boolean} Whether navigation resulted in a change of active cell.
+     */
+    function navigate(dir) {
+      if (!options.enableCellNavigation) {
+        return false;
+      }
+
+      if (!activeCellNode && dir != "prev" && dir != "next") {
+        return false;
+      }
+
+      if (!getEditorLock().commitCurrentEdit()) {
+        return true;
+      }
+      setFocus();
+
+      var tabbingDirections = {
+        "up": -1,
+        "down": 1,
+        "left": -1,
+        "right": 1,
+        "prev": -1,
+        "next": 1
+      };
+      tabbingDirection = tabbingDirections[dir];
+
+      var stepFunctions = {
+        "up": gotoUp,
+        "down": gotoDown,
+        "left": gotoLeft,
+        "right": gotoRight,
+        "prev": gotoPrev,
+        "next": gotoNext
+      };
+      var stepFn = stepFunctions[dir];
+      var pos = stepFn(activeRow, activeCell, activePosX);
+      if (pos) {
+        var isAddNewRow = (pos.row == getDataLength());
+        scrollCellIntoView(pos.row, pos.cell, !isAddNewRow);
+        setActiveCellInternal(getCellNode(pos.row, pos.cell));
+        activePosX = pos.posX;
+        return true;
+      } else {
+        setActiveCellInternal(getCellNode(activeRow, activeCell));
+        return false;
+      }
+    }
+
+    function getCellNode(row, cell) {
+      if (rowsCache[row]) {
+        ensureCellNodesInRowsCache(row);
+        return rowsCache[row].cellNodesByColumnIdx[cell];
+      }
+      return null;
+    }
+
+    function setActiveCell(row, cell) {
+      if (!initialized) { return; }
+      if (row > getDataLength() || row < 0 || cell >= columns.length || cell < 0) {
+        return;
+      }
+
+      if (!options.enableCellNavigation) {
+        return;
+      }
+
+      scrollCellIntoView(row, cell, false);
+      setActiveCellInternal(getCellNode(row, cell), false);
+    }
+
+    function canCellBeActive(row, cell) {
+      if (!options.enableCellNavigation || row >= getDataLengthIncludingAddNew() ||
+          row < 0 || cell >= columns.length || cell < 0) {
+        return false;
+      }
+
+      var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
+      if (rowMetadata && typeof rowMetadata.focusable === "boolean") {
+        return rowMetadata.focusable;
+      }
+
+      var columnMetadata = rowMetadata && rowMetadata.columns;
+      if (columnMetadata && columnMetadata[columns[cell].id] && typeof columnMetadata[columns[cell].id].focusable === "boolean") {
+        return columnMetadata[columns[cell].id].focusable;
+      }
+      if (columnMetadata && columnMetadata[cell] && typeof columnMetadata[cell].focusable === "boolean") {
+        return columnMetadata[cell].focusable;
+      }
+
+      return columns[cell].focusable;
+    }
+
+    function canCellBeSelected(row, cell) {
+      if (row >= getDataLength() || row < 0 || cell >= columns.length || cell < 0) {
+        return false;
+      }
+
+      var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
+      if (rowMetadata && typeof rowMetadata.selectable === "boolean") {
+        return rowMetadata.selectable;
+      }
+
+      var columnMetadata = rowMetadata && rowMetadata.columns && (rowMetadata.columns[columns[cell].id] || rowMetadata.columns[cell]);
+      if (columnMetadata && typeof columnMetadata.selectable === "boolean") {
+        return columnMetadata.selectable;
+      }
+
+      return columns[cell].selectable;
+    }
+
+    function gotoCell(row, cell, forceEdit) {
+      if (!initialized) { return; }
+      if (!canCellBeActive(row, cell)) {
+        return;
+      }
+
+      if (!getEditorLock().commitCurrentEdit()) {
+        return;
+      }
+
+      scrollCellIntoView(row, cell, false);
+
+      var newCell = getCellNode(row, cell);
+
+      // if selecting the 'add new' row, start editing right away
+      setActiveCellInternal(newCell, forceEdit || (row === getDataLength()) || options.autoEdit);
+
+      // if no editor was created, set the focus back on the grid
+      if (!currentEditor) {
+        setFocus();
+      }
+    }
+
+
+    //////////////////////////////////////////////////////////////////////////////////////////////
+    // IEditor implementation for the editor lock
+
+    function commitCurrentEdit() {
+      var item = getDataItem(activeRow);
+      var column = columns[activeCell];
+
+      if (currentEditor) {
+        if (currentEditor.isValueChanged()) {
+          var validationResults = currentEditor.validate();
+
+          if (validationResults.valid) {
+            if (activeRow < getDataLength()) {
+              var editCommand = {
+                row: activeRow,
+                cell: activeCell,
+                editor: currentEditor,
+                serializedValue: currentEditor.serializeValue(),
+                prevSerializedValue: serializedEditorValue,
+                execute: function () {
+                  this.editor.applyValue(item, this.serializedValue);
+                  updateRow(this.row);
+                  trigger(self.onCellChange, {
+                    row: activeRow,
+                    cell: activeCell,
+                    item: item
+                  });
+                },
+                undo: function () {
+                  this.editor.applyValue(item, this.prevSerializedValue);
+                  updateRow(this.row);
+                  trigger(self.onCellChange, {
+                    row: activeRow,
+                    cell: activeCell,
+                    item: item
+                  });
+                }
+              };
+
+              if (options.editCommandHandler) {
+                makeActiveCellNormal();
+                options.editCommandHandler(item, column, editCommand);
+              } else {
+                editCommand.execute();
+                makeActiveCellNormal();
+              }
+
+            } else {
+              var newItem = {};
+              currentEditor.applyValue(newItem, currentEditor.serializeValue());
+              makeActiveCellNormal();
+              trigger(self.onAddNewRow, {item: newItem, column: column});
+            }
+
+            // check whether the lock has been re-acquired by event handlers
+            return !getEditorLock().isActive();
+          } else {
+            // Re-add the CSS class to trigger transitions, if any.
+            $(activeCellNode).removeClass("invalid");
+            $(activeCellNode).width();  // force layout
+            $(activeCellNode).addClass("invalid");
+
+            trigger(self.onValidationError, {
+              editor: currentEditor,
+              cellNode: activeCellNode,
+              validationResults: validationResults,
+              row: activeRow,
+              cell: activeCell,
+              column: column
+            });
+
+            currentEditor.focus();
+            return false;
+          }
+        }
+
+        makeActiveCellNormal();
+      }
+      return true;
+    }
+
+    function cancelCurrentEdit() {
+      makeActiveCellNormal();
+      return true;
+    }
+
+    function rowsToRanges(rows) {
+      var ranges = [];
+      var lastCell = columns.length - 1;
+      for (var i = 0; i < rows.length; i++) {
+        ranges.push(new Slick.Range(rows[i], 0, rows[i], lastCell));
+      }
+      return ranges;
+    }
+
+    function getSelectedRows() {
+      if (!selectionModel) {
+        throw "Selection model is not set";
+      }
+      return selectedRows;
+    }
+
+    function setSelectedRows(rows) {
+      if (!selectionModel) {
+        throw "Selection model is not set";
+      }
+      selectionModel.setSelectedRanges(rowsToRanges(rows));
+    }
+
+
+    //////////////////////////////////////////////////////////////////////////////////////////////
+    // Debug
+
+    this.debug = function () {
+      var s = "";
+
+      s += ("\n" + "counter_rows_rendered:  " + counter_rows_rendered);
+      s += ("\n" + "counter_rows_removed:  " + counter_rows_removed);
+      s += ("\n" + "renderedRows:  " + renderedRows);
+      s += ("\n" + "numVisibleRows:  " + numVisibleRows);
+      s += ("\n" + "maxSupportedCssHeight:  " + maxSupportedCssHeight);
+      s += ("\n" + "n(umber of pages):  " + n);
+      s += ("\n" + "(current) page:  " + page);
+      s += ("\n" + "page height (ph):  " + ph);
+      s += ("\n" + "vScrollDir:  " + vScrollDir);
+
+      alert(s);
+    };
+
+    // a debug helper to be able to access private members
+    this.eval = function (expr) {
+      return eval(expr);
+    };
+
+    //////////////////////////////////////////////////////////////////////////////////////////////
+    // Public API
+
+    $.extend(this, {
+      "slickGridVersion": "2.1",
+
+      // Events
+      "onScroll": new Slick.Event(),
+      "onSort": new Slick.Event(),
+      "onHeaderMouseEnter": new Slick.Event(),
+      "onHeaderMouseLeave": new Slick.Event(),
+      "onHeaderContextMenu": new Slick.Event(),
+      "onHeaderClick": new Slick.Event(),
+      "onHeaderCellRendered": new Slick.Event(),
+      "onBeforeHeaderCellDestroy": new Slick.Event(),
+      "onHeaderRowCellRendered": new Slick.Event(),
+      "onBeforeHeaderRowCellDestroy": new Slick.Event(),
+      "onMouseEnter": new Slick.Event(),
+      "onMouseLeave": new Slick.Event(),
+      "onClick": new Slick.Event(),
+      "onDblClick": new Slick.Event(),
+      "onContextMenu": new Slick.Event(),
+      "onKeyDown": new Slick.Event(),
+      "onAddNewRow": new Slick.Event(),
+      "onValidationError": new Slick.Event(),
+      "onViewportChanged": new Slick.Event(),
+      "onColumnsReordered": new Slick.Event(),
+      "onColumnsResized": new Slick.Event(),
+      "onCellChange": new Slick.Event(),
+      "onBeforeEditCell": new Slick.Event(),
+      "onBeforeCellEditorDestroy": new Slick.Event(),
+      "onBeforeDestroy": new Slick.Event(),
+      "onActiveCellChanged": new Slick.Event(),
+      "onActiveCellPositionChanged": new Slick.Event(),
+      "onDragInit": new Slick.Event(),
+      "onDragStart": new Slick.Event(),
+      "onDrag": new Slick.Event(),
+      "onDragEnd": new Slick.Event(),
+      "onSelectedRowsChanged": new Slick.Event(),
+      "onCellCssStylesChanged": new Slick.Event(),
+
+      // Methods
+      "registerPlugin": registerPlugin,
+      "unregisterPlugin": unregisterPlugin,
+      "getColumns": getColumns,
+      "setColumns": setColumns,
+      "getColumnIndex": getColumnIndex,
+      "updateColumnHeader": updateColumnHeader,
+      "setSortColumn": setSortColumn,
+      "setSortColumns": setSortColumns,
+      "getSortColumns": getSortColumns,
+      "autosizeColumns": autosizeColumns,
+      "getOptions": getOptions,
+      "setOptions": setOptions,
+      "getData": getData,
+      "getDataLength": getDataLength,
+      "getDataItem": getDataItem,
+      "setData": setData,
+      "getSelectionModel": getSelectionModel,
+      "setSelectionModel": setSelectionModel,
+      "getSelectedRows": getSelectedRows,
+      "setSelectedRows": setSelectedRows,
+      "getContainerNode": getContainerNode,
+
+      "render": render,
+      "invalidate": invalidate,
+      "invalidateRow": invalidateRow,
+      "invalidateRows": invalidateRows,
+      "invalidateAllRows": invalidateAllRows,
+      "updateCell": updateCell,
+      "updateRow": updateRow,
+      "getViewport": getVisibleRange,
+      "getRenderedRange": getRenderedRange,
+      "resizeCanvas": resizeCanvas,
+      "updateRowCount": updateRowCount,
+      "scrollRowIntoView": scrollRowIntoView,
+      "scrollRowToTop": scrollRowToTop,
+      "scrollCellIntoView": scrollCellIntoView,
+      "getCanvasNode": getCanvasNode,
+      "focus": setFocus,
+
+      "getCellFromPoint": getCellFromPoint,
+      "getCellFromEvent": getCellFromEvent,
+      "getActiveCell": getActiveCell,
+      "setActiveCell": setActiveCell,
+      "getActiveCellNode": getActiveCellNode,
+      "getActiveCellPosition": getActiveCellPosition,
+      "resetActiveCell": resetActiveCell,
+      "editActiveCell": makeActiveCellEditable,
+      "getCellEditor": getCellEditor,
+      "getCellNode": getCellNode,
+      "getCellNodeBox": getCellNodeBox,
+      "canCellBeSelected": canCellBeSelected,
+      "canCellBeActive": canCellBeActive,
+      "navigatePrev": navigatePrev,
+      "navigateNext": navigateNext,
+      "navigateUp": navigateUp,
+      "navigateDown": navigateDown,
+      "navigateLeft": navigateLeft,
+      "navigateRight": navigateRight,
+      "navigatePageUp": navigatePageUp,
+      "navigatePageDown": navigatePageDown,
+      "gotoCell": gotoCell,
+      "getTopPanel": getTopPanel,
+      "setTopPanelVisibility": setTopPanelVisibility,
+      "setHeaderRowVisibility": setHeaderRowVisibility,
+      "getHeaderRow": getHeaderRow,
+      "getHeaderRowColumn": getHeaderRowColumn,
+      "getGridPosition": getGridPosition,
+      "flashCell": flashCell,
+      "addCellCssStyles": addCellCssStyles,
+      "setCellCssStyles": setCellCssStyles,
+      "removeCellCssStyles": removeCellCssStyles,
+      "getCellCssStyles": getCellCssStyles,
+
+      "init": finishInitialization,
+      "destroy": destroy,
+
+      // IEditor implementation
+      "getEditorLock": getEditorLock,
+      "getEditController": getEditController
+    });
+
+    init();
+  }
+}(jQuery));
diff --git a/slick.groupitemmetadataprovider.js b/slick.groupitemmetadataprovider.js
index 6986098ac..18ee1c601 100644
--- a/slick.groupitemmetadataprovider.js
+++ b/slick.groupitemmetadataprovider.js
@@ -26,13 +26,16 @@
     var _grid;
     var _defaults = {
       groupCssClass: "slick-group",
+      groupTitleCssClass: "slick-group-title",
       totalsCssClass: "slick-group-totals",
       groupFocusable: true,
       totalsFocusable: false,
       toggleCssClass: "slick-group-toggle",
       toggleExpandedCssClass: "expanded",
       toggleCollapsedCssClass: "collapsed",
-      enableExpandCollapse: true
+      enableExpandCollapse: true,
+      groupFormatter: defaultGroupCellFormatter,
+      totalsFormatter: defaultTotalsCellFormatter
     };
 
     options = $.extend(true, {}, _defaults, options);
@@ -43,9 +46,15 @@
         return item.title;
       }
 
+      var indentation = item.level * 15 + "px";
+
       return "<span class='" + options.toggleCssClass + " " +
           (item.collapsed ? options.toggleCollapsedCssClass : options.toggleExpandedCssClass) +
-          "'></span>" + item.title;
+          "' style='margin-left:" + indentation +"'>" +
+          "</span>" +
+          "<span class='" + options.groupTitleCssClass + "' level='" + item.level + "'>" +
+            item.title +
+          "</span>";
     }
 
     function defaultTotalsCellFormatter(row, cell, value, columnDef, item) {
@@ -70,11 +79,16 @@
     function handleGridClick(e, args) {
       var item = this.getDataItem(args.row);
       if (item && item instanceof Slick.Group && $(e.target).hasClass(options.toggleCssClass)) {
+        var range = _grid.getRenderedRange();
+        this.getData().setRefreshHints({
+          ignoreDiffsBefore: range.top,
+          ignoreDiffsAfter: range.bottom
+        });
+
         if (item.collapsed) {
-          this.getData().expandGroup(item.value);
-        }
-        else {
-          this.getData().collapseGroup(item.value);
+          this.getData().expandGroup(item.groupingKey);
+        } else {
+          this.getData().collapseGroup(item.groupingKey);
         }
 
         e.stopImmediatePropagation();
@@ -89,11 +103,16 @@
         if (activeCell) {
           var item = this.getDataItem(activeCell.row);
           if (item && item instanceof Slick.Group) {
+            var range = _grid.getRenderedRange();
+            this.getData().setRefreshHints({
+              ignoreDiffsBefore: range.top,
+              ignoreDiffsAfter: range.bottom
+            });
+
             if (item.collapsed) {
-              this.getData().expandGroup(item.value);
-            }
-            else {
-              this.getData().collapseGroup(item.value);
+              this.getData().expandGroup(item.groupingKey);
+            } else {
+              this.getData().collapseGroup(item.groupingKey);
             }
 
             e.stopImmediatePropagation();
@@ -111,7 +130,7 @@
         columns: {
           0: {
             colspan: "*",
-            formatter: defaultGroupCellFormatter,
+            formatter: options.groupFormatter,
             editor: null
           }
         }
@@ -123,7 +142,7 @@
         selectable: false,
         focusable: options.totalsFocusable,
         cssClasses: options.totalsCssClass,
-        formatter: defaultTotalsCellFormatter,
+        formatter: options.totalsFormatter,
         editor: null
       };
     }
@@ -136,4 +155,4 @@
       "getTotalsRowMetadata": getTotalsRowMetadata
     };
   }
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/slick.remotemodel.js b/slick.remotemodel.js
index e485706b0..6d21020e6 100644
--- a/slick.remotemodel.js
+++ b/slick.remotemodel.js
@@ -1,14 +1,14 @@
 (function ($) {
   /***
    * A sample AJAX data store implementation.
-   * Right now, it's hooked up to load all Apple-related Digg stories, but can
-   * easily be extended to support and JSONP-compatible backend that accepts paging parameters.
+   * Right now, it's hooked up to load Hackernews stories, but can
+   * easily be extended to support any JSONP-compatible backend that accepts paging parameters.
    */
   function RemoteModel() {
     // private
     var PAGESIZE = 50;
     var data = {length: 0};
-    var searchstr = "apple";
+    var searchstr = "";
     var sortcol = null;
     var sortdir = 1;
     var h_request = null;
@@ -53,6 +53,10 @@
         from = 0;
       }
 
+      if (data.length > 0) {
+        to = Math.min(to, data.length - 1);
+      }
+
       var fromPage = Math.floor(from / PAGESIZE);
       var toPage = Math.floor(to / PAGESIZE);
 
@@ -64,15 +68,14 @@
 
       if (fromPage > toPage || ((fromPage == toPage) && data[fromPage * PAGESIZE] !== undefined)) {
         // TODO:  look-ahead
+        onDataLoaded.notify({from: from, to: to});
         return;
       }
 
-      var url = "http://services.digg.com/search/stories?query=" + searchstr + "&offset=" + (fromPage * PAGESIZE) + "&count=" + (((toPage - fromPage) * PAGESIZE) + PAGESIZE) + "&appkey=http://slickgrid.googlecode.com&type=javascript";
+      var url = "http://api.thriftdb.com/api.hnsearch.com/items/_search?filter[fields][type][]=submission&q=" + searchstr + "&start=" + (fromPage * PAGESIZE) + "&limit=" + (((toPage - fromPage) * PAGESIZE) + PAGESIZE);
 
-      switch (sortcol) {
-        case "diggs":
-          url += ("&sort=" + ((sortdir > 0) ? "digg_count-asc" : "digg_count-desc"));
-          break;
+      if (sortcol != null) {
+          url += ("&sortby=" + sortcol + ((sortdir > 0) ? "+asc" : "+desc"));
       }
 
       if (h_request != null) {
@@ -88,7 +91,7 @@
         req = $.jsonp({
           url: url,
           callbackParameter: "callback",
-          cache: true, // Digg doesn't accept the autogenerated cachebuster param
+          cache: true,
           success: onSuccess,
           error: function () {
             onError(fromPage, toPage)
@@ -105,11 +108,17 @@
     }
 
     function onSuccess(resp) {
-      var from = this.fromPage * PAGESIZE, to = from + resp.count;
-      data.length = parseInt(resp.total);
+      var from = resp.request.start, to = from + resp.results.length;
+      data.length = Math.min(parseInt(resp.hits),1000); // limitation of the API
+
+      for (var i = 0; i < resp.results.length; i++) {
+        var item = resp.results[i].item;
+
+        // Old IE versions can't parse ISO dates, so change to universally-supported format.
+        item.create_ts = item.create_ts.replace(/^(\d+)-(\d+)-(\d+)T(\d+:\d+:\d+)Z$/, "$2/$3/$1 $4 UTC"); 
+        item.create_ts = new Date(item.create_ts);
 
-      for (var i = 0; i < resp.stories.length; i++) {
-        data[from + i] = resp.stories[i];
+        data[from + i] = item;
         data[from + i].index = from + i;
       }
 
@@ -161,4 +170,4 @@
 
   // Slick.Data.RemoteModel
   $.extend(true, window, { Slick: { Data: { RemoteModel: RemoteModel }}});
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/tests/dataview/dataview.js b/tests/dataview/dataview.js
index 04278c1e2..c1eb384b4 100644
--- a/tests/dataview/dataview.js
+++ b/tests/dataview/dataview.js
@@ -377,6 +377,40 @@ test("all then none", function() {
     assertConsistency(dv);
 });
 
+test("inlining replaces absolute returns", function() {
+    var dv = new Slick.Data.DataView({ inlineFilters: true });
+    dv.setItems([{id:0,val:0},{id:1,val:1},{id:2,val:2}]);
+    dv.setFilter(function(o) {
+        if (o.val === 1) { return true; }
+        else if (o.val === 4) { return true }
+        return false});
+    same(dv.getLength(), 1, "one row is remaining");
+
+    dv.onRowsChanged.subscribe(function() { ok(false, "onRowsChanged called") });
+    dv.onRowCountChanged.subscribe(function() { ok(false, "onRowCountChanged called") });
+    dv.onPagingInfoChanged.subscribe(function() { ok(false, "onPagingInfoChanged called") });
+    same(dv.getItems().length, 3, "original data is still there");
+    same(dv.getLength(), 1, "rows are filtered");
+    assertConsistency(dv);
+});
+
+test("inlining replaces evaluated returns", function() {
+    var dv = new Slick.Data.DataView({ inlineFilters: true });
+    dv.setItems([{id:0,val:0},{id:1,val:1},{id:2,val:2}]);
+    dv.setFilter(function(o) {
+        if (o.val === 0) { return o.id === 2; }
+        else if (o.val === 1) { return o.id === 2 }
+        return o.val === 2});
+    same(dv.getLength(), 1, "one row is remaining");
+
+    dv.onRowsChanged.subscribe(function() { ok(false, "onRowsChanged called") });
+    dv.onRowCountChanged.subscribe(function() { ok(false, "onRowCountChanged called") });
+    dv.onPagingInfoChanged.subscribe(function() { ok(false, "onPagingInfoChanged called") });
+    same(dv.getItems().length, 3, "original data is still there");
+    same(dv.getLength(), 1, "rows are filtered");
+    assertConsistency(dv);
+});
+
 module("updateItem");
 
 test("basic", function() {
diff --git a/tests/dataview/index.html b/tests/dataview/index.html
index 027f3fe12..e5cdfe518 100644
--- a/tests/dataview/index.html
+++ b/tests/dataview/index.html
@@ -1,30 +1,24 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 <html>
 <head>
-    <title></title>
-    <link rel="stylesheet" href="../../lib/qunit.css" type="text/css"/>
+	<title>SlickGrid - DataView tests</title>
+	<link rel="stylesheet" href="../../lib/qunit.css" type="text/css"/>
 </head>
 <body>
-<h1 id="qunit-header">QUnit Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<div id="qunit-testrunner-toolbar"></div>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests"></ol>
-
-
-
-<script type="text/javascript" src="../../lib/qunit.js"></script>
-<script type="text/javascript" src="../../lib/jquery-1.7.min.js"></script>
-<script type="text/javascript">
-    jQuery.noConflict();
-</script>
-<script type="text/javascript" src="../../slick.core.js"></script>
-<script type="text/javascript" src="../../slick.dataview.js"></script>
-<script type="text/javascript" src="dataview.js"></script>
-
-
-
-
+	<h1 id="qunit-header">SlickGrid - DataView Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	
+	<script type="text/javascript" src="../../lib/qunit.js"></script>
+	<script type="text/javascript" src="../../lib/jquery-1.7.min.js"></script>
+	<script type="text/javascript">
+		jQuery.noConflict();
+	</script>
+	<script type="text/javascript" src="../../slick.core.js"></script>
+	<script type="text/javascript" src="../../slick.dataview.js"></script>
+	<script type="text/javascript" src="dataview.js"></script>
+	
 </body>
 </html>
\ No newline at end of file
diff --git a/tests/grid/grid.js b/tests/grid/grid.js
index 5106a2093..844113750 100755
--- a/tests/grid/grid.js
+++ b/tests/grid/grid.js
@@ -1,76 +1,68 @@
-(function($) {
-
-var grid;
-var el, offsetBefore, offsetAfter, dragged;
-
-var drag = function(handle, dx, dy) {
+(function ($) {
+  
+  var grid;
+  var el, offsetBefore, offsetAfter, dragged;
+  
+  var drag = function(handle, dx, dy) {
     offsetBefore = el.offset();
     $(handle).simulate("drag", {
-        dx: dx || 0,
-        dy: dy || 0
+      dx: dx || 0,
+      dy: dy || 0
     });
     dragged = { dx: dx, dy: dy };
     offsetAfter = el.offset();
-}
-
-var moved = function (dx, dy, msg) {
+  }
+  
+  var moved = function (dx, dy, msg) {
     msg = msg ? msg + "." : "";
     var actual = { left: offsetAfter.left, top: offsetAfter.top };
     var expected = { left: offsetBefore.left + dx, top: offsetBefore.top + dy };
     same(actual, expected, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ' + msg);
-}
-
-
-var ROWS = 500, COLS = 10;
-var data = [], row;
-for (var i=0; i<ROWS; i++) {
-    row = {};
-    row["id"] = "id_" + i;
-    for (var j=0; j<COLS; j++) {
-        row["col_" + j] = i + "." + j;
+  }
+  
+  var ROWS = 500, COLS = 10;
+  var data = [], row;
+  for (var i = 0; i < ROWS; i++) {
+    row = { id: "id_" + i };
+    for (var j = 0; j < COLS; j++) {
+      row["col_" + j] = i + "." + j;
     }
     data.push(row);
-}
-
-var cols = [], col;
-for (var i=0; i<COLS; i++) {
-    col = {};
-    col["id"] = "col" + i;
-    col["field"] = "col_" + i;
-    col["name"] = "col_" + i;
-    cols.push(col);
-}
-
-cols[0].minWidth = 70;
-
-grid = new Slick.Grid("#container", data, cols);
-grid.render();
-
-
+  }
+  
+  var cols = [], col;
+  for (var i = 0; i < COLS; i++) {
+    cols.push({
+      id: "col" + i,
+      field: "col_" + i,
+      name: "col_" + i
+    });
+  }
+  
+  cols[0].minWidth = 70;
 
-module("grid - column resizing");
+  grid = new Slick.Grid("#container", data, cols);
+  grid.render();
 
-test("minWidth is respected", function() {
+  module("grid - column resizing");
+  
+  test("minWidth is respected", function () {
     var firstCol = $("#container .slick-header-column:first");
-    firstCol.find(".slick-resizable-handle:first").simulate("drag", {dx:100,dy:0});
-    firstCol.find(".slick-resizable-handle:first").simulate("drag", {dx:-200,dy:0});
+    firstCol.find(".slick-resizable-handle:first").simulate("drag", { dx: 100,  dy: 0 });
+    firstCol.find(".slick-resizable-handle:first").simulate("drag", { dx: -200, dy: 0 });
     equal(firstCol.outerWidth(), 70, "width set to minWidth");
-});
-
-
-test("onColumnsResized is fired on column resize", function() {
+  });
+  
+  test("onColumnsResized is fired on column resize", function () {
     expect(2);
-    grid.onColumnsResized = function() { ok(true,"onColumnsResized called") };
+    grid.onColumnsResized.subscribe(function() { ok(true,"onColumnsResized called") });
     var oldWidth = cols[0].width;
-    $("#container .slick-resizable-handle:first").simulate("drag", {dx:100,dy:0});
+    $("#container .slick-resizable-handle:first").simulate("drag", { dx: 100, dy: 0 });
     equal(cols[0].width, oldWidth+100-1, "columns array is updated");
-
-});
-
-
-test("getData should return data", function() {
+  });
+  
+  test("getData should return data", function () {
     equal(grid.getData(), data);
-});
-
-
-})(jQuery);
+  });
+  
+})(jQuery);
\ No newline at end of file
diff --git a/tests/grid/index.html b/tests/grid/index.html
index 367fc1291..cc089a463 100644
--- a/tests/grid/index.html
+++ b/tests/grid/index.html
@@ -1,40 +1,34 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 <html>
 <head>
-    <title></title>
-    <link rel="stylesheet" href="../../lib/qunit.css" type="text/css"/>
-    <link rel="stylesheet" href="../../slick.grid.css" type="text/css"/>
-    <link rel="stylesheet" href="../../examples/slick-default-theme.css" type="text/css" />
-
+	<title>SlickGrid - Grid tests</title>
+	<link rel="stylesheet" href="../../lib/qunit.css" type="text/css"/>
+	<link rel="stylesheet" href="../../slick.grid.css" type="text/css"/>
+	<link rel="stylesheet" href="../../examples/slick-default-theme.css" type="text/css" />
 </head>
 <body>
-<h1 id="qunit-header">QUnit Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<div id="qunit-testrunner-toolbar"></div>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests"></ol>
-
-
-<br/><br/><br/>
-<div id="container" style="width:600px;height:400px;"></div>
-
-
-<script type="text/javascript" src="../../lib/qunit.js"></script>
-<script type="text/javascript" src="../../lib/jquery-1.7.min.js"></script>
-<script type="text/javascript" src="../../lib/jquery-ui-1.8.16.custom.min.js"></script>
-<script type="text/javascript" src="../../lib/jquery.event.drag-2.0.min.js"></script>
-<script type="text/javascript" src="../../lib/jquery.simulate.js"></script>
-<script type="text/javascript" src="../../lib/qunit.js"></script>
-<script type="text/javascript">
-    jQuery.noConflict();
-</script>
-<script type="text/javascript" src="../../slick.dataview.js"></script>
-<script type="text/javascript" src="../../slick.grid.js"></script>
-<script type="text/javascript" src="grid.js"></script>
-
-
-
-
+	<h1 id="qunit-header">SlickGrid - Grid Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	
+	<br/><br/><br/>
+	<div id="container" style="width:600px;height:400px;"></div>
+	
+	<script type="text/javascript" src="../../lib/qunit.js"></script>
+	<script type="text/javascript" src="../../lib/jquery-1.7.min.js"></script>
+	<script type="text/javascript" src="../../lib/jquery-ui-1.8.16.custom.min.js"></script>
+	<script type="text/javascript" src="../../lib/jquery.event.drag-2.2.js"></script>
+	<script type="text/javascript" src="../../lib/jquery.simulate.js"></script>
+	<script type="text/javascript" src="../../lib/qunit.js"></script>
+	<script type="text/javascript">
+		jQuery.noConflict();
+	</script>
+	<script type="text/javascript" src="../../slick.core.js"></script>
+	<script type="text/javascript" src="../../slick.dataview.js"></script>
+	<script type="text/javascript" src="../../slick.grid.js"></script>
+	<script type="text/javascript" src="grid.js"></script>
+	
 </body>
 </html>
\ No newline at end of file
diff --git a/tests/index.html b/tests/index.html
index 764994888..a0a9f89e6 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -1,37 +1,40 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 <html>
 <head>
-    <title></title>
-    <link rel="stylesheet" href="../lib/qunit.css" type="text/css"/>
+	<title>SlickGrid tests</title>
+	<link rel="stylesheet" href="../lib/qunit.css" type="text/css"/>
 	<style type="text/css">
-	ul { font-family: 'trebuchet ms', verdana, arial; }
-	h2, ul {font-size: 10pt; }
-	h2 {
-		background-color:#EEEEEE;
-		color:black;
-		font-size:small;
-		font-weight:normal;
-		margin:0;
-		padding:10px;
-	}
+		ul { font-family: 'trebuchet ms', verdana, arial; }
+		h2, ul {font-size: 10pt; }
+		h2 {
+			background-color:#EEEEEE;
+			color:black;
+			font-size:small;
+			font-weight:normal;
+			margin:0;
+			padding:10px;
+		}
 	</style>    
 </head>
 <body>
-
-<h1 id="qunit-header">jQuery UI Unit Tests</h1>
-<h2 id="qunit-banner"></h2>
-
-<h2>Slick.Data</h2>
-<ul>
-	<li><a href="dataview/index.html">DataView</a></li>
-</ul>
-
-<h2>Slick</h2>
-<ul>
-	<li><a href="grid/index.html">Grid</a></li>
-</ul>
-
-
+	
+	<h1 id="qunit-header">SlickGrid tests</h1>
+	<h2 id="qunit-banner"></h2>
+	
+	<h2>Slick.Data</h2>
+	<ul>
+		<li><a href="dataview/index.html">DataView</a></li>
+	</ul>
+	
+	<h2>Slick</h2>
+	<ul>
+		<li><a href="grid/index.html">Grid</a></li>
+	</ul>
+	
+	<h2>Plugins</h2>
+	<ul>
+		<li><a href="plugins/autotooltips.html">AutoTooltips</a></li>
+	</ul>
+	
 </body>
 </html>
\ No newline at end of file
diff --git a/tests/init benchmark.html b/tests/init benchmark.html
new file mode 100644
index 000000000..8b41c8446
--- /dev/null
+++ b/tests/init benchmark.html	
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+        <title>SlickGrid Initialization Benchmark</title>
+        <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
+        <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
+        <link rel="stylesheet" href="../examples/examples.css" type="text/css" media="screen" charset="utf-8" />
+    </head>
+    <body>
+        <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
+        <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
+        <script src="../lib/jquery.event.drag-2.2.js"></script>
+
+        <script src="../slick.core.js"></script>
+        <script src="../slick.grid.js"></script>
+        <script src="../slick.formatters.js"></script>
+
+        <button onclick="bench(false)">Run w/o disposing</button>
+        <button onclick="bench(true)">Run w/ disposing</button>
+
+        <hr/>
+
+        <div id="container" style="width:600px;height:100000px;"></div>
+
+        <script>
+        function bench(dispose) {
+          var startTime = new Date();
+          var container = $("#container");
+          for (var i = 0; i < 20; i++) {
+            var parentEl = $("<div style='width:600px;height:400px;'></div>").appendTo(container);
+            var grid = createGrid(parentEl);
+            if (dispose) {
+              grid.destroy();
+              parentEl.remove();
+            }
+          }
+          alert((new Date() - startTime));
+        }
+
+        function createGrid(parentEl) {
+          var data = [{}, {}, {}];
+          var columns = [];
+          for (var i = 0; i < 20; i++) {
+            columns.push({id: "field" + i, name: "field" + i, field: "field" + i});
+          }
+
+          var options = {
+            enableCellNavigation: true,
+            enableColumnReorder: false
+          };
+
+          return new Slick.Grid(parentEl, data, columns, options);
+        }
+        </script>
+    </body>
+</html>
diff --git a/tests/model benchmarks.html b/tests/model benchmarks.html
index 25dc25357..155f79a9a 100644
--- a/tests/model benchmarks.html	
+++ b/tests/model benchmarks.html	
@@ -43,18 +43,31 @@
     dv.setFilterArgs(0);
     //dv.setPagingOptions({pageSize:25});
 
-    dv.groupBy(
-        "percentComplete",
-        function (g) {
-            return "Group:  " + g.value;
+    dv.setGrouping([
+        {
+            getter: "duration",
+            formatter: function (g) {
+                return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
+            },
+            aggregators: [
+                new Slick.Data.Aggregators.Avg("percentComplete"),
+                new Slick.Data.Aggregators.Sum("cost")
+            ],
+            aggregateCollapsed: true,
+            aggregateChildGroups: true
         },
-        function (a, b) {
-            return a.value - b.value;
+        {
+            getter: "effortDriven",
+            formatter: function (g) {
+                return "Effort-Driven:  " + (g.value ? "True" : "False") + "  <span style='color:green'>(" + g.count + " items)</span>";
+            },
+            aggregators: [
+                new Slick.Data.Aggregators.Avg("percentComplete"),
+                new Slick.Data.Aggregators.Sum("cost")
+            ],
+            aggregateCollapsed: false
         }
-    );
-    dv.setAggregators([
-        new Slick.Data.Aggregators.Avg("percentComplete")
-    ], false);
+    ]);
 
     dv.endUpdate();
 
diff --git a/tests/plugins/autotooltips.html b/tests/plugins/autotooltips.html
new file mode 100644
index 000000000..27ad7849a
--- /dev/null
+++ b/tests/plugins/autotooltips.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>SlickGrid - AutoTooltips plugin tests</title>
+	<link rel="stylesheet" href="../../lib/qunit.css" type="text/css"/>
+	<link rel="stylesheet" href="../../slick.grid.css" type="text/css"/>
+	<link rel="stylesheet" href="../../examples/slick-default-theme.css" type="text/css" />
+</head>
+<body>
+	<h1 id="qunit-header">SlickGrid - AutoTooltips Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	
+	<br/><br/><br/>
+	<div id="container" style="width:600px; height:400px;"></div>
+	
+	<script type="text/javascript" src="../../lib/qunit.js"></script>
+	<script type="text/javascript" src="../../lib/jquery-1.7.min.js"></script>
+	<script type="text/javascript" src="../../lib/jquery-ui-1.8.16.custom.min.js"></script>
+	<script type="text/javascript" src="../../lib/jquery.event.drag-2.2.js"></script>
+	<script type="text/javascript" src="../../lib/jquery.simulate.js"></script>
+	<script type="text/javascript" src="../../lib/qunit.js"></script>
+	<script type="text/javascript">
+		jQuery.noConflict();
+	</script>
+	<script type="text/javascript" src="../../slick.core.js"></script>
+	<script type="text/javascript" src="../../slick.grid.js"></script>
+	<script type="text/javascript" src="../../plugins/slick.autotooltips.js"></script>
+	<script type="text/javascript" src="autotooltips.js"></script>
+	
+</body>
+</html>
\ No newline at end of file
diff --git a/tests/plugins/autotooltips.js b/tests/plugins/autotooltips.js
new file mode 100644
index 000000000..1508fad22
--- /dev/null
+++ b/tests/plugins/autotooltips.js
@@ -0,0 +1,133 @@
+(function($) {
+
+  var grid,         // The SlickGrid instance
+      cols = [      // The column definitions
+        { name: "Short",  field: "short",   width: 100 },
+        { name: "Medium", field: "medium",  width: 100 },
+        { name: "Long",   field: "long",    width: 100 },
+        { name: "Mixed",  field: "mixed",   width: 100 },
+        { name: "Long header creates tooltip",         field: "header",        width: 50 },
+        { name: "Long header with predefined tooltip", field: "tooltipHeader", width: 50, tooltip: "Already have a tooltip!" }
+      ],
+      data            = [], // The grid data
+      LONG_VALUE      = "looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong",
+      MEDIUM_VALUE    = "mediummmmmmm"
+      SHORT_VALUE     = "short",
+      TOOLTIP         = "tooltip",
+      TRUNCATED_VALUE = LONG_VALUE.substr(0, 17) + "...",
+      $container      = $("#container");
+  
+  // Create data
+  for (var i = 0; i < 10; i++) {
+    data.push({
+      "id":             "row" + i,
+      "short":          SHORT_VALUE,
+      "medium":         MEDIUM_VALUE,
+      "long":           LONG_VALUE,
+      "mixed":          ( i % 2 == 0 ? SHORT_VALUE : LONG_VALUE ),
+      "header":         i,
+      "tooltipHeader":  i
+    });
+  }
+  
+  function setupGrid(pluginOptions) {
+    $('<div id="grid" />').appendTo($container);
+    grid = new Slick.Grid("#grid", data, cols);
+    grid.registerPlugin(new Slick.AutoTooltips(pluginOptions));
+    grid.render();
+  }
+  
+  function teardownGrid() {
+    $container.empty();
+  }
+  
+  function getCell(columnIndex) {
+    return $("#grid .slick-cell.l" + columnIndex).eq(0);
+  }
+  
+  function getHeaderCell(columnIndex) {
+    return $("#grid .slick-header-column").eq(columnIndex);
+  }
+  
+  module("plugins - autotooltips - defaults", {
+    setup: function () {
+      setupGrid({});
+    },
+    teardown: teardownGrid
+  });
+  
+  test("title is empty when cell text has enough room", function () {
+    var $cell = getCell(0);       // Grab a cell
+    $cell.trigger("mouseenter");  // Trigger hover on a cell in grid
+    
+    strictEqual($cell.attr("title"), "", "title is not present");
+  });
+  
+  test("title is present when cell text is cut off", function () {
+    var $cell = getCell(2);       // Grab a cell
+    $cell.trigger("mouseenter");  // Trigger hover on a cell in grid
+    
+    strictEqual($cell.attr("title"), LONG_VALUE, "title equals cell text");
+  });
+  
+  module("plugins - autotooltips - header", {
+    setup: function () {
+      setupGrid({ enableForHeaderCells: true });
+    },
+    teardown: teardownGrid
+  });
+  
+  test("title is empty when header column has enough width", function () {
+    var $headerCell = getHeaderCell(0); // Grab the requested header cell
+    $headerCell.trigger("mouseenter");  // Trigger hover on a header cell
+    
+    strictEqual($headerCell.attr("title"), "", "title is not present");
+  });
+  
+  test("title is present when header column is cut off", function () {
+    var $headerCell = getHeaderCell(4); // Grab the requested header cell
+    $headerCell.trigger("mouseenter");  // Trigger hover on a header cell
+    
+    strictEqual($headerCell.attr("title"), "Long header creates tooltip", "title equals column name");
+  });
+  
+  test("title is not overridden when header column has pre-defined tooltip", function() {
+    var $headerCell = getHeaderCell(5); // Grab the requested header cell
+    $headerCell.trigger("mouseenter");  // Trigger hover on a header cell
+    
+    strictEqual($headerCell.attr("title"), "Long header with predefined tooltip", "title is not overridden");
+  });
+  
+  // ******************************** //
+  // Tests for maximum tooltip length //
+  // ******************************** //
+  
+  module("plugins - autotooltips - max tooltip", {
+    setup: function () {
+      setupGrid({ maxToolTipLength: 20 });
+    },
+    teardown: teardownGrid
+  });
+  
+  test("title is empty when cell text has enough room", function () {
+    var $cell = getCell(0);       // Grab a cell
+    $cell.trigger("mouseenter");  // Trigger hover on a cell in grid
+    
+    strictEqual($cell.attr("title"), "", "title is not present");
+  });
+  
+  test("title is present and not truncated when cell text is cut off but not too long", function () {
+    var $cell = getCell(1);       // Grab a cell
+    $cell.trigger("mouseenter");  // Trigger hover on a cell in grid
+    
+    strictEqual($cell.attr("title"), MEDIUM_VALUE, "title equals truncated text");
+  });
+  
+  test("title is present and truncated when cell text is cut off and too long", function () {
+    var $cell = getCell(2);       // Grab a cell
+    $cell.trigger("mouseenter");  // Trigger hover on a cell in grid
+    
+    strictEqual($cell.attr("title"), TRUNCATED_VALUE, "title equals truncated text");
+  });
+
+})(jQuery);
\ No newline at end of file
diff --git a/tests/scrolling benchmark raf.html b/tests/scrolling benchmark raf.html
new file mode 100644
index 000000000..01ca0c57c
--- /dev/null
+++ b/tests/scrolling benchmark raf.html	
@@ -0,0 +1,154 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid Scrolling Benchmark</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
+  <link rel="stylesheet" href="../examples/examples.css" type="text/css" media="screen" charset="utf-8" />
+  <style>
+    .cell-title {
+      font-weight: bold;
+    }
+
+    .cell-effort-driven {
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <script src="../lib/firebugx.js"></script>
+  <script src="../lib/jquery-1.7.min.js"></script>
+  <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
+  <script src="../lib/jquery.event.drag-2.2.js"></script>
+
+  <script src="../slick.core.js"></script>
+  <script src="../slick.grid.js"></script>
+  <script src="../slick.formatters.js"></script>
+
+  <button onclick="grid.debug()">Debug info</button>
+  <button onclick="startBench(100)">Run (+= 100px)</button>
+  <button onclick="startBench(300)">Run (+= 300px)</button>
+  <button onclick="startBench(550)">Run (+= 550px; simulate paging)</button>
+  <button onclick="startBench(1000)">Run (+= 1'000px)</button>
+  <button onclick="startBench(5000)">Run (+= 5'000px)</button>
+  <hr/>
+
+  <div id="myGrid" style="width:600px;height:600px;"></div>
+
+  <script>
+    var grid;
+    var data = [];
+    var extraColumns = 100;
+
+    function testPostRender(cellNode, row, dataContext, colDef) {
+      cellNode.style.backgroundColor = 'yellow';
+    }
+
+    var columns = [
+      {id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title"},
+      {id:"duration", name:"Duration", field:"duration", selectable:false},
+      {id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:Slick.Formatters.PercentCompleteBar},
+      {id:"start", name:"Start", field:"start", minWidth:60},
+      {id:"finish", name:"Finish", field:"finish", minWidth:60},
+      {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:Slick.Formatters.Checkmark, asyncPostRender:testPostRender}
+    ];
+
+    for (var i=0; i<extraColumns; i++) {
+      columns.push({id:"col" + i, name:"col" + i, field:"title"});
+    }
+
+    var options = {
+      editable: false,
+      enableAddRow: false,
+      enableCellNavigation: true,
+      enableAsyncPostRender: true,
+      forceFitColumns: false
+    };
+
+
+    function generateRandomTask(index) {
+      return {
+        "id": "id_" + index,
+        "title": "Task " + index,
+        "duration": "5 days",
+        "percentComplete": Math.round(Math.random() * 100),
+        "start": "01/01/2014",
+        "finish": "01/05/2014",
+        "effortDriven": (index % 5 == 0)
+      };
+    }
+
+    $(function()
+    {
+      data.getLength = function() { return 5000; };            
+
+      data.getItem = function(index) {
+        // lazy-generate
+        if (!data[index]) {
+          data[index] = generateRandomTask(index);
+        }
+        return data[index];
+      };
+
+      data.getItemMetadata = function (row) {
+        if (row % 2 === 1) {
+          return {
+            "columns": {
+              "duration": {
+                "colspan": 3
+              }
+            }
+          };
+        }
+      };
+
+      // initialize the grid
+      grid = new Slick.Grid("#myGrid", data, columns, options);
+
+      $grid = $("#myGrid div.grid-canvas").parent();
+    });
+
+
+    var $grid;
+    var lastScrollTop = 0;
+    var startTime;
+    var scrollAmount = 1000;
+
+    function queue(callback) {
+      var raf = window.requestAnimationFrame ||
+                window.mozRequestAnimationFrame ||
+                window.msRequestAnimationFrame ||
+                window.webkitRequestAnimationFrame;
+      if (raf) {
+        raf(callback);
+      } else {
+        window.setTimeout(callback, 10);
+      }
+    }
+
+    function startBench(scroll) {
+      scrollAmount = scroll;
+      lastScrollTop = 0;
+      $grid.scrollTop(0);
+
+      queue(function(){
+        startTime = new Date();
+        bench();
+      });
+    }
+
+    function bench() {
+      var scrollTop = $grid[0].scrollTop = lastScrollTop + scrollAmount;
+
+      if ($grid[0].scrollTop == lastScrollTop + scrollAmount) {
+        lastScrollTop = scrollTop;
+        queue(bench);
+      }
+      else {
+        alert((new Date() - startTime));
+      }
+    }
+  </script>
+</body>
+</html>
diff --git a/tests/scrolling benchmarks.html b/tests/scrolling benchmarks.html
index 7e6fefe16..0a2a885f2 100644
--- a/tests/scrolling benchmarks.html	
+++ b/tests/scrolling benchmarks.html	
@@ -20,7 +20,7 @@
 		<script src="../lib/firebugx.js"></script>
 		<script src="../lib/jquery-1.7.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
-		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.2.js"></script>
 
 		<script src="../slick.core.js"></script>
 		<script src="../slick.grid.js"></script>