/* Fixed column scroll bar spacer styling */
.tablesorter-scroller-bar-spacer {
  background: #eee;
}
/* add border to right side (LTR pages) of fixed column */
.tablesorter-scroller-fixed:after {
  content: '';
  border-right: 1px solid #444;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  /* set to zero for non-jquery ui themes; use "left" here for RTL pages */
  right: 0;
  /* match the margins set to the table to keep the border the same height as the table */
  margin: 10px 0 15px;
}

/* using-x-theme added by the demo code */
.using-jui-theme .tablesorter-scroller-fixed:after {
  /* use "left" here for RTL pages */
  right: 0;
}
.using-green-theme .tablesorter-scroller-fixed:after,
.using-black-ice-theme .tablesorter-scroller-fixed:after,
.using-dark-theme .tablesorter-scroller-fixed:after,
.using-dropbox-theme .tablesorter-scroller-fixed:after {
  /* match the margins set to the table to keep the border the same height as the table */
  margin: 0;
}

/* OPTIONAL CSS! */
#fixed-columns-table tbody td {
  /* force "Notes" column to not wrap, so we get a horizontal scrolling demo! */
  white-space: nowrap;
  /* Add min column width, or "Index" column filter gets too narrow to use */
  min-width: 60px;
}

$(function() {

  $('.tablesorter').tablesorter({
    theme: 'jui',
    showProcessing: true,
    headerTemplate : '{content} {icon}',
    widgets: [ 'uitheme', 'zebra', 'filter', 'scroller' ],
    widgetOptions : {
      scroller_height : 300,
      // scroll tbody to top after sorting
      scroller_upAfterSort: true,
      // pop table header into view while scrolling up the page
      scroller_jumpToHeader: true,
      // In tablesorter v2.19.0 the scroll bar width is auto-detected
      // add a value here to override the auto-detected setting
      scroller_barWidth : null
      // scroll_idPrefix was removed in v2.18.0
      // scroller_idPrefix : 's_'
    }
  });

  var startFixedColumns = 2;

  $('#fixed-columns-table').tablesorter({
    theme: 'jui',
    showProcessing: true,
    headerTemplate : '{content} {icon}',
    widgets: [ 'uitheme', 'zebra', 'filter', 'scroller' ],
    widgetOptions : {
      // scroll tbody to top after sorting
      scroller_upAfterSort: true,
      // pop table header into view while scrolling up the page
      scroller_jumpToHeader: true,

      scroller_height : 300,
      // set number of columns to fix
      scroller_fixedColumns : startFixedColumns,
      // add a fixed column overlay for styling
      scroller_addFixedOverlay : false,
      // add hover highlighting to the fixed column (disable if it causes slowing)
      scroller_rowHighlight : 'hover',

      // bar width is now calculated; set a value to override
      scroller_barWidth : null
    }
  });

  // use jQuery UI slider to change the fixed column size
  $( '#slider' ).slider({
    value : startFixedColumns,
    min   : 0,
    max   : 4,
    step  : 1,
    slide : function( event, ui ) {
      // page indicator
      $( '.fixed-columns' ).text( ui.value );
      // method to update the fixed column size
      $( '#fixed-columns-table').trigger( 'setFixedColumnSize', ui.value );
    }
  });

  // update column value display
  $( '.fixed-columns' ).text( startFixedColumns );

});