/**
 * Scripts to display simple data tables.
 * 2/1/2020 Mack Pexton (mack@mackpexton.com)
 *
 * This is a collection of scripts from the web that are intended to enhance usage of html data tables.
 * There are three main scripts bundled below. They provide:
 *	1) sorting the table on a column
 *	2) freezing the table header at the top of the screen when it scrolls out of view
 *	3) resizing table columns
 *
 * These tools are for simple data tables on the main scrollable page with a structure like the following:
 *
 * <div class="table-wrapper">
 * <table class="table-sortable table-fixed-header table-col-resizable">
 *  <thead>
 *   <tr>
 *    <th>Column 1</th>
 *    <th>Column 2</th>
 *    ...
 *   </tr>
 *  </thead>
 *  <tbody>
 *  ...
 *  </tbody>
 * </table
 * </div>
 *
 * Tables will be coerced into this pattern at run time if needed.
 *
 * The width of the table is controlled by it's containing element which for touch devices needs to have the
 * class name "table-wrapper" assigned to it if you want fixed headers. It is automatically added if needed.
 * Tables can dynamically expand and contract according to the browser window width.
 *
 * If the user expands a column width, the width of the table is also expanded. User settings are remembered between
 * screen refreshes. The table width will snap back to it's bounding container when the browser window is resized.
 * Double-clicking a column guideline will remove the user setting and reset the column width back to its original width.
 * Double-clicking the last column guideline will remove all user settings and reset all the columns back to their original widths.
 * Putting a parameter "reset" in the url will remove the saved user's settings for the tables on the page. Rendering the
 * page in a new browser tab does the same.
 *
 * The script packages below are grouped in order and have been modified so that they work together
 * and so they all can be automatically setup on tables by using class names and data attributes.
 *
 * The <table> class names used are:
 *	table-sortable		-- Make each table column sortable by clicking on the column header.
 *	table-fixed-header	-- Turn table's <thead> section into a header that sticks to the top of page.
 *	table-col-resizable	-- Make columns resizable.
 *
 * The optional <table> data attributes modifying behavior are:
 *	data-topoffset		-- Pixels from top of screen where headers will "freeze".
 *	data-topheader		-- Selector of an element that when visible, it's height is used for data-topoffset.
 *
 * It is possible to use the global variable window.TopOffset to set the top of screen where headers will "freeze".
 * It's easier to use when there are multiple tables on a page. Alternately you can assign the class name "top-header"
 * to an element whose bottom offset will be used for the window top offset.
 *
 * The optional <th> data attributes modifying script behavior are:
 *	data-sortable		-- If false, do not sort column (sortable.js)
 *	data-sortable-type	-- Column type "numeric", "date", or "alpha" (sortable.js). Custom types also available.
 *	data-resizable		-- If false, do not allow user to resize the column. (colResizable.js)
 *
 * The optional <td> data attribute is:
 *	data-value		-- value of column to use for sorting (sortable.js)
 *
 * To setup newly created tables trigger the custom event "tableSetup". To refresh the table settings with run-time changes,
 * trigger the custom event "tableRefresh". Both the table size and settings will be refreshed upon the window "resize" event.
 *
 * To remove DOM elements added to the tables, trigger the custom event "tableUnsetup". That can be useful before editing
 * a table after which the "tableSetup" event can be triggered to re-setup the table(s).
 *
 * @credits
 * Table sorting is from sortable.js by Adam Schwartz <adam.flynn.schwartz@gmail.com> at https://github.com/HubSpot/sortable
 * The table-fixed-header.js script came from: http://github.com/oma/table-fixed-header 
 * Column resizing is from colResizable.js by Alvaro Prieto Lauroba
 * The double-tap event handler for column resizing is by Sergey Margaritov (sergey@margaritov.net)
 *
 * @requires jQuery
 *
 * Patched sections are identified by comments having the string "##".
 */

"use strict";
/*----------------------------------------------------------------------------------------------*/
/*
 * setupSimpleDataTable - coerce tables into a simple data table pattern if needed.
 */

(function($) {
	$.fn.setupSimpleDataTable = function() {
		if (this.data('simpleDataTable') == true) return this;

		// Make thead table section if needed.
		if (! $('thead',this).length) {
			var $firstrow = $('tr',this).first();
			var $thead = $('<thead>');
			var $tr = $('<tr>');
			var converttag = $('th',$firstrow).length ? false : true;
			// Transfer first row to new thead section.
			$('td,th',$firstrow).each(function(i,el) {
				var $th = (converttag && el.nodeName == 'TD')
					? $( el.outerHTML.replace(/^<td\b/i,'<th').replace(/<\/td>$/i,'</th>') )
					: $(el).clone(true);
				$tr.append($th);
			});
			this.prepend( $thead.append($tr) );
			$firstrow.remove();
		}

		// Remove colgroup section if it exists (it confuses colResizable).
		if ( $('colgroup',this).length ) $('colgroup',this).remove();

		// Wrap table with bounding div for touch devices horizontal scroll.
		if (this.hasClass('table-fixed-header') && ('ontouchstart' in document.documentElement)) {
			// Ensure table is wrapped with table-wrapper div.
			if (! this.parent().hasClass('table-wrapper')) {
				this.wrap( $('<DIV>').addClass('table-wrapper') );
			}
		}

		this.data('simpleDataTable',true);
		return this;
	};
})(jQuery);

/*---------------- sortable.js -----------------------------------------------------------------*/
/* sortable.js by Adam Schwartz <adam.flynn.schwartz@gmail.com> at https://github.com/HubSpot/sortable */
/* For options and custom comparators, see https://github.hubspot.com/sortable/api/options/
/*
 * Changes: mack:
 *	Wrap function with jQuery to sync execution with following packages.
 *	Restrict processing of <th> tags to only those in <thead> sections.
 *	Identify sortable tables with the class "table-sortable" in addition to it's default "data-sortable" attribute.
 *	Added compatibility with table-fixed-header.js library. Used jQuery.on() for events so they can be cloned.
 *	Added <style> tag for up and down arrows. (like colResizer.js below)
 *	Removed sensing on touchstart event for touch devices. Just use click event.
 *	Added document handler for custom "tableSetup" event to setup dynamically generated tables.
 *	Added document handler for custom "tableUnsetup" event to remove added settings from tables.
 */

jQuery(function($){
//##(function() {

  var SELECTOR, addEventListener, clickEvents, numberRegExp, sortable, touchDevice, trimRegExp;
  var min_padding_right = 16;	//## minimum padding required to show up/down arrows

  //##SELECTOR = 'table[data-sortable]';
  SELECTOR = 'table.table-sortable,table[data-sortable]';

  numberRegExp = /^-?[£$¤]?[\d,.]+%?$/;

  trimRegExp = /^\s+|\s+$/g;

  clickEvents = ['click'];

  //## I get better results if just using click event for touch devices.
  //##touchDevice = 'ontouchstart' in document.documentElement;
  //##
  //##if (touchDevice) {
  //##  clickEvents.push('touchstart');
  //##}

  //## Following is for compatibility with table-fixed-header.js
  //## Use jQuery.on() instead of addEventListener so the events are cloned in fixedHeader().
  //##addEventListener = function(el, event, handler) {
  //##  if (el.addEventListener != null) {
  //##    return el.addEventListener(event, handler, false);
  //##  } else {
  //##    return el.attachEvent("on" + event, handler);
  //##  }
  //##};

  sortable = {
    init: function(options) {
      var table, tables, _i, _len, _results;
      if (options == null) {
        options = {};
      }
      if (options.selector == null) {
        options.selector = SELECTOR;
      }
      tables = document.querySelectorAll(options.selector);
      _results = [];
      for (_i = 0, _len = tables.length; _i < _len; _i++) {
        table = tables[_i];
        _results.push(sortable.initTable(table));
      }
      return _results;
    },
    initTable: function(table) {
      var i, th, ths, _i, _len, _ref;
      $(table).setupSimpleDataTable();	//## ensure table is setup with a thead section
      if (((_ref = table.tHead) != null ? _ref.rows.length : void 0) !== 1) {
        return;
      }
      if (table.getAttribute('data-sortable-initialized') === 'true') {
        return;
      }
      table.setAttribute('data-sortable-initialized', 'true');
      //##ths = table.querySelectorAll('th');
      ths = table.querySelectorAll('thead th');
      for (i = _i = 0, _len = ths.length; _i < _len; i = ++_i) {
        th = ths[i];
        if (th.getAttribute('data-sortable') !== 'false') {
          sortable.setupClickableTH(table, th, i);
        }
      }
      return table;
    },
    setupClickableTH: function(table, th, i) {
      var eventName, onClick, type, _i, _len, _results;
      type = sortable.getColumnType(table, i);
      onClick = function(e) {
        var compare, item, newSortedDirection, position, row, rowArray, sorted, sortedDirection, tBody, ths, value, _compare, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _m, _ref, _ref1;
        if (e.handled !== true) {
          e.handled = true;
        } else {
          return false;
        }
        sorted = this.getAttribute('data-sorted') === 'true';
        sortedDirection = this.getAttribute('data-sorted-direction');
        if (sorted) {
          newSortedDirection = sortedDirection === 'ascending' ? 'descending' : 'ascending';
        } else {
          newSortedDirection = type.defaultSortDirection;
        }
        ths = this.parentNode.querySelectorAll('th');
        for (_i = 0, _len = ths.length; _i < _len; _i++) {
          th = ths[_i];
          th.setAttribute('data-sorted', 'false');
          th.removeAttribute('data-sorted-direction');
        }
        this.setAttribute('data-sorted', 'true');
        this.setAttribute('data-sorted-direction', newSortedDirection);
        tBody = table.tBodies[0];
        rowArray = [];
        if (!sorted) {
          if (type.compare != null) {
            _compare = type.compare;
          } else {
            _compare = function(a, b) {
              return b - a;
            };
          }
          compare = function(a, b) {
            if (a[0] === b[0]) {
              return a[2] - b[2];
            }
            if (type.reverse) {
              return _compare(b[0], a[0]);
            } else {
              return _compare(a[0], b[0]);
            }
          };
          _ref = tBody.rows;
          for (position = _j = 0, _len1 = _ref.length; _j < _len1; position = ++_j) {
            row = _ref[position];
            value = sortable.getNodeValue(row.cells[i]);
            if (type.comparator != null) {
              value = type.comparator(value);
            }
            rowArray.push([value, row, position]);
          }
          rowArray.sort(compare);
          for (_k = 0, _len2 = rowArray.length; _k < _len2; _k++) {
            row = rowArray[_k];
            tBody.appendChild(row[1]);
          }
        } else {
          _ref1 = tBody.rows;
          for (_l = 0, _len3 = _ref1.length; _l < _len3; _l++) {
            item = _ref1[_l];
            rowArray.push(item);
          }
          rowArray.reverse();
          for (_m = 0, _len4 = rowArray.length; _m < _len4; _m++) {
            row = rowArray[_m];
            tBody.appendChild(row);
          }
        }
        //## Trigger resize as safety for colResizable to ensure grips are properly placed
	//## and ensure fixed header columns properly sized.
	$(table).trigger('tableRefresh');

        if (typeof window['CustomEvent'] === 'function') {
          return typeof table.dispatchEvent === "function" ? table.dispatchEvent(new CustomEvent('Sortable.sorted', {
            bubbles: true
          })) : void 0;
        }
      };
      //## Add class to column header to apply minimum padding for up/down arrows if needed
      if (parseInt($(th).css('padding-right')) < min_padding_right) {
        $(th).addClass('sortable-pad');
      }
      _results = [];
      for (_i = 0, _len = clickEvents.length; _i < _len; _i++) {
        eventName = clickEvents[_i];
        //##_results.push(addEventListener(th, eventName, onClick));
        _results.push($(th).on(eventName,onClick));
      }
      return _results;
    },
    getColumnType: function(table, i) {
      var row, specified, text, type, _i, _j, _len, _len1, _ref, _ref1, _ref2;
      specified = (_ref = table.querySelectorAll('th')[i]) != null ? _ref.getAttribute('data-sortable-type') : void 0;
      if (specified != null) {
        return sortable.typesObject[specified];
      }
      _ref1 = table.tBodies[0].rows;
      for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
        row = _ref1[_i];
        text = sortable.getNodeValue(row.cells[i]);
        _ref2 = sortable.types;
        for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
          type = _ref2[_j];
          if (type.match(text)) {
            return type;
          }
        }
      }
      return sortable.typesObject.alpha;
    },
    getNodeValue: function(node) {
      var dataValue;
      if (!node) {
        return '';
      }
      dataValue = node.getAttribute('data-value');
      if (dataValue !== null) {
        return dataValue;
      }
      if (typeof node.innerText !== 'undefined') {
        return node.innerText.replace(trimRegExp, '');
      }
      return node.textContent.replace(trimRegExp, '');
    },
    setupTypes: function(types) {
      var type, _i, _len, _results;
      sortable.types = types;
      sortable.typesObject = {};
      _results = [];
      for (_i = 0, _len = types.length; _i < _len; _i++) {
        type = types[_i];
        _results.push(sortable.typesObject[type.name] = type);
      }
      return _results;
    }
  };

  sortable.setupTypes([
    {
      name: 'numeric',
      defaultSortDirection: 'descending',
      match: function(a) {
        return a.match(numberRegExp);
      },
      comparator: function(a) {
        return parseFloat(a.replace(/[^0-9.-]/g, ''), 10) || 0;
      }
    }, {
      name: 'date',
      defaultSortDirection: 'ascending',
      reverse: true,
      match: function(a) {
        return !isNaN(Date.parse(a));
      },
      comparator: function(a) {
        return Date.parse(a) || 0;
      }
    }, {
      name: 'alpha',
      defaultSortDirection: 'ascending',
      match: function() {
        return true;
      },
      compare: function(a, b) {
        return a.localeCompare(b);
      }
    }
  ]);

  //## Add styles for cursor and for up and down arrows.
  $('head').append(''
    + '<style>\n'
    + ' table.table-sortable thead th, table[data-sortable] thead th { cursor:pointer; }\n'
    + ' table.table-sortable thead th[data-sortable="false"], table[data-sortable] thead th[data-sortable="false"] { cursor:default; }\n'
    + ' th[data-sorted-direction="ascending"] { background:url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) no-repeat right center; }\n'
    + ' th[data-sorted-direction="descending"] { background:url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7) no-repeat right center; }\n'
    + ' th.sortable-pad[data-sorted-direction="ascending"] { padding-right:'+min_padding_right+'px; }\n'
    + ' th.sortable-pad[data-sorted-direction="descending"] { padding-right:'+min_padding_right+'px; }\n'
    + '</style>\n'
  );

  //##setTimeout(sortable.init, 0);
  sortable.init();	// init() needs to run first before fixedHeader() below

  //## Add event handler to set up dynamically generated tables.
  $(document).on('tableSetup',function(e){ sortable.init(); });
  //## Add event handler to unset sortable on tables.
  $(document).on('tableUnsetup',function(e){
    // Remove settings initially setup by sortable.
    $('table.table-sortable,table[data-sortable]')
    .each(function(){
      $('thead tr th,thead tr td',this).each(function(){
        $(this).removeAttr('data-sorted');
      });
    })
    .removeAttr('data-sortable-initialized');
  });

  if (typeof define === 'function' && define.amd) {
    define(function() {
      return sortable;
    });
  } else if (typeof exports !== 'undefined') {
    module.exports = sortable;
  } else {
    window.Sortable = sortable;
  }

//##}).call(this);
});

/*---------------- table-fixed-header.js -------------------------------------------------------*/
/*
 * table-fixed-header - Freeze table headers when they get to the top of page.
 *
 * Usage: add "table-fixed-header" class to table with a thead header.
 *        If needed, add "data-topoffset" attribute to the table with the offset from top of screen.
 *        Optional "data-topheader" attribute has id of fixed top header whose bottom coordinate gives the top offset.
 *        Optional window.TopOffset global variable with the offset from the top of screen.
 *
 * Derived from: http://github.com/oma/table-fixed-header 
 * Note: this adds a second thead section to the table which violates HTML5 standard but seems to work everywhere.
 * Changes: mack:
 *	Added auto-invocation code at bottom automatically setting up tables with class "table-fixed-header".
 *	Got rid of thead selectors by using closures.
 *	Corrected resizing cloned header when expanding table widths.
 *	Add class table-header-fixed to the thead tag that's fixed to top of page.
 *	Removed comments and hacks by jeffen@pactera, made into prepHeaderCopy().
 *	Added compatibility with sortable.js library.
 *	Change o variable to $table for consistency
 *	Added data-topOffset and data-bgColor attributes for setting parameters on auto-setup tables.
 *	Dynamically read data-topoffset when showing the fixed header. Removed bgcolor config, use class css instead.
 *	Hide header if scrolled past bottom of table.
 *	Implement data-topheader selector for dynamically setting top offset to selector element's bottom coordinate when visible.
 *	Added "tableRefresh" custom event to recompute parameters. Helpful when table was invisible when initially setup.
 *	Added "tableSetup" and "tableUnsetup" custom events to setup tables with fixed headers and to remove fixed headers.
 *	Added window.TopOffset global for dynamically setting top offset. Can set by giving an element the class "top-header".
 */

(function($) {

var defaults = {
 topOffset: 0,				// offset from top of screen
 topHeader: null,			// selector for fixed element at top of screen
 topHeaderClass: '.top-header',		// selector of element where if found is used for topHeader
 className: 'table-header-fixed',	// class name assigned to cloned thead
};

$.fn.fixedHeader = function(arg) {
 var config;
 if (typeof arg === 'object') {
  config = $.extend({}, defaults, arg);
 } else if ($.isNumeric(arg)) {
  config = $.extend({}, defaults, {topOffset:arg});
 } else {
  config = $.extend({}, defaults);
 }

 return this.each(function() {
  var $table = $(this)	
    , $win = $(window)
    , $head = $('thead',$table).first()
    , isFixed = false
    , $copy
    // Dynamic table parameters
    , tableTopOffset
    , headTop
    , headHeight
    , tableHeight
    , tableBottomOffset;

  if (! $head.length) return;		// no thead sections found in table
  if ($('.'+config.className,$table).length) return;	// already has a fixed header

  // Store dynamic parameters with table element.
  if ($table.data('topheader') == null) {
    if (config['topHeader'] != null) {
      $table.data('topheader',config['topHeader']);
    }
    else if ($(config['topHeaderClass']).length > 0) {
      $table.data('topheader',config['topHeaderClass']);
    }
  }
  if ($table.data('topoffset') == null) $table.data('topoffset', config['topOffset']);

  function processScroll() {
   if (! $table.is(':visible')) return;
   var scrollTop = $win.scrollTop() + tableTopOffset;

   if (!isFixed && (scrollTop > headTop && scrollTop < (headTop + tableHeight))) {
     isFixed = true;
   } else if (isFixed && (scrollTop <= headTop || scrollTop >= (headTop + tableHeight))) {
     isFixed = false;
   }

   if (isFixed) {
    if (! $copy.is(':visible')) showHeaderCopy();
    $copy.offset({ 'top': (tableBottomOffset < scrollTop ? tableBottomOffset : scrollTop), 'left': $head.offset().left });
   } else {
    if ($copy.is(':visible')) hideHeaderCopy();
   }
  }

  function processResize() {
   if (isFixed) {
    prepHeader();     // copy changes to hidden table header
    prepHeaderCopy(); // copy new table column widths back to fixed header
    getParam();	      // recompute global variables for scroll
    processScroll();
   }
  }

  function showHeaderCopy() { prepHeaderCopy(); $copy.show(); getParam(); }

  function hideHeaderCopy() { prepHeader(); getParam(); $copy.hide(); }

  function prepHeaderCopy() {
   // Transfer run-time changes made to table header to the cloned header copy.
   $copy.css('top',tableTopOffset).width($head.width());
   $('tr>th',$head).each(function(i, h) {
    var w
      , $h = $(h)
      //##, $c = $("tr>th:eq("+i+")",$copy);
      , $c = $("tr>th:nth-child("+(i+1)+")",$copy);
    $c.attr('class', $h.attr('class'));

    // Make column widths the same.
    //$c.width($h.width());  // fixed width tables
    // Following is for compatibility with colResizable.js
    // For dynamic tables where their widths can grow or shrink, we must set
    // the min and max width too in order to force the table to grow and to allow
    // columns to be narrower than a word.
    // We should look at colResizable overflow option to determine whether table size
    // is dynamic or not. Here we just assume that all tables use the overflow option.
    w = $h.width() + 'px';
    $c.css({'width':w, 'min-width':w, 'max-width':w});  // dynamic width tables

    // Following is for compatibility with sortable.js
    $c.attr('data-sorted', $h.attr('data-sorted'));
    $c.attr('data-sortable-type', $h.attr('data-sortable-type'));
    if ($h.attr('data-sorted-direction')) {
       $c.attr('data-sorted-direction',$h.attr('data-sorted-direction'));
    } else {
       $c.removeAttr('data-sorted-direction');	/* remove to clear possible css styling */
    }
   });
  }

  function prepHeader() {
   // Transfer run-time changes made to cloned header back to the table header.
   $('tr>th',$copy).each(function(i, c) {
    var $c = $(c)
      //##, $h = $("tr>th:eq("+i+")",$head);
      , $h = $("tr>th:nth-child("+(i+1)+")",$head);
    $h.attr('class', $c.attr('class'));

    // Following is for compatibility with sortable.js
    $h.attr('data-sorted', $c.attr('data-sorted'));
    $h.attr('data-sortable-type', $c.attr('data-sortable-type'));
    if ($c.attr('data-sorted-direction')) {
     $h.attr('data-sorted-direction',$c.attr('data-sorted-direction'));
    } else {
     $h.removeAttr('data-sorted-direction');	/* remove to clear possible css styling */
    }
   });
  }
  
  function getParam() {
   // Lookup and set global variables of table parameters used to trigger fixed header.
   headTop = $head.offset().top;
   headHeight = $head.height();
   tableHeight = $table.height();
   tableBottomOffset = headTop + tableHeight - headHeight;
   tableTopOffset = getTopOffset();
  }

  function getTopOffset() {
   if (window.TopOffset != null) return window.TopOffset;
   var $topHeader = $($table.data('topheader'));
   if ($topHeader.length && $topHeader.css('position').match(/(fixed|stickey)/)) {
    return $topHeader.scrollTop()+$topHeader.height();
   }
   return $table.data('topoffset') || 0;
  }

  if (! $copy || ! $table.data('fixedHeaderSetup')) {
   $copy = $head.clone(true)
   .addClass(config['className'])
   .css({
     'position': 'fixed',
     'border-spacing': '0',
     'display': 'none'})
   .appendTo($table);
   $table.data('fixedHeaderSetup',true);
  }

  getParam();

  $win.on('scroll.fixedHeader', processScroll);
  $win.on('resize.fixedHeader', processResize);

  //## Add custom event to recompute parameters. Helpful when table was invisible when initially setup.
  $(document).on('tableRefresh', function(){getParam();processResize();});
  //## Define custom event for setting up dynamically generated tables.
  $(document).on('tableSetup',function(e){ $('.table-fixed-header').setupSimpleDataTable().fixedHeader() });
  //## Define custom event for removing extra DOM elements added by $.fn.fixedHeader().
  $(document).on('tableUnsetup',function(e){ $('.table-fixed-header').removeFixedHeader() });
  //## Add touch horizontal scroll.
  if ('ontouchstart' in document.documentElement) $('.table-wrapper').on('scroll.fixedHeader',processScroll);
  //## trigger scroll to show table headers if page is initially positioned in middle of page.
  setTimeout(function(){$win.trigger('scroll.fixedHeader')},10);
 });
};

//## Added removeFixedHeader to remove added thead sections in tables.
$.fn.removeFixedHeader = function(){
 return this.each(function(){
  var $table = $(this);
  $('thead',$table).each(function(i){
   // Remove added thead sections.
   if (i > 0) $(this).remove();
  });
  $table.data('fixedHeaderSetup',false);
 });
};

//## Automatically setup tables having the table-fixed-header class.
$(function(){
 $('.table-fixed-header').setupSimpleDataTable().fixedHeader();
});

//## To enable fixedHeaders for touch, the table's container overflow css needs to be set. Helps horizontal scrolling.
//## Note: the following clips off popup menus at bottom of table that are used in file-list.
//## We can get by just by assigning overflow to any element such as .backdrop.
//##if ('ontouchstart' in document.documentElement) {
//##  $('head').append('<style>.table-wrapper{overflow-x:auto;overflow-y:hidden;}</style>\n');
//##}

})(jQuery);



/*---------------- doubletap handler -----------------------------------------------------------*/
/* Provide a handler for touch devices to double-tap column grips in colResizable.js            */

/*
 * jQuery Double Tap
 * Developer: Sergey Margaritov (sergey@margaritov.net)
 * Date: 22.10.2013
 * Based on jquery documentation http://learn.jquery.com/events/event-extensions/
 */

(function($){

  $.event.special.doubletap = {
    bindType: 'touchend',
    delegateType: 'touchend',

    handle: function(event) {
      var handleObj   = event.handleObj,
          targetData  = jQuery.data(event.target),
          now         = new Date().getTime(),
          delta       = targetData.lastTouch ? now - targetData.lastTouch : 0,
          delay       = delay == null ? 300 : delay;

      if (delta < delay && delta > 30) {
        targetData.lastTouch = null;
        event.type = handleObj.origType;
        ['clientX', 'clientY', 'pageX', 'pageY'].forEach(function(property) {
          event[property] = event.originalEvent.changedTouches[0][property];
        })

        // let jQuery handle the triggering of "doubletap" event handlers
        handleObj.handler.apply(this, arguments);
      } else {
        targetData.lastTouch = now;
      }
    }
  };

})(jQuery);



/*---------------- colResizable.js -------------------------------------------------------------*/
/* Usage: http://www.bacubacu.com/colresizable/#usage
/**
               _ _____           _          _     _      
              | |  __ \         (_)        | |   | |     
      ___ ___ | | |__) |___  ___ _ ______ _| |__ | | ___ 
     / __/ _ \| |  _  // _ \/ __| |_  / _` | '_ \| |/ _ \
    | (_| (_) | | | \ \  __/\__ \ |/ / (_| | |_) | |  __/
     \___\___/|_|_|  \_\___||___/_/___\__,_|_.__/|_|\___|

    v1.6 - jQuery plugin created by Alvaro Prieto Lauroba

    Licences: MIT & GPL
    Feel free to use or modify this plugin as far as my full name is kept

    If you are going to use this plug-in in production environments it is
    strongly recommended to use its minified version: colResizable.min.js

*/
/*
 * Changes: mack:
 *	Changed style settings so grid lines z-index are above fixed header.
 *	Replaced jQuery deprecated bind() function with on().
 *	Integrate colResizable with fixedHeader (copy settings, sync with other invisible header).
 *	Added code automatically setting up tables with the class name "table-col-resizable".
 *	Flush saved settings if the parameter "reset" is found in url.
 *	Track which columns are changed by user.
 *	On resize reset non-user specified column widths to auto to allow browser to resize widths.
 *	Changed interpretation of overflow option to be more dynamic where table width can expand and contract.
 *	Added double-click handler on grips to reset column width back to it's initial setting.
 *	Saved original column width percentage of total width to use when resizing table.
 *	Removed tracking of user changed columns above. Use saved original widths instead.
 *	Added custom event tableRefresh to recompute grips and headers.
 *	Removed need for marginLeft and marginRight options.
 *	Added option touchBeforeDrag and onGripTouchStart handler to activate grips first before dragging. 
 *	Added custom event tableUnsetup to remove DOM elements added by colResizable to the document.
 *	Added double-click handler on last table grip to reset all table columns to their original width.
 *	Sync'ed grip visibility to column visibilty to allow dynamically displayed columns in responsive designs.
 *
 *	Because browsers have latitude in adjusting tables on their own, resize was changed to first
 *	set table parameters, let the browser render the results, and then read the resulting column
 *	widths for accurate placement of grips and guidelines.
 */

(function($){

	var d = $(document);		//window object
	var h = $("head");		//head object
	var drag = null;		//reference to the current grip that is being dragged
	var tables = {};		//object of the already processed tables (table.id as key)
	var count = 0;			//internal count to create unique IDs when needed.

	//common strings for packing
	var ID = "id";
	var PX = "px";
	var SIGNATURE ="JColResizer";
	var FLEX = "JCLRFlex";

	//short-cuts
	var I = parseInt;
	var M = Math;
	var ie = navigator.userAgent.indexOf('Trident/4.0')>0;
	var S;
	try{S = sessionStorage;}catch(e){}	//Firefox crashes when executed as local file system

	//append required CSS rules
	//##h.append("<style type='text/css'>  .JColResizer{table-layout:fixed;} .JColResizer > tbody > tr > td, .JColResizer > tbody > tr > th{overflow:hidden;padding-left:0!important; padding-right:0!important;}  .JCLRgrips{ height:0px; position:relative;} .JCLRgrip{margin-left:-5px; position:absolute; z-index:5; } .JCLRgrip .JColResizer{position:absolute;background-color:red;filter:alpha(opacity=1);opacity:0;width:10px;height:100%;cursor: e-resize;top:0px} .JCLRLastGrip{position:absolute; width:1px; } .JCLRgripDrag{ border-left:1px dotted black;	} .JCLRFlex{width:auto!important;} .JCLRgrip.JCLRdisabledGrip .JColResizer{cursor:default; display:none;}</style>");
	//## Change z-index to be one more than fixed header in table-fixed-header.js above.
	//## Removed table td and th padding settings.
	//## Removed JCLRFlex{width:auto!important} as width:100% preferred.
	//## Expanded width of grips to better facilitate touch devices
	//## Changed grip resizer's class to JCLResizer as JColResizer is used for the table class name.
	//## Changed JCLRgrip and JCLRResizer css to center the gridline over the cell borders.
	//## Changed e-resize to col-resize
	h.append(''
	+ '<style type="text/css">'
	+ ' .JColResizer{ table-layout:auto; }'
	+ ' .JCLRgrips{ height:0px; position:relative; }'
	+ ' .JCLRgrip{ position:absolute; z-index:11; cursor:col-resize; width:10px; margin-left:-5px; }' //## narrow grip activation zone
	+ ' .JCLRgrip .JCLRResizer{ position:absolute; width:1px; height:100%; top:0px; margin-left:9px; }'
	+ ' .JCLRLastGrip{ }'
	+ ' .JCLRgrip.JCLRgripDrag{ width:40px; margin-left:-20px; }'	//## expand grip width for easier grabbing on touch devices
	+ ' .JCLRgrip.JCLRgripDrag .JCLRResizer{ border-left:1px dotted black; margin-left:19px; }'
	+ ' .JCLRgrip.JCLRdisabledGrip{ cursor:default; display:none; }'
	+ ' .JCLRFlex{}'
	+ '</style>\n'
	);


	/**
	 * Function to allow column resizing for table objects. It is the starting point to apply the plugin.
	 * @param {DOM node} tb - reference to the DOM table object to be enhanced
	 * @param {Object} options	- some customization values
	 */
	var init = function( tb, options){
		var t = $(tb);			//the table object is wrapped
		t.opt = options;                //each table has its own options available at anytime
		t.mode = options.resizeMode;    //shortcuts
		t.dc = t.opt.disabledColumns;
		if(t.opt.disable) return destroy(t);		    //the user is asking to destroy a previously colResized table
		var id = t.id = t.attr(ID) || SIGNATURE+count++;    //its id is obtained, if null new one is generated
		count++;					    //## always increase in case old ID's are reused (re-setup)
		t.p = t.opt.postbackSafe;			    //short-cut to detect postback safe
		t.tm = null;					    //## timer for setting grips after table resize
		t.uc = false;					    //## true if user changed column sizes
		if(!t.is("table") || tables[id] && !t.opt.partialRefresh) return;	//if the object is not a table or if it was already processed then it is ignored.
		//##if(t.opt.hoverCursor !== 'e-resize') h.append("<style type='text/css'>.JCLRgrip .JColResizer:hover{cursor:"+ t.opt.hoverCursor +"!important}</style>");  //if hoverCursor has been set, append the style
		if(t.opt.hoverCursor !== 'col-resize') h.append("<style type='text/css'>.JCLRgrip{cursor:"+ t.opt.hoverCursor +"!important}</style>");  //if hoverCursor has been set, append the style
		t.addClass(SIGNATURE).attr(ID, id).before('<div class="JCLRgrips"/>');	//the grips container object is added. Signature class forces table rendering in fixed-layout mode to prevent column's min-width
		t.g = []; t.c = []; t.w = t.width(); t.gc = t.prev(); t.f=t.opt.fixed;	//t.c and t.g are arrays of columns and grips respectively
		//## Following options not needed anymore as syncGC() used instead.
		//##if(options.marginLeft) t.gc.css("marginLeft", options.marginLeft);	//if the table contains margins, it must be specified
		//##if(options.marginRight) t.gc.css("marginRight", options.marginRight);	//since there is no (direct) way to obtain margin values in its original units (%, em, ...)
		t.cs = I(ie? tb.cellSpacing || tb.currentStyle.borderSpacing :t.css('border-spacing'))||2;  //table cellspacing (not even jQuery is fully cross-browser)
		t.b  = I(ie? tb.border || tb.currentStyle.borderLeftWidth :t.css('borderLeftWidth'))||1;  //outer border width (again cross-browser issues)
		// if(!(tb.style.width || tb.width)) t.width(t.width()); //I am not an IE fan at all, but it is a pity that only IE has the currentStyle attribute working as expected. For this reason I can not check easily if the table has an explicit width or if it is rendered as "auto"
		tables[id] = t; //the table object is stored using its id as key
		syncGC(t);      //## sync grip container
		createGrips(t); //grips are created
	};


	/**
	 * This function allows to remove any enhancements performed by this plugin on a previously processed table.
	 * @param {jQuery ref} t - table object
	 */
	var destroy = function(t){
		var id=t.attr(ID), t=tables[id];	//its table object is found
		if(!t||!t.is("table")) return;		//if none, then it wasn't processed
		t.removeClass(SIGNATURE+" "+FLEX).gc.remove();	//class and grips are removed
		delete tables[id];			//clean up data
	};


	/**
	 * Function to create all the grips associated with the table given by parameters
	 * @param {jQuery ref} t - table object
	 */
	var createGrips = function(t){
		//##var th = t.find(">thead>tr:first>th,>thead>tr:first>td"); //table headers are obtained
		//##if(!th.length) th = t.find(">tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td, >tr:first>td");	 //but headers can also be included in different ways
		var th = t.find(">thead>tr:first-child>th,>thead>tr:first-child>td"); //table headers are obtained
		if(!th.length) th = t.find(">tbody>tr:first-child>th,>tr:first-child>th,>tbody>tr:first-child>td, >tr:first-child>td");	 //but headers can also be included in different ways
		th = th.filter(":visible");             //filter invisible columns
		t.cg = t.find("col");	                //a table can also contain a colgroup with col elements
		t.ln = th.length;                       //table length is stored
		t.owt = t.w;                            //## saved original table width
		t.ow = []; th.each(function(i){t.ow[i] = $(this).width();});	//## save original column widths
		if(t.p && S && S[t.id])memento(t,th);   //if 'postbackSafe' is enabled and there is data for the current table, its coloumn layout is restored
		th.each(function(i){                    //iterate through the table column headers
			var c = $(this);                //jquery wrap for the current column
			var dc = t.dc.indexOf(i)!=-1;   //is this a disabled column?
			var g = $(t.gc.append('<div class="JCLRgrip"></div>')[0].lastChild); //add the visual node to be used as grip
			//## SIGNATURE as a class name is also attached to the table element. Use JCLRResizer here instead.
			//##g.append(dc ? "": t.opt.gripInnerHtml).append('<div class="'+SIGNATURE+'"></div>');
			g.append(dc ? "": t.opt.gripInnerHtml).append('<div class="JCLRResizer"></div>');
			if(i == t.ln-1){                    //if the current grip is the last one
				g.addClass("JCLRLastGrip"); //add a different css class to stlye it in a different way if needed
				if(t.f) g.html("");         //if the table resizing mode is set to fixed, the last grip is removed since table with can not change
			}
			//## following is duplicated below
			//##g.on('touchstart mousedown', onGripMouseDown); //bind the mousedown event to start dragging

			if(!dc){
				//if normal column bind the mousedown event to start dragging, if disabled then apply its css class
				//##g.removeClass('JCLRdisabledGrip').on('touchstart mousedown', onGripMouseDown);
				g.removeClass('JCLRdisabledGrip')
					.on('mousedown',onGripMouseDown)
					.on('touchstart',onGripTouchStart)              //## activate grip before dragging
					.on('dblclick doubletap',onGripDoubleClick);	//## reset column width to default
			}else{
				g.addClass('JCLRdisabledGrip');
			}
			g.t = t; g.i = i; g.c = c; c.w =c.width();      //some values are stored in the grip's node data as shortcut
			t.g.push(g); t.c.push(c);                       //the current grip and column are added to its table object
			if(!dc) c.width(c.w).removeAttr("width");       //the width of the column is converted into pixel-based measurements
			c.pl = I(c.css('paddingLeft'));			//## store data as shortcut
			c.pr = I(c.css('paddingRight'));		//## store data as shortcut
			c.bl = I(c.css('borderLeftWidth'));		//## store data as shortcut
			c.br = I(c.css('borderRightWidth'));		//## store data as shortcut
			c.wp = 100*(c.w+c.pl+c.pr+c.bl+c.br)/t.w;	//## compute column width percent for resize
			g.data(SIGNATURE, {i:i, t:t.attr(ID), last: i == t.ln-1});  //grip index and its table name are stored in the HTML
		});
		t.cg.removeAttr("width");   //remove the width attribute from elements in the colgroup

		t.find('td, th').not(th).not('table th, table td').each(function(){
			$(this).removeAttr('width');    //the width attribute is removed from all table cells which are not nested in other tables and dont belong to the header
		});
		if(!t.f){
			t.removeAttr('width').addClass(FLEX); //if not fixed, let the table grow as needed
		}
		syncGrips(t);		    //the grips are positioned according to the current table layout
		//there is a small problem, some cells in the table could contain dimension values interfering with the
		//width value set by this plugin. Those values are removed
		//## Note: original column width settings are now preserved and restored.
	};


	/**
	 * Function to allow the persistence of columns dimensions after a browser postback. It is based in
	 * the HTML5 sessionStorage object, which can be emulated for older browsers using sessionstorage.js
	 * @param {jQuery ref} t - table object
	 * @param {jQuery ref} th - reference to the first row elements (only set in deserialization)
	 */
	var memento = function(t, th){
		var w,m=0,i=0,aux =[],tw;
		if(th){					    //in deserialization mode (after a postback)
			t.cg.removeAttr("width");
			if(t.opt.flush){ S[t.id] =""; return;}  //if flush is activated, stored data is removed
			w = S[t.id].split(";");		    //column widths is obtained
			//## Unnamed tables or tables with same name share same storage. Ensure number of table columns are the same.
			if(w.length != t.ln+2){ S[t.id]=""; return;}	//## flush if number of table columns are different
			tw = w[t.ln+1];
			if(!t.f && tw){			    //if not fixed and table width data available its size is restored
				t.width(tw*=1);
				if(t.opt.overflow) {		    //if overflow flag is set, restore table width also as table min-width
					t.css('min-width', tw + PX);
				}
			}
			//## For overflow tables, use actual pixel widths (not percentage)
			if(t.opt.overflow){
				for(;i<t.ln;i++){			    //for each column
					aux.push(w[i]+PX);	    	    //width is stored in an array since it will be required again a couple of lines ahead
					th.eq(i).css("width", aux[i] );	    //each column width in pixels is restored
				}
			}else{
				for(;i<t.ln;i++){			    //for each column
					aux.push(100*w[i]/w[t.ln]+"%");	    //width is stored in an array since it will be required again a couple of lines ahead
					th.eq(i).css("width", aux[i] );	    //each column width in % is restored
				}
			}
			for(i=0;i<t.ln;i++)
				t.cg.eq(i).css("width", aux[i]);    //this code is required in order to create an inline CSS rule with higher precedence than an existing CSS class in the "col" elements
		}else{				//in serialization mode (after resizing a column)
			S[t.id] ="";		//clean up previous data
			for(;i < t.c.length; i++){	//iterate through columns
				w = t.c[i].width();	//width is obtained
				S[t.id] += w+";";	//width is appended to the sessionStorage object using ID as key
				m+=w;			//carriage is updated to obtain the full size used by columns
			}
			S[t.id]+=m;			//the last item of the serialized string is the table's active area (width),
							//to be able to obtain % width value of each columns while deserializing
			if(!t.f) S[t.id] += ";"+t.width();	//if not fixed, table width is stored

			t.uc = true;		//## set flag that user has changed column widths
		}
	};


	//## Added a function to place the grip container on page when window resizes and table margins are percentages.
	/**
	 * Function that matches the grip container to the placement the table on the page.
	 * @param {jQuery ref} t - table object
	 */
	var syncGC = function (t){
		//set grip container left and right margins equal to table.
		t.gc.css("marginLeft",I(t.css("marginLeft"))+PX);
		t.gc.css("marginRight",I(t.css("marginRight"))+PX);
	}


	/**
	 * Function that places each grip in the correct position according to the current table layout
	 * @param {jQuery ref} t - table object
	 */
	var syncGrips = function (t){
		t.gc.width(t.w);	    //the grip's container width is updated
		for(var i=0; i<t.ln; i++){  //for each column
			var c = t.c[i];
			//## allow table columns to be dynamically hidden in responsive layouts
			if (! c.is(':visible')) {
				t.g[i].css('display','none');	//## hide grips on hidden columns
			}
			else {
				t.g[i].css({	    //height and position of the grip is updated according to the table layout
					left: c.offset().left - t.offset().left + c.outerWidth(false) + t.cs / 2 + PX,
					height: t.opt.headerOnly? t.c[0].outerHeight(false) : t.outerHeight(false),
					display: 'block'	//## ensure grip is displayed if column (re)displayed
				});
			}
		}
	};


	/**
	* This function updates column's width according to the horizontal position increment of the grip being
	* dragged. The function can be called while dragging if liveDragging is enabled and also from the onGripDragOver
	* event handler to synchronize grip's position with their related columns.
	* @param {jQuery ref} t - table object
	* @param {number} i - index of the grip being dragged
	* @param {bool} isOver - to identify when the function is being called from the onGripDragOver event
	*/
	var syncCols = function(t,i,isOver){
		var inc = drag.x-drag.l, c = t.c[i], c2 = t.c[i+1];
		var w = c.w + inc;  var w2= c2.w- inc;	//their new width is obtained
		c.width(w);
		t.cg.eq(i).width(w);
		if(t.f){ //if fixed mode
			c2.width(w2);
			t.cg.eq(i+1).width(w2);
		}else if(t.opt.overflow) {		//if overflow is set, increment min-width to force overflow
			//##t.css('min-width', t.w + inc);
			adjustTableWidth(t,inc);
		}
		if(isOver){
			c.w=w;
			c2.w= t.f ? w2 : c2.w;
			t.w = t.width();	//## record table width
		}
	};


	/**
	* This function updates all columns width according to its real width. It must be taken into account that the
	* sum of all columns can exceed the table width in some cases (if fixed is set to false and table has some kind
	* of max-width).
	* @param {jQuery ref} t - table object
	*/
	var applyBounds = function(t){
		var w = $.map(t.c, function(c){		//obtain real widths
			return c.width();
		});
		t.width(t.w = t.width()).removeClass(FLEX); //prevent table width changes
		$.each(t.c, function(i,c){
			c.width(w[i]).w = w[i];		//set column widths applying bounds (table's max-width)
		});
		t.addClass(FLEX);			//allow table width changes
	};


	//## Added resizeTable to set col widths to percentages so columns expand too.
	/**
	* This function resets columns to their original width as a percentage, then schedules recomputeColWidths
	* to later sync grips to the new dimensions.
	* @param {jQuery ref} t - table object
	*/
	var resizeTable = function(t){
		if (t.tm != null) {
			clearTimeout(t.tm);
		}else{
			$.each(t.c, function(i,c){
				c.width((c.wp!=null?(c.wp+'%'):c.ow));
			});
		}
		t.tm = setTimeout(function(){
			recomputeColWidths(t);
			t.tm = null;
		},200);
	};


	//## Added recomputeColWidths to set col widths, let browser adjust widths, then recapture them.
	/**
	* This function resets columns to their original width as a percentage, then lets the browser render the changes
	* and then comes back to sync the grips to the new dimensions.
	* @param {jQuery ref} t - table object
	*/
	var recomputeColWidths = function(t){
		applyBounds(t);         //apply the new bounds
		setTimeout(function(){
			syncGC(t);	//## sync grip container placement with table
			syncGrips(t);
			d.trigger("resize.fixedHeader");        //## sync with table-fixed-header.js
			//##if(t.mode == 'flex' && t.p && S)   //if postbackSafe is enabled and there is sessionStorage support,
			if(t.mode != 'fit' && t.p && S){	//if postbackSafe is enabled and there is sessionStorage support,
				//##memento(t);                     //the new layout is serialized and stored for 'flex' tables
				if (t.uc) memento(t);               //##save layout only if changed by user
			}
		},10);
	};


	//## Added recomputeColPercents to adjust percent of total width for each column.
	/**
	* This function recomputes the percentages of each column width.
	* @param {jQuery ref} t - table object
	*/
	var recomputeColPercents = function(t){
		var c, tw = t.width();
		for (var i=0;i<t.ln;i++){
			c = t.c[i];
			c.wp = 100*(c.width()+c.pl+c.pr+c.bl+c.br)/tw;
		}
	}


	//## Added resetTableWidth to reset table width to auto to let browser adjust widths so we can recapture them.
	/**
	* This function resets the table width to the width of its container. Used only for overflow option.
	*/
	var resetTableWidth = function(){
		for(var t in tables){
			if( tables.hasOwnProperty( t ) ) {
				t = tables[t];
				if(! t.opt.overflow) continue;		// only applies to overflow option
				t.css({'max-width':'none','min-width':0,'width':'100%'});	// let outer container determine width
			}
		}
	}


	//## Added adjustTableWidth to use with overflow option
	/**
	* This function adjusts the table width by the increment given. The min-width and max-width parameters are adjusted
	* to allow the table to expand beyond its borders when the user adjusts the column.
	* @param {jQuery ref} t - table object
	*/
	var adjustTableWidth = function(t,inc){
		var w = (t.w + inc)+PX;
		t.css({'min-width':w,'width':w});
	}


	//## Added resetTable to reset table and columns to their original size.
	/**
	* This function resets the table width and its column widths to their original size.
	* @param {jQuery ref} t - table object
	*/
	var resetTable = function(t){
		$.each(t.c, function(i,c){
			c.w = c.width(t.ow[i]);
		});
		t.w = t.owt;
		t.css({'max-width':'none','min-width':0,'width':'100%'});
		syncGC(t);
		syncGrips(t);
	}

	//## Added onGripTouchStart for touch devices to activate grid handle before dragging.
	/**
	 * Event handler fired when the grip has been touched. Its main goal is to activate and display the grid line before letting it be dragged.
	 * It helps with horizontal scrolls for touch devices.
	 * @param {event} e - grip's touchstart event
	 */

	// Note: 2/2019 mack: Browsers are now interupting the operation of touchstart and touchmove events so dragging grips sometimes triggers the following
	// errors in Chrome:
	// [Intervention] Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
	// [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
	// It does not cause total disruption other than the chunkiness of getting the grips to "turn on" and stay so they can be dragged. Code for "pressing and holding" helps.

	var onGripTouchStart = function(e){
		var this_grip = this;
		var o = $(this_grip).data(SIGNATURE);            //retrieve grip's data
		var t = tables[o.t],  g = t.g[o.i];         //shortcuts for the table and grip objects
		var do_drag_if_dragging = function(grip){
			if(!t.opt.touchBeforeDrag || g.hasClass(t.opt.draggingClass)){
				// Grip was activated (visible). Start dragging.
				d.off('touchstart.'+SIGNATURE+' touchmove.'+SIGNATURE);
				return onGripMouseDown.call(grip,e);	// returns false to prevent text selection
			}
			return true;	// not dragging
		};

		if (! do_drag_if_dragging(this_grip)) return false;	// return false to prevent text selection

		// Activate grip first. Second touch allows the grip to drag.
		g.addClass(t.opt.draggingClass);    //add the dragging class (to allow some visual feedback)
		// Hide grip if touched outside of grip or are scrolling.
		d.one('touchstart.'+SIGNATURE+' touchmove.'+SIGNATURE,function(){ if (!drag || drag != g) g.removeClass(t.opt.draggingClass); });

		// Clear display of previous grip activated
		if (typeof t.gpi != 'undefined' && t.gpi != o.i && t.g[t.gpi].hasClass(t.opt.draggingClass)) {
			if (!drag || drag != t.g[t.gpi]) t.g[t.gpi].removeClass(t.opt.draggingClass);
			d.off('touchstart.'+SIGNATURE+' touchmove.'+SIGNATURE);
		}
		// Record index of grip that is activated
		t.gpi = o.i;

		// Set timeout to accommodate a "click hold drag" sequence
		setTimeout(function(){ do_drag_if_dragging(this_grip); },750);

		return false;
	};


	/**
	 * Event handler fired when the grip's dragging is about to start. Its main goal is to set up events
	 * and store some values used while dragging.
	 * @param {event} e - grip's mousedown event
	 */
	var onGripMouseDown = function(e){
		var o = $(this).data(SIGNATURE);            //retrieve grip's data
		var t = tables[o.t],  g = t.g[o.i];         //shortcuts for the table and grip objects
		var oe = e.originalEvent.touches;           //touch or mouse event?
		g.ox = oe? oe[0].pageX: e.pageX;            //the initial position is kept
		g.l = g.position().left;
		g.x = g.l;

		d.on('touchmove.'+SIGNATURE+' mousemove.'+SIGNATURE, onGripDrag ).on('touchend.'+SIGNATURE+' mouseup.'+SIGNATURE, onGripDragOver);	//mousemove and mouseup events are bound
		h.append("<style type='text/css'>*{cursor:"+ t.opt.dragCursor +"!important}</style>");	//change the mouse cursor
		g.addClass(t.opt.draggingClass);    //add the dragging class (to allow some visual feedback)
		drag = g;			    //the current grip is stored as the current dragging object
		if(t.c[o.i].l) for(var i=0,c; i<t.ln; i++){ c=t.c[i]; c.l = false; c.w= c.width(); }	//if the column is locked (after browser resize), then c.w must be updated
		return false;	//prevent text selection
	};


	/**
	 * Event handler used while dragging a grip. It checks if the next grip's position is valid and updates it.
	 * @param {event} e - mousemove event binded to the window object
	 */
	var onGripDrag = function(e){
		if(!drag) return;
		var t = drag.t;	    //table object reference
		var oe = e.originalEvent.touches;
		var ox = oe ? oe[0].pageX : e.pageX;    //original position (touch or mouse)
		var x =  ox - drag.ox + drag.l;		//next position according to horizontal mouse position increment
		var mw = t.opt.minWidth, i = drag.i ;	//cell's min width
		var l = t.cs*1.5 + mw + t.b;
		var last = i == t.ln-1;				    //check if it is the last column's grip (usually hidden)
		var min = i? t.g[i-1].position().left+t.cs+mw: l;   //min position according to the contiguous cells
		var max = t.f ?	    //fixed mode?
		i == t.ln-1?
		t.w-l:
		t.g[i+1].position().left-t.cs-mw:
		Infinity;				//max position according to the contiguous cells
		x = M.max(min, M.min(max, x));		//apply bounding
		drag.x = x;  drag.css("left",  x + PX);	//apply position increment
		if(last){				//if it is the last grip
			var c = t.c[drag.i];		//width of the last column is obtained
			drag.w = c.w + x- drag.l;
		}
		if(t.opt.liveDrag){		//if liveDrag is enabled
			if(last){
				c.width(drag.w);
				if(!t.f && t.opt.overflow){	    //if overflow is set, increment min-width to force overflow
					//##t.width(t.w + x - drag.l);
					adjustTableWidth(t, (x - drag.l));	//## adjust min-width and width to make table grow
				}else {
					t.w = t.width();
				}
			}else{
				syncCols(t,i);		//columns are synchronized
			}
			syncGrips(t);
			var cb = t.opt.onDrag;				//check if there is an onDrag callback
			if(cb){e.currentTarget = t[0];cb(e);}		//if any, it is fired
		}
		return false;	//prevent text selection while dragging	
	};


	/**
	 * Event handler fired when the dragging is over, updating table layout
	 * @param {event} e - grip's drag over event
	 */
	var onGripDragOver = function(e){
		d.off('touchend.'+SIGNATURE+' mouseup.'+SIGNATURE).off('touchmove.'+SIGNATURE+' mousemove.'+SIGNATURE);
		$("head :last-child").remove();			//remove the dragging cursor style
		if(!drag) return;
		drag.removeClass(drag.t.opt.draggingClass);	//remove the grip's dragging css-class
		if(!(drag.x - drag.l == 0)){
			var t = drag.t;
			var cb = t.opt.onResize;        //get some values
			var i = drag.i;                 //column index
			var last = i == t.ln-1;         //check if it is the last column's grip (usually hidden)
			var c = t.g[i].c;               //the column being dragged
			if(last){
				c.width(drag.w);
				c.w = drag.w;
			}else{
				syncCols(t, i, true);	//the columns are updated
			}
			if(!t.f) applyBounds(t);	//if not fixed mode, then apply bounds to obtain real width values
			setTimeout(function(){		//## let browser adjust columns before syncing grips
				syncGrips(t);		//the grips are updated
				recomputeColPercents(t);	//## update column width percentages
				if(cb){e.currentTarget = t[0]; cb(e);}	//if there is a callback function, it is fired
				if(t.p && S) memento(t);	//if postbackSafe is enabled and there is sessionStorage support, the new layout is serialized and stored
			},10);
		}
		drag = null;   //since the grip's dragging is over
	};


	//## Added double-click handler to clear user settings.
	/**
	 * Event handler fired when the grip is double clicked. Its main goal is to reset column width to defailt.
	 * @param {event} e - grip's mousedown event
	 */
	var onGripDoubleClick = function(e){
		var o = $(this).data(SIGNATURE);	//retrieve grip's data
		var i = o.i;
		var t = tables[o.t],  g = t.g[i];	//shortcuts for the table and grip objects
		var c = t.c[i];				//shortcut for column 
		var cw = c.width();			//current width
		var ow = t.ow[i];			//original width
		var last = i == t.ln-1;			//last column
		var diff = ow - cw;
		if(M.abs(diff) > 7){			//computations not exact, ignore if under threshold
			if(t.opt.overflow){
				adjustTableWidth(t, diff);	//adjust min-width and width to make table grow/shink
				t.w = t.width();		//record table width
			}
			c.width(ow);			// set column to original width

			// Set global drag with modified grip location.
			drag = $(this);				// same as t.g[i]
			drag.l = drag.position().left;
			drag.x = c.position().left + ow;	//ending position of drag
			//mimic onGripDragOver changes
			if (last){		// check if last column
				c.width(drag.w);
				c.w = drag.w;
			}
			else {
				syncCols(t,i,true);
			}
			drag = null;			//since the grip's dragging is over

			if (last){
				resetTable(t);
				S[t.id] = '';		// clear saved column widths
			}
			else{
				memento(t);		//save current column widths
				syncGC(t);
				syncGrips(t);
			}
		}
		return false;	//prevent text selection
	};


	/**
	 * Event handler fired when the browser is resized. The main purpose of this function is to update
	 * table layout according to the browser's size synchronizing related grips
	 */
	var onResize = function(){
		for(var t in tables){
			if( tables.hasOwnProperty( t ) ) {
				t = tables[t];
				if (! t.is(':visible')) continue;	//## avoid setting widths to 0
				var i, mw=0;
				t.removeClass(SIGNATURE);   //firefox doesn't like layout-fixed in some cases
				if(t.f){                  //in fixed mode
					t.w = t.width();        //its new width is kept
					for(i=0; i<t.ln; i++) mw+= t.c[i].w;
					//cell rendering is not as trivial as it might seem, and it is slightly different for
					//each browser. In the beginning i had a big switch for each browser, but since the code
					//was extremely ugly now I use a different approach with several re-flows. This works
					//pretty well but it's a bit slower. For now, lets keep things simple...
					for(i=0; i<t.ln; i++) t.c[i].css("width", M.round(1000*t.c[i].w/mw)/10 + "%").l=true;
					//c.l locks the column, telling us that its c.w is outdated
					syncGC(t);	//## sync grip container placement with table
					syncGrips(t.addClass(SIGNATURE));
				}else{     //in non fixed-sized tables
					//##applyBounds(t);         //apply the new bounds
					//##if(t.mode == 'flex' && t.p && S){   //if postbackSafe is enabled and there is sessionStorage support,
					//##	memento(t);                     //the new layout is serialized and stored for 'flex' tables
					//##}
					//## Clear set widths from columns before measuring the column widths.
					resizeTable(t);	//## apply bounds, recompute widths
				}
			}
		}
	};

	//bind resize event, to update grips position
	//## Resize overflow tables when window width changes.
	var ww;		//window width, initialized below
	$(window).on('resize', function(e){
		var cww = $(window).width();
		if (ww != cww) {
			ww = cww;
			return resetTableWidth.call(this,e);
		}
	});

	$(window).on('resize.'+SIGNATURE, onResize);


	//## Added refreshTables event to resetup tables if needed.
	/**
	 * Custom event handler for refreshing table setup. Handy for when tables are invisible when initially
	 * set up and column widths cannot be determined until they are visible.
	 */
	var refreshTables = function(){
		// Make sure grips have been setup for table.
		for(var t in tables){
			if( tables.hasOwnProperty( t ) ) {
				t = tables[t];
				refreshTable(t);
			}
		}
	};

	//## Added refreshTable to resetup tables if needed.
	var refreshTable = function(t){
		syncGC(t);
		if ($('.JCLRgrip',t.gc).length) {
			syncGrips(t);
		}
		else {
			createGrips(t);
		}
	};


	//## Added flush() to clear out saved settings.
	/**
	 * Utility function to clear out saved column settings.
	 */
	var flush = function(){
		for(var t in tables){
			if( tables.hasOwnProperty( t ) ) {
				t = tables[t];
				S[t.id] =""; 			// clear sessionStorage
			}
		}
	};

	/**
	 * The plugin is added to the jQuery library
	 * @param {Object} options -  an object that holds some basic customization values
	 */
	$.fn.extend({
		colResizable: function(options) {
			var defaults = {

				//attributes:

				resizeMode: 'fit',		//mode can be 'fit', 'flex' or 'overflow'
				draggingClass: 'JCLRgripDrag',	//css-class used when a grip is being dragged (for visual feedback purposes)
				gripInnerHtml: '',		//if it is required to use a custom grip it can be done using some custom HTML
				liveDrag: false,		//enables table-layout updating while dragging
				minWidth: 15,			//minimum width value in pixels allowed for a column
				headerOnly: false,		//specifies that the size of the the column resizing anchors will be bounded to the size of the first row
				hoverCursor: "col-resize",	//cursor to be used on grip hover
				dragCursor: "col-resize",	//cursor to be used while dragging
				postbackSafe: false,		//when it is enabled, table layout can persist after postback or page refresh. It requires browsers with sessionStorage support (it can be emulated with sessionStorage.js).
				flush: false,			//when postbakSafe is enabled, and it is required to prevent layout restoration after postback, 'flush' will remove its associated layout data
				//## The following options are not needed anymore.
				//##marginLeft: null,		//in case the table contains any margins, colResizable needs to know the values used, e.g. "10%", "15em", "5px" ...
				//##marginRight: null,		//in case the table contains any margins, colResizable needs to know the values used, e.g. "10%", "15em", "5px" ...
				disable: false,			//disables all the enhancements performed in a previously colResized table
				partialRefresh: false,		//can be used in combination with postbackSafe when the table is inside of an updatePanel,
				disabledColumns: [],            //column indexes to be excluded
				touchBeforeDrag: false,		//## touch devices need to touch a grip to activate it before dragging. Helps horizontal scrolling.

				//events:
				onDrag: null,			//callback function to be fired during the column resizing process if liveDrag is enabled
				onResize: null			//callback function fired when the dragging process is over
			};
			var options =  $.extend(defaults, options);	

			//since now there are 3 different ways of resizing columns, I changed the external interface to make it clear
			//calling it 'resizeMode' but also to remove the "fixed" attribute which was confusing for many people
			options.fixed = true;
			options.overflow = false;
			switch(options.resizeMode){
				case 'flex': options.fixed = false; break;
				case 'overflow': options.fixed = false; options.overflow = true; break;
			}

			return this.each(function() {
				init( this, options);
			});
		}
	});


	$(function(){
		ww = $(window).width();		// record window width to help filter resize events to just horizontal resize.

		var setup_colResizable = function(){
			//## Following is for compatibility with table-fixed-header.js
			var resizeFixedHeader = function(e){
				// Callback function to copy new column sizes to fixed header.
				var
				$table = $(e.currentTarget),
				$copy = $('thead',$table).eq(1),	// second thead section
				$head,
				w;
				if($copy.length && $copy.is(':visible')){
					$head = $('thead',$table).first(),
					$copy.width( $head.width() );
					$('>tr>th',$copy).each(function(i, c){
						// We should look at colResizable overflow option to determine whether table size
						// is dynamic or not. Here we just assume that all tables use the overflow option.
						//$(c).width( $(">tr>th:eq("+i+")",$head).width() );
						w = $(">tr>th",$head).eq(i).width() + PX;
						$(c).css({'width':w, 'min-width':w, 'max-width':w});  // dynamic width tables
					});
				}
			};

			$('.table-col-resizable').each(function(i,el){
				var $this = $(this);
				if ($this.data('colresizable-initialized')) return;
				$this.setupSimpleDataTable();

				//look for disabled columns that should not change
				var dc = [];
				$('thead:first-child th',$this).each(function(i){
					if ($.hasData(this) && $(this).data('resizable') == false) {
						dc.push(i);
					}
				});

				//setup table
				$this.colResizable({
					resizeMode:'overflow',		// the setting most natural overall
					liveDrag:true,			// animate
					onDrag:resizeFixedHeader,	// when dragging, resize fixed header too
					headerOnly:false,		// must be false for guides to appear on fixed header
					postbackSafe:true,		// save column headers between page views
					flush:(/[?&;]reset\b/.test(location.search) ? true : false),	// look for "reset" in url
					disabledColumns:dc,             // column indexes to be excluded
					touchBeforeDrag:true,		// touch to activate grip before dragging
				});
				$this.data('colresizable-initialized',true);

				//## Delay setting table to fixed to allow original column measurements to be made after rendering.
				setTimeout(function(){$this.css('table-layout','fixed');},10);
			});
		},

		unsetup_colResizable = function(){
			$('.JCLRgrips').remove();	// remove all added divs of grips
			$('.table-col-resizable').data('colresizable-initialized',false).removeClass('JColResizer').removeClass('JCLRFlex');
		};

		//## Automatically setup tables with table-col-resizable class names.
		setup_colResizable();

		//## Define custom event for setting up dynamically generated tables.
		d.on('tableSetup',function(e){ setup_colResizable(); });

		//## Define custom event for removing DOM elements and settings added by colResizable.
		d.on('tableUnsetup',function(e){ unsetup_colResizable(); });

		//## Define custom event for refreshing column sizes and grips. Table width not adjusted.
		d.on('tableRefresh',function(e){ refreshTables(); });
	});
})(jQuery);