8kun Baker tools v0.6.0

/*
==8Kun Baker Tools v0.6.0==

==Features:==
'''Notables'''
* Highlight posts that are marked notable (I.E. someone has replied and said
  notable) in Yellow
* Highlight nominating posts in Pink
* Highlight nominating posts in posts mentions in Green
* Filter to only nominating and notable posts, Q posts, Q replies
* Generate notables post
* Adds "Notable Nomination" button to posts that opens the
  Quick Reply box and prefills it with a BAKER NOTABLE Template
* Easy access to Breads

'''Q Posts'''
  * 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
  * Cycle through Q Posts

'''Comfyness'''
  * 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
  * Option to blur images until hover
  * Cycle through (You)'s
  * Cycle through own posts
  * Image blacklist (AKA the NOPE button)

==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.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/mPVxr7Lz 0.5.2 Fixes breadlist population issue
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";

/**
 * 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() {
    console.log(window.active_page == ActivePage.Thread);
    return window.active_page == ActivePage.Thread;
  }
}
ActivePage.Index = 'index';
ActivePage.Catalog = 'catalog';
ActivePage.Thread = 'thread';


/* global $ */
/**
 * 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.label = label;
    this.updateFunction = updateFunction;
    this.updateEventName = updateEventName;
    this.list = this.updateFunction();

    this.currentIndex = -1;
    this.navigationClass = `bakertools-navcontrol-${strippedName}`;
    this.indexChangeEvent =
      `bakertools-navcontrol-${strippedName}-index-changed`;
    this.currentIndexClass = `${this.navigationClass}-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._setupListeners();
  }

  /**
   * setup styles for nav control
   */
  _setupStyles() {
    const sheet = window.document.styleSheets[0];

    sheet.insertRule(`.boardlist
      .${NavigationControl.containerClass}:before {
      content: '[';
      color: #89A;
    }`, sheet.cssRules.length);

    sheet.insertRule(`.boardlist .${NavigationControl.containerClass}:after {
      content: ']';
      color: #89A;
    }`, sheet.cssRules.length);

    sheet.insertRule(`.boardlist .${NavigationControl.containerClass} {
      color: rgb(52, 52, 92);
    }`, sheet.cssRules.length);
  }

  /**
   * 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-fast-backward ${this.goToFirstClass}"></i>
                <i class="fa fa-backward ${this.goToPreviousClass}"></i>

                <span class="${this.currentIndexClass}">
          ${this.currentIndex+1}
        </span>
        of
        <span class="${this.totalClass}">${this.list.length}</span>

        <i class="fa fa-forward ${this.goToNextClass}"></i>
        <i class="fa fa-fast-forward ${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.currentIndex = index;
      this._setCurrentIndexControlValue(this.currentIndex + 1);
    }.bind(this));

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

  /**
   * Scroll to first post
   */
  goToFirstPost() {
    console.info(`Go to first ${this.label} post`);
    if (!this.list.length) {
      return;
    }
    this.currentIndex = 0;
    this.scrollToCurrentPost();
  }

  /**
   * Scroll to next navigated post
   */
  goToPreviousPost() {
    console.info(`Go to prev ${this.label} post`);
    if (!this.list.length) {
      return;
    }
    if (this.currentIndex <= 0) {
      this.currentIndex = this.list.length - 1;
    } else {
      this.currentIndex--;
    }
    this.scrollToCurrentPost();
  }
  /**
   * Scroll to next navigated post
   */
  goToNextPost() {
    console.info(`Go to next ${this.label} post`);
    if (!this.list.length) {
      return;
    }
    const lastPostIndex = this.list.length - 1;
    if (this.currentIndex >= lastPostIndex) {
      this.currentIndex = 0;
    } else {
      this.currentIndex++;
    }
    this.scrollToCurrentPost();
  }

  /**
   * Scroll the last  post in this bread into view
   */
  goToLastPost() {
    console.info(`Go to last ${this.label} post`);
    if (!this.list.length) {
      return;
    }
    const numPosts = this.list.length;
    this.currentIndex = 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.navigationClass + '-index-updated',
        this.currentIndex);

    // Update our local control
    this._setCurrentIndexControlValue(this.currentIndex + 1);

    window.scrollBy(0, -20);
  }

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



/* global ResearchBread, $, 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 = [];
    ResearchBread.getReplyLinksFromPost(nominatingPost)
        .each(function(idx, link) {
          const postNumber = ResearchBread.getPostNumberFromReplyLink(link);
          if (!NotablePost.findNotableByPostNumber(postNumber)) {
            const notable = new NotablePost();

            const notablePostElement = $(`#reply_${postNumber}`).get(0);
            if (notablePostElement) {
              notable.setElement(notablePostElement);
            } else {
              // TODO: set pb description
              // get the json from the post number
              notable.postNumber = postNumber;
            }
            NotablePost._notables.push(notable);
            if (notable.element) { // Not pb will need to figure something out
              $(document).trigger(NotablePost.NEW_NOTABLE_POST_EVENT,
                  notable.element);
            }
            notable.addNominatingPost(nominatingPost);
            notables.push(notable);
          }
        });
    return notables;
  }

  /**
   * 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';

/**
 * A null post that is returned when the post cant be found
 */
class NullNotablePost extends NotablePost {
  /**
   * Returns true because this is a null post
   * @return {boolean} true
   */
  isNull() {
    return true;
  }
}


/* globals $ */
/**
 * 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(ResearchBread.POST_SELECTOR));

    const filteredPosts = posts.filter(function(post) {
      return !post.querySelector('.body')
          .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(ResearchBread.OP_SUBJECT_SELECTOR)
        .innerText
        .match(breadNumberRegex)[1] || 'COULD NOT FIND BREAD NUMBER';
  }

  /**
   * @arg {Element} post .post
   * @return {RegexMatch} Capture 1 is the number
   */
  static getFirstReplyLink(post) {
    const match = post.querySelector('.body')
        .innerHTML
        .match(ResearchBread.REPLY_REGEX);
    return match && match[1] || null;
  }

  /**
   * Get reply links in post
   * @param {Element} post div.post
   * @return {JQuery}
   */
  static getReplyLinksFromPost(post) {
    return $(post).find(ResearchBread.REPLY_SELECTOR)
        .filter(function(idx, link) {
          return $(link).text().match(ResearchBread.REPLY_SHORTLINK_REGEX);
        });
  }

  /**
   * Get the post number that is being replied to
   * @param {Anchor} link
   * @return {string}
   */
  static getPostNumberFromReplyLink(link) {
    return $(link).text()
        .match(ResearchBread.REPLY_SHORTLINK_REGEX)[1];
  }
}
ResearchBread.BOARD_NAME = 'qresearch';
ResearchBread.NEW_POST_EVENT = 'new_post';
ResearchBread.OP_SUBJECT_SELECTOR = '.post.op > p > label > span.subject';
ResearchBread.REPLY_SELECTOR = 'div.body:first a:not([rel="nofollow"])';
ResearchBread.REPLY_SHORTLINK_REGEX = /^>>(\d+)$/;
ResearchBread.POST_BODY_SELECTOR = '.post > .body';
ResearchBread.POST_SELECTOR = '.post';
ResearchBread.REPLY_REGEX = /highlightReply\('(.+?)'/;
ResearchBread.DOUGH_POSTS_REGEX = new RegExp(
    `^(Welcome To Q Research General|` +
    `Global Announcements|` +
    `War Room` +
    `|QPosts Archives).*`);


/* globals $, ResearchBread */
/* 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 = [];
    this.addPostEvents = addPostEvents;

    // Debounce the draw function
    this.draw = debounce(this.draw, 1000 * 2);

    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
        .addOption(`
    <label for="${this.showScrollbarNavigationId}"
      title="Show scrollbar navigation" >
      Show Scrollbar Navigation:
    </label>
    <input type="checkbox" id="${this.showScrollbarNavigationId}"
      title="Show scrollbar navigation" /><br />
    `);
  }

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

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

    $('#'+this.id).click(function(e) {
      Object.keys(this.coordsToPost).forEach(function(coords) {
        const [top, bottom] = coords.split(',');
        if (e.clientY >= (top - 10) && e.clientY <= (bottom+10)) {
          const post = this.coordsToPost[coords];
          $(post).get(0).scrollIntoView();
          window.scrollBy(0, -20);
        }
      }.bind(this));
    }.bind(this));

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

  /**
   * 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>
    `);
  }

  /**
   * Draw the scrollbar
   */
  draw() {
    const canvas = document.getElementById(this.id);
    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 = [];

    this.posts.forEach(function(post) {
      const color = $(post).css('backgroundColor');
      const postRect = post.getBoundingClientRect();
      const scrollLocationPercentage =
          (window.scrollY + postRect.top) / cachedHeight;
      const drawLocation = scrollLocationPercentage * scrollHeight;
      const drawHeight = Math.max(
          (postRect.height / cachedHeight) * scrollHeight,
          4,
      );
      this.coordsToPost[[drawLocation, drawLocation + drawHeight]] = post;

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

  /**
   * Add posts to scrollbar
   * @param {Element|Array} post div.post
   */
  addPosts(post) {
    if (Array.isArray(post)) {
      post.forEach((p) => this.posts.push(p));
    } else {
      this.posts.push(post);
    }
    this.draw();
  }
}
ScrollbarNavigation.SHOW_SCROLLBAR_NAV = 'bakertools-show-scrollbar-nav';

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

/* globals $ */
/* 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).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}'>
      .${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)';
    document.querySelector('.boardlist').appendChild(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.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;
      }
    </style>
    `);
  }

  /**
   * Create the actual window HTML element
   */
  _createBody() {
    $('#'+this.id).append(`
    <form id="${this.bakerWindowBodyId}">
      <details id='${this.bakerWindowOptionsId}' open>
        <summary>Options</summary>
      </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 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

/* global $ */
/**
* 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(`
      <label for="${this.blurImages}">Blur Images Until Hover</label>
      <input type="checkbox" id="${this.blurImages}"
        title="Blur images until mouse hover" /></br>
    `);

    $('#'+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;
      }

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

      #${this.breadListTable} {
        border-collapse: collapse;
        border-spacing: 0px;
      }

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

      #${this.breadListTable} th,
      #${this.breadListTable} td {
        border: 1px solid #000;
        border-top: 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();
      console.info(this.breads);
      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 $, ResearchBread */
/**
* 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.addOption(`
    <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 />
    `);
  }


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

    localStorage.setItem(ImageBlacklist.HIDE_POST_BLACKLIST_BUTTON_SETTING,
        show);

    const styleId = 'baker-tools-post-blacklist-button-style';
    if (show) {
      $('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();
  }

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

    $('#'+this.hidePostBlacklistButtonCheckboxId).change(function(e) {
      this.showPostBlacklistButton(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('.post_modified').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 $, ResearchBread */
/**
* 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.addOption(`
    <br />
    <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 />
    `);
  }

  /**
   * Setup event listeners
   */
  _setupListeners() {
    $(document).on(ResearchBread.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('.post_modified').append(button);
  }
}
NominatePostButtons.HIDE_NOMINATE_BUTTON_SETTING =
    'bakertools-hide-nominate-button';

/* global $, ResearchBread, NotablePost, NavigationControl */
/**
* 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 = 'bakertooks-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.showNotableNavgationInBoardListId =
        'bakertools-show-notable-nav-in-boardlist';

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

  /**
   * 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() {
    $('head').append(`
    <style id='${this.styleId}'>
    .thread div.post.${NotableHighlighter.NOTABLE_CLASS} {
      background-color: #FFFFCC;
    }
    /* less specificity than notable so it has less preference */
    div.post.${NotableHighlighter.NOMINATOR_CLASS} {
      background-color: #FFCCE5;
    }
    div.post.reply .mentioned .${NotableHighlighter.NOMINATOR_CLASS} {
      color: #00CC00;
      font-weight: bold;
      font-size: 1.5em;
    }
    </style>
    `);
  }

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

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


    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
        .addOption(`
    <br /><br />
    <label for="${this.showNotableNavigationInBoardListId}"
      title="Show navigation controls in board list bar" >
      Show Notable Nav in Board List:
    </label>
    <input type="checkbox" id="${this.showNotableNavgationInBoardListId}"
      title="Show navigation controls in board list bar" /><br />
    `);

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

    $('.boardlist:first').append(this.boardListNav.element);
    $(this.boardListNav.element).hide();
  }

  /**
   * 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(ResearchBread.NEW_POST_EVENT, function(e, post) {
      this.checkNewPostsForNotables(post);
    }.bind(this));

    $('#'+this.showNotableNavgationInBoardListId).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.showNotableNavgationInBoardListId).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 = ResearchBread.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?
      $(ResearchBread.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';

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

    this._setupStyles();

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

    this._setupListeners();
  }

  /**
   * Setup styles for pb links
   */
  _setupStyles() {
    const sheet = window.document.styleSheets[0];
    sheet.insertRule(`div.post.reply div.body
      a.${this.previousBreadClass} {
        color: #8B0000;
    }`, sheet.cssRules.length);
    sheet.insertRule(`a.${this.previousBreadClass}::after {
      content: " (pb)";
    }`, sheet.cssRules.length);
  }

  /**
   * Setup listeners for pb highlighting
   */
  _setupListeners() {
    $(document).on(ResearchBread.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 breadFileName = document.location.pathname.split('/').slice(-1)[0];
    const linkFileName = link.href.split('/').slice(-1)[0].split('#')[0];

    if ($(link).attr('onclick').search(ResearchBread.REPLY_REGEX) !=1 &&
          breadFileName != linkFileName) {
      $(link).addClass(this.previousBreadClass);
    }
  }
}



/* global $, ResearchBread, NavigationControl */
/**
* Highlight Q posts, replies to q, q replies.
* Adds navigation to baker window
*/
class QPostHighlighter {
  /**
   * Construct qposthighlighter object and setup listeners
   */
  constructor() {
    this.qPostClass = 'bakertools-q-post';
    this.qReplyClass = 'bakertools-q-reply';
    this.qMentionClass = 'bakertools-q-mention';
    this.qLinkClass = 'bakertools-q-link';
    this._linkSelector = 'div.body > p.body-line.ltr > a';
    this.currentQTripCode = null;

    this.showQNavigationInBoardListId =
        'bakertools-show-q-nav-in-boardlist';

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

  /**
   * 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() {
    const sheet = window.document.styleSheets[0];
    // Dark to light
    sheet.insertRule(`div.post.reply.${this.qPostClass} {
      background: #FFFFFF !important;
      display: inline-block !important;
      visibility: visible !important;
    }`, sheet.cssRules.length);

    // Enlightened by the Q but still not all the way
    sheet.insertRule(`div.post.reply.${this.qReplyClass} {
      background: #DDDDDD;
      display: inline-block !important;
      visibility: visible !important;
    }`, sheet.cssRules.length);

    // Trippy mentions
    sheet.insertRule(`div.post.reply .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;
    }`, sheet.cssRules.length);
  }

  /**
   * Get Q's current trip code from the bread
   */
  _getCurrentQTripFromBread() {
    const tripCodeMatch = $('div.post.op')
        .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}`);
        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) {
    return this._getTripCodeOfPost(post) == this.currentQTripCode;
  }

  /**
   * Get the trip code of the provided post
   * @param {Element} post
   * @return {string} tripcode
   */
  _getTripCodeOfPost(post) {
    return $(post).find('.intro span.trip').text();
  }

  /**
   * Add Q post navigation to bakerwindow
   */
  _setupBakerWindowControls() {
    window.bakerTools.mainWindow
        .addOption(`
    <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 />
    `);

    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 Posts',
        () => QPostHighlighter.qPosts, QPostHighlighter.NEW_Q_POST_EVENT);

    $('.boardlist:first').append(this.boardListNav.element);
    $(this.boardListNav.element).hide();
  }


  /**
   * Setup listeners for new posts
   */
  _setupListeners() {
    $(document).on(ResearchBread.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';

/* exported StatsOverlay */
/* global $, ResearchBread, QPostHighlighter, NotablePost */
/**
* Overlays bread stats (and some other controls) in the bottom right of the
* screen.
* TODO: create add method
*/
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(ResearchBread.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.element.innerHTML = `
    Posts: <span id="${this.postCountId}" ></span>
    UIDS: <span id="${this.userCountId}"></span>
    <a href="#bottom" alt="to-bottom">
      <i class="fa fa-angle-double-down"></i>
    </a>
    <a href="#top" alt="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);
  }

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

    if (postCount) {
      this._setPostCount(postCount);
    }
    $('#'+this.userCountId).text($('#thread_stats_uids').text());
    $('#'+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, ResearchBread */
/**
* Highlight posts that (you)
* Adds (You) navigation links to baker window
*/
class YouHighlighter {
  /**
   * Construct YN object
   */
  constructor() {
    this.yous = [];
    this.ownPosts = [];

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

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

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

  /**
   * 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 youLabel = `(You)'s`;
    this.youNavigation = new NavigationControl(youLabel,
        this.getYous.bind(this), YouHighlighter.NEW_YOU_POST_EVENT);

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

    $('.boardlist:first').append(this.youBoardListNav.element);
    $(this.youBoardListNav.element).hide();

    window.bakerTools.mainWindow.addOption(`
    <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 />
    `);

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

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

    $('.boardlist:first').append(this.ownBoardListNav.element);
    $(this.ownBoardListNav.element).hide();

    window.bakerTools.mainWindow.addOption(`
    <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 />
    `);

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

  /**
   * 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(ResearchBread.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);
    $(document).trigger(YouHighlighter.NEW_YOU_POST_EVENT, post);
  }

  /**
   * Add own post and trigger event
   * @param {Element} post
   */
  _addOwnPost(post) {
    this.ownPosts.push(post);
    $(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);
      }

      ResearchBread.getReplyLinksFromPost(post).each(function(i, link) {
        const youPostId = ResearchBread.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';

/* global ActivePage, $, QPostHighlighter, YouHighlighter, StatsOverlay,
 NotableHighlighter, BakerWindow, BlurImages, PreviousBreadHighlighter,
 NominatePostButtons, BreadList, ScrollbarNavigation, NotablePost,
 ImageBlacklist */
/**
* MAIN
*/
if (ActivePage.isThread()) { // Only setup the tools if we are on a thread
  $(document).ready(function() {
    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.notableHighlighter = new NotableHighlighter();
    window.bakerTools.qPostHighlighter = new QPostHighlighter();
    window.bakerTools.youHighlighter = new YouHighlighter();
    window.bakerTools.statsOverlay = new StatsOverlay();
    new NominatePostButtons();
    new BreadList();
    new ImageBlacklist();
  });
}
}(window.jQuery));