window.onload = function (){
  console.log('nice to see you, old friend :)');
}

function favicon(url) {
  var f = document.createElement('link');
  f.rel = 'icon';
  f.type = 'icon/x-image';
  f.href = url;

  return f;
}

document.addEventListener('click', function(e) {
  var newFaviconUrl = 'img/purple.ico',
      head = document.querySelector('head'),
      bodyClasses = document.querySelector('body').classList,
      mouseX = e.clientX, mouseY = e.clientY;
  if (mouseY < 15) { /* if inside body::before */
    var oldFavicon = document.querySelector('link[rel=icon]');
    bodyClasses.add('new');
    head.removeChild(oldFavicon);
    /* using a timer so that the favicon and css declared color
      change at the same time-ish */
    setTimeout(function() {
      head.appendChild(favicon(newFaviconUrl)); 
    }, 500);
  }
});

window.onload = function (){
  console.log('nice to see you, old friend :)');
}

function titleCase(str) {
  return str[0].toUpperCase() + str.slice(1, str.length);
}

function changeColor(color) {
  setAccentColor(color);
  setLinkColor(color);
  setTimeout(function() {
    setFaviconColor(color);
  }, 500);
}

function setAccentColor(color) {
  var styles = document.createElement('style');
  document.querySelector('head').appendChild(styles);
  styles.sheet.addRule('body::before', 'background-color: ' + color);
  styles.sheet.addRule('footer .link-color', 'color: ' + color);
  styles.sheet.addRule('footer .link-color:after', 'content: "' + titleCase(color) + '"');
}

function setLinkColor(color) {
  var linkElements = document.querySelectorAll('a, a:hover, a:visited'),
      links = [].slice.call(linkElements);

  links.forEach(function(link) {
    link.style.setProperty('color', color);
    link.style.setProperty('border-bottom-color', color);
  });
}

function setFaviconColor(color) {
  var icon = document.querySelector('[rel=icon]');
  favicolor(icon, color);
}

var hashedColor = window.location.hash.split('#/');

if (hashedColor.length != 1) {
  changeColor(hashedColor[1]);
}

window.addEventListener('hashchange', function(e) {
  var color = e.newURL.split('/#/')[1];
  changeColor(color);
});

document.addEventListener('click', function(e) {
  if (e.clientY < 15) { /* if inside body::before */
    var body = document.querySelector('body');
    body.classList.add('new'); 
    setTimeout(function() {
      setFaviconColor('RebeccaPurple');
    }, 500);
  }
});

change color to any colostring with hash