Set max value for radius; auto-set radius on first start

xray.js

@@ -15,6 +15,8 @@ let border = true;
 let fitScreen = true;
 let paintMode = false;
 
+let firstTime = true;
+
 let scale;
 
 document.addEventListener("DOMContentLoaded", e => {
@@ -230,6 +232,7 @@ document.addEventListener("DOMContentLoaded", e => {
             artistLink.style.display = "none";
         }
 
+        firstTime = false;
 
 
 
@@ -395,6 +398,19 @@ function setup() {
 
     overlayCtxResized.drawImage(overlayImg, 0, 0, width, height);
 
+    // if we're starting fresh, set the radius value to be a fraction of the image size
+
+    if (firstTime) {
+        radius = Math.floor((baseImg.width + baseImg.height) / 10);
+        document.querySelector("#radius-input").value = radius;
+        document.querySelector("#radius-slider").value = radius;
+        firstTime = false;
+    }
+    // also set up the input ranges
+
+    document.querySelector("#radius-input").max = Math.max(baseImg.width, baseImg.height);
+    document.querySelector("#radius-slider").max = Math.max(baseImg.width, baseImg.height);
+
     console.log("Done");
 }