// ==UserScript==
// @name       Glitch Support Dark Mode
// @namespace  SUPPORT-DARK-MODE
// @version    0.1
// @match      https://support.glitch.com/*
// @description your friendly dark screen for support.glitch.com
// @downloadURL none
// ==/UserScript==

//variables
//#d6d4d4
var body = document.getElementsByTagName("body")[0];
var center = document.createElement("center");
var hr = document.createElement("hr");
var brk = document.createElement("br");
var dark = document.createElement("button");
var light = document.createElement("button");
var style = document.createElement("style");

var title = document.getElementById("topic-title");
var category = document.getElementsByClassName("category-name");
var user = document.getElementsByClassName("username");

// specifying IDs so that I can declare styles

dark.setAttribute("id", "dark");
light.setAttribute("id", "light");

//child appends

center.appendChild(hr);
center.appendChild(dark);
// center.appendChild(brk);
center.appendChild(light);

body.appendChild(center);

document.head.appendChild(style);


// Setting innerHTML content

dark.innerHTML = "dark";
light.innerHTML = "light";


//Document Event Listener

dark.addEventListener("click", function() {
  __a("DARK");
});
light.addEventListener("click", function() {
  __a("LIGHT");
});


// Functions defining what to do...

function darkstyles() {
  style.innerHTML = `

    body {
      background-color: black;
      color: white;
    }

    .fancy-title {
      color: white;
    }

    #topic-title h1 a {
      color: white;
    }

    .category-name {
      color: white;
    }

    .username {
      color: white;
    }

    #light {
      border: solid #4545CC 2px;
      color: #4545CC;
      fill: #4545CC;
      background: white;
      height: 30px;
      border-radius: 5px;
      transition: top 0.2s ease;
      position: relative;
      top: 0;
      vertical-align: middle;
      cursor: pointer;
      text-transform: uppercase;
      font-family: monospace;
      font-weight: bold;
      margin-bottom: 40px;
    }

    #dark {
      border: solid white 2px;
      color: white;
      fill: #4545CC;
      background: #4545CC;
      height: 32px;
      border-radius: 5px;
      transition: top 0.2s ease;
      position: relative;
      top: 0;
      vertical-align: middle;
      cursor: pointer;
      text-transform: uppercase;
      font-family: monospace;
      font-weight: bold;
      margin-bottom: 40px;
      margin-right: 10px;
    }

    .topic-list-main-link a.title, .topic-list .main-link a.title, .latest-topic-list-item .main-link a.title {
      color: white;
    }

    blockquote {
      background-color: black;
    }

    aside.quote .title {
      background-color: black;
    }

    .topic-map {
      color: white;
      border-radius: 5px;
      background-color: black;
    }

    .map {
      border-radius: 5px;
      color: white;
      background-color: black;
    }

    .topic-map h3 {
      color: white;
      background-color: black;
    }

    .names span a {
      color: #d6d4d4;
    }

    .discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover {
      color: #d6d4d4;
    }
  `
}

function lightstyles() {
  style.innerHTML = `

    body {
      background-color: white;
      color: black;
    }

    .fancy-title {
      color: black;
    }

    .category-name {
      color: black;
    }

    .username {
      color: black;
    }

    #light {
      border: solid #4545CC 2px;
      color: #4545CC;
      fill: #4545CC;
      background: white;
      height: 30px;
      border-radius: 5px;
      transition: top 0.2s ease;
      position: relative;
      top: 0;
      vertical-align: middle;
      cursor: pointer;
      text-transform: uppercase;
      font-family: monospace;
      font-weight: bold;
      margin-bottom: 40px;
    }

    #dark {
      border: solid white 2px;
      color: white;
      fill: #4545CC;
      background: #4545CC;
      height: 32px;
      border-radius: 5px;
      transition: top 0.2s ease;
      position: relative;
      top: 0;
      vertical-align: middle;
      cursor: pointer;
      text-transform: uppercase;
      font-family: monospace;
      font-weight: bold;
      margin-bottom: 40px;
      margin-right: 10px;
    }

    .topic-list-main-link a.title, .topic-list .main-link a.title, .latest-topic-list-item .main-link a.title {
      color: black;
    }

    blockquote {
      background-color: #f9f9f9;
    }

    aside.quote .title {
      background-color: #f9f9f9;
    }

    .topic-map {
      color: black;
      border-radius: 5px;
      background-color: #e9e9e9;
    }

    .map {
      border-radius: 5px;
      color: black;
      background-color: #e9e9e9;
    }

    .topic-map h3 {
      color: black;
      background-color: #e9e9e9;
    }

    .names span a {
      color: #646464;
    }

    .discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover {
      color: #646464;
    }

`
}

//mode function
function __a(mode) {
  switch (mode) {

    case "DARK":
      darkstyles();
      break;

    case "LIGHT":
      lightstyles();
      break;
  }
}

// Styles for the button

style.innerHTML = `

#light {
  border: solid #4545CC 2px;
  color: #4545CC;
  fill: #4545CC;
  background: white;
  height: 30px;
  border-radius: 5px;
  transition: top 0.2s ease;
  position: relative;
  top: 0;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  font-family: monospace;
  font-weight: bold;
  margin-bottom: 40px;
}

#dark {
  border: solid white 2px;
  color: white;
  fill: #4545CC;
  background: #4545CC;
  height: 32px;
  border-radius: 5px;
  transition: top 0.2s ease;
  position: relative;
  top: 0;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  font-family: monospace;
  font-weight: bold;
  margin-bottom: 40px;
  margin-right: 10px;
}
`;


var SES_SAVE = window.sessionStorage;

var SES_SAVE_ELEM = document.createElement("button");

center.appendChild(brk);
center.appendChild(SES_SAVE_ELEM);