/**

 * @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

    };



    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 numberOfRows = 0;



    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;





    //////////////////////////////////////////////////////////////////////////////////////////////

    // 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);

      }

    }



    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];

          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 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");



      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;

      }

      $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) {…