diff --git a/quack.css b/quack.css
new file mode 100644
index 0000000000000000000000000000000000000000..24ec5f83abfe421d2f8dd0ea3b571358004ab268
--- /dev/null
+++ b/quack.css
@@ -0,0 +1,143 @@
+.xmlvalue {
+ color: #066;
+}
+
+#zoom-display {
+ position: relative;
+ margin-right: 340px;
+ height: 900px;
+ border: 1px solid black;
+ overflow: hidden;
+}
+
+div.openseadragon-canvas canvas {
+ /*
+ Since we're doing QA and are likely to look at pixels,
+ we try to disable fancy scaling
+ Seems not to be working...
+ */
+ image-rendering:optimizeSpeed; /* Legal fallback */
+ image-rendering:optimize-contrast; /* CSS3 Proposed */
+ image-rendering:-moz-crisp-edges; /* Firefox */
+ image-rendering:-o-crisp-edges; /* Opera */
+ image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */
+ -ms-interpolation-mode:nearest-neighbor; /* IE8+ */
+}
+
+#gridbox {
+ position: absolute;
+ z-index: 10;
+ pointer-events: none;
+ width : 100%;
+ margin-right: 400px;
+ height: 900px;
+ overflow: hidden;
+}
+
+.control {
+ position: absolute;
+ width: 250px;
+ right: 10px;
+ margin-right: 2em;
+ padding: 0.5em 1.5em 0.5em 1em;
+ border: 3px solid #999;
+}
+
+.control p {
+ margin-bottom: 0;
+ margin-top: 0;
+}
+
+.gridline {
+ position: absolute;
+ pointer-events: none;
+ background: #00C;
+}
+
+.gridlinex {
+ height: 1px;
+ width: 100%;
+}
+
+.gridliney {
+ height: 100%;
+ width: 1px;
+}
+
+.highlight {
+ opacity: 0.4;
+ filter: alpha(opacity=40);
+ border: 2px solid #BE3333;
+ background-color: transparent;
+}
+.highlight:hover, .highlight:focus {
+ filter: alpha(opacity=70);
+ opacity: 0.7;
+ border: 4px solid #FF3333;
+}
+.group {
+ background-color: #9999FF;
+}
+.next {
+ background-color: #3333FF;
+ opacity: 0.8;
+ filter: alpha(opacity=80);
+}
+.illustration {
+ opacity: 0.4;
+ filter: alpha(opacity=40);
+ border: 2px solid #3333BE;
+ background-color: transparent;
+}
+.illustration.group {
+ border: 3px solid #9999FF;
+ opacity: 1.0;
+ filter: alpha(opacity=100);
+}
+.composed {
+ opacity: 0.4;
+ filter: alpha(opacity=40);
+ outline: 2px solid #CCCC33;
+ background-color: transparent;
+}
+
+#idbox #idnextbox {
+ width: 100%;
+ min-height: 1.5em;
+}
+
+#ocrbox {
+ width: 100%;
+ min-height: 20em;
+ border: 2px solid #FF3333;
+}
+
+.warning {
+ background: #F99;
+}
+
+.thumblink {
+ margin-right: 1em;
+}
+
+ul.alternatives {
+ font-size: 70%;
+ margin-left: 0;
+ padding-left: 0;
+}
+ul.alternatives li {
+ display: inline;
+ margin-left: 0;
+ padding-left: 0;
+}
+ul.alternatives li + li:before {
+ content: " | ";
+}
+.histogram img {
+ border: 1px dotted grey;
+}
+
+.whiteoverlay {
+ background-size: 100% 100%;
+ pointer-events: none;
+}
\ No newline at end of file
diff --git a/quack.js b/quack.js
new file mode 100644
index 0000000000000000000000000000000000000000..f1252aba7c72cd71f45d6f0cf023f5277aa636b0
--- /dev/null
+++ b/quack.js
@@ -0,0 +1,154 @@
+//! Toggling of grid and overlays
+
+function toggleGrid() {
+ if (document.getElementById('toggle_grid').checked) {
+ state = 'block';
+ } else {
+ state = 'none';
+ }
+
+ var content = document.getElementsByClassName('gridline');
+ for (var i = 0 ; i < content.length ; i++) {
+ content[i].style.display = state;
+ }
+}
+
+function toggleBlown() {
+ if (document.getElementById('toggle_blown').checked) {
+ opacity = 100;
+ } else {
+ opacity = 0;
+ }
+
+ for (var i = 0; i < myDragon.overlays.length; i++) {
+ var id = myDragon.overlays[i].id;
+ if ( id == 'black' || id == 'white' ) {
+ OpenSeadragon.setElementOpacity(id, opacity, false);
+ }
+ }
+
+ if (document.getElementById('toggle_blown').checked) {
+ state = 'block';
+ } else {
+ state = 'none';
+ }
+
+ var content = document.getElementsByClassName('whiteoverlay');
+ for (var i = 0 ; i < content.length ; i++) {
+ content[i].style.display = state;
+ }
+ var content = document.getElementsByClassName('blackoverlay');
+ for (var i = 0 ; i < content.length ; i++) {
+ content[i].style.display = state;
+ }
+}
+
+function toggleTextBlock() {
+ if (document.getElementById('toggle_textblock').checked) {
+ opacity = 100;
+ } else {
+ opacity = 0;
+ }
+
+ for (var i = 0; i < myDragon.overlays.length; i++) {
+ var id = myDragon.overlays[i].id;
+ if ( id == 'black' || id == 'white' ) {
+ continue;
+ }
+ OpenSeadragon.setElementOpacity(id, opacity, false);
+ }
+}
+
+var ocrs = {};
+var nexts = {};
+var prevs = {};
+
+// Fill in OCR for blocks with
+// ocrs["BLOCK1"] = "MyOCR";
+// On the preview page
+
+function addForward(overlay, className) {
+ if (!document.getElementById(overlay)) return;
+ document.getElementById(overlay).className = document.getElementById(overlay).className + ' ' + className;
+ if (overlay in nexts) {
+ addForward(nexts[overlay], className);
+ }
+}
+function addBackward(overlay, className) {
+ if (!document.getElementById(overlay)) return;
+ document.getElementById(overlay).className = document.getElementById(overlay).className + ' ' + className;
+ if (overlay in prevs) {
+ addBackward(prevs[overlay], className);
+ }
+}
+function removeForward(overlay, className) {
+ if (!document.getElementById(overlay)) return;
+ document.getElementById(overlay).className = document.getElementById(overlay).className.replace(' ' + className, '');
+ if (overlay in nexts) {
+ removeForward(nexts[overlay], className);
+ }
+}
+function removeBackward(overlay, className) {
+ if (!document.getElementById(overlay)) return;
+ document.getElementById(overlay).className = document.getElementById(overlay).className.replace(' ' + className, '');
+ if (overlay in prevs) {
+ removeBackward(prevs[overlay], className);
+ }
+}
+function inOverlay(overlay) {
+ document.getElementById('idbox').innerHTML = 'ID: ' + overlay;
+ if (overlay in nexts) {
+ document.getElementById('idnextbox').innerHTML = 'IDNEXT: ' + nexts[overlay];
+ } else {
+ document.getElementById('idnextbox').innerHTML = 'IDNEXT: ';
+ }
+
+ if (overlay in ocrs) {
+ document.getElementById('ocrbox').innerHTML = ocrs[overlay];
+ } else {
+ document.getElementById('ocrbox').innerHTML = '';
+ }
+ addForward(overlay, "group");
+// addForward(overlay, "next");
+ addBackward(overlay, "group");
+ if (overlay in nexts) {
+ document.getElementById(nexts[overlay]).className = document.getElementById(nexts[overlay]).className + ' next';
+ }
+}
+function outOverlay(overlay) {
+ document.getElementById('ocrbox').innerHTML = '';
+ document.getElementById('idnextbox').innerHTML = 'IDNEXT: ';
+ document.getElementById('idbox').innerHTML = 'ID: ';
+
+ removeForward(overlay, "group");
+ removeForward(overlay, "next");
+ removeBackward(overlay, "group");
+ removeBackward(overlay, "next");
+}
+
+function setupJS() {
+ toggleGrid();
+ toggleTextBlock();
+ toggleBlown();
+
+ //! Create a callback for eack overlay with the overlay-ID as argument
+ for (var i = 0; i < myDragon.overlays.length; i++) {
+ id = myDragon.overlays[i].id;
+ shortid = id.split("/").pop();
+ if ( id == 'white' || id == 'black' ) {
+ continue;
+ }
+
+ o = document.getElementById(id);
+ o.onmouseover = new Function('inOverlay("' + shortid + '")');
+ o.onmouseout = new Function('outOverlay("' + shortid + '")');
+ }
+
+ // Try to disable fancy interpolation
+ var canvases = document.getElementsByTagName("canvas");
+ for(var i = 0; i < canvases.length; i++){
+ canvases[i].style.imageRendering = "-moz-crisp-edges";
+ canvases[i].getContext.mozImageSmoothingEnabled = false;
+ }
+}
+window.onload=setupJS;