function get_scrollbar_width( $ ) {
    $('body').append( $(`
    <div id="scrollbar" style="width: 40px; overflow-y: scroll; display: none;">
      <div id="scrollbar_inner" style="height: 20px;"></div>
    </div>`) );

    var scrollbarWidth = 0;
    var scrollbar = $( '#scrollbar' );
    var scrollbar_inner = $( '#scrollbar_inner' );

    scrollbar.show();
    scrollbarWidth = scrollbar[0].offsetWidth - scrollbar_inner[0].offsetWidth;
    scrollbar.remove();

    return Math.round( scrollbarWidth );
}

var log = console.log;
var fadetime = 400;
var user;
var wpadminbar;
var scrollbarWidth = get_scrollbar_width( jQuery );
var zoom = document.documentElement.clientWidth / window.innerWidth;
var sash_width = 5;

var mockup_data = {
  keys: [
    'status_id', 'customer_id', 'branch_id', 'agent_id', 'phone1',
    'phone2', 'email_address', 'address', 'unit', 'postalcode', 'country_id',
    'zone_id', 'location_id', 'notes'
  ],
  head: {
    labels: [
      'Status', 'Customer', 'Branch', 'Agent', 'Phone1', 'Phone2',
      'Email Address', 'Address', 'Unit', 'Post Code', 'Country', 'State/Prov',
      'City/Town', 'Notes'
    ]
  },
  body: {
    1: [
      0, 'Whole Foods', 'Whole Foods Yorkville - YRK', 'xx', '123.456.7890',
      '432.546.4325', 'sam@abc.com', 'address', '#745', 'M5R-3R9',
      'Canada', 'Ontario', 'Toronto',
      'This is a test message...'
    ],
    3: [
      1, 'Whole Foods', 'Whole Foods Yorkville - YRK', 'xx', '123.456.7890',
      '432.546.4325', 'sam@abc.com', 'address', '#745', 'M5R-3R9',
      'Canada', 'Ontario', 'Toronto',
      'This is a test message...'
    ],
    5: [
      2, 'Whole Foods', 'Whole Foods Yorkville - YRK', 'xx', '123.456.7890',
      '432.546.4325', 'sam@abc.com', 'address', '#745', 'M5R-3R9',
      'Canada', 'Ontario', 'Toronto',
      'This is a test message...'
    ],
    25: [
      3, 'Whole Foods', 'Whole Foods Yorkville - YRK', 'xx', '123.456.7890',
      '432.546.4325', 'sam@abc.com', 'address', '#745', 'M5R-3R9',
      'Canada', 'Ontario', 'Toronto',
      'This is a test message...'
    ]
  },
  children: {
    status_id: {
      type: 'option',
      children: { 0: '', 1: 'Active', 2: 'Prospect', 3: 'Pending', 4: 'On Hold' }
    },
    agent_id: {
      type: 'option',
      children: { 0: '', 1: 'Dan', 2: 'Danny', 3: 'Daniel', 4: 'Uno' }
    }
  }
};

String.prototype.splice = function(idx, rem, str) {
    return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};

class MenuMagic {
  constructor( id, parent ) {
    $ = jQuery;
    var menu = $( '<div id="' + id + '" class="menu magic"><ul></ul></div>' );
    this.parent = parent;
    this.id = id;
    this.elm = menu;
    this.items = menu.find('>ul');
    this.commands = [];
    parent.append( menu );
  }

  show( elm, x, y ) {
    self = this;
    document.active_table = elm.closest( 'table' );

    if ( ! elm.is( ':input' ) ) return false;
    $('.wrapper').find( '.menu:visible' ).hide();

    self.add_commands( elm );
    self.elm[0].target = elm;
    self.elm.css( { top: y, left: x, position: 'fixed' } );
    self.elm.show();
  }

  init() {
    self = this;
    $ = jQuery;

    this.parent.on("contextmenu", function( e ) {
      e.preventDefault();
      var elm = $( document.elementFromPoint( e.pageX, e.pageY ) );
      self.show( elm, e.pageX, e.pageY );
      return false;

    } );

    $( document ).
      on('click', function() { self.elm.hide(); }).
      keyup( function( e ) { if ( e.key === "Escape" ) { self.elm.hide(); }
    });
  }

  add_item( item ) {
    this.commands.push( item );
  }

  add_items( items ) {
    this.commands = items;
  }

  add_command( item, elm ) {
    var ul = self.elm.find('ul');
    var cls = item.label.replace( ' ' , '_' ).toLowerCase();
    cls = cls !== '' ? cls : 'seperator';
    var button = item.label.length ?
    '<button class="none">' + item.label + '</button>' : '';
    var li = $ ( '<li class="'+ cls +'">' + button + '</li>' );
    ul.append( li );

    if ( item.command ) {
      li.find('button').on( 'click', { elm: elm }, function( e ) {
        item.command( e );
        self.elm.fadeOut( fadetime / 2 );
      });
    }
  }

  add_commands( elm ) {
    self = this;
    var ul = this.elm.find('>ul');
    var items = this.commands;

    ul.find('>li').remove();
    items.forEach( function( item, idx ) {
      self.add_command( item, elm );
    });
  }
}

class TableMagic {
  constructor( elm, opts, data ) {
    $ = jQuery;
    elm[0].obj = this;
    elm.addClass( 'magic' );
    var tm = this;
    var self = this;
    document.active_table = elm;


    this.elm = elm;
    this.opts = opts;
    this.data = data;
    this.menu = false;
    this.copy_buffer = '';

    if( ! $( 'body>.measure' ).length )
      $('body').append( $( '<span class="measure lato" />' ) );

    var wrap = $( '<div class="wrap" />' );
    elm.parent().append( wrap );
    if ( ! elm.find('>thead' ).length ) elm.append( '<thead /><tr />' );
    if ( ! elm.find('>tbody' ).length ) elm.append( '<tbody />' );
    wrap.append( elm );

    this.init_head();
    this.init_body();

    elm.find( ':input' ).on( 'focus', function() {
      self.menu.init( self.menu.parent );
    } );

    elm.find( '>tbody>tr' ).on( 'contextmenu', function( e ) {
      e.preventDefault();
      var elm = $( document.elementFromPoint( e.pageX, e.pageY ) ).find( ':input' );

      self.menu.show( elm, e.pageX, e.pageY );
    } );
  }

  sort() {
    var tbl = $( this ).closest( 'table' );
    var value = 0;
    var table = tbl[0];
    var idx = $(this).closest('th').index();

    var value = ( tr, idx ) => $( tr ).find('td').eq( idx ).
      find( 'input' ).val();

    var column = (idx, asc) => (a, b) => ((v1, v2) =>
      v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
      ) ( value(asc ? a : b, idx), value(asc ? b : a, idx) );

    var tbl_rows = tbl.find('>tbody>tr:not(.details)');

    if (typeof table.asc === 'undefined') {
      table.asc = 1;
    }

    Array.from(tbl_rows).sort( column(idx, table.asc = !table.asc) )
      .forEach(tr => tbl.find('>tbody')[0].appendChild(tr) );

    tbl_rows.each(function() {
      var elm = $(this);
      var id = $(this).attr('data-id');
      elm.parent().
        find('tr.details[data-id=' + id + ']').insertAfter(elm);
    });
    tbl[0].obj.colorize();
  };

  index() {
    var elm = this.elm;
    var rows = elm.find('>tbody>tr:not(.details)');

    rows.each( function( idx ) {
      var input = $(this).find('td.index input[type=text]');
      input.val( idx + 1 );
    });

    rows.find('>td.index').css('text-align', 'right !important');
    rows.find('>td.index input').css('text-align', 'right');
  };

  colorize( args = 0 ) {
    var elm = this.elm;
    var raw = elm[ 0 ];

    var hdr_fg = args && args.th && args.th.color ? args.th.color : 0;
    var hdr_bg = args && args.th && args.th.background ? args.th.background : 0;
    var odd_fg = args && args.td && args.td.odd_fg ? args.td.odd_fg : 0;
    var odd_bg = args && args.td && args.td.odd_bg ? args.td.odd_bg : 0;
    var even_fg = args && args.td && args.td.even_fg ? args.td.even_fg : 0;
    var even_bg = args && args.td && args.td.even_bg ? args.td.even_bg : 0;

    raw.hdr_fg = hdr_fg = hdr_fg ? hdr_fg : raw.hdr_fg ? raw.hdr_fg : '';
    raw.hdr_bg = hdr_bg = hdr_bg ? hdr_bg : raw.hdr_bg ? raw.hdr_bg : '';
    raw.odd_fg = odd_fg = odd_fg ? odd_fg : raw.odd_fg ? raw.odd_fg : '';
    raw.odd_bg = odd_bg = odd_bg ? odd_bg : raw.odd_bg ? raw.odd_bg : '#d7d7d7';
    raw.even_fg = even_fg = even_fg ? even_fg : raw.even_fg ? raw.even_fg : '';
    raw.even_bg = even_bg = even_bg ? even_bg : raw.even_bg ? raw.even_bg : '#ffffff';

    elm.find( ">thead>tr *" ).css( { color: hdr_fg, background: hdr_bg } );

    elm.find( ">tbody>tr:not(.details):odd *" ).css( "color", odd_fg );
    elm.find( ">tbody>tr:not(.details):odd *" ).css( "background-color", odd_bg );
    elm.find( ">tbody>tr:not(.details):odd>td div" ).css( "border-color", odd_bg );

    elm.find( ">tbody>tr:not(.details):even *" ).css( "color", even_fg );
    elm.find( ">tbody>tr:not(.details):even *" ).css( "background-color", even_bg );
    elm.find( ">tbody>tr:not(.details):even>td div" ).css( "border-color", even_bg );

    return $( this );
  };

  sortable() {
    this.elm.
    find('>thead>tr>th span').on('click', { call: this.colorize }, this.sort).
    find('>tbody>tr.details .wrap').css( { 'position': 'static' } );
    return this.elm;
  };

  init_head() {
    var self = this;
    var tbl = this.elm;
    var opts = this.opts;
    var data = this.data;
    var thead = tbl.find('>thead');
    var tr = thead.find('>tr');


    if ( opts.index === true ) {
      tr.append( $(`
        <th class="index"><div><button><span>&nbsp;</span></button></div></th>`
      ) );
    }
    data.keys.forEach( function( key, idx ) {
      tr.append( $(`
        <th data-key=" '` + key + `' ">
          <div><button><span>` + data.head.labels[ idx ] + `</span></button></div>
        </th>`
      ) );
    } );

    if (opts.column_sizing === true ) {
      thead.find( 'span' ).on( 'dblclick', false );
      thead.find( 'button' ).on( 'dblclick', function() {
        self.set_column_width( $( this ).closest( 'th' ).index() );
      } );
      thead.find( 'span' ).on( 'mousedown', false );
    }

    if ( opts.sortable ) this.sortable();
    if ( opts.column_sizing ) this.column_sizing();
    return tbl;
  }

  init_body() {
    var tbl = this.elm;
    var self = this;
    var opts = this.opts;
    var data = this.data;
    var thead = tbl.find('>thead');
    var tbody = tbl.find('>tbody');

    var html = '';
    for (var id in data.body ) {
      html += '<tr data-id="' + id + '">';
      data.body[ id ].forEach( function( value, idx ) {
        var elms = data.children[ data.keys[ idx ] ];

        if ( elms ) {
          var args = data.children[ data.keys[ idx ] ];
          var elm_type = args.type;

          switch ( elm_type ) {
            case 'option':
              html += `
              <td>
                <div>
                  <select>`;
                  var opts = data.children[ data.keys[ idx ] ];
                  for ( var key in opts.children ) {
                    html += '<option value="' + key +
                    '">' + opts.children[ key ] + '</option>';
                  }
              html += `
                  </select>
                </div>
              </td>`;
            break;
          }
        } else {
          html +=
          '<td><div><input type="text" value="' + value + '" /></div></td>';
        }
      } );
      html += '</tr>';
    };
    var tr = $( html );

    tbody.append( tr );
    tr.find( ':input' ).on( 'focus', function() {
      $( '.menu' ).hide();
      document.active_table = tbl;
      self.remove_selected();
      $( this ).closest( 'div' ).addClass( 'selected' );
    } );

    tr.find( 'td.index :input' ).off( 'focus' );
    if ( opts.index === true ) {
      tbl.find( '>tbody>tr:not(.details)' ).prepend( $(
        '<td class="index"><div><input type="text" readonly="readonly"/></div></td>'
      ) );
    }

    thead.find( '>tr>th' ).each( function( idx ) {
      var th = $( this );
      var width = th.width();
      self.set_column_width( idx, width );
    });
    if ( opts.index ) this.index();
    if ( opts.colorize ) this.colorize();

    if ( opts.context_menu ) {
      if ( typeof opts.context_menu === "boolean") {
        opts.context_menu = [
          { label: 'View Form', command: this.show_form },
          { label: '' },
          { label: 'Cut', command: this.input_cut },
          { label: 'Copy', command: this.input_copy },
          { label: 'Paste', command: this.input_paste },
          { label: 'Undo' },
          { label: '' },
          { label: 'Select Cell', command: this.select_cell },
          { label: '' },
          { label: 'Copy Row', command: this.copy_row },
          { label: 'Paste Row', command: this.paste_row },
          { label: 'Insert Row', command: this.new_row },
          { label: 'Delete Row', command: this.delete_row }
        ];
      }

      this.menu = new MenuMagic( 'mm1', this.elm.find( '>tbody' ) );
      this.menu.add_items( opts.context_menu );
    }

    $( 'body>.cover' ).hide();
  }

  size_column( e ) {
    function reset()  {
      wrap.off( 'mousemove' );
      thead.find( '*' ).css( 'cursor', '' );
      tbody.find( '*' ).css( 'cursor', '' );
      tbody.find( '>tr>td>div.selected :input' ).focus();
    }

    function set_size( e ) {
      wrap.off( 'mousemove' );
      deltaX = e.pageX - curX;
      curX = e.pageX;
      width = Math.round( button.width() ) + deltaX;

      button.width( width );
      rows.each( function() {
        $(this).find( 'td:nth-child(' + ( th.index() + 1 ) + ')' ) .
        find( ':input' ).width( width + sash_width );
      });
      wrap.on( 'mousemove', set_size );
    }

    var button = e.data.elm;
    var th = button.closest('th');
    if ( ! th.length ) return;

    var tbl = this.elm;
    var width = 0;
    var deltaX = 0;
    var curX = e.pageX;
    var thead = tbl.find( '>thead' );
    var tbody = tbl.find( '>tbody' );
    var rows = tbody.find( '>tr:not(.details)' );
    var wrap = tbl.closest( '.wrap' );

    wrap.
    on( 'mouseup', function() { reset(); }).
    on( 'mouseleave', function() { reset(); }).
    on( 'mousemove', function() {
      thead.find( '*' ).css( 'cursor', 'col-resize' );
      tbody.find( '*' ).css( 'cursor', 'col-resize' );
      set_size( e );
    });

    return tbl;
  };

  column_sizing() {
    var self = this;

    document.active_table.find('>thead>tr>th button').
    on('mousedown', { elm: false }, function( e ) {
      e.data.elm = $( this );
      self.size_column( e );
    } );
  };

  largest_cell( idx ) {
    var tbl = this.elm;
    var opts = this.opts;
    var tbody = tbl.find('>tbody');
    var span = $( 'body>.measure' );
    var rows = tbody.find('>tr:not(.details)');

    if ( ! idx && opts.index ) {
      span.text( rows.length );
      return Math.round( span.width() );
    }

    var width = 0;
    var largest = 0;
    rows.each( function() {
      var elm = $(this).find( '>td' ).eq( idx ).find( ':input' );
      switch ( elm.prop('tagName') ) {
        case 'SELECT':
          span.text(
          elm.find( 'option[value="' + elm.val() + '"]' ).text().trim() );
          width = Math.round( span.width() - sash_width );
          break;
        case 'INPUT':
          span.text( elm.val().trim() );
          width = Math.round( span.width() - sash_width );
          break;
      }
      largest = width > largest ? width : largest;
    });
    return largest;
  };

  set_column_width( idx, width = 0 ) {
    var tbl = this.elm;
    var thead = tbl.find('>thead');

    if ( ! width ) width = this.largest_cell( idx ) + 1;

    tbl.find('>tbody>tr:not(.details)').each( function() {
      $( this ).find( '>td' ).eq( idx ).
      find(':input').width( width + sash_width );

      thead.find('>tr>th').eq( idx ).find('button').width( width );
    });
  };

  set_column_widths() {
    var self = this;
    this.elm.find('>thead>tr>th').each( function( idx ) {
      self.set_column_width( idx );
    } );
  };

  add_menu( id, opts = 0 ) {
    this.menu = new Menu( id, opts.parent ? opts.parent : this.elm );
    var menu = this.menu;

    if ( opts.class )
      menu.elm.addClass( opts.class );

    menu.add_items( opts.items );

    return menu;

  };

  show_form( e ) {
  }

  get_selected() {
    return this.elm.find('>tbody>tr>td>div.selected :input');
  };

  get_selection() {
    var input = this.elm.find('>tbody>tr>td>div.selected :input');

    var text = input.val().substr(
      input[0].selectionStart, input[0].selectionEnd - input[0].selectionStart);

    return text;
  };

  remove_selected() {
    $( 'table.magic .selected' ).removeClass( 'selected row' );
  };

  input_cut() {
    var tbl = self.parent.closest( 'table' );
    var text = tbl[0].obj.get_selection();

    document.copy_buffer = text;
    document.execCommand( "cut" );
  };

  input_copy( e ) {
   document.execCommand( "copy" );
    var tbl = self.parent.closest( 'table' );
    var elm = e.data.elm;
    var text = tbl[0].obj.get_selection();
    if ( text === '' ) return;

    elm.focus();
    document.copy_buffer = text;
  };

  input_paste( e ) {
    var elm = e.data.elm;
    var text = document.copy_buffer;
    var start = elm[0].selectionStart;

    elm[0].value = elm.val().splice(elm[0].selectionStart, 0, text);
    elm.focus();
    elm[0].setSelectionRange( start + text.length, start + text.length );
    document.execCommand( "paste" );
  };

  select_cell( e ) {
    var elm = e.data.elm;
    elm.select();
//    elm.closest('div').addClass( 'selected' );
  };

  new_row( e ) {
    var tbl = document.active_table;
    var tm = tbl[0].obj;
    var tr = tm.get_selected().closest( 'tr' );
    var args = tm.data;
    var index = tm.opts.index;
    tm.remove_selected();

    var tbody = tbl.find('tbody');
    var new_id = tbody.find( 'tr:not(details).new' ).length;
    var html = '<tr data-id="' + new_id + '~" class="new">';

    if ( index ) {
      html += '<td class="index"><div><input type="text" readonly="readonly"/></div></td>';
    }

    args.keys.forEach( function( key ) {
      if ( key in args.children ) {
        switch ( args.children[ key ].type ) {
          case 'option':
            html += '<td><div><select>';
            var nodes = args.children[ key ].children;
            for( var idx in nodes ) {
              html += '<option value="' + idx + '">' + nodes[ idx ] + '</option>';
            };
            html += '</select></div></td>';
          break;
        }
      } else {
        html += '<td><div><input type="text" /></div></td>';
      }
    } );
    html += '</tr>';

    var row = $( html );
    if ( ! e ) {
      tbody.prepend( row );
    } else {
      tbl.find( 'tr' ).eq( tr.index() + 1 ).after( row );
    }

    row.find( ':input' ).on( 'focus', function() {
      tm.remove_selected();
      $( this ).closest( 'div' ).addClass( 'selected' );
    } );
    row.find( 'td.index :input' ).off( 'focus' );

    var idx = tm.opts.index ? 1 : 0;
    row.find('td').eq( idx ).find( 'div' ).addClass( 'selected' );
    tbl.find('>thead>tr>th' ).each( function( idx ) {
      tm.set_column_width( idx, $( this ).width() - 7.5 );
    });

    tm.index();
    tm.colorize();
  };

  copy_row( e ) {
    var elm = e.data.elm;
    var tr = elm.closest( 'tr' );
    tr.find( '>td div' ).addClass( 'selected row' );
    tr.addClass( 'selected' );
    document.copied_row = tr;
  }

  paste_row( e ) {
    var tr = document.copied_row;
  }

  delete_row( e ) {
    var tbl = document.active_table;
    var tm = tbl[0].obj;
    var tbody = tbl.find( 'tbody' );

    var tr = tm.get_selected().closest( 'tr' );
    var widths = [];
    tbl.find('>thead>tr>th' ).each( function() {
      widths.push( $( this ).width() );
    });

    if ( tr.next().hasClass( 'details' ) ) {
      tr.next().find('.wrap').slideUp( fadetime, function() {
        tr.next().remove();
        tr.remove();
        tm.index();
        tm.colorize();
      });
    } else {
      tr.remove();
      tm.index();
      tm.colorize();
    }
    if ( ! tbody.find('tr').length ) {
      tm.new_row();
      widths.forEach( function( width, idx ) {
        tm.set_column_width( idx, width - 7.5 );
      });
    }
  };

}

(function( $ ) {
  var cnt = 0;
  var methods = {
    init: function( opts = 0 ) {
      var tbl = $( this );
      if ( tbl.prop('tagName') !== 'TABLE' ) return false;

      var obj = new TableMagic( tbl, opts, mockup_data );

      if ( opts.index ) obj.index();
      if ( opts.colorize ) obj.colorize();
      if ( opts.sortable ) obj.sortable();
      if ( opts.column_sizing ) obj.column_sizing();
      if ( opts.context_menu )
        obj.context_menu( 'menu' + ( ++cnt ), opts.context_menu );
    }
  };

  $.fn.table_magic = function( method ) {
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.menu' );
    }
  };
}) ( jQuery );

//  -------------------------------------------------------


jQuery(document).ready( function( $ ) {

  function set_top() {
    var offset = Math.round( $( '#wpadminbar' ).height() );
    $('#branding, #nav-primary').css( 'top', offset + 'px' );
    offset += Math.round( $('#branding').height() );
    $('#primary').css('top', offset + 'px' );
    return true;
  }

  function test() {
    alert(876)
  }

  wpadminbar = $( '#wpadminbar' ).length ? set_top() : false;

  var items = [
    { label: 'View Form', command: test },
    { label: '' },
    { label: 'Cut', command: false },
//    { label: 'Copy', command: false },
//    { label: 'Paste', command: false },
    { label: 'Undo' },
    { label: '' },
    { label: 'Select Cell', command: false },
    { label: '' },
    { label: 'Insert Row', command: false },
    { label: 'Delete Row', command: false }
  ];

  tm1 = new TableMagic( $( 'table#test1' ), {
    index: true,
    colorize: true,
    sortable: true,
    context_menu: true,
    column_sizing: true,
  }, mockup_data  );

  tm2 = new TableMagic( $( 'table#test2' ), {
    index: true,
    colorize: true,
    sortable: true,
    context_menu: true,
    column_sizing: true
  }, mockup_data  );

});