8kun Bakertools v0.7.2

/*
==8Kun Baker Tools v0.7.2==
We have entered the STORM. Be STRONG!
GOD WINS!  Pray MEME LOVE!

For God and Country! WWG1WGA

==Features:==
'''Post Highlighting'''
* Highlight posts that are marked notable (I.E. someone has replied and said
  notable) in light green
* Highlight nominating posts in dark green
* Highlight nominating posts in posts mentions in light green
* Highlight Q Posts in yellow
* Highlight Q posts in mentions (I.E. on posts that get (YOU)'ed)
* Highlight links to Q Posts in sparkle (Like q's trip)
* Highlight previous bread links in blue

'''Navigation'''
* Cycle through Q Posts
* Cycle through (You)'s
* Cycle through own posts
* Jump To Bottom Link
* Jump To Bottom Top link
* NEW IN v0.7.0 Jump to last reading location (like when you post and it
  sends you to bottom, you can jump right back)
* Easy access to Breads via Bread List window
* Scrollbar navigation shows location of Q/You/Notable/etc posts
  * NEW IN v0.7.0: Hover over post marker to preview post
  * Click on a post marker in scrollbar to jump to post

'''Filtering'''
* Filter to only nominating and notable posts, Q posts, Q replies
* Option to blur images until hover
* Image blacklist (AKA the NOPE button)
* NEW IN v0.7.0: SpamFader with multiple spam detection strategies:
  * NameFag strategy: Marks namefags as spam
  * Breadshitter strategy: Marks bread shitters as spam
  * High post count strategy: Marks those with high post count as spam
  * Flood fag strategy: Marks those who post in short intervals as spam
  * Mark user as not spam button
  * Spam badges tell WHY the algorithm marked as post as spam. TRANSPARENCY!

'''Customizable'''
* NEW IN v0.7.0: Customizable post highlighting colors
* Hide/Show features
* Settings saved in localStorage

'''Notables'''
* Generate notables post
* Adds "Notable Nomination" button to posts that opens the
  Quick Reply box and prefills it with a BAKER NOTABLE Template

'''Stats'''
  * Thread stats overlay with
    * color coded reply count that goes from green to red as bread ages
    * UID Count
  * Post rate chart shows how many posts per min

==To Install:==
1. Copy this source code
2. Go to 8kun
3. Click "Options" in the top right
4. Choose "User JS" tab
5. Paste Baker tools JS
6. WWG1WGA

==Changelog:==
'''0.7.2'''
* Use flex layout in bakerwindow controls
* Reorder navcontrols
* Reduce space of controls in boardlist
* Disable spamfader new post event listener on disable
* Don't mark q posts as notable
* Make windows resizable width, fix table formatting in breadlist
* Use boardlist height in current index calcs

'''0.7.1'''
* Fix notable navigation in boardlist checkbox not working
* Differentiate between previous and newer breads when highlighting

'''0.7.0'''
* Switched color scheme to match other tools
* Post Per Minute Graph
* Spam Fading with multiple strategies and spam badges to tell why post is spam
* Allow customization of post highligting colors
* Add go back to last reading location button
* Improve Q post detection (all past trip codes)
* Add post preview on hover to Scrollbar Navigation
* Navigation controls are now aware of current page location
* Bugfixes

'''0.6.0'''
* Navigation bar shows scroll location of q/you/notable
  posts and allows jumping to posts
* Notable navigation controls in baker window and board list
* Persistent Image Blacklist (AKA Nope Button)
* Many bugfixes

'''0.5.2'''
* Fixes bread list table population bug

'''0.5.0'''
* Option to show Q/(YOU)/Own Post navigation controls in the boardlist
* Option to hide Notable nomination button
* List of research breads
* BakerTools settings are now saved in local storage

'''0.4.0'''
* Option to blur images until hover
* Adds a "Notable Nomination" button to posts that opens the Quick Reply
  box and prefills it with a BAKER NOTABLE Template
* Add Q Post navigation links to the Baker Window
* Add (You) navigation links to the Baker Window
* Add own post navigation links to the Baker Window
* Cleaned up baker window design

* More code cleanup and linting changes

'''0.3.0'''
* Highlights Q Posts with white BG -> DARK TO LIGHT!
* Highlights Q posts in mentions (I.E. posts that get (YOU)'ed)
* Highlights links to Q Posts

* Refactored code into classes for easier maint.

'''0.2.0'''
* Highlight pb links
* Thread stats overlay with
    * color coded reply count that goes from green to red as bread ages
    * UID Count
    * Jump To Bottom Link
    * Jump To Bottom Top link

'''0.1.0'''
Initial release:
* Highlight notables and nominators
* Filter to only show notables and nominators
* Create notables post

Version History:
https://pastebin.com/dN5FhHCv 0.7.1
https://pastebin.com/6XuDuHYu 0.7.0
https://pastebin.com/YTSSmH7t 0.6.0
https://pastebin.com/mPVxr7Lz 0.5.2
https://pastebin.com/nEhm7yyY 0.5.1
https://pastebin.com/i9sF0Rd3 0.4.0
https://pastebin.com/kz9LrcE9 0.3.0
https://pastebin.com/4aEFsPwK 0.2.0
https://pastebin.com/eNmTtzdi 0.1.0
*/
(function($) {
"use strict";

/* globals $, board_name */
/* exported 8kun */

/**
 * Functions and vars related to EightKun functionality
 */
class EightKun {
  /**
   * Get reply links in post
   * @param {Element} post div.post
   * @return {JQuery}
   */
  static getReplyLinksFromPost(post) {
    return $(post).find(EightKun.REPLY_SELECTOR)
        .filter(function(idx, link) {
          return $(link).text().match(EightKun.REPLY_SHORTLINK_REGEX);
        });
  }

  /**
   * Get the post number that is being replied to
   * @param {Anchor} link
   * @return {string}
   */
  static getPostNumberFromReplyLink(link) {
    return $(link).text()
        .match(EightKun.REPLY_SHORTLINK_REGEX)[1];
  }

  /**
   * Get time of post
   * @param {Element} post div.post
   * @return {number} post time in unixtime
   */
  static getPostTime(post) {
    return $(post).find('.intro time').attr('unixtime');
  }

  /**
   * Get date of post
   * @param {Element} post div.post
   * @return {number} post time in unixtime
   */
  static getPostDateTime(post) {
    return $(post).find('.intro time').attr('datetime');
  }

  /**
   * Get poster id of provided post
   * @param {Element} post div.post
   * @return {string} id of poster
   */
  static getPosterId(post) {
    return $(post).find('p > span.poster_id').first().text();
  }

  /**
   * Get name from post
   * @param {Element} post div.post
   * @return {string} name of post
   */
  static getPostName(post) {
    return $(post).find('.intro > label > .name').text();
  }

  /**
   * Get trip from post
   * @param {Element} post div.post
   * @return {string} trip of post
   */
  static getPostTrip(post) {
    return $(post).find('.intro .trip').text();
  }

  /**
   * Get the opening post of the thread
   * @return {Element} div.post
   */
  static getOpPost() {
    return $(EightKun.OP_POST_SELECTOR);
  }

  /**
   * Get poster id of OP
   * @return {number} poster id
   */
  static getOpPosterId() {
    return EightKun.getPosterId(EightKun.getOpPost());
  }

  /**
   * Is the post made by op?
   * @param {Element} post div.post
   * @return {boolean} true if op's post
   */
  static isPostFromOp(post) {
    return EightKun.getPosterId(post) === EightKun.getOpPosterId();
  }

  /**
   * Get the thread id
   * @return {number} id of thread
   */
  static getThreadId() {
    return $('.thread').get(0).id.split('_')[1];
  }

  /**
   * Use 8kun hide function on post
   * @param {Element} post div.post
   */
  static hidePost(post) {
    // TODO: implement it and use in spam and blacklist
  }

  /**
   * Get current board
   * @return {string}
   */
  static getCurrentBoard() {
    /* eslint-disable camelcase */
    return board_name;
  }

  /**
   * Get post number of post
   * @param {Element} post div.post
   * @return {number} Number of the post
   */
  static getPostNumber(post) {
    return post.id.split('_')[1];
  }

  /**
   * Get the top boardlist element
   * @return {Element} div.boardlist
   */
  static getTopBoardlist() {
    return $(EightKun.TOP_BOARDLIST_SELECTOR).get(0);
  }
}
EightKun.POST_SELECTOR = 'div.post';
EightKun.POST_REPLY_SELECTOR = 'div.post.reply';
EightKun.OP_POST_SELECTOR = 'div.post.op';
EightKun.POST_BODY_SELECTOR = '.body';
EightKun.POST_MODIFIED_SELECTOR = '.post_modified';
EightKun.NEW_POST_EVENT = 'new_post';
EightKun.OP_SUBJECT_SELECTOR = '.post.op > p > label > span.subject';
EightKun.REPLY_SELECTOR = 'div.body:first a:not([rel="nofollow"])';
EightKun.REPLY_SHORTLINK_REGEX = /^>>(\d+)$/;
EightKun.REPLY_REGEX = /highlightReply\('(.+?)'/;
EightKun.BOARDLIST_SELECTOR = `.boardlist`;
EightKun.TOP_BOARDLIST_SELECTOR = `${EightKun.BOARDLIST_SELECTOR}:first`;

/**
 * Wrapper for 8kun active_page variable to determine the type of
 * page the user is on.
 */
class ActivePage {
  /**
   * Are we currently on the thread index page?
   * @return {boolean} True if on index
   */
  static isIndex() {
    return window.active_page == ActivePage.Index;
  }

  /**
   * Are we currently on the thread catalog page?
   * @return {boolean} True if on catalog
   */
  static isCatalog() {
    return window.active_page == ActivePage.Catalog;
  }

  /**
   * Are we on a thread page?
   * @return {boolean} True if on thread
   */
  static isThread() {
    return window.active_page == ActivePage.Thread;
  }
}
ActivePage.Index = 'index';
ActivePage.Catalog = 'catalog';
ActivePage.Thread = 'thread';


/* globals $ */
/* exported ColorPicker */

/**
 * A color picker control that saves to localStorage
 */
class ColorPicker {
  /**
   * Construct color picker
   *
   * @param {string} label The label for the control
   * @param {string} title Mouseover title
   * @param {string} setting localStorage setting name
   * @param {string} defaultValue the default color when setting is missing
   * @param {Function} changeHandler handler for value changes. Passes color
   */
  constructor(label, title, setting, defaultValue, changeHandler) {
    this.styleId = 'bakertools-colorpickers-styles';
    this.class = 'bakertools-colorpicker';
    this.labelClass = 'bakertools-colorpicker-label';
    this.inputClass = 'bakertools-colorpicker-input';
    this.resetButtonClass = 'bakertools-colorpicker-reset';
    this.changeHandler = changeHandler;

    this.label = label;
    this.title = title;
    this.setting = setting;
    this.defaultValue = defaultValue;
    this.strippedName = label.replace(/(\s|\(|\)|'|"|:)/g, '');
    this.defaultValue = defaultValue;

    this._createStyles();
    this._createElement();
  }

  /**
   * Create the HTML Element
   */
  _createElement() {
    this.element = $(`
    <div class='${this.class}'>
      <label class='${this.labelClass}'
        for="${this.strippedName}" title="${this.title}" >
        ${this.label}:
      </label>
    </div>
    `).get(0);

    this.input = $(`
    <input type="color" class='${this.inputClass}'
        id="${this.strippedName}" title="${this.title}" />
    `).get(0);
    $(this.element).append(this.input);

    $(this.input).change(function(e) {
      this.setColor(this.input.value);
    }.bind(this));

    this.reset = $(`
    <button class='${this.resetButtonClass}' title="Reset to Default">
      <i class="fa fa-undo"></i>
    </button>
    `).get(0);
    $(this.element).append(this.reset);

    $(this.reset).click(function(e) {
      e.preventDefault();
      this.setColor(this.defaultValue);
    }.bind(this));

    this.setColor(localStorage.getItem(this.setting) || this.defaultValue);
  }

  /**
   * Set the color
   * @param {string} color valid css color string
   */
  setColor(color) {
    localStorage.setItem(this.setting, color);
    this.input.value = color;
    this.changeHandler(color);
  }

  /**
   * Get the color
   * @return {string} color
   */
  getColor() {
    return this.input.value;
  }
  /**
   * Create styles for the control
   */
  _createStyles() {
    if ($(`#${this.styleId}`).length) {
      return;
    }
    $('head').append(`
    <style id='${this.styleId}'>
      .${this.class} {
        display: flex;
        align-items: center;
      }

      .${this.class} .${this.labelClass} {
        flex-grow: 1;
      }

      .${this.class} .${this.inputClass} {
        margin-right: .5em;
      }

      .${this.resetButtonClass} {
        padding: 0;
        background-color: Transparent;
        background-repeat: no-repeat;
        border: none;
        cursor: pointer;
        overflow: hidden;
        outline: none;
      }
    </style>
    `);
  }
}

/* global $, debounce, EightKun */
/**
 * Creates first, prev, next, last navigation controls
 */
class NavigationControl {
  /**
   * Construct navigatio control manager object
   *
   * @param {string} label the label for the control
   * @param {Function} updateFunction Called to get latest data
   * @param {string} updateEventName Called to get latest data
   */
  constructor(label, updateFunction, updateEventName) {
    const strippedName = label.replace(/(\s|\(|\)|'|"|:)/g, '');
    this.styleId = 'bakertools-navigationcontrol-styles';
    this.label = label;
    this.updateFunction = updateFunction;
    this.updateEventName = updateEventName;
    this.list = this.updateFunction();

    this.currentIndex = -1;
    const instanceId = $(NavigationControl.containerClass).length;
    this.navigationClass = `bakertools-navcontrol-${strippedName}`;
    this.indexChangeEvent =
      `bakertools-navcontrol-${strippedName}-index-changed`;

    this.currentIndexId = `${this.navigationClass}-current-index-${instanceId}`;
    this.currentIndexClass = `bakertools-navcontrol-current-index`;
    this.totalClass = `${this.navigationClass}-total`;
    this.goToFirstClass = `${this.navigationClass}-goto-first`;
    this.goToPreviousClass = `${this.navigationClass}-goto-prev`;
    this.goToNextClass = `${this.navigationClass}-goto-next`;
    this.goToLastClass = `${this.navigationClass}-goto-last`;


    this._setupStyles();
    this._createElement();
    this.updateIndexFromCurrentScrollPosition();
    this.updateIndexFromCurrentScrollPosition =
        debounce(this.updateIndexFromCurrentScrollPosition, 500);
    this._setupListeners();
  }

  // TODO: switch to flexbox layout
  /**
   * setup styles for nav control
   */
  _setupStyles() {
    if ($(`#${this.styleId}`).length) {
      return;
    }
    const boardListNavSelector =
      `${EightKun.BOARDLIST_SELECTOR} .${NavigationControl.containerClass}`;
    $('head').append(`
    <style id='${this.styleId}'>
    ${boardListNavSelector}:before {
      content: '[';
      color: #89A;
    }

    ${boardListNavSelector}:after {
      content: ']';
      color: #89A;
    }

    ${boardListNavSelector} {
      color: rgb(52, 52, 92);
    }
    </style>
    `);
  }

  /**
   * Create nav element
   */
  _createElement() {
    this.element = $(`
    <span title="Navigate ${this.label}"
        class="${NavigationControl.containerClass}">

        <label for="${this.navigationClass}">${this.label}:</label>
        <span class="${this.navigationClass}
                ${NavigationControl.navigationControlClass}">
                <i class="fa fa-angle-double-left ${this.goToFirstClass}"></i>
                <i class="fa fa-angle-left ${this.goToPreviousClass}"></i>

                <span class="${this.currentIndexClass}" id='${this.currentIndexId}'>
          ${this.currentIndex+1}
        </span>
        :
        <span class="${this.totalClass}">${this.list.length}</span>

        <i class="fa fa-angle-right ${this.goToNextClass}"></i>
        <i class="fa fa-angle-double-right ${this.goToLastClass}"></i>
      </span>
    </span>
    `).get(0);
  }

  /**
   * Setup button event listeners
   */
  _setupListeners() {
    $(this.element).find('.'+this.goToFirstClass).click(function(e) {
      this.goToFirstPost();
    }.bind(this));

    $(this.element).find('.'+this.goToPreviousClass).click(function(e) {
      this.goToPreviousPost();
    }.bind(this));

    $(this.element).find('.'+this.goToNextClass).click(function(e) {
      this.goToNextPost();
    }.bind(this));

    $(this.element).find('.'+this.goToLastClass).click(function(e) {
      this.goToLastPost();
    }.bind(this));

    $(document).on(this.indexChangeEvent, function(e, index) {
      if (this.currentIndex == index) return;
      this._setCurrentIndex(index);
    }.bind(this));

    $(document).on(this.updateEventName, function() {
      this.list = this.updateFunction();
      $(this.element).find(`.${this.totalClass}`).text(this.list.length);
    }.bind(this));

    $(document).scroll(this.updateIndexFromCurrentScrollPosition.bind(this));
  }

  /**
   * Determine the current index based on scroll position
   */
  updateIndexFromCurrentScrollPosition() {
    const boardListHeight = $(EightKun.getTopBoardlist()).height();
    for (let i = 0; i < this.list.length; ++i) {
      const post = this.list[i];
      const boundingRect = post.getBoundingClientRect();

      const postTopAboveBottomOfScreen = boundingRect.top < window.innerHeight;
      const postBottomBelowTopOfScreen = boundingRect.bottom > boardListHeight;
      const currentPostIsInViewport = postTopAboveBottomOfScreen &&
        postBottomBelowTopOfScreen;

      if (currentPostIsInViewport) {
        this._setCurrentIndex(i);
        break;
      }

      const isFirstPost = i === 0;
      const isBeforeFirstNotable = isFirstPost && !postTopAboveBottomOfScreen;
      if (isBeforeFirstNotable) {
        this._setCurrentIndex(-1);
        break;
      }

      const isLastPost = i === (this.list.length - 1);
      const isPastLastNotable = isLastPost && !postBottomBelowTopOfScreen;
      if (isPastLastNotable) {
        this._setCurrentIndex(i + .5);
        break;
      }

      const nextPost = this.list[i+1];
      const nextPostBounds = nextPost.getBoundingClientRect();
      const nextPostIsBelowBottomOfScreen =
        nextPostBounds.top >= window.innerHeight;
      const inBetweenPosts = !postBottomBelowTopOfScreen &&
        nextPostIsBelowBottomOfScreen;
      if (inBetweenPosts) {
        this._setCurrentIndex(i + .5);
        break;
      }
    }
  }

  /**
   * Scroll to first post
   */
  goToFirstPost() {
    if (!this.list.length) {
      return;
    }
    this._setCurrentIndex(0);
    this.scrollToCurrentPost();
  }

  /**
   * Scroll to next navigated post
   */
  goToPreviousPost() {
    if (!this.list.length) {
      return;
    }
    if (this.currentIndex <= 0) {
      this._setCurrentIndex(this.list.length - 1);
    } else {
      this._setCurrentIndex(Math.ceil(this.currentIndex) - 1);
    }
    this.scrollToCurrentPost();
  }
  /**
   * Scroll to next navigated post
   */
  goToNextPost() {
    if (!this.list.length) {
      return;
    }
    const lastPostIndex = this.list.length - 1;
    if (this.currentIndex >= lastPostIndex) {
      this._setCurrentIndex(0);
    } else {
      this._setCurrentIndex(Math.floor(this.currentIndex) + 1);
    }
    this.scrollToCurrentPost();
  }

  /**
   * Scroll the last  post in this bread into view
   */
  goToLastPost() {
    if (!this.list.length) {
      return;
    }
    const numPosts = this.list.length;
    this._setCurrentIndex(numPosts - 1);
    this.scrollToCurrentPost();
  }

  /**
   * Scrolls the current selected  post into view
   */
  scrollToCurrentPost() {
    const post = this.list[this.currentIndex];
    $(post).get(0).scrollIntoView();

    // Trigger events for other views of this data
    $(document).trigger(this.indexChangeEvent,
        this.currentIndex);

    const boardListHeight = $(EightKun.getTopBoardlist()).height();
    window.scrollBy(0, -boardListHeight);
  }

  /**
   * Set internal index var and UI
   * @param {number} index
   */
  _setCurrentIndex(index) {
    this.currentIndex = index;
    this._setCurrentIndexControlValue(index + 1);
  }

  /**
   * Sets the value of the current index in the UI
   * @param {number} val
   */
  _setCurrentIndexControlValue(val) {
    $('#'+this.currentIndexId).text(val);
  }
}
NavigationControl.containerClass = `bakertools-navcontrol-container`;
NavigationControl.navigationControlClass = 'bakertools-navigation-control';

/* global EightKun, $, NotableHighlighter */
/**
* Wrapper for a post nominated as notable
*/
class NotablePost {
  /**
   * Construct an empty notable post object
   */
  constructor() {
    this.element = null;
    this.postNumber = null;
    this.description = '[DESCRIPTION]';
    this.nominatingPosts = [];
  }

  /**
   * Create a notable post from a nominating post
   *
   * @param {Element} nominatingPost A post that is nominating a notable
   * @return {NotablePost} a Notable post or NullNotablePost if it fails
   */
  static fromNominatingPost(nominatingPost) {
    const notables = [];
    EightKun.getReplyLinksFromPost(nominatingPost)
        .each(function(idx, link) {
          const postNumber = EightKun.getPostNumberFromReplyLink(link);
          const notablePostElement = $(`#reply_${postNumber}`).get(0);
          if (window.bakerTools.qPostHighlighter.isQ(notablePostElement)) {
            return false;
          }
          if (!NotablePost.findNotableByPostNumber(postNumber)) {
            const notable = new NotablePost();

            if (notablePostElement) {
              notable.setElement(notablePostElement);
            } else {
              // TODO: set pb description
              // get the json from the post number
              notable.postNumber = postNumber;
            }
            notable.addNominatingPost(nominatingPost);

            NotablePost.addToListOfNotables(notable);
            notables.push(notable);

            if (notable.element) { // Not pb will need to figure something out
              $(document).trigger(NotablePost.NEW_NOTABLE_POST_EVENT,
                  notable.element);
            }
          }
        });
    return notables;
  }

  /**
   * Add notable to list, and sort list
   * @param {NotablePost} notable
   */
  static addToListOfNotables(notable) {
    NotablePost._notables.push(notable);
    NotablePost._notables.sort(function(n1, n2) {
      if (n1.postNumber < n2.postNumber) {
        return -1;
      } else if ( n1.postNumber > n2.postNumber) {
        return 1;
      }
      return 0;
    });
  }

  /**
   * Is this a NullNotablePost
   * @return {boolean} false
   */
  isNull() {
    return false;
  }

  /**
   * @return {Array<NotablePost>} Array of the current notables
   */
  static getNotables() {
    return NotablePost._notables;
  }

  /**
   * Get notable posts as regular 8kun div.post
   * @return {Array} of div.post
   */
  static getNotablesAsPosts() {
    return NotablePost._notables
        .filter((n) => n.element !== null)
        .map((n) => n.element);
  }

  /**
   * @arg {number} postNumber The post number of notable
   * @return {NotablePost}
   */
  static findNotableByPostNumber(postNumber) {
    return NotablePost._notables.find((notable) => notable.postNumber ==
      postNumber);
  }

  /**
   * Set the element of the post
   * @arg {Element} element
   */
  setElement(element) {
    this.element = element;
    this._markAsNotable(this.element);
    this.description = element.querySelector('.body')
        .innerText
        .replace(/\n/g, ' ');
    this.postNumber = $(this.element).find('.intro .post_no')
        .text()
        .replace('No.', '');
  }

  /**
   * Get the reply shortlink for the post
   * @return {string}
   */
  shortLink() {
    return '>>' + this.postNumber;
  }

  /**
   * Add a nominator to the notable
   *
   * @param {Element} nominatingPost A .div.post that nominates this post
   */
  addNominatingPost(nominatingPost) {
    this.nominatingPosts.push(nominatingPost);
    this._markAsNominator(nominatingPost);
    this._markNominatorInMentions(nominatingPost);
  }

  /**
   * @arg {Element} nominatorPost .post
   */
  _markAsNominator(nominatorPost) {
    nominatorPost.classList.add(NotableHighlighter.NOMINATOR_CLASS);
  }

  /**
   * @arg {Element} post .post
   */
  _markAsNotable(post) {
    post.classList.add(NotableHighlighter.NOTABLE_CLASS);
  }


  /**
   * Gives links to nominators a special style in notable mentions
   *
   * @param {Element} nominatingPost A .div.post that is nominating this
   *  notable
   */
  _markNominatorInMentions(nominatingPost) {
    if (!this.element) {
      console.info(`Notable post is null - possible pb/lb`);
      return;
    }
    const nominatingPostId = nominatingPost.id.replace('reply_', '');
    $(this.element).find('.mentioned-'+nominatingPostId)
        .addClass(NotableHighlighter.NOMINATOR_CLASS);
  }
}
NotablePost._notables = [];
NotablePost.NULL = null; // NullNotablePost
NotablePost.NEW_NOTABLE_POST_EVENT = 'bakertools-new-notable-post-event';

/* globals EightKun */
/**
 * Research Bread Class
 */
class ResearchBread {
  /**
   * Get an array of post bodies with dough posts filtered out
   * @return {NodeList} of .post elements
   */
  static getPostsWithoutDough() {
    const posts = Array.from(document
        .querySelectorAll(EightKun.POST_SELECTOR));

    const filteredPosts = posts.filter(function(post) {
      return !post.querySelector(EightKun.POST_BODY_SELECTOR)
          .innerText.match(ResearchBread.DOUGH_POSTS_REGEX);
    });

    return filteredPosts;
  }

  /**
   * Determine what the bread number is
   * @return {number} the number of the research bread
   */
  static getBreadNumber() {
    const breadNumberRegex = /#(.+?) /;
    return document.querySelector(EightKun.OP_SUBJECT_SELECTOR)
        .innerText
        .match(breadNumberRegex)[1] || 'COULD NOT FIND BREAD NUMBER';
  }

  /**
   * Find the post with the dough
   * @return {Element} div.post
   */
  static getDoughPost() {
    const posts = Array.from(document
        .querySelectorAll(EightKun.POST_SELECTOR));

    const dough = posts.find(function(post) {
      return post.querySelector(EightKun.POST_BODY_SELECTOR)
          .innerText.toUpperCase().match(ResearchBread.DOUGH_POST_TITLE);
    });
    return dough;
  }
}
ResearchBread.BOARD_NAME = 'qresearch';
ResearchBread.WELCOME_POST_TITLE = 'Welcome To Q Research General';
ResearchBread.ANNOUNCEMENTS_POST_TITLE = 'Global Announcements';
ResearchBread.WAR_ROOM_POST_TITLE = 'War Room';
ResearchBread.ARCHIVES_POST_TITLE = 'QPosts Archives';
ResearchBread.DOUGH_POST_TITLE = 'DOUGH';
ResearchBread.DOUGH_POSTS_REGEX = new RegExp(
    `^(${ResearchBread.WELCOME_POST_TITLE}|` +
    `${ResearchBread.ANNOUNCEMENTS_POST_TITLE}|` +
    `${ResearchBread.WAR_ROOM_POST_TITLE}|` +
    `${ResearchBread.ARCHIVES_POST_TITLE}|` +
    `${ResearchBread.DOUGH_POST_TITLE}).*`);


/* globals $, EightKun, debounce, POST_BACKGROUND_CHANGE_EVENT,
   BakerWindow */
/* exported ScrollbarNavigation */
/**
 * Scrollbar navigation
 */
class ScrollbarNavigation {
  /**
   * Construct a scrollbar nav
   * @param {Array} addPostEvents List of event names that produce posts
   *        to show on scrollbar
   */
  constructor(addPostEvents = []) {
    this.id = 'bakertools-scrollbar-navigation';
    this.showScrollbarNavigationId = 'bakertools-show-scrollbar-nav';
    this.width = '20px';
    this.posts = [];
    this.coordsToPost = new Map();
    this.addPostEvents = addPostEvents;

    this.draw = debounce(this.draw, 80);

    this._setupBakerWindowControls();
    this._setupStyles();
    this._createElement();
    this._readSettings();
    this._setupListeners();
  }

  /**
   * Read settings from localStorage
   */
  _readSettings() {
    let showScrollBar = JSON.parse(localStorage
        .getItem(ScrollbarNavigation.SHOW_SCROLLBAR_NAV));

    showScrollBar = showScrollBar === null ? true : showScrollBar;

    this.showScrollBar(showScrollBar);
  }

  /**
   * Add hide/show option to bakerwindow
   */
  _setupBakerWindowControls() {
    window.bakerTools.mainWindow
        .addNavigationOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for="${this.showScrollbarNavigationId}"
        title="Show scrollbar navigation" >
        Show Scrollbar Navigation:
      </label>
      <input type="checkbox" id="${this.showScrollbarNavigationId}"
        title="Show scrollbar navigation" /><br />
    </div>
    `);
  }

  /**
   * Setup event listeners
   */
  _setupListeners() {
    $('#'+this.showScrollbarNavigationId).change(function(e) {
      this.showScrollBar(e.target.checked);
    }.bind(this));

    $(document).on(EightKun.NEW_POST_EVENT, this.draw.bind(this));
    $(window).on('resize', this.draw.bind(this));
    $(window).on(POST_BACKGROUND_CHANGE_EVENT, this.draw.bind(this));

    $('#'+this.id).click(function(e) {
      const post = this.findFirstPostUnderMouse(e.clientX, e.clientY);
      if (post) {
        $(post).get(0).scrollIntoView();
        window.scrollBy(0, -20);
      }
    }.bind(this));

    $(this.element).mousemove(function(e) {
      const [post, coords] = this.findFirstPostUnderMouse(e.clientX, e.clientY);
      const notOverAPost = !post;
      const hoveringOverADifferentPost = this.hoveringPost &&
          this.hoveringPost != post;

      if (notOverAPost || hoveringOverADifferentPost) {
        this.endHover();
      }
      if (this.hovering) {
        return;
      }

      const top = coords.top;
      if (post) {
        this.postHover(post, top);
      }
    }.bind(this));

    $(this.element).mouseout(this.endHover.bind(this));

    this.addPostEvents.forEach(function(eventName) {
      $(document).on(eventName, function(event, posts) {
        this.addPosts(posts);
      }.bind(this));
    }.bind(this));
  }

  /**
   * Find the first post that is under the mouse
   * @param {number} clientX x location of mouse
   * @param {number} clientY y location of mouse
   * @return {Array} div.post, [top,bottom] or null if not found
   */
  findFirstPostUnderMouse(clientX, clientY) {
    let post = null;
    let coords = null;
    for (const keyValue of this.coordsToPost) {
      coords = keyValue[0];
      // if (clientY >= (top - 10) && clientY <= (bottom+10)) {
      if (clientY >= (coords.top) && clientY <= (coords.bottom)) {
        post = keyValue[1];
        break;
      }
    }
    return [post, coords];
  }

  /**
   * Perform post hover functionality for provided post
   * @param {Element} post div.post
   * @param {number} hoverY y location to hover at
   */
  postHover(post, hoverY) {
    this.hovering = true;
    this.hoveringPost = post;
    const $post = $(post);
    if ($post.is(':visible') &&
        $post.offset().top >= $(window).scrollTop() &&
        $post.offset().top + $post.height() <=
          $(window).scrollTop() + $(window).height()) {
      // post is in view
      $post.addClass('highlighted');
    } else {
      const newPost = $post.clone();
      newPost.find('>.reply, >br').remove();
      newPost.find('a.post_anchor').remove();

      const postNumber = EightKun.getPostNumber(post);
      newPost.attr('id', 'post-hover-' + postNumber)
          .attr('data-board', EightKun.getCurrentBoard())
          .addClass('post-hover')
          .css('border-style', 'solid')
          .css('box-shadow', '1px 1px 1px #999')
          .css('display', 'block')
          .css('position', 'absolute')
          .css('font-style', 'normal')
          .css('z-index', '100')
          .css('left', '0')
          .css('margin-left', '')
          .addClass('reply')
          .addClass('post')
          .appendTo('.thread');

      // shrink expanded images
      newPost.find('div.file img.post-image').css({
        'display': '',
        'opacity': '',
      });
      newPost.find('div.file img.full-image').remove();

      let previewWidth = newPost.outerWidth(true);
      const widthDiff = previewWidth - newPost.width();
      const scrollNavLeft = $(this.element).offset().left;
      let left;

      if (scrollNavLeft < $(document).width() * 0.7) {
        left = scrollNavLeft + $(this.element).width();
        if (left + previewWidth > $(window).width()) {
          newPost.css('width', $(window).width() - left - widthDiff);
        }
      } else {
        if (previewWidth > scrollNavLeft) {
          newPost.css('width', scrollNavLeft - widthDiff);
          previewWidth = scrollNavLeft;
        }
        left = scrollNavLeft - previewWidth;
      }
      newPost.css('left', left);

      const scrollTop = $(window).scrollTop();
      let top = scrollTop + hoverY;

      if (top < scrollTop + 15) {
        top = scrollTop;
      } else if (top > scrollTop + $(window).height() - newPost.height() - 15) {
        top = scrollTop + $(window).height() - newPost.height() - 15;
      }

      if (newPost.height() > $(window).height()) {
        top = scrollTop;
      }
      newPost.css('top', top);
    }
  }

  /**
   * End hovering
   */
  endHover() {
    this.hovering = false;
    if (!this.hoveringPost) {
      return;
    }

    $(this.hoveringPost).removeClass('highlighted');
    if ($(this.hoveringPost).hasClass('hidden')) {
      $(this.hoveringPost).css('display', 'none');
    }
    $('.post-hover').remove();
  }

  /**
   * Show/hide scrollbar
   * @param {boolean} shouldShow Shows if true
   */
  showScrollBar(shouldShow) {
    $('#'+this.showScrollbarNavigationId).prop('checked',
        shouldShow);

    localStorage.setItem(ScrollbarNavigation.SHOW_SCROLLBAR_NAV, shouldShow);

    if (shouldShow) {
      $(`#${this.id}`).show();
    } else {
      $(`#${this.id}`).hide();
    }
  }

  /**
   * Setup styles for canvas
   */
  _setupStyles() {
    $('head').append(`
    <style id='${this.id + '-style'}'>
      #${this.id} {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: ${this.width};
        background: #000000;
        background: linear-gradient(
          90deg,
          rgba(0,0,0,1) 0%,
          rgba(92,92,92,1) 50%,
          rgba(0,0,0,1) 100%
        );
      }
    </style>
    `);
  }

  /**
   * Create the canvas
   */
  _createElement() {
    $(document.body).append(`
      <canvas id='${this.id}' width='${this.width}' height='300'>
      </canvas>
    `);
    this.element = $(`#${this.id}`).get(0);
  }

  /**
   * Draw the scrollbar
   */
  draw() {
    const canvas = this.element;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext('2d');
    if (!ctx) {
      console.info('no ctx - is the element created yet?');
      return;
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const cachedHeight = $(document).height();
    const scrollHeight = canvas.height;

    this.coordsToPost = new Map();

    let lastCoords = null;
    this.posts.forEach(function(post, index) {
      const color = $(post).css('backgroundColor');
      const postRect = post.getBoundingClientRect();
      const scrollLocationPercentage =
          (window.scrollY + postRect.top) / cachedHeight;
      let drawLocation = scrollLocationPercentage * scrollHeight;

      const overlappingPrevious = lastCoords &&
          drawLocation <= (lastCoords.bottom + 2);
      if (overlappingPrevious) {
        drawLocation = lastCoords.bottom + 4;
      }
      const drawHeight = Math.max(
          (postRect.height / cachedHeight) * scrollHeight,
          5,
      );
      const coords = new ScrollbarCoordinates(drawLocation,
          drawLocation + drawHeight);
      this.coordsToPost.set(coords, post);

      ctx.fillStyle = color;
      ctx.fillRect(0, drawLocation, canvas.width, drawHeight);
      lastCoords = coords;
    }.bind(this));
  }

  /**
   * Add posts to scrollbar
   * @param {Element|Array} post div.post
   */
  addPosts(post) {
    if (Array.isArray(post)) {
      post.forEach((p) => this._addPost(p));
    } else {
      this._addPost(post);
    }
    this._sortPosts();
    this.draw();
  }

  /**
   * Add post to post array if not already included
   * @param {Element} post div.post
   */
  _addPost(post) {
    if (this.posts.includes(post)) {
      return;
    }
    this.posts.push(post);
  }

  /**
   * Sort posts by time
   */
  _sortPosts() {
    this.posts.sort(function(p1, p2) {
      const p1PostTime = EightKun.getPostTime(p1);
      const p2PostTime = EightKun.getPostTime(p2);
      if (p1PostTime < p2PostTime) {
        return -1;
      }
      if (p1PostTime > p2PostTime) {
        return 1;
      }
      return 0;
    });
  }
}
ScrollbarNavigation.SHOW_SCROLLBAR_NAV = 'bakertools-show-scrollbar-nav';

/**
 * Coordinates on the scrollbar
 */
class ScrollbarCoordinates {
  /**
   * Construct coords
   * @param {number} top top of rect
   * @param {number} bottom top of rect
   */
  constructor(top, bottom) {
    this.top = top;
    this.bottom = bottom;
  }
}

/* exported debounce, POST_BACKGROUND_CHANGE_EVENT */
/**
* Returns a function, that, as long as it continues to be invoked, will not
* be triggered. The function will be called after it stops being called for
* N milliseconds. If `immediate` is passed, trigger the function on the
* leading edge, instead of the trailing.
* https://davidwalsh.name/javascript-debounce-function
*
* @param {Function} func
* @param {number} wait
* @param {boolean} immediate
* @return {Function} debounced function
*/
function debounce(func, wait, immediate) {
  let timeout;
  return function(...args) {
    const context = this;
    const later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

const POST_BACKGROUND_CHANGE_EVENT = 'bakertools-post-background-change';

/* globals $, EightKun */
/* exported WindowElement */
/**
 * Class for windows
 */
class WindowElement {
  /**
   * Construct WindowElement
   * @param {string} windowName
   * @param {string} linkText
   */
  constructor(windowName, linkText) {
    this.styleId = 'bakertools-WindowElement-basestyles';
    this.id = `bakertools-${windowName}-window`;
    this.linkText = linkText;
    this.class = 'bakertools-WindowElement';
    this.headerClass = 'bakertools-WindowElement-header';
    this.windowCloseId = `bakertools-${windowName}-WindowElement-close`;
    this.windowCloseClass = `bakertools-WindowElement-close`;
    this.element = null;

    this._createWindowStyles();
    this._createElement();
    this._setupWindowLink();
  }

  /**
   * Create the window element
   */
  _createElement() {
    this.element = document.createElement('div');
    this.element.id = this.id;
    $(this.element).addClass(this.class);

    this.element.innerHTML = `
    <header class="${this.headerClass}">
      <h3>${this.linkText}</h3>
      <a id="${this.windowCloseId}" class='${this.windowCloseClass}'
        href="javascript:void(0)">
        <i class="fa fa-times"></i>
      </a>
    </header>
    `;
    document.body.appendChild(this.element);

    $(this.element).resizable({
      'handles': 'e, w',
    }).draggable();
    $(this.element).hide();

    $('#'+this.windowCloseId).click(function(e) {
      this.hide();
    }.bind(this));
  }

  /*
   * Create CSS styles needed by the window
   */
  _createWindowStyles() {
    if ($('#' + this.styleId).length) {
      return;
    }
    $('head').append(`
      <style id='${this.styleId}'>
      /*
       * ui-resizable styles: https://stackoverflow.com/a/11339280
       */
      .ui-resizable { position: relative;}
      .ui-resizable-handle {
        position: absolute;
        font-size: 0.1px;
        display: block;
      }
      .ui-resizable-disabled .ui-resizable-handle,
      .ui-resizable-autohide .ui-resizable-handle {
        display: none;
      }
      .ui-resizable-n {
        cursor: n-resize;
        height: 7px;
        width: 100%;
        top: -5px;
        left: 0;
      }
      .ui-resizable-s {
        cursor: s-resize;
        height: 7px;
        width: 100%;
        bottom: -5px;
        left: 0;
      }
      .ui-resizable-e {
        cursor: e-resize;
        width: 7px;
        right: -5px;
        top: 0;
        height: 100%;
      }
      .ui-resizable-w {
        cursor: w-resize;
        width: 7px;
        left: -5px;
        top: 0;
        height: 100%;
      }
      .ui-resizable-se {
        cursor: se-resize;
        width: 12px;
        height: 12px;
        right: 1px;
        bottom: 1px;
      }
      .ui-resizable-sw {
        cursor: sw-resize;
        width: 9px;
        height: 9px;
        left: -5px;
        bottom: -5px;
      }
      .ui-resizable-nw {
        cursor: nw-resize;
        width: 9px;
        height: 9px;
        left: -5px;
        top: -5px;
      }
      .ui-resizable-ne {
        cursor: ne-resize;
        width: 9px;
        height: 9px;
        right: -5px;
        top: -5px;
      }

      .${this.class} {
        width: 300px;
        background-color: rgb(214, 218, 240);
        position: fixed;
        z-index: 100;
        float: right;
        right:28.25px;
        border: 1px solid;
      }

      .${this.class} .${this.headerClass} {
        background: #98E;
        border: solid 1px;
        text-align: center;
        margin: 0px;
      }

      .${this.class} .${this.headerClass} h3 {
        margin: 0;
      }

      .${this.class} .${this.windowCloseClass} {
        top: 0px;
        right: 0px;
        position: absolute;
        margin-right: 3px;
        font-size: 20px;
      }

      .${this.class} details {
        padding: 5px;
      }

      .${this.class} summary {
        margin: 0 0 8px;
        font-weight: bold;
        border-bottom: solid 2px;
      }
    </style>
    `);
  }

  /**
   * Create link for show/hiding window, placed in boardlist bar
   */
  _setupWindowLink() {
    this.link = document.createElement('a');
    this.link.textContent = `[${this.linkText}]`;
    this.link.style.cssText = 'float: right;';
    this.link.title = this.linkText;
    this.link.href = 'javascript:void(0)';
    $(EightKun.getTopBoardlist()).append(this.link);

    this.link.onclick = this.toggle.bind(this);
  }

  /**
   * Setup timeout for updating bread list
   */
  _setupListeners() {
    // window.setTimeout(this.updateBreadList, 1000)
  }

  /**
   * Show the window
   */
  show() {
    $(this.element).css({'top': 15});
    $(this.element).show();
  }

  /**
   * Hide the window
   */
  hide() {
    $(this.element).hide();
  }

  /**
   * Is the window visible?
   * @return {boolean} true if window is visible
   */
  isVisible() {
    return $(this.element).is(':visible');
  }

  /**
   * Toggle visibility of window
   */
  toggle() {
    if (this.isVisible()) {
      this.hide();
    } else {
      this.show();
    }
  }
}

/* exported BakerWindow */
/* global NavigationControl, $, WindowElement */
/**
* Baker Window
*/
class BakerWindow extends WindowElement {
  /**
   * Construct Baker window element, register listeners
   */
  constructor() {
    super('baker', 'Baker Tools');
    this.bakerWindowStyleId = 'bakertools-bakerwindow-style';
    this.bakerWindowOptionsId = 'bakertools-window-options';
    this.bakerWindowColorOptionsId = 'bakertools-window-color-options';
    this.bakerWindowNavigationOptionsId =
        'bakertools-window-navigation-options';
    this.bakerWindowNotableOptionsId =
        'bakertools-window-notable-options';
    this.bakerWindowSpamOptionsId =
        'bakertools-window-spam-options';
    this.bakerWindowNavigationId = 'bakertools-window-navigation';
    this.bakerWindowBakerId = 'bakertools-window-baker';
    this.bakerWindowBodyId = 'bakertools-bakerwindow-body';

    this._createStyles();
    this._createBody();
  }

  /**
   * Create CSS styles needed by the window
   */
  _createStyles() {
    if ($('#' + this.bakerWindowStyleId).length) {
      return;
    }
    $('head').append(`
    <style id='${this.bakerWindowStyleId}'>
      #${this.id} #${this.bakerWindowNavigationId}
      .${NavigationControl.containerClass} {
        display: inline-block;
        width: 100%;
      }

      #${this.id} #${this.bakerWindowNavigationId}
      .${NavigationControl.navigationControlClass} {
        float: right;
      }

      ${BakerWindow.CONTROL_GROUP_SELECTOR} {
        display: flex;
      }

      ${BakerWindow.CONTROL_GROUP_SELECTOR} label {
        flex-grow: 1;
      }
    </style>
    `);
  }

  /**
   * Create the actual window HTML element
   */
  _createBody() {
    $('#'+this.id).append(`
    <form id="${this.bakerWindowBodyId}">
      <details id='${this.bakerWindowOptionsId}' open>
        <summary>Options</summary>
        <details id='${this.bakerWindowColorOptionsId}' open>
          <summary>Colors</summary>
        </details>
        <details id='${this.bakerWindowNavigationOptionsId}' open>
          <summary>Navigation</summary>
        </details>
        <details id='${this.bakerWindowNotableOptionsId}' open>
          <summary>Notables</summary>
        </details>
        <details id='${this.bakerWindowSpamOptionsId}' open>
          <summary>Spam</summary>
        </details>


      </details>
      <details id='${this.bakerWindowNavigationId}' open>
        <summary>Navigation</summary>
      </details>
      <details id='${this.bakerWindowBakerId}' open>
        <summary>Baker Tools</summary>
      </details>
    </form>
    `);
  }

  /**
   * Add form controls to options section of baker window
   * @arg {Element} htmlContentString form controls
   */
  addOption(htmlContentString) {
    $('#'+this.bakerWindowOptionsId).append(htmlContentString);
  }

  /**
   * Add form controls to notable options section of baker window
   * @arg {Element} htmlContentString form controls
   */
  addNotableOption(htmlContentString) {
    $('#'+this.bakerWindowNotableOptionsId)
        .append(htmlContentString);
  }

  /**
   * Add form controls to spam options section of baker window
   * @arg {Element} htmlContentString form controls
   */
  addSpamOption(htmlContentString) {
    $('#'+this.bakerWindowSpamOptionsId)
        .append(htmlContentString);
  }

  /**
   * Add form controls to navigation options section of baker window
   * @arg {Element} htmlContentString form controls
   */
  addNavigationOption(htmlContentString) {
    $('#'+this.bakerWindowNavigationOptionsId)
        .append(htmlContentString);
  }

  /**
   * Add form controls to color options section of baker window
   * @arg {Element} htmlContentString form controls
   */
  addColorOption(htmlContentString) {
    $('#'+this.bakerWindowColorOptionsId).append(htmlContentString);
  }


  /**
   * Add html elements to the navigation section of the baker window
   * @arg {Element} htmlContentString form controls
   */
  addNavigation(htmlContentString) {
    $('#'+this.bakerWindowNavigationId).append(htmlContentString);
  }

  /**
   * Add html elements to the baker section of the baker window
   * @arg {Element} htmlContentString form controls
   */
  addBaker(htmlContentString) {
    $('#'+this.bakerWindowBakerId).append(htmlContentString);
  }
} // end class BakerWindow
BakerWindow.CONTROL_GROUP_CLASS = 'bakertools-bakerwindow-control-group';
BakerWindow.CONTROL_GROUP_SELECTOR =
  `.${BakerWindow.CONTROL_GROUP_CLASS}`;

/* global $, BakerWindow */
/**
* Blur images until highlighted
*/
class BlurImages {
  /**
   * Construct blur images object and setup styles
   */
  constructor() {
    this.blurImages = 'bakertools-blur-images';
    this.blurImagesStyleId = 'bakertools-blur-images-style';
    window.bakerTools.mainWindow.addOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for="${this.blurImages}">Blur Images Until Hover</label>
      <input type="checkbox" id="${this.blurImages}"
        title="Blur images until mouse hover" /></br>
    </div>
    `);

    $('#'+this.blurImages).change(function(e) {
      this.setBlurImages(e.target.checked);
    }.bind(this));

    this._readSettings();
  }

  /**
   * Read settings from localStorage
   */
  _readSettings() {
    this.setBlurImages(JSON.parse(
        localStorage.getItem(
            BlurImages.BLUR_IMAGES_SETTING),
    ));
  }

  /**
   * Set whether or not images are blurred
   * @param {boolean} blurImages if true, blur images
   */
  setBlurImages(blurImages) {
    $('#'+this.blurImages).prop('checked',
        blurImages);

    localStorage.setItem(BlurImages.BLUR_IMAGES_SETTING,
        blurImages);

    if (blurImages) {
      $(`<style id='${this.blurImagesStyleId}' type='text/css'>
          .post-image {
              filter: blur(5px);
              transition: all 233ms;
          }
          .post-image:hover {
              filter: blur(.5px);
              transition: all 89ms;
          }
      </style>`).appendTo('head');
    } else {
      $(`#${this.blurImagesStyleId}`).remove();
    }
  }
}
BlurImages.BLUR_IMAGES_SETTING = 'bakertools-blur-images';



/* globals $, WindowElement, ResearchBread */
/* exported BreadList */
/**
 * Creates a list of breads for navigation comfyness
 */
class BreadList extends WindowElement {
  /**
   * Construct breadlist object
   */
  constructor() {
    super('breadlist', 'Bread List');
    $('#'+this.id).css('height', '400px');
    this.breadListWindowHeaderId = 'bakertools-breadlist-window-header';
    this.breadListWindowCloseId = 'bakertools-breadlist-window-close';
    this.breadListWindowBody = 'bakertools-breadlist-window-body';
    this.breadListTable = 'bakertools-breadlist-table';
    this.lastUpdatedId = 'bakertools-breadlist-lastupdated';

    this._breads = [];
    ResearchBread.BOARD_NAME = 'qresearch';
    this.breadRegex = /(.+)\s+#(\d+):\s+(.+?$)/;
    // /\(.+\) #\(\d+\): \(.+?$\)/;
    this.indexPage = `${window.location.protocol}//${window.location.host}` +
        `/${ResearchBread.BOARD_NAME}/`;

    this._createBody();
    this._setupStyles();
    this.updateBreadList();
    this._setupListeners();
  }

  /**
   * setup table styles
   */
  _setupStyles() {
    // https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body
    $('head').append(`
    <style id='baketools-breadlist-window-styles'>
      #${this.id} {
        right: 380px;
        width: 380px;
      }

      #${this.breadListWindowBody} {
        overflow-y: auto;
        height: 365px;
        font-size: .8em;
      }

      #${this.breadListTable} {
        border-collapse: collapse;
        border-spacing: 0px;
        margin: 0;
        width: 100%;
      }

      #${this.breadListTable} thead th {
        position: sticky;
        top: 0;
      }

      #${this.breadListTable} th,
      #${this.breadListTable} td {
        border: 1px solid #000;
        border-top: 0;
        padding: 1px 2px 1px 2px;
        margin: 0;
      }
      #${this.breadListTable} thead th {
        box-shadow: 1px 1px 0 #000;
      }
    </style>
    `);
  }

  /**
   * Create the actual window HTML element
   */
  _createBody() {
    $('#'+this.id).append(`
    <div id='${this.breadListWindowBody}'>
      <table id='${this.breadListTable}'>
        <thead>
          <tr>
            <th>Group</th>
            <th>No.</th>
            <th>Bread</th>
            <th>replies</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <footer>
      Last Updated: <span id="${this.lastUpdatedId}"></span>
    </footer>
    `);
  }

  /**
   * Setup timeout for updating bread list
   */
  _setupListeners() {
    window.setInterval(function(e) {
      this.updateBreadList();
    }.bind(this), 1000 * 60 * 2.5); // 2.5min update
  }

  /**
   * Get the list of breads
   */
  updateBreadList() {
    this.breads = [];

    const promises = [];
    for (let page = 0; page < 3; page++) {
      promises.push(
          $.getJSON(this.indexPage + `${page}.json`,
              this.parseIndex.bind(this)),
      );
    }
    Promise.all(promises).then(function() {
      this.breads.sort(function(a, b) {
        if (a.lastModified < b.lastModified) return -1;
        if (a.lastModified == b.lastModified) return 0;
        if (a.lastModified > b.lastModified) return 1;
      }).reverse();
      this.populateBreadTable();
    }.bind(this));
  }

  /**
   * Parse index json for breads
   * @param {Object} index
   */
  parseIndex(index) {
    if (index && index.threads) {
      index.threads.forEach(function(thread) {
        const op = thread.posts[0];
        const match = op.sub.match(this.breadRegex);

        if (match) {
          const researchGroup = match[1];
          const breadNumber = match[2];
          const breadName = match[3];
          this.breads.push(new Bread(
              ResearchBread.BOARD_NAME,
              researchGroup,
              breadNumber,
              breadName,
              op.replies,
              op.no,
              op.last_modified,
          ));
        }
      }.bind(this)); // Index foreach
    } // if index and index.threads
  }

  /**
   * Populate the bread list table
   */
  populateBreadTable() {
    $(`#${this.breadListTable} tbody`).empty();
    this.breads.forEach(function(bread) {
      this._addBread(bread);
    }.bind(this));

    const lastUpdated = new Date();
    $('#'+this.lastUpdatedId).text(lastUpdated.toLocaleString());
  }

  /**
   * Add bread
   * @param {Bread} bread
   */
  _addBread(bread) {
    $(`#${this.breadListTable} tbody`).append(`
      <tr>
        <td><a href='${bread.url}'>${bread.researchGroup}</a></td>
        <td><a href='${bread.url}'>${bread.researchNumber}</a></td>
        <td><a href='${bread.url}'>${bread.breadName}</a></td>
        <td><a href='${bread.url}'>${bread.replies}</a></td>
      </tr>
    `);
  }
}

/**
 * Represents a research bread
 */
class Bread {
  /**
   * Construct a bread
   *
   * @param {string} boardName
   * @param {string} researchGroup
   * @param {number} researchNumber
   * @param {string} breadName
   * @param {number} replies
   * @param {number} postId
   * @param {number} lastModified
   */
  constructor(boardName, researchGroup, researchNumber, breadName,
      replies, postId, lastModified) {
    this.boardName = boardName;
    this.researchGroup = researchGroup;
    this.researchNumber = researchNumber;
    this.breadName = breadName;
    this.replies = replies;
    this.postId = postId;
    this.lastModified = lastModified;
  }

  /**
   * Get bread url
   *
   * @return {string} url to bread
   */
  get url() {
    return `${window.location.protocol}//${window.location.host}` +
        `/${this.boardName}/res/${this.postId}.html`;
  }
}

/* global $, EightKun, BakerWindow */
/**
* Persistent image blacklist (AKA NOPE BUTTON)
*/
class ImageBlacklist {
  /**
   * Construct ImageBlacklist object
   */
  constructor() {
    this.blacklist = [];
    this.styleId = 'bakertools-blacklist-style';
    this.postBlacklistButtonClass = 'bakertools-blacklist-post';
    this.imgBlacklistButtonClass = 'bakertools-blacklist-image';
    this.hidePostBlacklistButtonCheckboxId =
        'bakertools-hide-post-blacklist-buttons';

    this._setupBakerWindowControls();
    this._readSettings();
    this._setupStyles();
    this._setupListeners();
    this.removeBlacklistedImages();
    this.addBlacklistButtons();
  }

  /**
   * Add options to baker window
   */
  _setupBakerWindowControls() {
    window.bakerTools.mainWindow.addSpamOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for="${this.hidePostBlacklistButtonCheckboxId}"
        title="Hide post 'Blacklist' buttons" >
        Hide "Blacklist" buttons
      </label>
      <input type="checkbox" id="${this.hidePostBlacklistButtonCheckboxId}"
        title="Hide post 'Blacklist' buttons" /><br />
      </div>
    `);
  }


  /**
   * Show or hide the post blacklist buttons
   *
   * @param {boolean} hide
   */
  hidePostBlacklistButton(hide) {
    $('#'+this.hidePostBlacklistButtonCheckboxId).prop('checked',
        hide);

    localStorage.setItem(ImageBlacklist.HIDE_POST_BLACKLIST_BUTTON_SETTING,
        hide);

    const styleId = 'baker-tools-post-blacklist-button-style';
    if (hide) {
      $('head').append(`
        <style id='${styleId}'>
          .${this.postBlacklistButtonClass} {
            display: none;
          }
      `);
    } else {
      $(`#${styleId}`).remove();
    }
  }

  /**
   * Setup styles for blacklist buttons
   */
  _setupStyles() {
    $('head').append(`
      <style id='${this.styleId}'>
        .${this.imgBlacklistButtonClass} {
          padding: 0px;
          background-color: Transparent;
          background-repeat: no-repeat;
          border: none;
          overflow: hidden;
          outline: none;
          cursor: pointer;
        }
      </style>
    `);
  }

  /**
   * Read settings from localstorage
   */
  _readSettings() {
    this.loadBlacklist();

    const hideBlacklistButton = JSON.parse(
        localStorage.getItem(ImageBlacklist.HIDE_POST_BLACKLIST_BUTTON_SETTING),
    );
    this.hidePostBlacklistButton(hideBlacklistButton);
  }

  /**
   * Setup new post event listeners
   */
  _setupListeners() {
    $(document).on(EightKun.NEW_POST_EVENT, function(e, post) {
      this.addBlacklistButtonToPost(post);
    }.bind(this));

    $('#'+this.hidePostBlacklistButtonCheckboxId).change(function(e) {
      this.hidePostBlacklistButton(e.target.checked);
    }.bind(this));
  }

  /**
   * Load blacklist from localStorage
   */
  loadBlacklist() {
    this.blacklist = JSON.parse(localStorage.imageBlacklist || '[]');
  }

  /**
   * Save blacklist to localStorage
   */
  saveBlacklist() {
    localStorage.imageBlacklist = JSON.stringify(this.blacklist);
  }

  /**
   * Add MD5 of an image to the blacklist
   * @param {string} md5 md5 hash of image
   */
  addToBlacklist(md5) {
    if (md5 && -1 === this.blacklist.indexOf(md5)) {
      this.blacklist.push(md5);
    }
  }

  /**
   * Blacklist images in post
   * @param {Element} post
   */
  blacklistPostImages(post) {
    $(post).find(ImageBlacklist.POST_IMG_SELECTOR).each(function(i, postImage) {
      const md5 = postImage.getAttribute('data-md5');
      this.addToBlacklist(md5);
      this.deletePostImage(postImage);
    }.bind(this));
  }

  /**
   * Remove blacklist images on page load
   * @return {number} number of images removed
   */
  removeBlacklistedImages() {
    let removed = 0;
    $(ImageBlacklist.POST_IMG_SELECTOR).each(function(i, postImage) {
      if (-1 !== this.blacklist.indexOf(postImage.getAttribute('data-md5'))) {
        this.deletePostImage(postImage);
        removed += 1;
      }
    }.bind(this));
    return removed;
  }

  /**
   * Add blacklist buttons to post images
   */
  addBlacklistButtons() {
    $('div.post').each(function(i, post) {
      this.addBlacklistButtonToPost(post);
    }.bind(this));
  }

  /**
   * Add blacklist buttons to post
   * @param {Element} post div.post
   */
  addBlacklistButtonToPost(post) {
    const postImageCount = $(post)
        .find(ImageBlacklist.POST_IMG_SELECTOR).length;

    if (postImageCount == 0) {
      return;
    }

    const postBlacklistButton = document.createElement('button');
    $(postBlacklistButton).addClass(this.postBlacklistButtonClass);
    $(postBlacklistButton).append(`
    <i class="fa fa-trash" style="color: crimson;"></i>
    Blacklist all post images`);

    $(postBlacklistButton).click(function(e) {
      e.preventDefault();
      $(post).hide();
      this.blacklistPostImages(post);
      this.saveBlacklist();
    }.bind(this));

    $(post).find(EightKun.POST_MODIFIED_SELECTOR).append(postBlacklistButton);

    $(post).find(ImageBlacklist.POST_IMG_SELECTOR).each(function(i, img) {
      const imgBlacklistButton = document.createElement('button');
      $(imgBlacklistButton).addClass(this.imgBlacklistButtonClass);
      $(imgBlacklistButton).append(`
      <i class="fa fa-trash" style="color: crimson;"
        title="Blacklist image"
        ></i>`);

      $(img)
          .parents('div.file')
          .find('.fileinfo')
          .prepend(imgBlacklistButton);

      $(imgBlacklistButton).click(function(e) {
        e.preventDefault();
        const md5 = img.getAttribute('data-md5');
        this.addToBlacklist(md5);
        this.deletePostImage(img);
        this.saveBlacklist();
      }.bind(this));
    }.bind(this));
  }

  /**
   * Delete post image
   * @param {Element} image
   */
  deletePostImage(image) {
    const imageParent = $(image).parent().parent();
    $(imageParent).append(`
      Image blacklisted
      ${image.getAttribute('data-md5')}
    `);
    $(image).remove();
  }
}
ImageBlacklist.POST_IMG_SELECTOR = 'img.post-image';
ImageBlacklist.HIDE_POST_BLACKLIST_BUTTON_SETTING =
  'bakertools-hide-post-blacklist-button';

/* global $, EightKun */
/**
* Add notable button to posts that opens quick reply
* and populates with a template message
*/
class NominatePostButtons {
  /**
   * Construct NPB object and setup listeners
   */
  constructor() {
    this.nominateButtonClass = 'bakertools-nominate-button';
    this.hidePostNotableButtonCheckboxId = 'bakertools-hide-notables';
    this.bakerNotableHeader = '==BAKER NOTABLE==\n';
    this.notableReasonPlaceholder = '[REASON FOR NOTABLE HERE]';

    $('div.post.reply').each(function(i, post) {
      this._addButtonToPost(post);
    }.bind(this));


    this._setupBakerWindowControls();
    this._setupListeners();
    this._readSettings();
  }

  /**
   * Read settings from localStorage
   */
  _readSettings() {
    this.showNotableNominationButton(JSON.parse(
        localStorage.getItem(
            NominatePostButtons.HIDE_NOMINATE_BUTTON_SETTING),
    ));
  }

  /**
   * Add options to baker window
   */
  _setupBakerWindowControls() {
    window.bakerTools.mainWindow.addNotableOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for="${this.hidePostNotableButtonCheckboxId}"
        title="Hide post 'Notable' buttons" >
        Hide "Notable" buttons
      </label>
      <input type="checkbox" id="${this.hidePostNotableButtonCheckboxId}"
        title="Hide post 'Notable' buttons" /><br />
    </div>
    `);
  }

  /**
   * Setup event listeners
   */
  _setupListeners() {
    $(document).on(EightKun.NEW_POST_EVENT, function(e, post) {
      this._addButtonToPost(post);
    }.bind(this));

    $('#'+this.hidePostNotableButtonCheckboxId).change(function(e) {
      this.showNotableNominationButton(e.target.checked);
    }.bind(this));
  }

  /**
   * Show or hide the notable nomination buttons
   *
   * @param {boolean} showNotableNominationButton
   */
  showNotableNominationButton(showNotableNominationButton) {
    $('#'+this.hidePostNotableButtonCheckboxId).prop('checked',
        showNotableNominationButton);

    localStorage.setItem(NominatePostButtons.HIDE_NOMINATE_BUTTON_SETTING,
        showNotableNominationButton);

    const styleId = 'baker-tools-notable-button-style';
    if (showNotableNominationButton) {
      $('head').append(`
        <style id='${styleId}'>
          .${this.nominateButtonClass} {
            display: none;
          }
      `);
    } else {
      $(`#${styleId}`).remove();
    }
  }


  /**
   * Add button to the provided post
   * @param {Element} post
   */
  _addButtonToPost(post) {
    const button = document.createElement('button');
    $(button).addClass(this.nominateButtonClass);
    $(button).append(`
      <i class="fa fa-star" style="color: goldenrod;"></i>
      Notable`);

    $(button).click(function(e) {
      const postNumber = $(post)
          .find('.intro .post_no')
          .text()
          .replace('No.', '');
      const href = $(post)
          .find('.intro .post_no')
          .get(0).href;

      // 8kun core - adds >>postnumber to- and unhides quickreply
      window.citeReply(postNumber, href);

      const quickReplyBody = $('#quick-reply #body');
      const oldText = quickReplyBody.val();

      quickReplyBody.val(oldText + this.bakerNotableHeader +
        this.notableReasonPlaceholder);

      // Don't ask me why i have to do this, ask CodeMonkeyZ
      // Not sure why citeReply which calls cite needs to set a timeout to
      // replace the body of the quickreply with itself.  We need to combat
      // that here
      // setTimeout(function() {
      //     var tmp = $('#quick-reply textarea[name="body"]').val();
      //     $('#quick-reply textarea[name="body"]').val('').focus().val(tmp);
      //  }, 1);
      // $(window).on('cite', function(e, id, with_link) {
      // TODO: Figure this out
      const self = this;
      setTimeout(function() {
        quickReplyBody.select();
        quickReplyBody.prop('selectionStart',
            oldText.length + self.bakerNotableHeader.length);
      }, 1.2);
    }.bind(this));

    $(post).find(EightKun.POST_MODIFIED_SELECTOR).append(button);
  }
}
NominatePostButtons.HIDE_NOMINATE_BUTTON_SETTING =
    'bakertools-hide-nominate-button';

/* global $, EightKun, ResearchBread,  NotablePost, NavigationControl,
 ColorPicker, POST_BACKGROUND_CHANGE_EVENT */
/**
* Makes notable posts easier to see by highlighting posts that anons nominate
* as notable.
*
* If someone replies to a post and their post contains the word 'notable',
* the replied to post will be considered notable.
*
* Both the notable post and the nominator posts will be highlighted, as well
* as the nominator link in the notable's mentions will be highlighted.
*/
class NotableHighlighter {
  /**
   * Construct notablehighlighter object, find and highlight
   * current notable sand setup listeners
   */
  constructor() {
    this.styleId = 'bakertools-notable-style';
    this.NOMINATING_REGEX = /notable/i;

    this.showOnlyNotablesCheckboxId = 'bakertools-show-only-notable';
    this.createNotablePostButtonId = 'bakertools-create-notable-post';
    this.notableEditorId = 'bakertools-notable-editor';
    this.showNotableNavigationInBoardListId =
        'bakertools-show-notable-nav-in-boardlist';

    this._createStyles();
    this._setupBakerWindowControls();
    this._readSettings();

    this.findNominatedNotables();
    this._setupListeners();
  }

  /**
   * Read settings from local storage
   */
  _readSettings() {
    this.setOnlyShowNotables(JSON.parse(
        localStorage.getItem(
            NotableHighlighter.ONLY_SHOW_NOTABLES_SETTING),
    ));
    this.showNotableNavigationInBoardList(JSON.parse(
        localStorage
            .getItem(NotableHighlighter.SHOW_NOTABLE_NAV_IN_BOARDLIST_SETTING),
    ));
  }

  /**
   * Create styles that determine how notables are highlighted
   */
  _createStyles() {
    const nominatorSelector =
      `${EightKun.POST_REPLY_SELECTOR}.${NotableHighlighter.NOMINATOR_CLASS}`;
    const notableSelector =
      `.thread ${EightKun.POST_REPLY_SELECTOR}` +
      `.${NotableHighlighter.NOTABLE_CLASS}`;
    $('head').append(`
    <style id='${this.styleId}'>
    ${notableSelector} {
      background-color: ${this.notableColor};
    }
    /* less specificity than notable so it has less preference */
    ${nominatorSelector} {
      background-color: ${this.nominatorColor};
    }
    div.post.reply .mentioned .${NotableHighlighter.NOMINATOR_CLASS} {
      color: ${this.nominatorMentionLinkColor};
      font-weight: bold;
      font-size: 1.5em;
    }
    ${notableSelector}.highlighted {
      background: #d6bad0;
    }
    ${nominatorSelector}.highlighted {
      background: #d6bad0;
    }
    </style>
    `);
  }

  /**
   * Add controls to the bakerwindow
   */
  _setupBakerWindowControls() {
    const notablePostsTitle = `Only show, notables, nominators, q, q replied
      posts`;

    const notableColorPicker = new ColorPicker(
        'Notable Post Color',
        'Set background color of notable Posts',
        NotableHighlighter.NOTABLE_COLOR_SETTTING,
        NotableHighlighter.DEFAULT_NOTABLE_COLOR,
        (color) => this.notableColor = color,
    );
    const nominatorColorPicker = new ColorPicker(
        'Nominator Color',
        'Set background color of nominator posts',
        NotableHighlighter.NOMINATOR_COLOR_SETTTING,
        NotableHighlighter.DEFAULT_NOMINATOR_COLOR,
        (color) => this.nominatorColor = color,
    );
    const nominatorMentionLinkColorPicker = new ColorPicker(
        'Nominator Mention Link Color',
        'Set color of nominator mention links',
        NotableHighlighter.NOMINATOR_MENTION_LINK_COLOR_SETTTING,
        NotableHighlighter.DEFAULT_NOMINATOR_MENTION_LINK_COLOR,
        (color) => this.nominatorMentionLinkColor = color,
    );

    window.bakerTools.mainWindow.addColorOption(notableColorPicker.element);
    window.bakerTools.mainWindow.addColorOption(nominatorColorPicker.element);
    window.bakerTools.mainWindow
        .addColorOption(nominatorMentionLinkColorPicker.element);

    window.bakerTools.mainWindow.addNotableOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for="${this.showOnlyNotablesCheckboxId}"
        title="${notablePostsTitle}" >
        Only Show Notable/Nomination Posts:
      </label>
      <input type="checkbox" id="${this.showOnlyNotablesCheckboxId}"
        title="${notablePostsTitle}" />
    </div>
    `);


    window.bakerTools.mainWindow.addBaker(`
    <button type="button" id="${this.createNotablePostButtonId}"
      title="Create notables list post based on current nominated notables" >
      Create Notable Post
    </button>
    <textarea id="${this.notableEditorId}"></textarea>
    `);

    window.bakerTools.mainWindow
        .addNavigationOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for="${this.showNotableNavigationInBoardListId}"
        title="Show navigation controls in board list bar" >
        Show Notable Nav in Board List:
      </label>
      <input type="checkbox" id="${this.showNotableNavigationInBoardListId}"
        title="Show navigation controls in board list bar" /><br />
    </div>
    `);

    this.navigation = new NavigationControl('Notables',
        () => NotablePost.getNotablesAsPosts(),
        NotablePost.NEW_NOTABLE_POST_EVENT);
    window.bakerTools.mainWindow
        .addNavigation(this.navigation.element);

    this.boardListNav = new NavigationControl('Notables',
        () => NotablePost.getNotablesAsPosts(),
        NotablePost.NEW_NOTABLE_POST_EVENT);

    $(EightKun.getTopBoardlist()).append(this.boardListNav.element);
    $(this.boardListNav.element).hide();
  }

  /**
   * Set the background color of notable posts
   * @param {string} color A valid css color value.
   *        E.G. ('#ff00ee', 'rgba()' or 'blue')
   */
  set notableColor(color) {
    this._notableColor = color;
    document.getElementById(this.styleId)
        .sheet.cssRules[0].style.background = color;
    $(document).trigger(POST_BACKGROUND_CHANGE_EVENT, color);
  }

  /**
   * Get color for notable post backgrounds
   */
  get notableColor() {
    return this._notableColor;
  }

  /**
   * Set the background color of nominator posts
   * @param {string} color A valid css color value.
   *        E.G. ('#ff00ee', 'rgba()' or 'blue')
   */
  set nominatorColor(color) {
    this._nominatorColor = color;
    document.getElementById(this.styleId)
        .sheet.cssRules[1].style.background = color;
    $(document).trigger(POST_BACKGROUND_CHANGE_EVENT, color);
  }

  /**
   * Get color for notable post backgrounds
   */
  get nominatorColor() {
    return this._nominatorColor;
  }

  /**
   * Set the color of nominator mention links posts
   * @param {string} color A valid css color value.
   *        E.G. ('#ff00ee', 'rgba()' or 'blue')
   */
  set nominatorMentionLinkColor(color) {
    this._nominatorMentionLinkColor = color;
    document.getElementById(this.styleId)
        .sheet.cssRules[2].style.color = color;
  }

  /**
   * Get color for notable post backgrounds
   */
  get nominatorMentionLinkColor() {
    return this._nominatorMentionLinkColor;
  }

  /**
   * Setup listeners for new posts, bakerwindow controls, etc
   */
  _setupListeners() {
    $('#'+this.showOnlyNotablesCheckboxId).change(function(e) {
      this.setOnlyShowNotables(e.target.checked);
    }.bind(this));

    $('#'+this.createNotablePostButtonId).click(function() {
      if ($('#'+this.notableEditorId).val()) {
        if (!confirm(`If you continue, any changes you made will be
            overwritten!`)) {
          return;
        }
      }
      $('#'+this.notableEditorId).val(this.createNotablesPost());
    }.bind(this));

    $(document).on(EightKun.NEW_POST_EVENT, function(e, post) {
      this.checkNewPostsForNotables(post);
    }.bind(this));

    $('#'+this.showNotableNavigationInBoardListId).change(function(e) {
      this.showNotableNavigationInBoardList(e.target.checked);
    }.bind(this));
  }

  /**
   * Show or hide notable nav control in the boardlist
   *
   * @param {boolean} show
   */
  showNotableNavigationInBoardList(show) {
    $('#'+this.showNotableNavigationInBoardListId).prop('checked',
        show);

    localStorage
        .setItem(NotableHighlighter.SHOW_NOTABLE_NAV_IN_BOARDLIST_SETTING,
            show);

    if (show) {
      $(this.boardListNav.element).show();
    } else {
      $(this.boardListNav.element).hide();
    }
  }

  /**
   * Create the notables post for review
   * @return {string} Returns the notable post string
   */
  createNotablesPost() {
    const notables = NotablePost.getNotables();
    const breadNumber = ResearchBread.getBreadNumber();
    let post = `'''#${breadNumber}'''\n\n`;

    notables.forEach(function(notable) {
      post += `${notable.shortLink()} ${notable.description}\n\n`;
    });

    return post;
  }

  /**
   * Checks a post for notable nominations
   * @param {Element} post
   */
  checkNewPostsForNotables(post) {
    $(post).removeAttr('style'); // TODO: try removing

    if (this.isNominatingPost(post)) {
      NotablePost.fromNominatingPost(post);
    }
  }

  /**
   * Finds posts that are being tagged as notable.
   *
   * I.E. Finding any post that has been replied to by a post with the string
   * "notable" in it. Maybe at somepoint this can be smarter.  Q give me some
   * dwave snow white tech!
   *
   * Highlights notable posts in yellow
   * Highlights nominating posts in pink <3
   * Highlights nominating posts in mentions
   * Add nominee count to post
   * @return {Array<NotablePost>}
   */
  findNominatedNotables() {
    const postsWithoutDough = ResearchBread.getPostsWithoutDough();

    // ^s to ignore notables review posts
    const nominatingPosts = postsWithoutDough
        .filter((post) => this.isNominatingPost(post));

    nominatingPosts.forEach(function(nominatingPost) {
      NotablePost.fromNominatingPost(nominatingPost);
    });
    console.log(NotablePost.getNotables());
    return NotablePost.getNotables();
  }

  /**
   * Is the post nominating a notable
   * @arg {Element} post .post
   * @return {boolean} True if post nominates a notable
   */
  isNominatingPost(post) {
    const postContainsNotable = post.textContent
        .search(this.NOMINATING_REGEX) != -1;
    const postIsReplying = EightKun.getReplyLinksFromPost(post).length;
    return postContainsNotable && postIsReplying;
  }

  /**
   * Toggle whether only the notable/nominee posts are shown or not
   * @arg {boolean} onlyShowNotables boolean If true, only show
   *               notables/nominators, else show all
   */
  setOnlyShowNotables(onlyShowNotables) {
    $('#'+this.showOnlyNotablesCheckboxId).prop('checked', onlyShowNotables);

    localStorage.setItem(NotableHighlighter.ONLY_SHOW_NOTABLES_SETTING,
        onlyShowNotables);

    const notableOrNominationPostsSelector =
      `div.post.${NotableHighlighter.NOTABLE_CLASS},
      div.post.${NotableHighlighter.NOMINATOR_CLASS}`;
    const notableOrNominationPostBreaksSelector =
      `div.post.${NotableHighlighter.NOTABLE_CLASS}+br,
      div.post.${NotableHighlighter.NOMINATOR_CLASS}+br`;
    const onlyShowNotablesStyleId = 'bakertools-only-show-notables';

    if (onlyShowNotables) {
      $(`<style id='${onlyShowNotablesStyleId}' type='text/css'>
        div.reply:not(.post-hover),
        div.post+br {
          display: none !important;
          visibility: hidden !important;
        }
        ${notableOrNominationPostsSelector},
        ${notableOrNominationPostBreaksSelector} {
          display: inline-block !important;
          visibility: visible !important;
        }
        </style>`).appendTo('head');
    } else {
      $(`#${onlyShowNotablesStyleId}`).remove();
      // For whatever reason, when the non notable posts are filtered and new
      // posts come through the auto_update, the posts are created with
      // style="display:block" which messes up display.  Remove style attr
      // TODO: can we remove this now that we have !important?
      $(EightKun.POST_SELECTOR).removeAttr('style');
    }
  }

  /**
   * Retrieves only show notable ssetting from localStorage
   * @return {boolean} true if only show notables is turned on
   */
  getOnlyShowNotables() {
    return localStorage
        .getItem(NotableHighlighter.ONLY_SHOW_NOTABLES_SETTING);
  }
}
NotableHighlighter.NOMINATOR_CLASS = 'bakertools-notable-nominator';
NotableHighlighter.NOTABLE_CLASS = 'bakertools-notable';
NotableHighlighter.ONLY_SHOW_NOTABLES_SETTING =
    'bakertools-only-show-notables';
NotableHighlighter.SHOW_NOTABLE_NAV_IN_BOARDLIST_SETTING =
    'bakertools-show-notable-nav-in-boardlist';
NotableHighlighter.NOMINATOR_COLOR_SETTTING =
    'bakertools-nominator-color';
NotableHighlighter.NOTABLE_COLOR_SETTTING =
    'bakertools-notable-color';
NotableHighlighter.NOMINATOR_MENTION_LINK_COLOR_SETTTING =
    'bakertools-nominator-metion-link-color';
NotableHighlighter.DEFAULT_NOTABLE_COLOR = '#E5FFCC';
NotableHighlighter.DEFAULT_NOMINATOR_COLOR = '#ACC395';
NotableHighlighter.DEFAULT_NOMINATOR_MENTION_LINK_COLOR = '#00CC00';

/* globals $, EightKun, debounce, BakerWindow */
/* exported PostRateChart */
/**
 * Displays chart of post/min
 */
class PostRateChart {
  /**
   * Construct a postrate chart
   */
  constructor() {
    this.containerClass = 'bakertools-postrate-container';
    this.chartClass = 'bakertools-postrate-chart';
    this.rateClass = 'bakertools-postrate-rate';
    this.styleId = 'bakertools-postrate-style';
    this.hidePostRateChartId = 'bakertools-postrate-hide-postrate';
    this.numberOfPostsForAverage = 10;
    this.numberOfDataPointsShownOnChart = 10;
    this.postTimes = [];
    this.postsPerMinuteHistory = [];
    this._setupStyles();
    this._setupBakerWindowControls();
    this._createElement();
    this._getExistingPostRates();
    this._setupListeners();
    this.draw();
    this.draw = debounce(this.draw, 1000 *2);
    this._readSettings();
  }

  /**
   * Read settings from local storage
   */
  _readSettings() {
    const hidePostRate = JSON.parse(localStorage
        .getItem(PostRateChart.HIDE_POSTRATE_SETTING));

    this.showPostRateChart(!hidePostRate);
  }

  /**
   * Setup chart styles
   */
  _setupStyles() {
    $('head').append(`
    <style id='${this.styleId}'>
    .${this.containerClass} {
      height: 20px;
      padding: 0;
      color: rgb(52, 52, 92);
    }

    .${this.chartClass} {
      border: 1px solid;
      vertical-align: middle;
      padding: 1px;
    }

    ${EightKun.BOARDLIST_SELECTOR} .${this.containerClass}:before {
      content: '[';
      color: #89A;
    }

    ${EightKun.BOARDLIST_SELECTOR} .${this.containerClass}:after {
      content: ']';
      color: #89A;
    }
    `);
  }

  /**
   * Add controls to the bakerwindow
   */
  _setupBakerWindowControls() {
    window.bakerTools.mainWindow.addOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for="${this.hidePostRateChartId}"
        title="Hide the postrate chart in boardlist" >
        Hide Post/Min Chart:
      </label>
      <input type="checkbox" id="${this.hidePostRateChartId}"
        title="Hide the postrate chart in boardlist" />
    </div>
    `);
  }


  /**
   * Setup listener to record post times
   */
  _setupListeners() {
    $(document).on(EightKun.NEW_POST_EVENT, function(idx, post) {
      this._addDataPointFromPost(post);
      this.draw();
    }.bind(this));

    $('#'+this.hidePostRateChartId).change(function(e) {
      this.showPostRateChart(!e.target.checked);
    }.bind(this));
  }

  /**
   * Show or hide post rate chart in the boardlist
   *
   * @param {boolean} show
   */
  showPostRateChart(show) {
    $('#'+this.hidePostRateChartId).prop('checked',
        !show);

    localStorage
        .setItem(PostRateChart.HIDE_POSTRATE_SETTING,
            !show);

    if (show) {
      $(this.element).show();
    } else {
      $(this.element).hide();
    }
  }

  /**
   * Create the canvas element
   */
  _createElement() {
    this.element = $(`
    <span class='${this.containerClass}' title = 'Posts Per Minute'>
      <span class='${this.rateClass}'>0</span> ppm
      <canvas class='${this.chartClass}'></canvas>
    </span>`,
    ).get(0);

    $(EightKun.getTopBoardlist()).append(this.element);

    this.canvas = $(this.element).find('canvas').get(0);

    this.canvas.height = 10;
    this.canvas.width = 100;
  }

  /**
   * Collect post rate data on posts at page load
   */
  _getExistingPostRates() {
    $('div.post').each(function(idx, post) {
      this._addDataPointFromPost(post);
    }.bind(this));
  }

  /**
   * Add a data point (aka the time a post was made)
   * @param {Element} post div.post
   */
  _addDataPointFromPost(post) {
    this.postTimes.push(EightKun.getPostTime(post));
    if (this._isEnoughDataToAverage()) {
      this._recordPostPerMinute();
    }
  }

  /**
   * Return true if theres enough data to perform averaging
   * @return {boolean} true if enough data
   */
  _isEnoughDataToAverage() {
    return this.postTimes.length > (this.numberOfPostsForAverage + 1);
  }

  /**
   * Record post per minute with the current set of post times
   * Calc is done with the last ${this.numberOfPostsForAverage} post times
   */
  _recordPostPerMinute() {
    const startPostIndex =
      this.postTimes.length - this.numberOfPostsForAverage - 1;
    const endPostIndex = this.postTimes.length - 1;
    const startPostTime = this.postTimes[startPostIndex];
    const endPostTime = this.postTimes[endPostIndex];

    const postsPerMinute =
        this.numberOfPostsForAverage / ((endPostTime - startPostTime) / 60);
    this.postsPerMinuteHistory.push(postsPerMinute);
  }

  /**
   * Draw the post rate chart
   */
  draw() {
    if (!this.postsPerMinuteHistory.length) {
      return;
    }

    const canvas = this.canvas;
    const ctx = canvas.getContext('2d');

    this._setPostRateText();

    const normalizedPostPerMinutes = this._normalizePostPerMinutes();

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = $(`${EightKun.BOARDLIST_SELECTOR} a`).css('color');
    ctx.beginPath();

    let x = 0;
    let y = canvas.height * normalizedPostPerMinutes[0];

    ctx.moveTo(x, y);
    normalizedPostPerMinutes.slice(1).forEach(function(ppm, i) {
      x = (i+1) * (canvas.width / this.numberOfDataPointsShownOnChart);
      y = canvas.height * ppm;
      ctx.lineTo(x, y);
    }.bind(this));
    ctx.stroke();
    ctx.closePath();
  }

  /**
   * Set the text label of current PPM
   */
  _setPostRateText() {
    const lastIndex = this.postsPerMinuteHistory.length-1;
    const currentPPM =
      this.postsPerMinuteHistory[lastIndex].toFixed(2);
    $(`.${this.rateClass}`).text(currentPPM);
  }

  /**
   * Normalize the data points to be within 0-1 range.
   * Slice the array to only contain the currently drawn slice
   * @return {Array}
   */
  _normalizePostPerMinutes() {
    const slicedArray =
      this.postsPerMinuteHistory.slice(-this.numberOfDataPointsShownOnChart);
    const maxPPM = Math.max(...slicedArray);
    const minPPM = Math.min(...slicedArray);
    const range = maxPPM - minPPM;
    return slicedArray.map(function(ppm) {
      return (ppm - minPPM) / range;
    });
  }
}
PostRateChart.HIDE_POSTRATE_SETTING =
  'bakertools-hide-postrate-chart';

/* global $, EightKun, ColorPicker */
/* exported PreviousBreadHighlighter */
/**
* Highlights previous bread post links
*/
class PreviousBreadHighlighter {
  /**
   * Construct pb highlighter object, setup listeners
   */
  constructor() {
    this.styleId = 'bakertools-previous-bread-styles';
    this.previousBreadClass = 'bakertools-PreviousBread';
    this.newerBreadClass = 'bakertools-NewBread';
    this._linkSelector = 'div.body > p.body-line.ltr > a';

    this._setupStyles();
    this._setupBakerWindowControls();

    const links = $(this._linkSelector).filter('[onClick]');
    links.each(function(index, link) {
      this.markLinkIfPreviousBread(link);
    }.bind(this));

    this._setupListeners();
  }

  /**
   * Setup color picker controls
   */
  _setupBakerWindowControls() {
    const colorPicker = new ColorPicker(
        'Previous Bread Link Color',
        'Set the color of links to previous breads',
        PreviousBreadHighlighter.PREVIOUS_BREAD_LINK_COLOR_SETTING,
        PreviousBreadHighlighter.DEFAULT_PREVIOUS_BREAD_LINK_COLOR,
        (color) => this.previousBreadLinkColor = color,
    );

    window.bakerTools.mainWindow.addColorOption(colorPicker.element);

    const newerBreadColorPicker = new ColorPicker(
        'Newer Bread Link Color',
        'Set the color of links to newer breads',
        PreviousBreadHighlighter.NEWER_BREAD_LINK_COLOR_SETTING,
        PreviousBreadHighlighter.DEFAULT_NEWER_BREAD_LINK_COLOR,
        (color) => this.newerBreadLinkColor = color,
    );

    window.bakerTools.mainWindow.addColorOption(newerBreadColorPicker.element);
  }

  /**
   * Set the  color of pb links
   * @param {string} color A valid css color value.
   *        E.G. ('#ff00ee', 'rgba()' or 'blue')
   */
  set previousBreadLinkColor(color) {
    this._previousBreadLinkColor = color;
    document.getElementById(this.styleId)
        .sheet.cssRules[0].style.color = color;
  }

  /**
   * Get color of pb links
   */
  get previousBreadLinkColor() {
    return this._previousBreadLinkColor;
  }

  /**
   * Set the  color of nb links
   * @param {string} color A valid css color value.
   *        E.G. ('#ff00ee', 'rgba()' or 'blue')
   */
  set newerBreadLinkColor(color) {
    this._newerBreadLinkColor = color;
    document.getElementById(this.styleId)
        .sheet.cssRules[2].style.color = color;
  }

  /**
   * Get color of nb links
   */
  get newerBreadLinkColor() {
    return this._newerBreadLinkColor;
  }

  /**
   * Setup styles for pb links
   */
  _setupStyles() {
    $('head').append(`
    <style id='${this.styleId}'>
    ${EightKun.POST_REPLY_SELECTOR} div.body a.${this.previousBreadClass} {
        color: ${this.previousBreadLinkColor};
    }
    a.${this.previousBreadClass}::after {
      content: " (pb)";
    }

    ${EightKun.POST_REPLY_SELECTOR} div.body a.${this.newerBreadClass} {
        color: ${this.newerBreadLinkColor};
    }
    a.${this.newerBreadClass}::after {
      content: " (nb)";
    }
    </style>
    `);
  }

  /**
   * Setup listeners for pb highlighting
   */
  _setupListeners() {
    $(document).on(EightKun.NEW_POST_EVENT, function(e, post) {
      $(post).find(this._linkSelector)
          .each((index, link) => this.markLinkIfPreviousBread(link));
    }.bind(this));
  }

  /**
   * Marks the link if it is pb
   *
   * @param {Anchor} link
   */
  markLinkIfPreviousBread(link) {
    const currentBreadNumber = document.location.pathname
        .split('/')
        .slice(-1)[0]
        .split('.')[0];
    const linkBreadNumber = link.href.split('/')
        .slice(-1)[0]
        .split('#')[0]
        .split('.')[0];

    const isAReplyLink = $(link)
        .attr('onclick')
        .search(EightKun.REPLY_REGEX) != 1;
    if (isAReplyLink &&
        currentBreadNumber > linkBreadNumber) {
      $(link).addClass(this.previousBreadClass);
    } else if (isAReplyLink &&
      currentBreadNumber < linkBreadNumber) {
      $(link).addClass(this.newerBreadClass);
    }
  }
}
PreviousBreadHighlighter.PREVIOUS_BREAD_LINK_COLOR_SETTING =
  'bakertools-previous-bread-link-color';
PreviousBreadHighlighter.DEFAULT_PREVIOUS_BREAD_LINK_COLOR =
  '#0000CC';
PreviousBreadHighlighter.NEWER_BREAD_LINK_COLOR_SETTING =
  'bakertools-newer-bread-link-color';
PreviousBreadHighlighter.DEFAULT_NEWER_BREAD_LINK_COLOR =
  '#00CC00';

/* global $, EightKun, ResearchBread, NavigationControl,
 ColorPicker, POST_BACKGROUND_CHANGE_EVENT, BakerWindow */
/**
* Highlight Q posts, replies to q, q replies.
* Adds navigation to baker window
*/
class QPostHighlighter {
  /**
   * Construct qposthighlighter object and setup listeners
   */
  constructor() {
    this.styleId = 'bakertools-q-style';
    this.qPostClass = 'bakertools-q-post';
    this.qReplyClass = 'bakertools-q-reply';
    this.qMentionClass = 'bakertools-q-mention';
    this.qLinkClass = 'bakertools-q-link';
    this.styleId = 'bakertools-q-styles';
    this._linkSelector = 'div.body > p.body-line.ltr > a';
    this.showQNavigationInBoardListId =
        'bakertools-show-q-nav-in-boardlist';

    this.currentQTripCode = null;

    this._setupStyles();
    this._setupBakerWindowControls();
    this._readSettings();
    this._findQPosts();
    this._setupListeners();
  }

  /**
   * Read settings from localStorage
   */
  _readSettings() {
    this.showQNavigationInBoardList(JSON.parse(
        localStorage
            .getItem(QPostHighlighter.SHOW_Q_NAV_IN_BOARDLIST_SETTING),
    ));
  }

  /**
   * Setup styles for highlighting q posts
   */
  _setupStyles() {
    $('head').append(`
    <style id='${this.styleId}'>
     ${EightKun.POST_REPLY_SELECTOR}.${this.qPostClass} {
      background: ${this.qPostColor};
      display: inline-block !important;
      visibility: visible !important;
    }

    ${EightKun.POST_REPLY_SELECTOR}.${this.qReplyClass} {
      background: ${this.qYouColor};
      display: inline-block !important;
      visibility: visible !important;
    }

    ${EightKun.POST_REPLY_SELECTOR}.${this.qPostClass}.highlighted {
      background: #d6bad0;
    }

    ${EightKun.POST_REPLY_SELECTOR} .intro .${this.qMentionClass},
    .${this.qLinkClass} {
      padding:1px 3px 1px 3px;
      background-color:black;
      border-radius:8px;
      border:1px solid #bbbbee;
      color:gold;
      background: linear-gradient(300deg, #ff0000, #ff0000, #ff0000, #bbbbbb,
                #4444ff);
      background-size: 800% 800%;

      -webkit-animation: Patriot 5s ease infinite;
      -moz-animation: Patriot 5s ease infinite;
      -o-animation: Patriot 5s ease infinite;
      animation: Patriot 5s ease infinite;
      -webkit-text-fill-color: transparent;

      background: -o-linear-gradient(transparent, transparent);
      -webkit-background-clip: text;
    }
    </style>
    `);
  }

  /**
   * Set the background color of q posts
   * @param {string} color A valid css color value.
   *        E.G. ('#ff00ee', 'rgba()' or 'blue')
   */
  set qPostColor(color) {
    this._qPostColor = color;
    document.getElementById(this.styleId)
        .sheet.cssRules[0].style.background = color;
    $(document).trigger(POST_BACKGROUND_CHANGE_EVENT, color);
  }

  /**
   * Get color for q post backgrounds
   */
  get qPostColor() {
    return this._qPostColor;
  }

  /**
   * Set the background color of q posts
   * @param {string} color A valid css color value.
   *        E.G. ('#ff00ee', 'rgba()' or 'blue')
   */
  set qYouColor(color) {
    this._qYouColor = color;
    document.getElementById(this.styleId)
        .sheet.cssRules[1].style.background = color;
    $(document).trigger(POST_BACKGROUND_CHANGE_EVENT, color);
  }

  /**
   * Get bg color for posts q replies to
   */
  get qYouColor() {
    return this._qYouColor;
  }

  /**
   * Get Q's current trip code from the bread
   */
  _getCurrentQTripFromBread() {
    const tripCodeMatch = $(EightKun.getOpPost())
        .text()
        .match(/Q's Trip-code: Q (.+?\s)/);

    if (!tripCodeMatch) {
      console.error('Could not find Q\'s tripcode');
      return;
    }
    this.currentQTripCode = tripCodeMatch[1].split(' ')[0];
  }

  /**
   * Find current Q posts in bread
   */
  _findQPosts() {
    const posts = ResearchBread.getPostsWithoutDough();

    $(posts).each(function(i, post) {
      this._doItQ(post);
    }.bind(this));
  }

  /**
   * Check if the post is Q
   * WWG1WGA
   *
   * @param {Element} post a div.post
   */
  _doItQ(post) {
    if (this._markIfQPost(post)) { // Q Post, lets check for q replies
      const qPostNumber = $(post)
          .find('.intro .post_no')
          .text()
          .replace('No.', '');

      const links = $(post)
          .find(this._linkSelector)
          .filter('[onClick]');

      $(links).each(function(i, link) {
        const postNumber = link.href.split('#')[1];
        // Enlightened post
        $(`#reply_${postNumber}`).addClass(this.qReplyClass);

        const metionLinkSelector = `#reply_${postNumber} .intro .mentioned a`;
        $(metionLinkSelector).each(function(i, mentionAnchor) {
          const mentionPostNumber = $(mentionAnchor).text().replace('>>', '');
          if (mentionPostNumber == qPostNumber) {
            $(mentionAnchor).addClass(this.qMentionClass);
          }
        }.bind(this));
      }.bind(this));
    } else { // Not Q, but lets check if this post replies to Q
      const links = $(post).find(this._linkSelector).filter('[onClick]');

      $(links).each(function(i, link) {
        const postNumber = link.href.split('#')[1];
        const replyPost = document.querySelector(`#reply_${postNumber}`);
        // TODO: need to handle pb posts
        if (this.isQ(replyPost)) {
          $(link).addClass(this.qLinkClass);
        }
      }.bind(this));
    }
  }

  /**
   * @arg {Element} post div.post.reply
   * @return {boolean} true if it is a q post
   */
  _markIfQPost(post) {
    let isQ = false;
    if (this.isQ(post)) {
      isQ = true;
      $(post).addClass(this.qPostClass);
      QPostHighlighter.qPosts.push(post);

      $(document).trigger(QPostHighlighter.NEW_Q_POST_EVENT, post);
    }
    return isQ;
  }

  /**
   * Is the post Q?
   * @param {Element} post a div.post.reply
   * @return {boolean} true if the post is Q
   */
  isQ(post) {
    const qTripHistory = QTripCodeHistory.INSTANCE;
    const dateOfPost = new Date(EightKun.getPostDateTime(post));
    const expectedQTripBasedOnDate = qTripHistory.getTripCodeByDate(dateOfPost);
    if (!expectedQTripBasedOnDate) {
      console.info(`Could not find Q trip code for date: ${dateOfPost}`);
      return false;
    }

    return EightKun.getPostTrip(post) == expectedQTripBasedOnDate.tripCode;
  }

  /**
   * Add Q post navigation to bakerwindow
   */
  _setupBakerWindowControls() {
    window.bakerTools.mainWindow
        .addNavigationOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for="${this.showQNavigationInBoardListId}"
        title="Show navigation controls in board list bar" >
        Show Q Nav in Board List:
      </label>
      <input type="checkbox" id="${this.showQNavigationInBoardListId}"
        title="Show navigation controls in board list bar" /><br />
    </div>
    `);

    this.navigation = new NavigationControl('Q Posts',
        () => QPostHighlighter.qPosts, QPostHighlighter.NEW_Q_POST_EVENT);
    window.bakerTools.mainWindow
        .addNavigation(this.navigation.element);

    this.boardListNav = new NavigationControl('Q',
        () => QPostHighlighter.qPosts, QPostHighlighter.NEW_Q_POST_EVENT);

    $(EightKun.getTopBoardlist()).append(this.boardListNav.element);
    $(this.boardListNav.element).hide();

    const qColorPicker = new ColorPicker(
        'Q Post Color',
        'Set background color of Q Posts',
        QPostHighlighter.Q_POST_COLOR_SETTING,
        QPostHighlighter.DEFAULT_Q_POST_COLOR,
        (color) => this.qPostColor = color,
    );
    const qYouColorPicker = new ColorPicker(
        'Q (You) Color',
        'Set background color of posts Q Replies to',
        QPostHighlighter.Q_YOU_POST_COLOR_SETTING,
        QPostHighlighter.DEFAULT_Q_YOU_POST_COLOR,
        (color) => this.qYouColor = color,
    );

    window.bakerTools.mainWindow.addColorOption(qColorPicker.element);
    window.bakerTools.mainWindow.addColorOption(qYouColorPicker.element);
  }


  /**
   * Setup listeners for new posts
   */
  _setupListeners() {
    $(document).on(EightKun.NEW_POST_EVENT, function(e, post) {
      this._doItQ(post);
    }.bind(this));

    $('#'+this.showQNavigationInBoardListId).change(function(e) {
      this.showQNavigationInBoardList(e.target.checked);
    }.bind(this));
  }

  /**
   * Show or hide q nav control in the boardlist
   *
   * @param {boolean} showNavInBoardList
   */
  showQNavigationInBoardList(showNavInBoardList) {
    $('#'+this.showQNavigationInBoardListId).prop('checked',
        showNavInBoardList);

    localStorage.setItem(QPostHighlighter.SHOW_Q_NAV_IN_BOARDLIST_SETTING,
        showNavInBoardList);

    if (showNavInBoardList) {
      $(this.boardListNav.element).show();
    } else {
      $(this.boardListNav.element).hide();
    }
  }
}
QPostHighlighter.qPosts = [];
QPostHighlighter.NEW_Q_POST_EVENT = 'bakertools-new-q-post';
QPostHighlighter.SHOW_Q_NAV_IN_BOARDLIST_SETTING =
    'bakertools-show-q-nav-in-boardlist';
QPostHighlighter.Q_YOU_COLOR_SETTING =
    'bakertools-q-you-color';
QPostHighlighter.Q_POST_COLOR_SETTING =
    'bakertools-q-post-color';
QPostHighlighter.DEFAULT_Q_POST_COLOR = '#FFFFCC';
QPostHighlighter.DEFAULT_Q_YOU_POST_COLOR = '#DDDDDD';

/**
 * History of Q's tripcodes and their date ranges
 */
class QTripCodeHistory {
  /**
   * Construct the q trip history
   */
  constructor() {
    // Hat tip to https://8kun.top/qresearch/res/7762733.html#7832643 for Q trip history
    this.history = [
      new QTripCode('!ITPb.qbhqo',
          new Date('2017-11-10 04:07:15Z'), new Date('2017-12-15 06:04:43Z')),
      new QTripCode('!UW.yye1fxo',
          new Date('2017-12-15 06:04:06Z'), new Date('2018-03-24 13:09:02Z')),
      new QTripCode('!xowAT4Z3VQ',
          new Date('2018-03-24 13:09:37Z'), new Date('2018-05-04 20:02:22Z')),
      new QTripCode('!2jsTvXXmXs',
          new Date('2018-05-04 20:01:19Z'), new Date('2018-05-08 23:46:39Z')),
      new QTripCode('!4pRcUA0lBE',
          new Date('2018-05-08 23:47:17Z'), new Date('2018-05-19 22:06:20Z')),
      new QTripCode('!CbboFOtcZs',
          new Date('2018-05-19 22:07:06Z'), new Date('2018-08-05 20:12:52Z')),
      new QTripCode('!A6yxsPKia.',
          new Date('2018-08-05 20:14:24Z'), new Date('2018-08-10 18:24:24Z')),
      new QTripCode('!!mG7VJxZNCI',
          new Date('2018-08-10 18:26:08Z'), new Date('2019-11-25 22:35:45Z')),
      new QTripCode('!!Hs1Jq13jV6',
          new Date('2019-12-02 17:55:59Z'), null),
    ];
  }

  /**
   * Get Q Tripcode by the provided date
   * @param {Date} date
   * @return {QTripCode}
   */
  getTripCodeByDate(date) {
    let returnTripCode = null;
    for (const tripCode of this.history) {
      if (tripCode.isValidForDate(date)) {
        returnTripCode = tripCode;
        break;
      }
    }
    return returnTripCode;
  }

  /**
   * Get Q Tripcode by the current
   * @return {QTripCode}
   */
  getCurrentTripCode() {
    return this.getTripCodeByDate(new Date());
  }
}

/**
 * Represents a Tripcode used by Q and the timeframe
 */
class QTripCode {
  /**
   * Create a new QTripCode
   * @param {string} tripCode
   * @param {DateTime} startDate
   * @param {DateTime} endDate
   */
  constructor(tripCode, startDate, endDate) {
    this.tripCode = tripCode;
    this.startDate = startDate;
    this.isCurrentTrip = false;
    if (!endDate) {
      this.isCurrentTrip = true;
    }
    this.endDate = endDate;
  }

  /**
   * Is this tripcode valid for the provided date?
   * @param {Date} date
   * @return {boolean} true if this trip code is valid for the date
   */
  isValidForDate(date) {
    const dateIsOnOrAfterTripStart = date >= this.startDate;
    const dateIsOnOrBeforeTripEnd = date <= this.endDate;
    return dateIsOnOrAfterTripStart &&
      (this.isCurrentTrip || dateIsOnOrBeforeTripEnd);
  }
}

QTripCodeHistory.INSTANCE = new QTripCodeHistory();

/* globals $, EightKun, ResearchBread, BakerWindow */
/* exported SpamFader, NameFagStrategy, HighPostCountFagStrategy,
* FloodFagStrategy, BreadShitterFagStrategy */

/**
* Fade posts that post too fast
*/
class SpamFader {
  /**
   * Construct spamfader
   * @param {Array} spamDetectionStrategies An array of SpamDetectionStrategy's
   */
  constructor(spamDetectionStrategies) {
    this.spamDetectionStrategies = spamDetectionStrategies;
    this.styleId = 'bakertools-spamfader-style';
    this.spamClass = 'bakertools-spamfader-spam';
    this.disableSpamFaderId = 'bakertools-spamfader-disable';
    this.hideSpamBadgesId = 'bakertools-spamfader-hide-spam-badges';
    this._createStyles();
    this._setupBakerWindowControls();
    this._readSettings();
    this._spamFadeExistingPosts();
    this._setupListeners();
  }

  /**
   * Create stylesheets
   */
  _createStyles() {
    $('head').append(`
    <style id='${this.styleId}'>
      div.post.post-hover {
        opacity: 1 !important;
      }
    </style>
    `);
  }

  /**
   * Setup settings UI for spamfading
   */
  _setupBakerWindowControls() {
    window.bakerTools.mainWindow.addSpamOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for='${this.disableSpamFaderId}'>Disable SpamFader</label>
      <input type='checkbox' id='${this.disableSpamFaderId}' />
    </div>

    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for='${this.hideSpamBadgesId}'>Hide spam badges</label>
      <input type='checkbox' id='${this.hideSpamBadgesId}'/>
    </div>
    `);
  }

  /**
   * Loop through posts for spam
   */
  _spamFadeExistingPosts() {
    $(EightKun.POST_REPLY_SELECTOR).each(function(i, post) {
      this._detectSpam(post);
    }.bind(this));
  }

  /**
   * Determine if provided post is spam, if so, add spam class
   *
   * @param {Element} post div.post
   */
  _detectSpam(post) {
    const posterStats = SpamFader.getPosterStats(post);
    posterStats.addPost(post);

    if (SpamFader.isMarkedAsNotSpam(posterStats)) {
      return;
    }

    this.spamDetectionStrategies.forEach((sds) => sds.isSpam(post));
    this._takeSpamAction(posterStats);
  }

  /**
   * Performs the spam action against the poster's posts.
   * @param {PosterStats} posterStats
   */
  _takeSpamAction(posterStats) {
    if (!posterStats.isSpam) {
      return;
    }
    if (this.spamAction === SpamFader.FADE) {
      const opacity =
        Math.max(SpamFader.MIN_OPACITY, (1 - posterStats.fadeProgress));

      posterStats.posts.forEach(function(p) {
        $(p).css('opacity', opacity);
        $(p).off('mouseenter mouseleave');
        $(p).hover(function() {
          $(p).animate({opacity: 1.0}, SpamFader.ANIMATION_DURATION);
        }, function() {
          $(p).animate({opacity: opacity}, SpamFader.ANIMATION_DURATION);
        });
      });
    } else if (this.spamAction === SpamFader.HIDE) {
      posterStats.posts.forEach(function(p) {
        EightKun.hidePost(p);
      });
    }
  }

  /**
   * Setup new post listener
   */
  _setupListeners() {
    this._setupNewPostListener();
    $(`#${this.disableSpamFaderId}`).change(function(e) {
      this.disableSpamFader(e.target.checked);
    }.bind(this));

    $(`#${this.hideSpamBadgesId}`).change(function(e) {
      this.hideSpamBadges(e.target.checked);
    }.bind(this));
  }

  /**
   * Setup listener to check new posts for spam
   */
  _setupNewPostListener() {
    $(document).on(EightKun.NEW_POST_EVENT, function(e, post) {
      this._detectSpam(post);
    }.bind(this));
  }

  /**
   * Hide the actions of the spamfader.
   * @param {boolean} disable
   */
  disableSpamFader(disable) {
    $('#'+this.disableSpamFaderId).prop('checked', disable);
    localStorage.setItem(SpamFader.DISABLE_SPAM_FADER_SETTING, disable);

    if (disable) {
      $(SpamFader.SPAM_BADGES_SELECTOR).hide();
      $(SpamFader.NOT_SPAM_BUTTON_SELECTOR).hide();
      $(EightKun.POST_REPLY_SELECTOR)
          .css({'opacity': ''})
          .off('mouseenter mouseleave');

      $(document).off(EightKun.NEW_POST_EVENT);
    } else {
      $(SpamFader.SPAM_BADGES_SELECTOR).show();
      $(SpamFader.NOT_SPAM_BUTTON_SELECTOR).show();
      SpamFader.posterStats.forEach(this._takeSpamAction.bind(this));
      this._setupNewPostListener();
    }
  }

  /**
   * Hide spam badges on posts
   * @param {boolean} hide
   */
  hideSpamBadges(hide) {
    $('#'+this.hideSpamBadgesId).prop('checked', hide);

    localStorage.setItem(SpamFader.HIDE_SPAM_BADGES_SETTING, hide);

    if (hide) {
      $(SpamFader.SPAM_BADGES_SELECTOR).hide();
    } else {
      $(SpamFader.SPAM_BADGES_SELECTOR).show();
    }
  }

  /**
   * Read spamfader settings
   */
  _readSettings() {
    this.spamAction = localStorage[SpamFader.SPAM_ACTION_SETTING] ||
      SpamFader.FADE;

    this.hideSpamBadges(JSON.parse(
        localStorage.getItem(
            SpamFader.HIDE_SPAM_BADGES_SETTING),
    ));

    this.disableSpamFader(JSON.parse(
        localStorage.getItem(
            SpamFader.DISABLE_SPAM_FADER_SETTING),
    ));
  }

  /**
   * Get post stats for post
   * @param {Element} post div.post
   * @return {PosterStats}
   */
  static getPosterStats(post) {
    const posterId = EightKun.getPosterId(post);
    if (!SpamFader.posterStats.has(posterId)) {
      SpamFader.posterStats.set(posterId, new PosterStats(posterId));
    }
    return SpamFader.posterStats.get(posterId);
  }

  /**
   * Adds spam badge to the posts by the poster.
   * Wear them proudly fag!
   *
   * @param {PosterStats} posterStats The posterStats object representing
   *        spam fag
   * @param {string} badge Font-Awesome glyph for badge
   * @param {string} badgeTitle The title describing the badge
   */
  static addSpamBadge(posterStats, badge, badgeTitle) {
    posterStats.posts.forEach(function(post) {
      if (!$(post).find(SpamFader.SPAM_BADGES_SELECTOR).length) {
        SpamFader.createSpamBadgeSection(post);
      }
      const alreadyHasBadge = $(post)
          .find(SpamFader.SPAM_BADGES_SELECTOR)
          .find(`.fa-${badge}`).length;

      if (!alreadyHasBadge) {
        $(post).find(SpamFader.SPAM_BADGES_SELECTOR).append(
            `<i class="fa fa-${badge}" title='${badgeTitle}'></i>`,
        );
      }
    });
  }

  /**
   * Create section for spam badges
   * @param {Element} post div.post
   */
  static createSpamBadgeSection(post) {
    const $postModifiedSection = $(post).find(EightKun.POST_MODIFIED_SELECTOR);
    const button = $(`<button class='${SpamFader.NOT_SPAM_BUTTON_CLASS}'>
        <i class="fa fa-undo" title='Not spam'></i>Not Spam
      </button>
    `);

    button.click(function(e) {
      e.preventDefault();
      SpamFader.markNotSpam(post);
    });

    button.appendTo($postModifiedSection);

    $postModifiedSection.append(`
          <span class='${SpamFader.SPAM_BADGES_CLASS}'>Spam Badges:</span>`);
  }

  /**
   * Mark poster as not spam.
   *
   * @param {Element} post div.post
   */
  static markNotSpam(post) {
    const stats = SpamFader.getPosterStats(post);
    stats.markNotSpam();

    stats.posts.forEach(function(p) {
      $(p).css('opacity', 1);
      $(p).off('mouseenter mouseleave');
      $(p).find(SpamFader.SPAM_BADGES_SELECTOR).remove();
      $(p).find(`.${SpamFader.NOT_SPAM_BUTTON_CLASS}`).remove();
    });

    SpamFader.addToNotSpamList(stats);
  }

  /**
   * Save not spam in localstorage
   * @param {PosterStats} posterStats
   */
  static addToNotSpamList(posterStats) {
    const threadId = EightKun.getThreadId();
    const notSpamList = SpamFader.getNotSpamList();
    if (!(threadId in notSpamList)) {
      notSpamList[threadId] = [];
    }
    if (!SpamFader.isMarkedAsNotSpam(posterStats)) {
      notSpamList[threadId].push(posterStats.posterId);
      localStorage.setItem(SpamFader.NOT_SPAM_SETTING,
          JSON.stringify(notSpamList));
    }
  }

  /**
   * Has this poster been marked as not spam?
   * @param {PosterStats} posterStats
   * @return {boolean} true if not spam
   */
  static isMarkedAsNotSpam(posterStats) {
    const threadId = EightKun.getThreadId();
    const notSpamList = SpamFader.getNotSpamList();
    return threadId in notSpamList &&
        notSpamList[threadId].includes(posterStats.posterId);
  }

  /**
   * Get not spam list from localStorage
   * @return {Array} map of thread to not spam poster ids
   */
  static getNotSpamList() {
    return JSON.parse(
        localStorage.getItem(SpamFader.NOT_SPAM_SETTING) || '{}',
    );
  }
}
SpamFader.posterStats = new Map();
SpamFader.FADE = 'fade';
SpamFader.HIDE = 'hide';
SpamFader.SPAM_BADGES_CLASS = 'bakertools-spam-badges';
SpamFader.SPAM_BADGES_SELECTOR = `.${SpamFader.SPAM_BADGES_CLASS}`;
SpamFader.MIN_OPACITY = .2;
SpamFader.ANIMATION_DURATION = 200; // milliseconds
SpamFader.SPAM_ACTION_SETTING = 'bakertools-spamfader-action';
SpamFader.HIDE_SPAM_BADGES_SETTING = 'bakertools-spamfader-hide-badges';
SpamFader.DISABLE_SPAM_FADER_SETTING = 'bakertools-spamfader-disable';
SpamFader.NOT_SPAM_SETTING = 'bakertools-spamfader-notspam';
SpamFader.NOT_SPAM_BUTTON_CLASS = 'bakertools-spamfader-notspam';
SpamFader.NOT_SPAM_BUTTON_SELECTOR = `.${SpamFader.NOT_SPAM_BUTTON_CLASS}`;

/**
 * Holds spam stats
 */
class PosterStats {
  /**
   * Construct poststats for post
   * @param {number} posterId id of poster
   */
  constructor(posterId) {
    this.posts = [];
    this.posterId = posterId;
    this.markNotSpam();
  }

  /**
   * Reset spam indicators
   */
  markNotSpam() {
    this._spamCertainty = 0;
    this._fadeProgress = 0;
    this.floodCount = 0;
    this.breadShitCount = 0;
    this.isBreadShitter = false;
  }

  /**
   * Add post to poster's list of post
   * @param {Element} post div.post
   */
  addPost(post) {
    if (!this.posts.includes(post)) {
      this.posts.push(post);
    }
  }

  /**
   * Set spam certainty property
   * @param {number} certainty
   */
  set spamCertainty(certainty) {
    if (certainty > this._spamCertainty) {
      this._spamCertainty = certainty;
    }
  }

  /**
   * Get spam spamCertainty
   * @return {number} 1 represents 100% certainty.
   */
  get spamCertainty() {
    return this._spamCertainty;
  }

  /**
   * Set fade progress property
   * @param {number} progress
   */
  set fadeProgress(progress) {
    if (progress > this._fadeProgress) {
      this._fadeProgress = progress;
    }
  }

  /**
   * Get spam fade progress
   * @return {number} 1 represents 100% progress.
   */
  get fadeProgress() {
    return this._fadeProgress;
  }

  /**
   * Number of posts by id
   * @return {number}
   */
  get postCount() {
    return this.posts.length;
  }

  /**
   * Is this post spam?
   * @return {boolean} true if spam
   */
  get isSpam() {
    return this._spamCertainty >= 1;
  }
}

/**
 * Base class for spamDetectionStrategies
 */
class SpamDetectionStrategy {
  /**
   * Determine if the provided post is spam
   * @param {Element} post div.post
   * @return {boolean} true if is spam
   */
  isSpam(post) {
    return false;
  }
}

/**
 * Marks namefags as spam
 */
class NameFagStrategy extends SpamDetectionStrategy {
  /**
   * Construct NameFagStrategy
   */
  constructor() {
    super();
    this.nameRegex = /^Anonymous( \(You\))?$/;
    this.badge = 'tag';
    this.badgeTitle = 'Namefag';
  }

  /**
   * Returns true if a namefag, sets spamCertainty to 100% for post
   * to begin fading
   * @param {Element} post div.post
   * @return {boolean} true if is namefag spam
   */
  isSpam(post) {
    const isNameFag = !window.bakerTools.qPostHighlighter.isQ(post) &&
    (
      !this.nameRegex.test(EightKun.getPostName(post)) ||
      EightKun.getPostTrip(post) != ''
    );

    if (isNameFag) {
      const stats = SpamFader.getPosterStats(post);
      stats.spamCertainty = 1;
      stats.fadeProgress = .2;
      stats.isNameFag = true;
      SpamFader.addSpamBadge(stats, this.badge, this.badgeTitle);
    }
    return isNameFag;
  }
}

/**
 * Marks floodfags with high post count as spam
 */
class HighPostCountFagStrategy extends SpamDetectionStrategy {
  /**
   * Construct HighPostCountFagStrategy
   */
  constructor() {
    super();
    this.postCountSpamThreshold = 15;
    this.postCountHideThreshold = 25;
    this.badge = 'bullhorn';
    this.badgeTitle = 'High Post Count Fag';
  }

  /**
   * Returns true if the poster has posted more than the threshold
   * @param {Element} post div.post
   * @return {boolean} true if spam
   */
  isSpam(post) {
    if (EightKun.isPostFromOp(post)) {
      return;
    }

    const posterStats = SpamFader.getPosterStats(post);

    const highCountSpamCertainty =
      Math.min(1, posterStats.postCount / this.postCountSpamThreshold);

    posterStats.spamCertainty = highCountSpamCertainty;

    if (highCountSpamCertainty === 1) {
      posterStats.isHighPostCountFag = true;
      SpamFader.addSpamBadge(posterStats, this.badge, this.badgeTitle);
    }

    // We already hit spam threshold
    // Either we have hit threshold count or some other strategy says its spam
    if (posterStats.isSpam) {
      // Number of posts needed past threshold to hide
      const hideCount =
        this.postCountHideThreshold - this.postCountSpamThreshold;

      const progressIncrement = 1/hideCount;

      posterStats.fadeProgress += progressIncrement;
    }
    return posterStats.isSpam;
  }
}

/**
 * Marks floodfags with quick succession posts as spam
 */
class FloodFagStrategy extends SpamDetectionStrategy {
  /**
   * Construct flood fag strategy
   */
  constructor() {
    super();
    this.postIntervalConsideredFlooding = 60; // seconds
    this.floodCountSpamThreshold = 5;
    this.floodCountHideThreshold = 10;
    this.badge = 'tint';
    this.badgeTitle = 'Floodfag';
  }

  /**
   * Returns true if a spam
   * @param {Element} post div.post
   * @return {boolean} true if is spam
   */
  isSpam(post) {
    const posterStats = SpamFader.getPosterStats(post);
    if (EightKun.isPostFromOp(post) || !this.isPostFlooded(posterStats)) {
      return;
    }
    posterStats.floodCount++;

    const floodSpamCertainty =
      Math.min(1, posterStats.floodCount / this.floodCountSpamThreshold);

    posterStats.spamCertainty = floodSpamCertainty;

    if (floodSpamCertainty === 1) {
      posterStats.isFloodFag = true;
      SpamFader.addSpamBadge(posterStats, this.badge, this.badgeTitle);
    }

    // We already hit spam threshold
    // Either we have hit threshold count or some other strategy says its spam
    if (posterStats.isSpam) {
      // Number of posts needed past threshold to hide
      const hideCount =
        this.floodCountHideThreshold - this.floodCountSpamThreshold;

      const progressIncrement = 1/hideCount;

      posterStats.fadeProgress += progressIncrement;
    }
    return posterStats.isSpam;
  }

  /**
   * Is this a flooded post?
   * @param {PosterStats} posterStats
   * @return {boolean} true if flooded
   */
  isPostFlooded(posterStats) {
    if (posterStats.posts.length <= 1) {
      return false;
    }
    const currentPost = posterStats.posts.slice(-1)[0];
    const previousPost = posterStats.posts.slice(-2)[0];
    const previousPostTime = EightKun.getPostTime(previousPost);
    const currentPostTime = EightKun.getPostTime(currentPost);
    return (currentPostTime - previousPostTime) <=
      this.postIntervalConsideredFlooding;
  }
}

/**
 * Marks breadshitters as spam
 */
class BreadShitterFagStrategy extends SpamDetectionStrategy {
  // TODO: dont check for bread shitting on non research thread?
  /**
   * Construct flood fag strategy
   */
  constructor() {
    super();
    // Let's go easy, maybe its a newfag?
    this.breadShittingIncrement = .1;
    this.badge = 'clock-o';
    this.badgeTitle = 'Bread shitter';
  }

  /**
   * Returns true if a spam
   * @param {Element} post div.post
   * @return {boolean} true if is spam
   */
  isSpam(post) {
    const posterStats = SpamFader.getPosterStats(post);
    if (EightKun.isPostFromOp(post) || !this.isBreadShitter(post)) {
      return;
    }
    posterStats.breadShitCount++;

    posterStats.isBreadShitter = true;
    SpamFader.addSpamBadge(posterStats, this.badge, this.badgeTitle);
    posterStats.spamCertainty = 1;
    posterStats.fadeProgress += this.breadShittingIncrement;

    return posterStats.isSpam;
  }

  /**
   * Is this a bread shitting post?
   * @param {Element} post div.post
   * @return {boolean} true if bread shitter
   */
  isBreadShitter(post) {
    const dough = ResearchBread.getDoughPost();
    const doughTime = EightKun.getPostTime(dough);
    const postTime = EightKun.getPostTime(post);

    return postTime <= doughTime;
  }
}

/* exported StatsOverlay */
/* global $, EightKun, QPostHighlighter, NotablePost, debounce */
/**
* Overlays bread stats (and some other controls) in the bottom right of the
* screen.
*/
class StatsOverlay {
  /**
   * Construct statsoverlay, html element, setup listeners
   */
  constructor() {
    this.id = 'bakertools-stats-overlay';
    this.maxPosts = 750;
    this.postCountId = 'bakertools-stats-post-count';
    this.userCountId = 'bakertools-stats-uid-count';
    this.qCountId = 'bakertools-stats-q-count';
    this.notableCountId = 'bakertools-stats-notable-count';

    this._createStyles();
    this._createElement();
    this._updateStats();
    $(document).on(EightKun.NEW_POST_EVENT, function(e, post) {
      this._updateStats();
    }.bind(this));
  }

  /**
   * Create styles for stats overlay
   */
  _createStyles() {
    const sheet = window.document.styleSheets[0];
    sheet.insertRule(`#${this.id} {
      padding: 5px;
      position: fixed;
      z-index: 100;
      float: right;
      right:28.25px;
      bottom: 28.25px;
    }`, sheet.cssRules.length);
  }

  /**
   * Create actual html element for style overlay
   */
  _createElement() {
    this.element = document.createElement('div');
    this.element.id = this.id;

    this.$goToLast = $(`
    <a href="javascript:void(0)" alt="last" title="Go to last reading location">
    <i class="fa fa-step-backward"></i>
    </a>`);


    this.saveLastReadingLocation = debounce(this.saveLastReadingLocation, 450);
    this.currentReadingLocation = $(window).scrollTop();
    $(window).scroll(function() {
      this.saveLastReadingLocation();
    }.bind(this));

    this.$goToLast.click(function() {
      $(window).scrollTop(this.lastReadingLocation);
    }.bind(this));

    $(this.element).append( `
    Posts: <span id="${this.postCountId}" ></span>
    UIDS: <span id="${this.userCountId}"></span>
    `);

    $(this.element).append(this.$goToLast);

    $(this.element).append(`
    <a href="#bottom" alt="to-bottom" title="Go to bottom">
    <i class="fa fa-angle-double-down"></i>
    </a>
    <a href="#top" alt="to-top" title="Go to top">
    <i class="fa fa-angle-double-up"></i>
    </a>

    <br/>

    Q's: <span id="${this.qCountId}" ></span>
    Notables: <span id="${this.notableCountId}"></span>
    `);
    document.body.appendChild(this.element);
    this._setPostCount($('div.post.reply').length);
  }

  /**
   * Save the last spot before scrolling or navigation
   */
  saveLastReadingLocation() {
    const scrollDistance = Math.abs(
        this.currentReadingLocation - $(window).scrollTop());
    const scrolledMoreThanThirdScreenHeight =
        scrollDistance > (window.innerHeight / 3);

    if (!scrolledMoreThanThirdScreenHeight) {
      return;
    }
    this.lastReadingLocation = this.currentReadingLocation;
    this.currentReadingLocation = $(window).scrollTop();
  }

  /**
   * Update the stats fields
   */
  _updateStats() {
    const postCount = $('#thread_stats_posts').text();

    if (postCount) {
      this._setPostCount(postCount);
    }
    // TODO: uids dont load at first load.
    $('#'+this.userCountId).text($('#thread_stats_uids').text() || '0');
    $('#'+this.qCountId).text(QPostHighlighter.qPosts.length);
    $('#'+this.notableCountId).text(NotablePost.getNotables().length);
  }

  /**
   * Set post count in overlay
   * @param {number} count
   */
  _setPostCount(count) {
    const progress = count/this.maxPosts;
    let postColor = 'green';
    if (progress >= .87) { // ~ 650 posts (100 posts left)
      postColor = 'red';
    } else if (progress >= .5) {
      postColor = 'goldenrod';
    }
    $('#'+this.postCountId).text(count).css({'color': postColor});
  }
} // End StatsOverlay class

/* global $, NavigationControl, EightKun, ResearchBread,
 ColorPicker, POST_BACKGROUND_CHANGE_EVENT, BakerWindow */
/**
* Highlight posts that (you)
* Adds (You) navigation links to baker window
*/
class YouHighlighter {
  /**
   * Construct YN object
   */
  constructor() {
    this.styleId = 'bakertools-you-styles';
    this.yous = [];
    this.ownPosts = [];

    this.showYouNavigationInBoardListId =
        'bakertools-show-you-nav-in-boardlist';

    this.showOwnNavigationInBoardListId =
        'bakertools-show-own-nav-in-boardlist';

    this._createStyles();
    this._setupBakerWindowControls();
    this._readSettings();

    this._initOwnAndYouPosts();
    this._setupListeners();
  }

  /**
   * Create styles
   */
  _createStyles() {
    $('head').append(`
    <style id='${this.styleId}'>
    ${EightKun.POST_SELECTOR}.${YouHighlighter.YOU_CLASS} {
      background: ${this.youColor};
    }

    ${EightKun.POST_SELECTOR}.${YouHighlighter.OWN_CLASS} {
      background: ${this.ownPostColor};
    }
    </style>
    `);
  }

  /**
   * Read settings from localStorage
   */
  _readSettings() {
    this.showYouNavigationInBoardList(JSON.parse(
        localStorage.getItem(
            YouHighlighter.SHOW_YOU_NAV_IN_BOARDLIST_SETTING),
    ));

    this.showOwnNavigationInBoardList(JSON.parse(
        localStorage.getItem(
            YouHighlighter.SHOW_OWN_NAV_IN_BOARDLIST_SETTING),
    ));
  }

  /**
   * Add (you) navigation to bakerwindow
   */
  _setupBakerWindowControls() {
    const youColorPicker = new ColorPicker(
        '(You) Post Color',
        'Set background color of posts replying to (you)',
        YouHighlighter.YOU_COLOR_SETTING,
        YouHighlighter.DEFAULT_YOU_COLOR,
        (color) => this.youColor = color,
    );

    const ownPostColorPicker = new ColorPicker(
        'Own Post Color',
        'Set background color your own posts',
        YouHighlighter.OWN_COLOR_SETTING,
        YouHighlighter.DEFAULT_OWN_COLOR,
        (color) => this.ownPostColor = color,
    );

    window.bakerTools.mainWindow.addColorOption(ownPostColorPicker.element);
    window.bakerTools.mainWindow.addColorOption(youColorPicker.element);

    this.ownNavigation = new NavigationControl('Own Posts',
    this.getOwnPosts.bind(this), YouHighlighter.NEW_OWN_POST_EVENT);

    this.ownBoardListNav = new NavigationControl('Own',
        this.getOwnPosts.bind(this), YouHighlighter.NEW_OWN_POST_EVENT);

    $(EightKun.getTopBoardlist()).append(this.ownBoardListNav.element);
    $(this.ownBoardListNav.element).hide();

    window.bakerTools.mainWindow.addNavigationOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for="${this.showOwnNavigationInBoardListId}"
        title="Show navigation controls in board list bar" >
        Show Own Post Nav in Board List:
      </label>
      <input type="checkbox" id="${this.showOwnNavigationInBoardListId}"
        title="Show navigation controls in board list bar" /><br />
    </div>
    `);

    window.bakerTools.mainWindow.addNavigation(this.ownNavigation.element);

    this.youNavigation = new NavigationControl(`(You)'s`,
        this.getYous.bind(this), YouHighlighter.NEW_YOU_POST_EVENT);

    this.youBoardListNav = new NavigationControl('You',
        this.getYous.bind(this), YouHighlighter.NEW_YOU_POST_EVENT);

    $(EightKun.getTopBoardlist()).append(this.youBoardListNav.element);
    $(this.youBoardListNav.element).hide();

    window.bakerTools.mainWindow.addNavigationOption(`
    <div class='${BakerWindow.CONTROL_GROUP_CLASS}'>
      <label for="${this.showYouNavigationInBoardListId}"
        title="Show navigation controls in board list bar" >
        Show (You) Nav in Board List:
      </label>
      <input type="checkbox" id="${this.showYouNavigationInBoardListId}"
        title="Show navigation controls in board list bar" /><br />
    </div>
    `);


    window.bakerTools.mainWindow.addNavigation(this.youNavigation.element);
  }

  /**
   * Set the background color of posts replying to (you)
   * @param {string} color A valid css color value.
   *        E.G. ('#ff00ee', 'rgba()' or 'blue')
   */
  set youColor(color) {
    this._youColor = color;
    document.getElementById(this.styleId)
        .sheet.cssRules[0].style.background = color;
    $(document).trigger(POST_BACKGROUND_CHANGE_EVENT, color);
  }

  /**
   * Get background color for posts replying to (you)
   */
  get youColor() {
    return this._youColor;
  }

  /**
   * Set the background color of your own posts
   * @param {string} color A valid css color value.
   *        E.G. ('#ff00ee', 'rgba()' or 'blue')
   */
  set ownPostColor(color) {
    this._ownPostColor = color;
    document.getElementById(this.styleId)
        .sheet.cssRules[1].style.background = color;
    $(document).trigger(POST_BACKGROUND_CHANGE_EVENT, color);
  }

  /**
   * Get background color for your own posts
   */
  get ownPostColor() {
    return this._ownPostColor;
  }

  /**
   * Setup listeners for baker window controls
   */
  _setupListeners() {
    $('#'+this.showOwnNavigationInBoardListId).change(function(e) {
      this.showOwnNavigationInBoardList(e.target.checked);
    }.bind(this));

    $('#'+this.showYouNavigationInBoardListId).change(function(e) {
      this.showYouNavigationInBoardList(e.target.checked);
    }.bind(this));

    $(document).on(EightKun.NEW_POST_EVENT, function(e, post) {
      if (this.isAYou(post)) {
        this._addYouPost(post);
      }
      if (this.isOwnPost(post)) {
        this._addOwnPost(post);
      }
    }.bind(this));
  }

  /**
   * Show/hide you nav in boardlist
   *
   * @param {boolean} showYouNavInBoardList
   */
  showYouNavigationInBoardList(showYouNavInBoardList) {
    $('#'+this.showYouNavigationInBoardListId).prop('checked',
        showYouNavInBoardList);

    localStorage.setItem(YouHighlighter.SHOW_YOU_NAV_IN_BOARDLIST_SETTING,
        showYouNavInBoardList);

    if (showYouNavInBoardList) {
      $(this.youBoardListNav.element).show();
    } else {
      $(this.youBoardListNav.element).hide();
    }
  }

  /**
   * Show/hide own nav in boardlist
   *
   * @param {boolean} showOwnNavInBoardList
   */
  showOwnNavigationInBoardList(showOwnNavInBoardList) {
    $('#'+this.showOwnNavigationInBoardListId).prop('checked',
        showOwnNavInBoardList);

    localStorage.setItem(YouHighlighter.SHOW_OWN_NAV_IN_BOARDLIST_SETTING,
        showOwnNavInBoardList);

    if (showOwnNavInBoardList) {
      $(this.ownBoardListNav.element).show();
    } else {
      $(this.ownBoardListNav.element).hide();
    }
  }

  /**
   * Get (You)'s
   * @return {Array} of div.post
   */
  getYous() {
    return this.yous;
  }

  /**
   * Is the post replying to you
   * @param {Element} post div.post
   * @return {boolean} True if post is replying to you
   */
  isAYou(post) {
    return post.querySelector('.body')
        .innerHTML
        .indexOf('<small>(You)</small>') != -1;
  }

  /**
   * Is this your own post
   * @param {Element} post div.post
   * @return {boolean} True if post is you
   */
  isOwnPost(post) {
    return $(post).hasClass('you');
  }

  /**
   * Add you post and trigger event
   * @param {Element} post
   */
  _addYouPost(post) {
    this.yous.push(post);
    $(post).addClass(YouHighlighter.YOU_CLASS);
    $(document).trigger(YouHighlighter.NEW_YOU_POST_EVENT, post);
  }

  /**
   * Add own post and trigger event
   * @param {Element} post
   */
  _addOwnPost(post) {
    this.ownPosts.push(post);
    $(post).addClass(YouHighlighter.OWN_CLASS);
    $(document).trigger(YouHighlighter.NEW_OWN_POST_EVENT, post);
  }

  /**
   * Get own and you posts that are present at page load
   */
  _initOwnAndYouPosts() {
    const ownPosts = JSON.parse(localStorage.own_posts || '{}');
    const board = ResearchBread.BOARD_NAME;

    $('div.post').each(function(i, post) {
      const postId = $(post).attr('id').split('_')[1];
      if (ownPosts[board] &&
          ownPosts[board].indexOf(postId) !== -1) {
        this._addOwnPost(post);
      }

      EightKun.getReplyLinksFromPost(post).each(function(i, link) {
        const youPostId = EightKun.getPostNumberFromReplyLink(link);

        if (ownPosts[board] && ownPosts[board].indexOf(youPostId) !== -1) {
          this._addYouPost(post);
        }
      }.bind(this));
    }.bind(this));

    window.bakerTools.scrollBar.addPosts(this.ownPosts);
    window.bakerTools.scrollBar.addPosts(this.yous);
  }

  /**
   * Get own posts
   * @return {Array} of div.post
   */
  getOwnPosts() {
    return this.ownPosts;
  }
}
YouHighlighter.SHOW_YOU_NAV_IN_BOARDLIST_SETTING =
    'bakertools-show-you-nav-in-boardlist';
YouHighlighter.SHOW_OWN_NAV_IN_BOARDLIST_SETTING =
    'bakertools-show-own-nav-in-boardlist';
YouHighlighter.NEW_YOU_POST_EVENT =
    'bakertools-new-you-post-event';
YouHighlighter.NEW_OWN_POST_EVENT =
    'bakertools-new-own-post-event';
YouHighlighter.YOU_CLASS = 'bakertools-you-post';
YouHighlighter.OWN_CLASS = 'bakertools-own-post';
YouHighlighter.OWN_COLOR_SETTING =
    'bakertools-own-post-color';
YouHighlighter.YOU_COLOR_SETTING =
    'bakertools-you-post-color';
YouHighlighter.DEFAULT_OWN_COLOR = '#F8D2D2';
YouHighlighter.DEFAULT_YOU_COLOR = '#E1B3DA';


/* global ActivePage, $, QPostHighlighter, YouHighlighter, StatsOverlay,
 NotableHighlighter, BakerWindow, BlurImages, PreviousBreadHighlighter,
 NominatePostButtons, BreadList, ScrollbarNavigation, NotablePost,
 ImageBlacklist, PostRateChart, SpamFader */
/**
* MAIN
*/
if (ActivePage.isThread()) { // Only setup the tools if we are on a thread
  $(document).ready(function() {
    console.info('Thanks for using bakertools! For God and Country! WWG1WGA');
    window.bakerTools = {};
    window.bakerTools.mainWindow = new BakerWindow();
    window.bakerTools.scrollBar = new ScrollbarNavigation([
      NotablePost.NEW_NOTABLE_POST_EVENT,
      YouHighlighter.NEW_OWN_POST_EVENT,
      YouHighlighter.NEW_YOU_POST_EVENT,
      QPostHighlighter.NEW_Q_POST_EVENT,
    ]);
    new BlurImages();
    window.bakerTools.PreviousBreadHighlighter =
      new PreviousBreadHighlighter();
    window.bakerTools.qPostHighlighter = new QPostHighlighter();
    window.bakerTools.notableHighlighter = new NotableHighlighter();
    window.bakerTools.youHighlighter = new YouHighlighter();
    window.bakerTools.statsOverlay = new StatsOverlay();
    new NominatePostButtons();
    new BreadList();
    new ImageBlacklist();
    new PostRateChart();
    new SpamFader([new NameFagStrategy(), new HighPostCountFagStrategy(),
      new FloodFagStrategy(), new BreadShitterFagStrategy()]);
  });
}
}(window.jQuery));