Add style switcher

Resolves #112.

css/global.css

@@ -139,3 +139,7 @@ hr {
 .adminbar a:link, .adminbar a:visited, .adminbar a:active, .adminbar a:hover {
 	text-decoration: none;
 }
+
+#switchStylesheet {
+	margin-left: 5px;
+}

inc/html.php

@@ -23,7 +23,7 @@ EOF;
 		</title>
 		<link rel="shortcut icon" href="favicon.ico">
 		<link rel="stylesheet" type="text/css" href="css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/futaba.css" title="Futaba">
+		<link rel="stylesheet" type="text/css" href="css/futaba.css" title="Futaba" id="mainStylesheet">
 		<link rel="alternate stylesheet" type="text/css" href="css/burichan.css" title="Burichan">
 		<script src="js/jquery.js"></script>
 		<script src="js/tinyib.js"></script>
@@ -539,6 +539,7 @@ EOF;
 		<div class="adminbar">
 			$cataloglink
 			[<a href="$managelink" style="text-decoration: underline;">Manage</a>]
+			<select id="switchStylesheet"><option value="">Style</option><option value="futaba">Futaba</option><option value="burichan">Burichan</option></select>
 		</div>
 		<div class="logo">
 EOF;

js/tinyib.js

@@ -1,7 +1,17 @@
-function getCookie(name) {
-	var value = "; " + document.cookie;
-	var parts = value.split("; " + name + "=");
-	if (parts.length == 2) return parts.pop().split(";").shift();
+function getCookie(cname) {
+    var name = cname + "=";
+    var decodedCookie = decodeURIComponent(document.cookie);
+    var ca = decodedCookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
 }
 
 function quotePost(postID) {
@@ -17,7 +27,7 @@ function reloadCAPTCHA() {
     return false;
 }
 
-function expandFile(e, id){
+function expandFile(e, id) {
     if (e == undefined || e.which == undefined || e.which == 1) {
         if ($("#thumbfile" + id).attr('expanded') != 'true') {
             $("#thumbfile" + id).attr('expanded', 'true');
@@ -39,7 +49,31 @@ function expandFile(e, id){
     return true;
 }
 
-$(function() {
+function setStylesheet(style) {
+    document.cookie = 'tinyib_style=' + style + '; expires=Tue, 19 Jan 2038 03:14:07 UTC; path=/; SameSite=Strict';
+
+    if ($("#mainStylesheet").attr('href').substring(0, 3) == '../') {
+        $("#mainStylesheet").attr('href', '../css/' + style + '.css');
+    } else {
+        $("#mainStylesheet").attr('href', 'css/' + style + '.css');
+    }
+}
+
+window.addEventListener('DOMContentLoaded', (event) => {
+    var style = getCookie("tinyib_style");
+    if (style && style != "") {
+        setStylesheet(style);
+    }
+
+    $('#switchStylesheet').on('change', function () {
+        if (this.value == "") {
+            return;
+        }
+
+        setStylesheet(this.value);
+        this.value = "";
+    });
+
     var newpostpassword = $("#newpostpassword");
     if (newpostpassword) {
         newpostpassword.change(function () {