}

/* Rules governing diff layout and colors */
table.diff {
  width: 100%;
  border-spacing: 0;
  border: 1px solid black;
}
table.diff td.diffln{
  padding: 0 0.25em 0 0.5em;
}
table.diff td {
  vertical-align: top;
}
table.diff pre {
  margin: 0 0 0 0;
}
tr.diffskip.jchunk {
  /* jchunk gets added from JS to diffskip rows when they are
     plugged into the /jchunk route and removed after that data
     is fetched. */
  background-color: aliceblue;
  padding: 0;
}
tr.diffskip.jchunk > td {
  padding: 0.25em 0.5em;
  margin: 0;
}
tr.diffskip.jchunk:hover {
  /*background-color: rgba(127,127,127,0.5);
  cursor: pointer;*/
}
tr.diffskip > td.chunkctrl {
  text-align: left;
  font-family: monospace;



}
tr.diffskip > td.chunkctrl > div {
  /* Exists solely for layout purposes. */
}
tr.diffskip > td.chunkctrl .button {
  min-width: 2.5em;
  max-width: 2.5em;
  text-align: center;
  display: inline-block;
  padding: 0.1em 1em;
  margin: 0 1em 0 0;
  background-color: rgba(127,127,127,0.2);
  border-style: outset;
  border-width: 0;
  /*border-width: 1px;
  border-color: rgba(0,0,0,0);*/
  border-radius: 0.5em;
  opacity: 0.7;
  /*filter: drop-shadow(0.08em 0.08em 0.08em black);*/
}
tr.diffskip > td.chunkctrl .button.up:not(.down){
  /* Simulate an arrow pointing up */
  border-radius: 3em 3em 0.25em 0.25em;
}
tr.diffskip > td.chunkctrl .button.down:not(.up){
  /* Simulate an arrow pointing down */
  border-radius: 0.25em 0.25em 3em 3em;
}
tr.diffskip > td.chunkctrl .button > span {
  /* In order to increase the glyph size w/o increasing the em-based
     button size or border-radius, we need an extra layer of DOM
     element for the glyph. */
  font-size: 150%;
}
tr.diffskip > td.chunkctrl .button.up:not(.down) > span::before {
  content: '⇡';

}
tr.diffskip > td.chunkctrl .button.down:not(.up) > span::before {

  content: '⇣';
}
tr.diffskip > td.chunkctrl .button.up.down > span::before {
  content: '⇡⇣';
}

tr.diffskip > td.chunkctrl .button:hover {
  /*border-color: rgba(75,75,75,1);*/
  cursor: pointer;
  opacity: 1;
  filter: contrast(3);
}
td.diffln {
  width: 1px;
  text-align: right;
  padding: 0 1em 0 0;
}
td.difflne {
  padding-bottom: 0.4em;
}
td.diffsep {
  width: 1px;
  padding: 0 0.3em 0 0.5em;
}
td.difftxt pre {
  overflow-x: auto;
}
td.diffln ins {
  background-color: #a0e4b2;
  text-decoration: none;

         */
      }
    });
  };
  
  /**
     Installs chunk-loading controls into TR element tr. isSplit is true
     if the parent table is a split diff, else false.


     The goal is to base these controls closely on github's, a good example
     of which, for use as a model, is:

     https://github.com/msteveb/autosetup/commit/235925e914a52a542

     Each instance corresponds to a single TR.diffskip element.
  */
  Diff.ChunkLoadControls = function(isSplit, tr){
    this.isSplit = isSplit;
    this.e = {/*DOM elements*/
      tr: tr
    };
    tr.$chunker = this /* keep GC from reaping this */;
    this.pos = {
      /* These line numbers correspond to the LHS file. Because the
         contents are common to both sides, we have the same number
         for the RHS, but need to extract those line numbers from the
         neighboring TR blocks */
      startLhs: +tr.dataset.startln,
      endLhs: +tr.dataset.endln
    };


    D.clearElement(tr);
    this.e.td = D.addClass(
      /* Holder for our UI controls */
      D.attr(D.td(tr), 'colspan', isSplit ? 5 : 4),
      'chunkctrl'
    );
    this.e.btnWrapper = D.div();
    D.append(this.e.td, this.e.btnWrapper);
    /**
       Depending on various factors, we need one or more of:

       - A single button to load the initial chunk incrementally

       - A single button to load all lines then remove this control

       - Two buttons: one to load upwards, one to load downwards

       - A single button to load the final chunk incrementally
    */
    if(tr.nextElementSibling){
      this.pos.next = {
        startLhs: extractLineNo(true, true, tr.nextElementSibling, isSplit),
        startRhs: extractLineNo(false, true, tr.nextElementSibling, isSplit)
      };
    }

       && ((this.pos.next.startLhs - this.pos.prev.endLhs)
           <= Diff.config.chunkLoadLines)){
      /* Place a single button to load the whole block, rather
         than separate up/down buttons. */
      btnDown = false;
      btnUp = D.append(
        D.addClass(D.span(), 'button', 'up', 'down'),
        D.span(/*glyph holder*/)
        //D.append(D.span(), this.config.glyphDown, this.config.glyphUp)
      );
    }else{
      /* Figure out which chunk-load buttons to add... */
      if(this.pos.prev){
        btnDown = D.append(
          D.addClass(D.span(), 'button', 'down'),
          D.span(/*glyph holder*/)
          //D.append(D.span(), this.config.glyphDown)
        );
      }
      if(this.pos.next){
        btnUp = D.append(
          D.addClass(D.span(), 'button', 'up'),
          D.span(/*glyph holder*/)
          //D.append(D.span(), this.config.glyphUp)
        );
      }
    }
    if(btnDown){
      D.append(this.e.btnWrapper, btnDown);
      btnDown.addEventListener('click', ()=>this.fetchChunk(1),false);
    }
    if(btnUp){
      D.append(this.e.btnWrapper, btnUp);
      btnUp.addEventListener(
        'click', ()=>this.fetchChunk(btnUp.classList.contains('down') ? 0 : -1),
        false);
    }
    /* For debugging only... */
    this.e.posState = D.span();
    D.append(this.e.btnWrapper, this.e.posState);
    this.updatePosDebug();
  };

  Diff.ChunkLoadControls.prototype = {
    config: {
      /*
      glyphUp: '⇡', //'&#uarr;',
      glyphDown: '⇣' //'&#darr;'
      */
    },
    updatePosDebug: function(){
      if(this.e.posState){
        D.append(D.clearElement(this.e.posState), JSON.stringify(this.pos));
      }
      return this;
    },
    
    destroy: function(){
      delete this.tr.$chunker;
      D.remove(this.e.tr);
      delete this.e;
      delete this.pos;
    },
    /**
       Creates and returns a new TR element, including its TD elements (depending
       on this.isSplit), but does not fill it with any information nor inject it
       into the table (it doesn't know where to do so).
    */
    newTR: function(){

      }else{
        D.append(D.addClass( D.td(tr), 'diffln', 'difflnl' ), D.pre());
        D.append(D.addClass( D.td(tr), 'diffln', 'difflnr' ), D.pre());
        D.addClass( D.td(tr), 'diffsep' );
        D.append(D.addClass( D.td(tr), 'difftxt', 'difftxtu' ), D.pre());
      }
      return tr;
    },

    fetchChunk: function(direction/*-1=prev, 1=next, 0=both*/){
      /* Forewarning, this is a bit confusing: when fetching the
         previous lines, we're doing so on behalf of the *next* diff
         chunk (this.pos.next), and vice versa. */
      if(this.isFetching) return this;
      if(direction<0/*prev chunk*/ && !this.pos.next){
        console.error("Attempt to fetch previous diff lines but don't have any.");
        return this;
      }else if(direction>0/*next chunk*/ && !this.pos.prev){
        console.error("Attempt to fetch next diff lines but don't have any.");
        return this;
      }
      console.debug("Going to fetch in direction",direction);
      this.updatePosDebug();
      return this;
    }
  };

  Diff.addDiffSkipHandlers = function(){
    const tables = document.querySelectorAll('table.diff[data-lefthash]:not(.diffskipped)');
    /* Potential performance-related TODO: instead of installing all
       of these at once, install them as the corresponding TR is


       scrolled into view. */


    tables.forEach(function(table){
      D.addClass(table, 'diffskipped'/*avoid processing these more than once */);
      const isSplit = table.classList.contains('splitdiff')/*else udiff*/;
      table.querySelectorAll('tr.diffskip[data-startln]').forEach(function(tr){

        new Diff.ChunkLoadControls(isSplit, D.addClass(tr, 'jchunk'));
      });
    });
    return F;
  };

  Diff.addDiffSkipHandlers();
});

/**
   2021-09-07: refactoring the following for use in the higher-level
   fossil.*.js framework is pending. For now it's a copy/paste copy
   of diff.js.