// ==UserScript==
// @name DocNav
// @namespace http://wizchan.org
// @description [Go to bottom], floating up-down arrows, user CSS.
// @include http://wizchan.org/*
// @include https://wizchan.org/*
// ==/UserScript==

(function () {
'use strict';

function BannerDown() {
  var bannerElem = document.querySelector('.banner');

  if (!bannerElem) {
    return;
  }

  var elem = document.createElement('a');
  elem.className = 'unimportant banner__down';
  elem.href = '#';
  elem.innerHTML = '[Go to bottom]';
  elem.addEventListener('click', BannerDown.handleClick);

  bannerElem.appendChild(document.createTextNode(' '));
  bannerElem.appendChild(elem);
}

BannerDown.handleClick = function (ev) {
  ev.preventDefault();
  window.scrollTo(0, document.documentElement.offsetHeight - window.innerHeight);
};

function DocNav() {
  var elem = document.createElement('div');
  elem.className = 'doc-nav';
  document.body.appendChild(elem);

  var upElem = document.createElement('button');
  upElem.className = 'doc-nav__btn doc-nav__btn--up';
  upElem.addEventListener('click', DocNav.handleUpClick);
  upElem.innerHTML = '↑';
  elem.appendChild(upElem);

  var brElem = document.createElement('br');
  elem.appendChild(brElem);

  var downElem = document.createElement('button');
  downElem.className = 'doc-nav__btn doc-nav__btn--down';
  downElem.addEventListener('click', DocNav.handleDownClick);
  downElem.innerHTML = '↓';
  elem.appendChild(downElem);
}

DocNav.handleUpClick = function () {
  window.scrollTo(0, 0);
};

DocNav.handleDownClick = function () {
  window.scrollTo(0, document.documentElement.offsetHeight - window.innerHeight);
};

function UserCss() {
  this.handleChange = this.handleChange.bind(this);
  this.handleResetClick = this.handleResetClick.bind(this);
  this.handleToggleClick = this.handleToggleClick.bind(this);
  this.setValue = this.setValue.bind(this);

  var refs = this.refs = {
    elem: null,
    inputElem: null,
    modalElem: null,
    toggleElem: null,
  };

  var value = localStorage.getItem(':userCssValue') || UserCss.FALLBACK;

  var modalElem = refs.modalElem = document.createElement('div');
  modalElem.className = 'user-css user-css--hidden';
  document.body.appendChild(modalElem);

  var inputElem = refs.inputElem = document.createElement('textarea');
  inputElem.className = 'user-css__input';
  inputElem.value = value;
  inputElem.addEventListener('input', this.handleChange);
  modalElem.appendChild(inputElem);

  var resetElem = document.createElement('button');
  resetElem.className = 'user-css__reset';
  resetElem.innerHTML = 'Reset';
  resetElem.addEventListener('click', this.handleResetClick);
  modalElem.appendChild(resetElem);

  var toggleElem = refs.toggleElem = document.createElement('button');
  toggleElem.className = 'user-css__toggle';
  toggleElem.innerHTML = 'User CSS';
  toggleElem.addEventListener('click', this.handleToggleClick);
  document.body.appendChild(toggleElem);

  var elem = refs.elem = document.createElement('style');
  elem.innerHTML = value;
  document.body.appendChild(elem);
}

UserCss.prototype.handleChange = function (ev) {
  this.setValue(ev.target.value);
};

UserCss.prototype.handleResetClick = function () {
  if (window.confirm('Reset user CSS?')) {
    this.setValue(UserCss.FALLBACK);
  }
};

UserCss.prototype.handleToggleClick = function (ev) {
  ev.preventDefault();

  var refs = this.refs;
  var modalElem = refs.modalElem;
  var toggleElem = refs.toggleElem;

  if (modalElem.classList.contains('user-css--hidden')) {
    modalElem.classList.remove('user-css--hidden');
    toggleElem.classList.add('user-css__toggle--fixed');
    toggleElem.innerHTML = 'Close';
  } else {
    modalElem.classList.add('user-css--hidden');
    toggleElem.classList.remove('user-css__toggle--fixed');
    toggleElem.innerHTML = 'User CSS';
  }
};

UserCss.prototype.setValue = function (value) {
  localStorage.setItem(':userCssValue', value);
  this.refs.inputElem.value = value;
  this.refs.elem.innerHTML = value;
};

UserCss.FALLBACK = [
  '.doc-nav { margin-top: -2.5em; position: fixed; right: 8px; top: 50%; }',
  '.doc-nav__btn { font-size: inherit; height: 2.5em; }',
  '.user-css--hidden { display: none; }',
  '.user-css__input { height: 100%; left: 0; margin: 0; max-width: 100%; position: fixed; top: 0; width: 100%; }',
  '.user-css__reset { bottom: 0; position: fixed; right: 0; }',
  '.user-css__toggle { clear: right; float: right; margin-bottom: 10px; }',
  '.user-css__toggle--fixed { position: fixed; right: 0; top: 0; }',
].join('\n');

if (localStorage.getItem(':bannerDown') !== 'false') {
  new BannerDown();
}

if (localStorage.getItem(':docNav') !== 'false') {
  new DocNav();
}

if (localStorage.getItem(':userCss') !== 'false') {
  new UserCss();
}
})();