ajax_emit_js_preview_modes(0);
  chat_emit_alert_list();
  @ }, false);
  @ </script>
  builtin_request_js("fossil.page.chat.js");
  style_finish_page();
}

/*
** WEBPAGE: chat-search hidden loadavg-exempt
**
** Webpage allowing users to search the archive of chat messages using fts5.
*/
void chat_search_webpage(void){
  login_check_credentials();
  if( !g.perm.Chat ){
    login_needed(g.anon.Chat);
    return;
  }

  style_set_current_feature("chat");
  style_header("Chat Search");
  @
  @ <div id=results>
  @ </div>
  @ <div class='searchForm'>
  @   <input id=textinput type="text" name="s" size="40">
  @   <input id=searchbutton type="submit" value="Search">
  @ </div>
  builtin_fossil_js_bundle_or("popupwidget", "storage", "fetch",
                              "pikchr", "confirmer", "copybutton",
                              NULL);
  /* Always in-line the javascript for the chat page */
  @ <script nonce="%h(style_nonce())">/* chat.c:%d(__LINE__) */
  /* We need an onload handler to ensure that window.fossil is
     initialized before the chat init code runs. */
  @ window.addEventListener('load', function(){
  @ document.body.classList.add('chat');
  @ /*^^^for skins which add their own BODY tag */;
  // ajax_emit_js_preview_modes(0);
  // chat_emit_alert_list();
  @ }, false);
  @ </script>

  builtin_request_js("fossil.page.chatsearch.js");
  style_finish_page();
}

/* Definition of repository tables used by chat
*/
static const char zChatSchema1[] =
@ CREATE TABLE repository.chat(
@   msgid INTEGER PRIMARY KEY AUTOINCREMENT,
@   mtime JULIANDAY,  -- Time for this entry - Julianday Zulu

    db_multi_exec(zChatSchema1/*works-like:""*/);
  }else if( !db_table_has_column("repository","chat","lmtime") ){
    if( !db_table_has_column("repository","chat","mdel") ){
      db_multi_exec("ALTER TABLE chat ADD COLUMN mdel INT");
    }
    db_multi_exec("ALTER TABLE chat ADD COLUMN lmtime TEXT");
  }

  if( !db_table_exists("repository", "chatfts1") ){
    db_multi_exec( 
      "CREATE VIRTUAL TABLE chatfts1 USING fts5("
      "    xmsg, content=chat, content_rowid=msgid, tokenize=porter"
      ");"
      "CREATE TRIGGER chat_ai AFTER INSERT ON chat BEGIN "
      "  INSERT INTO chatfts1(rowid, xmsg) VALUES(new.msgid, new.xmsg);"
      "END;"
      "CREATE TRIGGER chat_ad AFTER DELETE ON chat BEGIN "
      "  INSERT INTO chatfts1(chatfts1, rowid, xmsg) "
      "    VALUES('delete', old.msgid, old.xmsg);"
      "END;"
      "INSERT INTO chatfts1(chatfts1) VALUES('rebuild');"
    );
  }
}

/*
** Delete old content from the chat table.
*/
static void chat_purge(void){
   int mxCnt = db_get_int("chat-keep-count",50);

  g.perm.Hyperlink = 1;
  for(i=0; i<g.argc; i++){
    zOut = chat_format_to_html(g.argv[i], 0);
    fossil_print("[%d]: %s\n", i, zOut);
    fossil_free(zOut);
  }
}

/*
**
*/
static int chat_poll_rowstojson(
  Stmt *p,                        /* Statement to read rows from */
  const char *zChatUser,          /* Current user */
  int bRaw,                       /* True to return raw format xmsg */
  Blob *pJson                     /* Append json array entries here */
){
  int cnt = 0;
  while( db_step(p)==SQLITE_ROW ){
    int isWiki = 0;             /* True if chat message is x-fossil-wiki */
    int id = db_column_int(p, 0);
    const char *zDate = db_column_text(p, 1);
    const char *zFrom = db_column_text(p, 2);
    const char *zRawMsg = db_column_text(p, 3);
    int nByte = db_column_int(p, 4);
    const char *zFName = db_column_text(p, 5);
    const char *zFMime = db_column_text(p, 6);
    int iToDel = db_column_int(p, 7);
    const char *zLMtime = db_column_text(p, 8);
    char *zMsg;
    if(cnt++){
      blob_append(pJson, ",\n", 2);
    }
    blob_appendf(pJson, "{\"msgid\":%d,", id);
    blob_appendf(pJson, "\"mtime\":\"%.10sT%sZ\",", zDate, zDate+11);
    if( zLMtime && zLMtime[0] ){
      blob_appendf(pJson, "\"lmtime\":%!j,", zLMtime);
    }
    blob_append(pJson, "\"xfrom\":", -1);
    if(zFrom){
      blob_appendf(pJson, "%!j,", zFrom);
      isWiki = fossil_strcmp(zFrom,zChatUser)==0;
    }else{
      /* see https://fossil-scm.org/forum/forumpost/e0be0eeb4c */
      blob_appendf(pJson, "null,");
      isWiki = 0;
    }
    blob_appendf(pJson, "\"uclr\":%!j,",
        isWiki ? "transparent" : user_color(zFrom ? zFrom : "nobody"));

    if(bRaw){
      blob_appendf(pJson, "\"xmsg\":%!j,", zRawMsg);
    }else{
      zMsg = chat_format_to_html(zRawMsg ? zRawMsg : "", isWiki);
      blob_appendf(pJson, "\"xmsg\":%!j,", zMsg);
      fossil_free(zMsg);
    }

    if( nByte==0 ){
      blob_appendf(pJson, "\"fsize\":0");
    }else{
      blob_appendf(pJson, "\"fsize\":%d,\"fname\":%!j,\"fmime\":%!j",
          nByte, zFName, zFMime);
    }

    if( iToDel ){
      blob_appendf(pJson, ",\"mdel\":%d}", iToDel);
    }else{
      blob_append(pJson, "}", 1);
    }
  }
  db_reset(p);

  return cnt;
}

/*
** WEBPAGE: chat-poll hidden loadavg-exempt
**
** The chat page generated by /chat using an XHR to this page to
** request new chat content.  A typical invocation is:
**

*/
void chat_poll_webpage(void){
  Blob json;                  /* The json to be constructed and returned */
  sqlite3_int64 dataVersion;  /* Data version.  Used for polling. */
  const int iDelay = 1000;    /* Delay until next poll (milliseconds) */
  int nDelay;                 /* Maximum delay.*/
  const char *zChatUser;      /* chat-timeline-user */

  int msgid = atoi(PD("name","0"));
  const int msgBefore = atoi(PD("before","0"));
  int nLimit = msgBefore>0 ? atoi(PD("n","0")) : 0;
  const int bRaw = P("raw")!=0;

  Blob sql = empty_blob;
  Stmt q1;

      msgid
    );
  }
  db_prepare(&q1, "%s", blob_sql_text(&sql));
  blob_reset(&sql);
  blob_init(&json, "{\"msgs\":[\n", -1);
  while( nDelay>0 ){
    int cnt = chat_poll_rowstojson(&q1, zChatUser, bRaw, &json);





















































    if( cnt || msgBefore>0 ){
      break;
    }
    sqlite3_sleep(iDelay); nDelay--;
    while( nDelay>0 ){
      sqlite3_int64 newDataVers = db_int64(0,"PRAGMA repository.data_version");
      if( newDataVers!=dataVersion ){
        dataVersion = newDataVers;
        break;
      }
      sqlite3_sleep(iDelay); nDelay--;
    }
  } /* Exit by "break" */
  db_finalize(&q1);
  blob_append(&json, "\n]}", 3);
  cgi_set_content(&json);
  return;
}


/*
** WEBPAGE: chat-query hidden loadavg-exempt
*/
void chat_query_webpage(void){
  Blob json;                  /* The json to be constructed and returned */
  int nLimit = atoi(PD("n","500"));
  const char *zQuery = PD("q", "");
  int iFirst = atoi(PD("i","0"));

  Blob sql = empty_blob;
  Stmt q1;
  i64 iMin = 0;
  i64 iMax = 0;

  login_check_credentials();
  if( !g.perm.Chat ) {
    chat_emit_permissions_error(1);
    return;
  }
  chat_create_tables();
  cgi_set_content_type("application/json");

  if( zQuery[0] ){
    iMax = db_int64(0, "SELECT max(msgid) FROM chat");
    iMin = db_int64(0, "SELECT min(msgid) FROM chat");
    blob_append_sql(&sql,
        "SELECT * FROM ("
        "SELECT c.msgid, datetime(c.mtime), c.xfrom, "
        "  highlight(chatfts1, 0, '<span class=match>', '</span>'), "
        "  octet_length(c.file), c.fname, c.fmime, c.mdel, c.lmtime"
        "  FROM chatfts1(%Q) f, chat c WHERE f.rowid=c.msgid "
        "  ORDER BY f.rowid DESC LIMIT %d"
        ") ORDER BY 1 ASC", zQuery, nLimit
    );
  }else{
    blob_append_sql(&sql,
        "SELECT msgid, datetime(mtime), xfrom, "
        "  xmsg, octet_length(file), fname, fmime, mdel, lmtime"
        "  FROM chat WHERE msgid>=%d LIMIT %d",
        iFirst, nLimit
    );
  }

  db_prepare(&q1, "%s", blob_sql_text(&sql));
  blob_reset(&sql);
  blob_init(&json, "{\"msgs\":[\n", -1);
  chat_poll_rowstojson(&q1, "", 0, &json);
  db_finalize(&q1);
  blob_appendf(&json, "\n], \"first\":%lld, \"last\":%lld}", iMin, iMax);
  cgi_set_content(&json);
  return;
}

/*
** WEBPAGE: chat-fetch-one hidden loadavg-exempt
**
** /chat-fetch-one/N
**
** Fetches a single message with the given ID, if available.
**

/*
** This file contains the client-side implementation of fossil's 
** /chat-search application.
*/
window.fossil.onPageLoad(function(){

  const F = window.fossil, D = F.dom;
  const E1 = function(selector){
    const e = document.querySelector(selector);
    if(!e) throw new Error("missing required DOM element: "+selector);
    return e;
  };

/************************************************************************/
/************************************************************************/
/************************************************************************/

  /**
     Custom widget type for rendering messages (one message per
     instance). These are modelled after FIELDSET elements but we
     don't use FIELDSET because of cross-browser inconsistencies in
     features of the FIELDSET/LEGEND combination, e.g. inability to
     align legends via CSS in Firefox and clicking-related
     deficiencies in Safari.
  */
  var MessageWidget = (function(){
    /**
       Constructor. If passed an argument, it is passed to
       this.setMessage() after initialization.
    */
    const cf = function(){
      this.e = {
        body: D.addClass(D.div(), 'message-widget'),
        tab: D.addClass(D.div(), 'message-widget-tab'),
        content: D.addClass(D.div(), 'message-widget-content')
      };
      D.append(this.e.body, this.e.tab, this.e.content);
      this.e.tab.setAttribute('role', 'button');
      if(arguments.length){
        this.setMessage(arguments[0]);
      }
    };

    /**
       Returns true if this page believes it can embed a view of the
       file wrapped by the given message object, else returns false.
    */
    const canEmbedFile = function f(msg){
      if(!f.$rx){
        f.$rx = /\.((html?)|(txt)|(md)|(wiki)|(pikchr))$/i;
        f.$specificTypes = [
          'text/plain',
          'text/html',
          'text/x-markdown',
          /* Firefox sends text/markdown when uploading .md files */
          'text/markdown',
          'text/x-pikchr',
          'text/x-fossil-wiki'
          // add more as we discover which ones Firefox won't
          // force the user to try to download.
        ];
      }
      if(msg.fmime){
        if(msg.fmime.startsWith("image/")
           || f.$specificTypes.indexOf(msg.fmime)>=0){
          return true;
        }
      }
      return (msg.fname && f.$rx.test(msg.fname));
    };

    /**
      Returns true if the given message object "should"
      be embedded in fossil-rendered form instead of
      raw content form. This is only intended to be passed
      message objects for which canEmbedFile() returns true.
    */
    const shouldWikiRenderEmbed = function f(msg){
      if(!f.$rx){
        f.$rx = /\.((md)|(wiki)|(pikchr))$/i;
        f.$specificTypes = [
          'text/x-markdown',
          'text/markdown' /* Firefox-uploaded md files */,
          'text/x-pikchr',
          'text/x-fossil-wiki'
          // add more as we discover which ones Firefox won't
          // force the user to try to download.
        ];
      }
      if(msg.fmime){
        if(f.$specificTypes.indexOf(msg.fmime)>=0) return true;
      }
      return msg.fname && f.$rx.test(msg.fname);
    };

    const adjustIFrameSize = function(msgObj){
      const iframe = msgObj.e.iframe;
      const body = iframe.contentWindow.document.querySelector('body');
      if(body && !body.style.fontSize){
        /** _Attempt_ to force the iframe to inherit the message's text size
            if the body has no explicit size set. On desktop systems
            the size is apparently being inherited in that case, but on mobile
            not. */
        body.style.fontSize = window.getComputedStyle(msgObj.e.content);
      }
      if('' === iframe.style.maxHeight){
        /* Resize iframe height to fit the content. Workaround: if we
           adjust the iframe height while it's hidden then its height
           is 0, so we must briefly unhide it. */
        const isHidden = iframe.classList.contains('hidden');
        if(isHidden) D.removeClass(iframe, 'hidden');
        iframe.style.maxHeight = iframe.style.height
          = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
        if(isHidden) D.addClass(iframe, 'hidden');
      }
    };
    
    cf.prototype = {
      scrollIntoView: function(){
        this.e.content.scrollIntoView();
      },
      setMessage: function(m){
        const ds = this.e.body.dataset;
        ds.timestamp = m.mtime;
        ds.lmtime = m.lmtime;
        ds.msgid = m.msgid;
        ds.xfrom = m.xfrom || '';

        if(m.uclr){
          this.e.content.style.backgroundColor = m.uclr;
          this.e.tab.style.backgroundColor = m.uclr;
        }
        const d = new Date(m.mtime);
        D.clearElement(this.e.tab);
        var contentTarget = this.e.content;
        var eXFrom /* element holding xfrom name */;
        var eXFrom = D.append(D.addClass(D.span(), 'xfrom'), m.xfrom);
        const wrapper = D.append(
            D.span(), eXFrom,
            D.text(" #",(m.msgid||'???'),' @ ',d.toLocaleString()));
        D.append(this.e.tab, wrapper);

        if( m.xfrom && m.fsize>0 ){
          if( m.fmime
              && m.fmime.startsWith("image/")
              /* && Chat.settings.getBool('images-inline',true) */
            ){
            const extension = m.fname.split('.').pop();
            contentTarget.appendChild(D.img("chat-download/" + m.msgid +(
              extension ? ('.'+extension) : ''/*So that IMG tag mimetype guessing works*/
            )));
            ds.hasImage = 1;
          }else{
            // Add a download link.
            const downloadUri = window.fossil.rootPath+
                  'chat-download/' + m.msgid+'/'+encodeURIComponent(m.fname);
            const w = D.addClass(D.div(), 'attachment-link');
            const a = D.a(downloadUri,
              // ^^^ add m.fname to URL to cause downloaded file to have that name.
              "(" + m.fname + " " + m.fsize + " bytes)"
            )
            D.attr(a,'target','_blank');
            D.append(w, a);
            if(canEmbedFile(m)){
              /* Add an option to embed HTML attachments in an iframe. The primary
                 use case is attached diffs. */
              const shouldWikiRender = shouldWikiRenderEmbed(m);
              const downloadArgs = shouldWikiRender ? '?render' : '';
              D.addClass(contentTarget, 'wide');
              const embedTarget = this.e.content;
              const self = this;
              const btnEmbed = D.attr(D.checkbox("1", false), 'id',
                                      'embed-'+ds.msgid);
              const btnLabel = D.label(btnEmbed, shouldWikiRender
                                       ? "Embed (fossil-rendered)" : "Embed");
              /* Maintenance reminder: do not disable the toggle
                 button while the content is loading because that will
                 cause it to get stuck in disabled mode if the browser
                 decides that loading the content should prompt the
                 user to download it, rather than embed it in the
                 iframe. */
              btnEmbed.addEventListener('change',function(){
                if(self.e.iframe){
                  if(btnEmbed.checked){
                    D.removeClass(self.e.iframe, 'hidden');
                    if(self.e.$iframeLoaded) adjustIFrameSize(self);
                  }
                  else D.addClass(self.e.iframe, 'hidden');
                  return;
                }
                const iframe = self.e.iframe = document.createElement('iframe');
                D.append(embedTarget, iframe);
                iframe.addEventListener('load', function(){
                  self.e.$iframeLoaded = true;
                  adjustIFrameSize(self);
                });
                iframe.setAttribute('src', downloadUri + downloadArgs);
              });
              D.append(w, btnEmbed, btnLabel);
            }
            contentTarget.appendChild(w);
          }
        }
        if(m.xmsg){
          if(m.fsize>0){
            /* We have file/image content, so need another element for
               the message text. */
            contentTarget = D.div();
            D.append(this.e.content, contentTarget);
          }
          D.addClass(contentTarget, 'content-target'
                     /*target element for the 'toggle text mode' feature*/);
          // The m.xmsg text comes from the same server as this script and
          // is guaranteed by that server to be "safe" HTML - safe in the
          // sense that it is not possible for a malefactor to inject HTML
          // or javascript or CSS.  The m.xmsg content might contain
          // hyperlinks, but otherwise it will be markup-free.  See the
          // chat_format_to_html() routine in the server for details.
          //
          // Hence, even though innerHTML is normally frowned upon, it is
          // perfectly safe to use in this context.
          if(m.xmsg && 'string' !== typeof m.xmsg){
            // Used by Chat.reportErrorAsMessage()
            D.append(contentTarget, m.xmsg);
          }else{
            contentTarget.innerHTML = m.xmsg;
            // contentTarget.querySelectorAll('a').forEach(addAnchorTargetBlank);
            if(F.pikchr){
              F.pikchr.addSrcView(contentTarget.querySelectorAll('svg.pikchr'));
            }
          }
        }
        //console.debug("tab",this.e.tab);
        //console.debug("this.e.tab.firstElementChild",this.e.tab.firstElementChild);
        // this.e.tab.firstElementChild.addEventListener('click', this._handleLegendClicked, false);
        /*if(eXFrom){
          eXFrom.addEventListener('click', ()=>this.e.tab.click(), false);
        }*/
        return this;
      }
    };
    return cf;
  })()/*MessageWidget*/;

/************************************************************************/
/************************************************************************/
/************************************************************************/

  var MessageSpacer = (function(){
    const nMsgContext = 5;
    const zUpArrow = '\u25B2';
    const zDownArrow = '\u25BC';

    const cf = function(o){

      /* iFirstInTable: 
      **   msgid of first row in chatfts table.
      **
      ** iLastInTable: 
      **   msgid of last row in chatfts table.
      **
      ** iPrevId:
      **   msgid of message immediately above this spacer. Or 0 if this
      **   spacer is above all results.
      **
      ** iNextId:
      **   msgid of message immediately below this spacer. Or 0 if this
      **   spacer is below all results.
      **
      ** bIgnoreClick:
      **   ignore any clicks if this is true. This is used to ensure there
      **   is only ever one request belonging to this widget outstanding
      **   at any time.
      */ 
      this.o = {
        iFirstInTable: o.first,
        iLastInTable: o.last,
        iPrevId: o.previd,
        iNextId: o.nextid,
        bIgnoreClick: false,
      };

      this.e = {
        body:    D.addClass(D.div(), 'spacer-widget'),

        above:   D.addClass(D.div(), 'spacer-widget-above'),
        buttons: D.addClass(D.div(), 'spacer-widget-buttons'),
        below:   D.addClass(D.div(), 'spacer-widget-below'),

        up:      D.button(zDownArrow+' Load '+nMsgContext+' more '+zDownArrow),
        down:    D.button(zUpArrow+' Load '+nMsgContext+' more '+zUpArrow),
        all:     D.button('Load More'),
      };

      D.addClass(this.e.up, 'up');
      D.addClass(this.e.down, 'down');
      D.addClass(this.e.all, 'all');

      D.append(this.e.buttons, this.e.up, this.e.down, this.e.all);
      D.append(this.e.body, this.e.above, this.e.buttons, this.e.below);

      this.e.up.style.float = 'left';
      this.e.down.style.float = 'left';
      this.e.all.style.float = 'left';
      this.e.below.style.clear = 'both';

      const ms = this;
      this.e.up.addEventListener('click', function(){
        ms.load_messages(false);
      });
      this.e.down.addEventListener('click', function(){
        ms.load_messages(true);
      });
      this.e.all.addEventListener('click', function(){
        ms.load_messages( (ms.o.iPrevId==0) );
      });

      this.set_button_visibility();
    };

    cf.prototype = {
      set_button_visibility: function() {
        var o = this.o;

        var iPrevId = (o.iPrevId!=0) ? o.iPrevId : o.iFirstInTable-1;
        var iNextId = (o.iNextId!=0) ? o.iNextId : o.iLastInTable+1;
        var nDiff = (iNextId - iPrevId) - 1;

        this.e.up.style.display = 'none';
        this.e.down.style.display = 'none';
        this.e.all.style.display = 'none';

        if( nDiff>0 ){

          if( nDiff>nMsgContext && (o.iPrevId==0 || o.iNextId==0) ){
            nDiff = nMsgContext;
          }

          if( nDiff<=nMsgContext && o.iPrevId!=0 && o.iNextId!=0 ){
            this.e.all.style.display = 'block';
            this.e.all.innerText = (
              zUpArrow + " Load " + nDiff + " more " + zDownArrow
            );
          }else{
            if( o.iPrevId!=0 ) this.e.up.style.display = 'block';
            if( o.iNextId!=0 ) this.e.down.style.display = 'block';
          }
        }
      },

      load_messages: function(bDown) {
        var iFirst = 0;           /* msgid of first message to fetch */
        var nFetch = 0;           /* Number of messages to fetch */
        var iEof = 0;             /* last msgid in spacers range, plus 1 */

        var e = this.e;
        var o = this.o;

        if( this.bIgnoreClick ) return;
        this.bIgnoreClick = true;

        /* Figure out the required range of messages. */
        if( bDown ){
          iFirst = this.o.iNextId - nMsgContext;
          if( iFirst<this.o.iFirstInTable ){
            iFirst = this.o.iFirstInTable;
          }
        }else{
          iFirst = this.o.iPrevId+1;
        }
        nFetch = nMsgContext;
        iEof = (this.o.iNextId > 0) ? this.o.iNextId : this.o.iLastInTable+1;
        if( iFirst+nFetch>iEof ){
          nFetch = iEof - iFirst;
        }


        const ms = this;
        F.fetch("chat-query",{
          urlParams:{
            q: '',
            n: nFetch,
            i: iFirst
          },
          responseType: "json",

          onerror:function(err){
            console.error(err);
            alert(err.toString());
          },

          onload:function(jx){
            
            const firstChildOfBelow = e.below.firstChild;
            jx.msgs.forEach((m) => {
              var mw = new MessageWidget(m);
              if( bDown ){
                e.below.insertBefore(mw.e.body, firstChildOfBelow);
              }else{
                D.append(e.above, mw.e.body);
              }
            });

            if( bDown ){
              o.iNextId -= jx.msgs.length;
            }else{
              o.iPrevId += jx.msgs.length;
            }

            ms.set_button_visibility();
            ms.bIgnoreClick = false;
          }
        });
      }
    };
    
    return cf;
  })(); /* MessageSpacer */

  /* This is called to submit a search - because the user clicked the
  ** search button or pressed Enter in the input box.
  */
  const submit_search = function() {
    const v = E1('#textinput').value;
    F.fetch("chat-query",{
      urlParams:{
        q: v
      },
      responseType: "json",

      onerror:function(err){
        console.error(err);
        alert(err.toString());
      },

      onload:function(jx){
        var res = E1('#results');
        var previd = 0;

        D.clearElement(res);
        jx.msgs.forEach((m) => {
          var mw = new MessageWidget(m);
          var spacer = new MessageSpacer({
            first: jx.first,
            last: jx.last,
            previd: previd,
            nextid: m.msgid
          });

          D.append( res, spacer.e.body );
          D.append( res, mw.e.body );

          previd = m.msgid;
        });

        if( jx.msgs.length>0 ){
          var spacer = new MessageSpacer({
            first: jx.first,
            last: jx.last,
            previd: previd,
            nextid: 0
          });
          D.append( res, spacer.e.body );
        } else {
          res.innerHTML = '<center><i>No query results</i></center>';
        }

        window.scrollTo(0, E1('body').scrollHeight);
      }
    });
  }

  /* Add event listeners to call submit_search() if the user presses Enter
  ** or clicks the search button.
  */ 
  E1('#searchbutton').addEventListener('click', function(){
    submit_search();
  });
  E1('#textinput').addEventListener('keydown', function(ev){
    if( 13==ev.keyCode ){
      /* If the key pressed was Enter */
      submit_search();
    }
  });

  /* Focus the input widget */
  E1('#textinput').focus();

});

  $(SRCDIR)/fossil.copybutton.js \
  $(SRCDIR)/fossil.diff.js \
  $(SRCDIR)/fossil.dom.js \
  $(SRCDIR)/fossil.fetch.js \
  $(SRCDIR)/fossil.numbered-lines.js \
  $(SRCDIR)/fossil.page.brlist.js \
  $(SRCDIR)/fossil.page.chat.js \
  $(SRCDIR)/fossil.page.chatsearch.js \
  $(SRCDIR)/fossil.page.fileedit.js \
  $(SRCDIR)/fossil.page.forumpost.js \
  $(SRCDIR)/fossil.page.pikchrshow.js \
  $(SRCDIR)/fossil.page.pikchrshowasm.js \
  $(SRCDIR)/fossil.page.whistory.js \
  $(SRCDIR)/fossil.page.wikiedit.js \
  $(SRCDIR)/fossil.pikchr.js \

  $(SRCDIR)/sounds/b.wav \
  $(SRCDIR)/sounds/c.wav \
  $(SRCDIR)/sounds/d.wav \
  $(SRCDIR)/sounds/e.wav \
  $(SRCDIR)/sounds/f.wav \
  $(SRCDIR)/style.admin_log.css \
  $(SRCDIR)/style.chat.css \
  $(SRCDIR)/style.chat-search.css \
  $(SRCDIR)/style.fileedit.css \
  $(SRCDIR)/style.pikchrshow.css \
  $(SRCDIR)/style.wikiedit.css \
  $(SRCDIR)/tree.js \
  $(SRCDIR)/useredit.js \
  $(SRCDIR)/wiki.wiki

/* Chat-related */
body.chat span.at-name { /* for @USERNAME references */
  text-decoration: underline;
  font-weight: bold;
}
/* A wrapper for a single single chat message (one row of the UI) */
body.chat .message-widget {
  margin-bottom: 0.75em;
  border: none;
  display: flex;
  flex-direction: column;
  border: none;
  align-items: flex-start;
}
body.chat button,
body.chat input[type=button] {
  line-height: inherit/*undo skin-specific funkiness*/;
}

body.chat.my-messages-right .message-widget.mine {
  /* Right-aligns a user's own chat messages, similar to how
     most/some mobile messaging apps do it. */
  align-items: flex-end;
}
body.chat.my-messages-right .message-widget.notification {
  /* Center-aligns a system-level notification message. */
  align-items: center;
}
/* The content area of a message. */
body.chat .message-widget-content {
  border-radius: 0.25em;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
  padding: 0.25em 0.5em;
  margin-top: 0;
  min-width: 9em /*avoid unsightly "underlap" with the neighboring
                   .message-widget-tab element*/;
  white-space: normal;
  word-break: break-word /* so that full hashes wrap on narrow screens */;
}

body.chat .message-widget-content.wide {
  /* Special case for when embedding content which we really want to
     expand, namely iframes. */
  width: 98%;
}
body.chat .message-widget-content label[for] {
  margin-left: 0.25em;
  cursor: pointer;
}
body.chat .message-widget-content > .attachment-link {
  display: flex;
  flex-direction: row;
}
body.chat .message-widget-content > .attachment-link > a {
  margin-right: 1em;
}
body.chat .message-widget-content > iframe {
  width: 100%;
  max-width: 100%;
  resize: both;
}
body.chat .message-widget-content> a {
  /* Cosmetic: keep skin-induced on-hover underlining from shifting
     content placed below this. */
  border-bottom: 1px transparent;
}
body.chat.monospace-messages .message-widget-content,
body.chat.monospace-messages .chat-input-field{
  font-family: monospace;  
}
body.chat .message-widget-content > * {
  margin: 0;
  padding: 0;
}
body.chat .message-widget-content > pre {
  white-space: pre-wrap;
}
body.chat .message-widget-content > .markdown > *:first-child {
  margin-top: 0;
}
body.chat .message-widget-content > .markdown > *:last-child {
  margin-bottom: 0;
}
body.chat .message-widget-content.error .buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}
body.chat .message-widget-content.error .buttons > button {
  margin: 0.25em;
}

body.chat .message-widget-content.error a {
  color: inherit;
}
body.chat .message-widget-content.error .failed-message {
  display: flex;
  flex-direction: column;
}
body.chat .message-widget-content.error .failed-message textarea {
  min-height: 5rem;
}

/* User name and timestamp (a LEGEND-like element) */
body.chat .message-widget .message-widget-tab {
  border-radius: 0.25em 0.25em 0 0;
  margin: 0 0.25em 0em 0.15em;
  padding: 0 0.5em 0.15em 0.5em;
  cursor: pointer;
  white-space: nowrap;
}
body.chat .fossil-tooltip.help-buttonlet-content {
  font-size: 80%;
}
body.chat .message-widget .message-widget-tab .xfrom {
  /* Element which holds the "this message is from user X" part
     of the message banner. */
  font-style: italic;
  font-weight: bold;
}
/* The popup element for displaying message timestamps
   and deletion controls. */
body.chat .chat-message-popup {
  font-family: monospace;
  font-size: 0.9em;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.25em;
  margin-top: 0.25em;
  border: 1px outset;
  border-radius: 0.5em;
}
/* Full message timestamps. */
body.chat .chat-message-popup > span { white-space: nowrap; }
/* Container for the message deletion buttons. */
body.chat .chat-message-popup > .toolbar {
  padding: 0;
  margin: 0;
  border: 2px inset rgba(0,0,0,0.3);
  border-radius: 0.25em;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  flex-wrap: wrap;
  align-items: center;
}
body.chat .chat-message-popup > .toolbar > * {
  margin: 0.35em;
}
body.chat .chat-message-popup > .toolbar > button {
  flex: 1 1 auto;
}
/* The widget for loading more/older chat messages. */
body.chat #load-msg-toolbar  {
  border-radius: 0.25em;
  padding: 0.1em 0.2em;
  margin-bottom: 1em;
}
/* .all-done is set when chat has loaded all of the available
   historical messages */
body.chat #load-msg-toolbar.all-done {
  opacity: 0.5;
}
body.chat #load-msg-toolbar > div {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  flex-wrap: wrap;
}
body.chat #load-msg-toolbar > div > button {
  flex: 1 1 auto;
}
/* "Chat-only mode" hides the site header/footer, showing only
   the chat app. */
body.chat.chat-only-mode{
  padding: 0;
  margin: 0 auto;
}
body.chat #chat-button-settings {}
/** Popup widget for the /chat settings. */
body.chat .chat-settings-popup {
  font-size: 0.8em;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.25em;
  z-index: 200;
}

/** Container for the list of /chat messages. */
body.chat #chat-messages-wrapper {
  overflow: auto;
  padding: 0 0.25em;
}
body.chat #chat-messages-wrapper.loading > * {
  /* An attempt at reducing flicker when loading lots of messages. */
  visibility: hidden;
}
body.chat div.content {
  margin: 0;
  padding: 0;
  display: block;
  flex-direction: column-reverse;
  /* ^^^^ In order to get good automatic scrolling of new messages on
     the BOTTOM in bottom-up chat mode, such that they scroll up
     instead of down, we have to use column-reverse layout, which
     changes #chat-messages-wrapper's "gravity" for purposes of
     scrolling! If we instead use flex-direction:column then each new
     message pushes #chat-input-area down further off the screen!
 */
  align-items: stretch;
}
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  flex: 0 1 auto;
}
body.chat:not(.chat-only-mode) #chat-input-area{
  /* Safari user reports that 2em is necessary to keep the file selection
     widget from overlapping the page footer, whereas a margin of 0 is fine
     for FF/Chrome (and 2em is a *huge* waste of space for those). */
  margin-bottom: 0;
}
.chat-input-field {
  flex: 10 1 auto;
  margin: 0;
}
#chat-input-field-x,
#chat-input-field-multi {
  overflow: auto;
  resize: vertical;
}
#chat-input-field-x {
  display: inline-block/*supposed workaround for Chrome weirdness*/;
  padding: 0.2em;
  background-color: rgba(156,156,156,0.3);
  white-space: pre-wrap;
  /* ^^^ Firefox, when pasting plain text into a contenteditable field,
     loses all newlines unless we explicitly set this. Chrome does not. */
  cursor: text;
  /* ^^^ In some browsers the cursor may not change for a contenteditable
     element until it has focus, causing potential confusion. */
}
#chat-input-field-x:empty::before {
  content: attr(data-placeholder);
  opacity: 0.6;
}
.chat-input-field:not(:focus){
  border-width: 1px;
  border-style: solid;
  border-radius: 0.25em;
}
.chat-input-field:focus{
  /* This transparent border helps avoid the text shifting around
     when the contenteditable attribute causes a border (which we
     apparently cannot style) to be added. */
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 0.25em;
}
/* Widget holding the chat message input field, send button, and
   settings button. */
body.chat #chat-input-line-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
}
body.chat.chat-only-mode #chat-input-line-wrapper {
  padding: 0 0.25em;
}

/*body.chat #chat-input-line-wrapper:not(.compact) {
  flex-wrap: nowrap;
}*/
body.chat #chat-input-line-wrapper.compact {
  /* "The problem" with wrapping, together with a contenteditable input
     field, is that the latter grows as the user types, so causes
     wrapping to happen while they type, then to unwrap as soon as the
     input field is cleared (when the message is sent). When we stay
     wrapped in compact mode, the wrapped buttons simply take up too
     much space. */
  /*flex-wrap: wrap;
  justify-content: flex-end;*/
  flex-direction: column;
  /**
     We "really do" need column orientation here because it's the
     only way to eliminate the possibility that (A) the buttons
     get truncated in very narrow windows and (B) that they keep
     stable positions.
 */
}
body.chat #chat-input-line-wrapper.compact #chat-input-field-x {
}

body.chat #chat-buttons-wrapper {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4em;
  min-height: 1.5em;
  align-self: flex-end
  /*keep buttons stable at bottom/right even when input field
    resizes */;
}
body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper {
  flex-direction: row;
  flex: 1 1 auto;
  align-self: stretch;
  justify-content: flex-end;
  /*flex-wrap: wrap;*/
  /* Wrapping would be ideal except that the edit widget
     grows in width as the user types, moving the buttons
     around */
}
body.chat #chat-buttons-wrapper > .cbutton {
  padding: 0;
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.25em;
  min-width: 4ex;
  max-width: 4ex;
  min-height: 3ex;
  max-height: 3ex;
  margin: 0.125em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 130%;
}
body.chat #chat-buttons-wrapper > .cbutton:hover {
  background-color: rgba(200,200,200,0.3);
}
body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper > .cbutton {
  margin: 2px 0.125em 0 0.125em;
  min-width: 6ex;
  max-width: 6ex;
  min-height: 2.3ex;
  max-height: 2.3ex;
  font-size: 120%;
}
body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper #chat-button-submit {
  min-width: 12ex;
}
.chat-input-field {
  font-family: inherit
}
body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-multi,
body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-x {
  min-height: 4rem;
/*
  Problems related to max-height:

  - If we do NOT set a max-height then pasting/typing a large amount
  of text can cause this element to grow without bounds, larger than
  the window, and there's no way to navigate it sensibly.  In this
  case, manually resizing the element (desktop only - mobile doesn't
  offer that) will force it to stay at the selected size even if more
  content is added to it later.

  - If we DO set a max-height then its growth is bounded but it also
  cannot manually expanded by the user.

  The lesser of the two evils seems to be to rely on the browser
  feature that a manual resize of the element will pin its size.
*/
}

body.chat #chat-input-line-wrapper > #chat-button-settings{
  margin: 0 0 0 0.25em;
  max-width: 2em;
}
body.chat #chat-input-line-wrapper > input[type=text],
body.chat #chat-input-line-wrapper > textarea {
  flex: 20 1 auto;
  max-width: revert;
  min-width: 20em;
}
body.chat #chat-input-line-wrapper.compact > input[type=text] {
  margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/;
}
/* Widget holding the file selection control and preview */
body.chat #chat-input-file-area  {
  display: flex;
  flex-direction: row;
  margin: 0;
}
body.chat #chat-input-file-area > .file-selection-wrapper {
  align-self: flex-start;
  margin-right: 0.5em;
  flex: 0 1 auto;
  padding: 0.25em 0.5em;
  white-space: nowrap;
}
body.chat #chat-input-file {
  border:1px solid rgba(0,0,0,0);/*avoid UI shift during drop-targeting*/
  border-radius: 0.25em;
  padding: 0.25em;
}
body.chat #chat-input-file > input {
  flex: 1 0 auto;
}
/* Indicator when a drag/drop is in progress */
body.chat #chat-input-file.dragover {
  border: 1px dashed green;
}
/* Widget holding the details of a selected/dropped file/image. */
body.chat #chat-drop-details {
  padding: 0 1em;
  white-space: pre;
  font-family: monospace;
  margin: auto;
  flex: 0;
}
body.chat #chat-drop-details:empty {
  padding: 0;
  margin: 0;
}
body.chat #chat-drop-details img {
  max-width: 45%;
  max-height: 45%;
}
body.chat .chat-view {
  flex: 20 1 auto
  /*ensure that these grow more than the non-.chat-view elements.
    Note that setting flex shrink to 0 breaks/disables scrolling!*/;
  margin-bottom: 0.2em;
}
body.chat #chat-config,
body.chat #chat-preview {
  /* /chat configuration widget */
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0;
  margin: 0;
  align-items: stretch;
  min-height: 6em;
}
body.chat #chat-config #chat-config-options {
  /* /chat config options go here */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  align-items: stretch;
}
body.chat #chat-config #chat-config-options .menu-entry {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  padding: 1em;
  flex: 1 1 auto;
  align-self: stretch;
}
body.chat #chat-config #chat-config-options .menu-entry.parent{
  border-radius: 1em 1em 0 1em;
  margin-top: 1em;
}
body.chat #chat-config #chat-config-options .menu-entry.child {
  /*padding-left: 2.5em;*/
  margin-left: 2em;
}
body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(even){
  background-color: rgba(175,175,175,0.15);
}
body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(odd){
  background-color: rgba(175,175,175,0.35);
}
body.chat #chat-config #chat-config-options .menu-entry:first-child {
  /* Config list header */
  border-radius: 0 0 1em 1em;
}
body.chat #chat-config #chat-config-options .menu-entry:first-child .label-wrapper {
  align-items: start;
}
body.chat #chat-config #chat-config-options .menu-entry > .toggle-wrapper {
  /* Holder for a checkbox, if any */
  min-width: 1.5rem;
  margin-right: 1rem;
}
body.chat #chat-config #chat-config-options .menu-entry .label-wrapper {
  /* Wrapper for a LABEL and a .hint element. */
  display: flex;
  flex-direction: column;
  align-self: baseline;
  flex: 1 1 auto;
}
body.chat #chat-config #chat-config-options .menu-entry label {
  /* Config option label. */
  font-weight: bold;
  white-space: initial;
}
body.chat #chat-config #chat-config-options .menu-entry label[for] {
  cursor: pointer;
}
body.chat #chat-config #chat-config-options .menu-entry .hint {
  /* Config menu hint text */
  font-size: 85%;
  font-weight: normal;
  white-space: pre-wrap;
  display: inline-block;
  opacity: 0.85;
}
body.chat #chat-config #chat-config-options .menu-entry select {
}
body.chat #chat-preview #chat-preview-content {
  overflow: auto;
  flex: 1 1 auto;
  padding: 0.5em;
  border: 1px dotted;
}
body.chat #chat-preview #chat-preview-content > * {
  margin: 0;
  padding: 0;
}
body.chat #chat-preview #chat-preview-buttons {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
}
body.chat #chat-config > button,
body.chat #chat-preview #chat-preview-buttons > button {
  padding: 0.5em;
  flex: 0 1 auto;
  margin: 0.25em 0;
}

body.chat #chat-user-list-wrapper {
  /* Safari can't do fieldsets right, so we emulate one. */
  border-radius: 0.5em;
  margin: 1em 0 0.2em 0;
  padding: 0 0.5em;
  border-style: inset;
  border-width: 0 1px 1px 1px/*else collides with the LEGEND*/;
}
body.chat #chat-user-list-wrapper.collapsed {
  padding: 0;
}
body.chat #chat-user-list-wrapper > .legend {
  font-weight: initial;
  padding: 0 0.5em 0 0.5em;
  position: relative;
  top: -1.75ex/* place it like a fieldset legend */;
  cursor: pointer;
}
body.chat #chat-user-list-wrapper > .legend > * {
  vertical-align: middle;
}
body.chat #chat-user-list-wrapper > .legend > *:nth-child(2){
  /* Title label */
  opacity: 0.6;
  font-size: 0.8em;
}
body.chat #chat-user-list-wrapper.collapsed > .legend > *:nth-child(2)::after {
  content: " (tap to toggle)";
}
body.chat #chat-user-list-wrapper .help-buttonlet {
  margin: 0;
}
body.chat #chat-user-list-wrapper.collapsed #chat-user-list {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
body.chat #chat-user-list {
  margin-top: -1.25ex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
body.chat #chat-user-list .chat-user {
  margin: 0.2em;
  padding: 0.1em 0.5em 0.2em 0.5em;
  border-radius: 0.5em;
  cursor: pointer;
  text-align: center;
  white-space: pre;
}
body.chat #chat-user-list .timestamp {
  font-size: 85%;
  font-family: monospace;
}
body.chat #chat-user-list:not(.timestamps) .timestamp {
  display: none;
}
body.chat #chat-user-list .chat-user.selected {
  font-weight: bold;
  text-decoration: underline;
}

body.chat.fossil-dark-style #chat-button-attach > svg {
  /* The black paperclip is barely visible in dark-mode
     skins when they have dark buttons */
  filter: invert(0.8);
}

body.chat .anim-rotate-360 {
  animation: rotate-360 750ms linear;
}
@keyframes rotate-360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
body.chat .anim-flip-h {
  animation: flip-h 750ms linear;
}
@keyframes flip-h{
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
body.chat .anim-flip-v {
  animation: flip-v 750ms linear;
}
@keyframes flip-v{
  from { transform: rotateX(0deg); }
  to { transform: rotateX(360deg); }
}
body.chat .anim-fade-in {
  animation: fade-in 750ms linear;
}
body.chat .anim-fade-in-fast {
  animation: fade-in 350ms linear;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.chat .anim-fade-out-fast {
  animation: fade-out 250ms linear;
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/***********************/

body.chat .message-widget .match {
  font-weight: bold;
  background-color: yellow;
}

body.chat .searchForm {
  margin-top: 1em;
}
body.chat .spacer-widget button {
  margin-left: 1ex;
  margin-right: 1ex;
}

body.chat .spacer-widget-buttons .up {
  margin-top: -0.75em;
  margin-bottom: 1em;
}
body.chat .spacer-widget-buttons .down {
  margin-top: 1em;
}
body.chat .spacer-widget-buttons .all {
  margin-bottom: 0.75em;
}