a lot of stylin and a little scriptin

script/single.js

@@ -0,0 +1,55 @@
+
+function defined(x) {
+  return x !== null && typeof x !== 'undefined';
+}
+
+function getById(id) { return document.getElementById(id); }
+
+function setImage(src, href, cw) {
+  let mainfig = getById('mainfig');
+  let mainimg = getById('mainimg');
+  let mainlink = getById('mainlink');
+  let caption = getById('cw');
+
+  if (defined(caption) && defined(cw)) {
+    caption.innerHTML = cw;
+  } else if (defined(caption)) {
+    mainfig.removeChild(caption);
+  } else if (defined(cw)) {
+    let newCaption = document.createElement('figcaption');
+    newCaption.id = 'cw';
+    newCaption.innerHTML = cw;
+    newCaption.onclick = openCW;
+    mainfig.insertBefore(newCaption, mainlink);
+  }
+
+  mainimg.src = src;
+  mainlink.href= href;
+}
+
+function activateButton(button) {
+  setImage(button.value, button.dataset.link, button.dataset.warning);
+}
+
+function openCW() {
+  let mainfig = getById('mainfig');
+  let caption = getById('cw');
+  if (defined(caption)) {
+    mainfig.removeChild(caption);
+  }
+}
+
+function setup() {
+  for (let button of document.querySelectorAll('#altlist input')) {
+    button.onchange = function(e) {
+      if (button.checked) activateButton(button);
+    };
+  }
+
+  let caption = getById('cw');
+  if (defined(caption)) {
+    caption.onclick = openCW;
+  }
+}
+
+window.onload = setup;