DBMagic

var log = console.log;
var wpadminbar;
var fadetime = 400;
var sash_width = 5;
var zoom = document.documentElement.clientWidth / window.innerWidth;

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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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' }
    }
  }
};

var mockup_data2 = {
  keys2: [
    'status_id2', 'customer_id2', 'branch_id2', 'agent_id2', 'phone1',
    'phone2', 'email_address', 'address', 'unit', 'postalcode', 'country_id',
    'zone_id', 'location_id', 'notes'
  ],
  head2: {
    labels2: [
      'Status2', 'Customer2', 'Branch2', 'Agent2', 'Phone12', 'Phone2',
      'Email Address', 'Address', 'Unit', 'Post Code', 'Country', 'State/Prov',
      'City/Town', 'Notes'
    ]
  },
  body2: {
    1: [
      0, 'Whole Foods', 'Whole Foods Yorkville - YRK', 'xx', '123.456.7890',
      '432.546.4325', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', 'address', '#745', 'M5R-3R9',
      'Canada', 'Ontario', 'Toronto',
      'This is a test message...'
    ]
  },
  children2: {
    status_id2: {
      type2: 'option',
      children2: { 0: '', 1: 'Active', 2: 'Prospect', 3: 'Pending', 4: 'On Hold' }
    },
    agent_id2: {
      type2: 'option',
      children2: { 0: '', 1: 'Dan', 2: 'Danny', 3: 'Daniel', 4: 'Uno' }
    }
  }
};

var debug = false;

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

class DBMagic {
  constructor( db_name, db_version, stores ) {
    this.stores = stores;
    this.db_name = db_name;
    this.db_version = db_version;
    var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    this.indexedDB = indexedDB;

//    this.db_delete();
    this.db_create();
  }

  add( name, items, callback ) {
    const db_name = this.db_name;
    let req = this.indexedDB.open( db_name, this.db_version );

    req.onsuccess = () => {
      let db = req.result;
      let tx = db.transaction ( [ name ], 'readwrite' );

      tx.oncomplete = () => {
        if ( debug )
          console.log( 'SUCCESS: Transaction [add] on database [' + db_name + '] store [' + name + '] completed successfully.' );
      };

      tx.onerror = ( e ) => {
        if ( debug )
          console.log( 'ERROR: Transaction method add() has failed.\n', e.srcElement.error );
      };

      items.forEach( item => {
        let storeReq = tx.objectStore( name ).add( item );
        storeReq.onsuccess = ( e ) => {
          if ( debug )
            console.log( 'SUCCESS: Added key ['+ item.id +'] to store [' + name + '] on database [' + db_name + '] successfully.' );
            if ( callback ) callback( e );
        };

        storeReq.onerror = ( e ) => {
          if ( debug )
            console.log( 'ERROR: Adding key ['+ item.id +'] to store [' + name + '] on database [' + db_name + '] failed.\n', e.srcElement.error );
          if ( callback ) callback( e );
        };
      });
    };

    req.onerror = ( e ) => {
      if ( debug )
        console.log( 'ERROR: Could not connect to database [' + db_name + '].\n', e.srcElement.error );
    };
  }

  get( name, items, callback ) {
    const db_name = this.db_name;
    const req = this.indexedDB.open( db_name, this.db_version );

    req.onsuccess = () => {
      let db = req.result;

      let tx = db.transaction ( [ name ], 'readonly' );
      let store = tx.objectStore( name );

      tx.onerror = ( e ) => {
        if ( debug )
          console.log( 'ERROR: Transaction on database [' + db_name + '] failed.\n', e.srcElement.error );
      };

      tx.oncomplete = () => {
        if ( debug )
          console.log( 'SUCCESS: Transaction [get] on database [' + db_name + '] store [' + name + '] completed successfully.' );
      };

      items.forEach( item => {
        let storeReq = store.get( item );

        storeReq.onerror = ( e ) => {
          if ( debug )
            console.log('ERROR: Could not connect to database ['+ db_name +'].\n', e.srcElement.error );

          if ( callback ) callback( e );
        };

        storeReq.onsuccess = ( e ) => {
          if ( debug )
            console.log( 'SUCCESS: Retrieved key ['+ item +'] from store [' + name + '] on database ['+ db_name +'] successfully.' );
          if ( callback ) callback( e.target.result );
        };
      });
    };

    req.onerror = ( e ) => {
      if ( debug )
        console.log('ERROR: Could not connect to database ['+ db_name +'].\n', e.srcElement.error );
    };
  }

  getAll( name, callback ) {
    const db_name = this.db_name;
    const req = this.indexedDB.open( db_name, this.db_version );

    req.onsuccess = () => {
      let db = req.result;
      let tx = db.transaction ( [ name ], 'readonly' );
      let store = tx.objectStore( name );

      tx.oncomplete = () => {
        if ( debug )
          console.log( 'SUCCESS: Transaction [getAll] on database [' + db_name + '] store [' + name + '] completed successfully.' );
      };

      let storeReq = store.getAll();
      storeReq.onsuccess = ( e ) => {
        if ( callback ) callback( e.target.result );
      };
    };

    req.onerror = ( e ) => {
      if ( debug )
        console.log('ERROR: Could not connect to database ['+ db_name +'].\n', e.srcElement.error );
    };

  }

  delete( name, items, callback ) {
    const db_name = this.db_name;
    const req = this.indexedDB.open( db_name, this.db_version );

    req.onsuccess = () => {
      let db = req.result;
      let tx = db.transaction ( [ name ], "readwrite" );
      let store = tx.objectStore( name );

      tx.onerror = ( e ) => {
        if ( debug )
          console.log( 'ERROR: Transaction [delete] on database [' + db_name + '] failed.\n', e.srcElement.error );
      };

      tx.oncomplete = () => {
        if ( debug )
          console.log( 'SUCCESS: Transaction [delete] on database [' + db_name + '] store [' + name + '] completed successfully.' );
      };

      items.forEach( item => {
        let storeReq = store.delete( item );

        storeReq.onerror = ( e ) => {
          if ( debug )
            console.log('ERROR: Deleted key ['+ item +'] from store ['+ name +'] failed.\n', e.srcElement.error );

          if ( callback ) callback( e );
        };

        storeReq.onsuccess = ( e ) => {
          if ( debug )
            console.log('SUCCESS: Deleted key ['+ item +'] from store ['+ name +'] successfully.');
          if ( callback ) callback( e );
        };
      });
    };

    req.onerror = ( e ) => {
      if ( debug )
        console.log('ERROR: Could not connect to database ['+ db_name +'].\n', e.srcElement.error );
    };

  }

  update( name, items, callback ) {
    const db_name = this.db_name;
    let req = this.indexedDB.open( db_name, this.db_version );

    req.onsuccess = () => {
      let db = req.result;
      let tx = db.transaction ( [ name ], 'readwrite' );

      tx.oncomplete = () => {
        if ( debug )
          console.log( 'SUCCESS: Transaction [update] on database [' + db_name + '] store [' + name + '] completed successfully.' );
      };

      tx.onerror = ( e ) => {
        if ( debug )
          console.log( 'ERROR: Transaction method update() has failed.\n', e.srcElement.error );
      };
      items.forEach( item => {
        let storeReq = tx.objectStore( name ).put( item );
        storeReq.onsuccess = ( e ) => {
          if ( debug )
            console.log( 'SUCCESS: Updated key ['+ item.id +'] in store [' + name + '] on database [' + db_name + '] successfully.' );
            if ( callback ) callback( e );
        };

        storeReq.onerror = ( e ) => {
          if ( debug )
            console.log( 'ERROR: Updating key ['+ item.id +'] in store [' + name + '] on database [' + db_name + '] failed.\n', e.srcElement.error );
          if ( callback ) callback( e );
        };
      });
    };

    req.onerror = ( e ) => {
      if ( debug )
        console.log( 'ERROR: Could not connect to database [' + db_name + '].\n', e.srcElement.error );
    };
  }

  db_create( callback ) {
    const db_name = this.db_name;
    const self = this;
    const req = this.indexedDB.open( db_name, this.db_version );

    req.onsuccess = () => {
      let db = req.result;
      if ( debug )
        console.log('SUCCESS: Database ['+ db_name +'] opened successfully, [ version = ' + db.version + ' ]');
      if ( callback ) callback( true );
    };

    req.onerror = () => {
      let db = req.result;
      if ( debug )
        console.log('ERROR: Database ['+ db_name +'] could not be opened successfully, [ version = ' + db.version + ' ]');
      if ( callback ) callback( true );
    };

    req.onupgradeneeded = ( e ) => {
      let db = req.result;

      switch( e.oldVersion ) {
        case 0:
          self.stores.forEach( name => {
            db.createObjectStore( name, { keyPath: 'id' } );
          } );
        case 1:
          let oldVersion = e.oldVersion;
          let newVersion = e.newVersion;
          if ( debug ) log( db.objectStoreNames );
      }
    };
  }

  db_delete( callback ) {
    const db_name = this.db_name;
    this.indexedDB.deleteDatabase( db_name, this.db_version );

    if ( debug )
      console.log('SUCCESS: Database ['+ db_name +'] deleted successfully.');
    if ( callback ) callback( true );
  }
}

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

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

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

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

  show( elm, x, y ) {
    self = this;
    if ( ! elm.is( ':input' ) ) return false;

    document.active_table = elm.closest( 'table' );

    $('.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();
  }

  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;

    var tm = elm[0].obj = this;
    elm.addClass( 'magic' );

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

    var body = $( 'body' );
    var wrap = $( '<div class="wrap" />' );
    var span = $( '<span class="measure lato" />' );

    if ( ! elm.find( '>thead' ).length ) elm.append( '<thead /><tr />' );
    if ( ! elm.find( '>tbody' ).length ) elm.append( '<tbody />' );
    body.append( span );

    if( span.css( 'font-size' ) !== '' )
      document.font_width = parseInt( span.css( 'font-size') );

    elm.parent().append( wrap );
    wrap.append( elm );

    tm.head_init().body_init().bindings_set( body );
  }

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

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

    return menu;
  };

  head_init() {
    var tm = 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>`
      ) );
    } );

    thead.find( '>tr>th>div>button' ).css( {
      minWidth: ( opts.column_sizing ? 5 : 0 ) + 'px',
      paddingRight: ( opts.column_sizing ? 5 : 0 ) + 'px'
    } );

    if ( opts.colorize ) tm.body_colorize( opts.colorize );

    return tm.bindings_set( thead );
  }

  body_init() {
    var tm = this;
    var tbl = this.elm;
    var opts = this.opts;

    tm.body_populate( tm.data );

    tbl.find( '>thead>tr>th' ).each( function( idx ) {
      tm.column_set_width( idx );
    });

    if ( opts.index ) tm.body_index();
    if ( opts.colorize ) tm.body_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: tm.cell_select },
          { 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 }
        ];
      }

      var id = 'mm' + ( $( 'body .magic.menu' ).length + 1 );
      tm.menu = new MenuMagic( id, tbl.find( '>tbody' ) );
      tm.menu.add_items( opts.context_menu );
    }

    tm.bindings_set( tbl.find( '>tbody' ) );

    return this;
  }

  body_index() {
    this.elm.find( '>tbody>tr:not(.details)' ).each( function( idx ) {
      $( this ).find( 'td.index input[type=text]' ).val( idx + 1 );
    });
  };

  body_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 } );

    var tr_odd = elm.find( ">tbody>tr:not(.details):odd *" );
    var tr_even = elm.find( ">tbody>tr:not(.details):even *" );

    tr_odd.css( { color: odd_fg, backgroundColor: odd_bg } );
    tr_odd.find( ">td" ).css( "border-color", odd_bg );
    tr_even.css( { color: even_fg, backgroundColor: even_bg } );
    tr_even.find( ">td" ).css( "border-color", even_bg );

    return this;
  };

  body_populate( data ) {
    var tm = this;
    var tbl = this.elm;
    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 html = $( html );
    tbody.append( html );

    tbody.find( '>tr' ).each( function() {
      tm.bindings_set( $( this ) );
    });

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

    return this;
  }

  bindings_set( elm ) {
    function move_up( e ) {
      var input = $( e.target );

      var td = input.closest( 'td' );
      var tr = td.closest( 'tr' ).prev();
      if ( ! tr.length || tr.prop( 'tagName') !== 'TR' ) return false;

      td = tr.find( '>td' ).eq( td.index() );
      td.find( '>div :input' ).focus();
      if ( opts.selector ) tm.selector_set( td );
    }

    function move_down( e ) {
      var input = $( e.target );

      var td = input.closest( 'td' );
      var tr = td.closest( 'tr' ).next();
      if ( ! tr.length || tr.prop( 'tagName') !== 'TR' ) return false;

      td = tr.find( '>td' ).eq( td.index() );
      td.find( '>div :input' ).focus();
      if ( opts.selector ) tm.selector_set( td );
    }

    function move_left( e ) {
      var input = $( e.target );
      var td = input.closest( 'td' ).prev();
      if ( ! td.length || td.index() - opts.index < 0 ) return false;

      td.find( '>div :input' ).focus();
      if ( opts.selector ) tm.selector_set( td );
    }

    function move_right( e ) {
      var input = $( e.target );
      var td = input.closest( 'td' ).next();
      if ( ! td.length || ! td.index() ) return false;

      td.find( '>div :input' ).focus();
      if ( opts.selector ) tm.selector_set( td );
    }

    function key_events() {
      elm.off( 'keyup' ).on( 'keyup', function( e ) {
        var input = $( ':focus' );
        switch ( e.keyCode ) {
          case 27: // ESC
            input.removeAttr( 'readonly' );
            if ( opts.selector ) tm.selector_set( input.closest( 'td' ) );
            break;
        }
      });

      elm.off( 'keydown' ).on( 'keydown', function( e ) {
        if ( ! $( 'table.magic .selected' ).length ) return;
        var input = $( ':focus' );

        switch( e.keyCode )   {
          case 37: if ( opts.selector ) move_left( e ); break;
          case 39: if ( opts.selector ) move_right( e ); break;
        }
        if ( ! opts.selector ) return;

        e.preventDefault();

        switch( e.keyCode )   {
          case 9: e.shiftKey ? move_left( e ) : move_right( e ); break; // Tab
          case 13: e.shiftKey && opts.selector ? move_up( e ) : move_down( e ); break; //Enter
          case 38: move_up( e ); break;
          case 40: move_down( e ); break;

          case 113: // F2
            tm.selection_remove();
            input.removeAttr( 'readonly' );
            break;
        }
      } );
    }

    var tm = this;
    var tbl = this.elm;
    var opts = this.opts;
    var id = tbl.attr( 'id' );
    var thead = tbl.find( '>thead' );
    var tbody = tbl.find( '>tbody' );
//    var config = JSON.parse( localStorage.getItem( id ) ).config;

    switch ( elm.prop( 'tagName' ) ) {
      case 'THEAD':
        if ( tm.opts.sortable ) {
          thead.find('>tr>th span').on( 'click', tm.column_sort );
        }
        if ( tm.opts.column_sizing ) {
          thead.find( 'span' ).on( 'dblclick', false );
          thead.find( 'span' ).on( 'mousedown', false );
          thead.find( 'button' ).on( 'dblclick', function() {
            tm.column_set_width( $( this ).closest( 'th').index() );
          } );
          thead.find( '>tr>th button' ).
          on( 'mousedown', { elm: false }, function( e ) {
            e.data.elm = $( this );
            tm.column_sizer( e );
          } );
        }
        break;

      case 'TBODY':
        tbody.find( ':input' ).on( 'contextmenu', function() {
          tm.menu.init( tbody );
        } );
        break;

      case 'TR':
        key_events();

        elm.find( 'td.index input' ).off( 'click' );

        if( opts.column_sizing ) {
          elm.find( ':input' ).on( 'dblclick', tm.cell_edit );
          elm.find( ':input' ).on( 'click', tm.selector_set );
          elm.find( 'select' ).on( 'focus', tm.selector_set );
        }
        break
    }

    $( window ).on( 'load', function() {

    } ).
    on( 'resize', function() { tbl.resize(); } );

    return this;
  }

  selector_set( e ) {
    var input = e.target ? $( e.target ) : e.find( '>div :input' );
    var tbl = input.closest( 'table' );
    var thead = tbl.find( '>thead' );
    var tm = tbl[0].obj;

    if ( ! tm.opts.selector ) return false;

    document.active_table = tbl;
    document.caret_position = input[0].selectionStart;

    if ( ! $( '.menu.magic' ).is( ':visible' ) )
      tm.selection_remove();
    else
      $( 'table.magic div:not(.row).selected' ).removeClass( 'selected' );

    input.closest( 'div' ).addClass( 'selected' );
    input.attr( 'readonly', 'readonly' );


    tbl.find( '.selector' ).removeClass( 'selector' );

    thead.find( '>tr>th' ).eq(
      input.closest( 'td' ).index() ).addClass( 'selector' );

    input.closest( 'tr' ).find( 'td:first-child' ).addClass( 'selector' );

    return false;
  };

  selection_get() {
    var input = this.elm.find( '>tbody>tr>td>div.selected :input' );
    return input.val().substr(
      input[0].selectionStart, input[0].selectionEnd - input[0].selectionStart );
  };

  selection_remove() {
    $( 'table.magic .selected' ).removeClass( 'selected row cells' );
    return this;
  };

  column_sort() {
    var tbl = $( this ).closest( 'table' );
    var value = 0;
    var table = tbl[0];
    var idx = $(this).closest( 'th' ).index();
    var selected = tbl.find( '>tbody>tr>td>div.selected' );

    var value = function( tr, idx ) {
      var input = $( tr ).find( 'td' ).eq( idx ).find( ':input' );
      switch ( input.prop('tagName') ) {
        case 'INPUT':
          return input.val();
        case 'SELECT':
          return input.find( 'option[value="' + input.val() + '"]' ).text();
        default: return '';
      }
    };

    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.body_colorize();

    if ( selected.length ) { selected.find( ':input' ).focus(); }

    return table.obj;
  };

  column_sizer( e ) {
    function reset()  {
      wrap.off( 'mousemove' );
      thead.find( 'tr *' ).css( 'cursor', '' );
      tbody.find( 'tr *' ).css( 'cursor', '' );

      localStorage.setItem( id, JSON.stringify( tm.cache ) );
    }

    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() {
        var size = width + ( opts.column_sizing ? sash_width : 0 );
        $( this ).find( 'td:nth-child(' + ( th.index() + 1 ) + ')' ) .
        find( ':input' ).width( size );
        tm.cache.config.columns.sizes[ idx ] = size;
      });


      wrap.on( 'mousemove', set_size );
    }

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

    var idx = th.index();
    var tbl = this.elm;
    var id = tbl.attr( 'id' );
    var tm = this;
    var opts = this.opts;
    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' );

    var json = localStorage.getItem( id ) ?
      JSON.parse( localStorage.getItem( id ) ) : {};

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

    return this;
  };

  column_set_width( idx, width = 0 ) {
    var tbl = this.elm;
    var opts = this.opts;
    var id = tbl.attr( 'id' );
    var thead = tbl.find( '>thead' );
    var sizes = false;

//    if ( this.cache.config.columns.sizes ) {
//      sizes = this.cache.config.columns.sizes;
//    }

    if ( ! width ) width = this.cell_largest( idx );
    thead.find( '>tr>th' ).eq( idx ).find( 'button' ).width( width + 4 );

    width = ( opts.column_sizing ? ( width + sash_width ) : width ) + 4;

    tbl.find( '>tbody>tr:not(.details)' ).each( function() {
      var input = $( this ).find( '>td' ).eq( idx ).find( ':input' );
      input.width( width );
      if ( sizes ) sizes[ idx ] = width;
    });
//    localStorage.setItem( id, JSON.stringify( this.cache ) );
    return this;
  };

  cell_edit( e ) {
    var elm = $( e.target );
    var tm = elm.closest( 'table' )[0].obj;
    var position = document.caret_position;

    tm.selection_remove();
    if ( tm.opts.selector ) elm[0].setSelectionRange( position, position );
    elm.removeAttr( 'readonly' );

    return false;
  };

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

  cell_largest( 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 input = $( this ).find( '>td' ).eq( idx ).find( ':input' );

      switch ( input.prop( 'tagName' ) ) {
        case 'SELECT':
          if ( opts.column_sizing ) {
            var option = input.find( 'option[value="' + input.val() + '"]' );
            if ( option.text() === '' ) {
              option = option.next();
            }
            span.text( option.text() + 'W' );
            width = span.width();
          } else {
            var widest = 0;
            input.find( 'option' ).each( function() {
              span.text( $( this ).text() + 'W ' );
              widest = span.width() > widest ? span.width() : widest;
            });
            width = widest;
          }
          break;
        case 'INPUT':
          span.text( input.val().trim() );
          width = Math.round( span.width() - ( opts.column_sizing ? sash_width : 0 ) );
          break;
      }
      largest = width > largest ? width : largest;
    } );
    return largest;
  };

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

    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.selection_get();
    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 );
  };

  new_row( e ) {
    var tbl = document.active_table;
    var tm = tbl[0].obj;
    var args = tm.data;
    var index = tm.opts.index;
    tm.selection_remove();

    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 ( typeof e === 'undefined' ) {
      tbody.prepend( row );
    } else {
      var tr = e.data.elm.closest( 'tr' );
      tbl.find( 'tr' ).eq( tr.index() + 1 ).after( row );
    }

    tm.bindings_set( row );

    var idx = tm.opts.index ? 1 : 0;
    var td = row.find( 'td' ).eq( idx );

    td.find( ':input' ).focus();
    td.find( 'div' ).addClass( 'selected' );
    tbl.find( '>thead>tr>th' ).each( function( idx ) {
      tm.column_set_width( idx, $( this ).width() - 7.5 );
    });

    tm.body_index();
    tm.body_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.selected_rows = [ tr ];
  }

  paste_row( e ) {
    var elm = e.data.elm;
    var tr = elm.closest( 'tr' );
    var tbl = elm.closest( 'table' );
    var thead = tbl.find( '>thead' );
    var tm = tbl[0].obj;

    var rows = document.selected_rows;
    var new_row = false;

    rows.forEach( function( row, idx ) {
      var clone = row.clone();
      tr.eq( idx - 1).after( clone );
      new_row = row = tr.next().not( '.details' );

      tm.bindings_set( row );
      tm.column_set_width( idx );
    } );

    tm.body_index();
    tm.body_colorize();
    tm.selection_remove();
    if ( new_row ) {
      new_row.addClass( 'selected' );
      new_row.find( '>td>div' ).addClass( 'selected cells' );
      new_row.find( '>td :input' ).each( function( idx ) {
        $( this ).width( thead.find( '>tr>th' ).eq( idx ).width() - 3 );
      } );
    }
  }

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

    var tr = e.data.elm.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.body_index();
        tm.body_colorize();
      });
    } else {
      tr.remove();
      tm.body_index();
      tm.body_colorize();
    }
    if ( ! tbody.find( 'tr' ).length ) {
      tm.new_row();
      widths.forEach( function( width, idx ) {
        tm.column_set_width( idx, width - 7.5 );
      });
    }
    focus.focus();
  };
}


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

jQuery(document).ready( function( $ ) {
  wpadminbar = $( '#wpadminbar' ).length ? set_top() : false;

  var tables = [ 'tables', 'tables1' ];
  var tbl1 = tables[0];
  var tbl2 = tables[1];

  let items = [];
  for ( var i = 1; i < 6; i++ )
    items.push( { id: 'test'+i, data: mockup_data, created: new Date() } );

  let items2 = [];
  for ( var i = 1; i < 6; i++ )
    items2.push( { id: 'test'+i, data: mockup_data2, created: new Date() } );

  db1 = new DBMagic( 'TableMagic', 1, tables );

  db1.add( tbl1, items, function( result ) {
//    log( 'TEST 1:', result );
  } );

  db1.get( tbl1, [ 'test1', 'test2' ], function( result ) {
//    log( 'TEST 2:', result );
  } );

  db1.update( tbl1, items2, function( result ) {
//    log( 'TEST 3:', result );
  } );

  db1.add( tbl2, items, function( result ) {
//    log( 'TEST 4:', result);
  } );

  db1.get( tbl1, [ 'test1', 'test2' ], function( result ) {
//    log( 'TEST 5:', result );
  } );

  db1.get( tbl2, [ 'test1', 'test2' ], function( result ) {
//    log( 'TEST 6:', result );
  } );

  db1.getAll( tbl1, function( result ) {
//    log( 'TEST 7:', result );
  } );

  db1.delete( tbl1, [ 'test3', 'test4' ], function( result ) {
//    log( 'TEST 8:', result );
  } );

  db1.getAll( tbl1, function( result ) {
//    log( 'TEST 9:', result);
  } );

//  db1.db_delete();

  items = [
    { label: 'View Form', command: false },
    { 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 }
  ];

  colorize1 = {
    th: {
      color: 'white',
      background: 'blue'
    }
  };

  colorize2 = {
    th: {
      color: 'white',
      background: 'teal',
      backgroundColor: 'teal'
    },
//    td: {
//      odd_fg: 'blue',
//      odd_bg: 'cyan',
//      even_fg: 'white',
//      even_bg: 'green'
//    }
  };

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

  tm1.elm.find( '>tbody>tr:first-child>td:nth-child(2) :input' ).trigger( 'focus' );

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

//  tm2.elm.find( '>tbody>tr:first-child>td:nth-child(2) :input' ).trigger( 'focus' );

});