var first = true;

function addCSS(name, stylesheet) {

    var place = document.getElementById("stylechooser");

    if (first === true) {
        first = false;
    } else {
        place.innerHTML += " / "; 
    }

    var style = document.createElement("a");
    style.href = "#stylechooser";
    style.innerHTML = name;
    style.setAttribute("onclick", `loadCSS(${'"'+ stylesheet + '"'})`);

    place.appendChild(style);
}

function loadCSS(stylesheet) {
    document.getElementById("mainstyle").href = stylesheet;
    document.cookie = `style=${stylesheet}`;
}

var currentstyle = document.cookie.split("=")[1]

if (typeof currentstyle === "undefined") {
    loadCSS("style.css");
} else {
    loadCSS(currentstyle);
}

var stylechooser = document.createElement("div");
stylechooser.setAttribute("id", "stylechooser");
stylechooser.innerHTML = "Styles: ";

document.getElementById("content").appendChild(stylechooser);

addCSS("default", "style.css");
addCSS("moe", "moe.css");
addCSS("simple", "simple.css");