Index: /gs3-extensions/tabletop-dl/trunk/my-interact.js
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/my-interact.js	(revision 37463)
+++ /gs3-extensions/tabletop-dl/trunk/my-interact.js	(revision 37463)
@@ -0,0 +1,173 @@
+// target elements with the "draggable" class
+interact('.resize-drag')
+  .draggable({
+    // enable inertial throwing
+    inertia: true,
+    // keep the element within the area of it's parent
+    modifiers: [
+      interact.modifiers.restrictRect({
+        restriction: 'parent',
+        endOnly: true
+      })
+    ],
+    // enable autoScroll
+    autoScroll: true,
+
+    listeners: {
+      // call this function on every dragmove event
+      move: dragMoveListener,
+
+      // call this function on every dragend event
+      end (event) {
+        var textEl = event.target.querySelector('p')
+
+        textEl && (textEl.textContent =
+          'moved a distance of ' +
+          (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
+                     Math.pow(event.pageY - event.y0, 2) | 0))
+            .toFixed(2) + 'px')
+      }
+    }
+  })
+
+function dragMoveListener (event) {
+  var target = event.target
+  // keep the dragged position in the data-x/data-y attributes
+  var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
+  var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
+
+  // translate the element
+  target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
+
+  // update the posiion attributes
+  target.setAttribute('data-x', x)
+  target.setAttribute('data-y', y)
+}
+
+
+
+interact('.resize-drag')
+  .resizable({
+    // resize from all edges and corners
+    edges: { left: true, right: true, bottom: true, top: true },
+
+    listeners: {
+      move (event) {
+        var target = event.target
+        var x = (parseFloat(target.getAttribute('data-x')) || 0)
+        var y = (parseFloat(target.getAttribute('data-y')) || 0)
+
+        // update the element's style
+        target.style.width = event.rect.width + 'px'
+        target.style.height = event.rect.height + 'px'
+
+        // translate when resizing from top or left edges
+        x += event.deltaRect.left
+        y += event.deltaRect.top
+
+        target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
+
+        target.setAttribute('data-x', x)
+        target.setAttribute('data-y', y)
+        target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
+      }
+    },
+    modifiers: [
+      // keep the edges inside the parent
+      interact.modifiers.restrictEdges({
+        outer: 'parent'
+      }),
+
+      // minimum size
+      interact.modifiers.restrictSize({
+        min: { width: 100, height: 50 }
+      })
+    ],
+
+    inertia: true
+  });
+
+/*
+  .draggable({
+    listeners: { move: window.dragMoveListener },
+    inertia: true,
+    modifiers: [
+      interact.modifiers.restrictRect({
+        restriction: 'parent',
+        endOnly: true
+      })
+    ]
+  })
+*/
+
+// this function is used later in the resizing and gesture demos
+window.dragMoveListener = dragMoveListener
+
+
+
+
+
+$(document).ready(function() {
+    
+
+var angleScale = {
+  angle: 0,
+  scale: 1
+}
+var gestureArea = document.getElementById('gesture-area')
+var scaleElement = document.getElementById('scale-element')
+var resetTimeout
+
+interact(gestureArea)
+  .gesturable({
+    listeners: {
+      start (event) {
+        angleScale.angle -= event.angle
+
+        clearTimeout(resetTimeout)
+        scaleElement.classList.remove('reset')
+      },
+      move (event) {
+        // document.body.appendChild(new Text(event.scale))
+        var currentAngle = event.angle + angleScale.angle
+        var currentScale = event.scale * angleScale.scale
+
+        scaleElement.style.transform =
+          'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
+
+        // uses the dragMoveListener from the draggable demo above
+        dragMoveListener(event)
+      },
+      end (event) {
+        angleScale.angle = angleScale.angle + event.angle
+        angleScale.scale = angleScale.scale * event.scale
+
+        //resetTimeout = setTimeout(reset, 1000)
+        //scaleElement.classList.add('reset')
+      }
+    }
+  })
+  .draggable({
+      inertia: true,
+      modifiers: [
+	  interact.modifiers.restrictRect({
+              restriction: 'parent',
+              endOnly: true
+	  })
+      ],
+      listeners: { move: dragMoveListener }
+  })
+
+
+/*
+function reset () {
+  scaleElement.style.transform = 'scale(1)'
+
+  angleScale.angle = 0
+  angleScale.scale = 1
+}
+*/
+
+
+
+});
Index: /gs3-extensions/tabletop-dl/trunk/tabletop-winbox.css
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/tabletop-winbox.css	(revision 37462)
+++ /gs3-extensions/tabletop-dl/trunk/tabletop-winbox.css	(revision 37463)
@@ -12,16 +12,18 @@
 
 body {
-    position: fixed;
+    /* position: fixed; 
     top: 0;
     right: 0;
     bottom: 0;
-    left: 0;
+    left: 0;  */
+    
     font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
-    text-align: center;
+    /* text-align: center; */
     color: #fff;
-
+/*
     -webkit-tap-highlight-color: transparent;
     -webkit-text-size-adjust: 100%;
     -webkit-touch-callout: none;
+*/
     /*
     -webkit-user-select: none;
@@ -34,4 +36,5 @@
     overflow: hidden;
 }
+/*
 main{
     position: fixed;
@@ -42,19 +45,23 @@
     overflow-x: hidden;
     overflow-y: hidden;
+    /* overflow-y: scroll; */
     -webkit-overflow-scrolling: touch;
     overflow-scrolling: touch;
     /*content-visibility: auto;*/
 }
-header{
-    position: sticky;
-    top: 0;
-    width: 100%;
-    height: 50px;
-    /* background: linear-gradient(to right, rgba(13, 17, 22, 0.94), rgba(17, 21, 28, 0.94)); */
-    background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
-    padding: 15px 0;
-    border-bottom: 1px solid #181f2a;
-    z-index: 2;
-}
+ */
+ 
+header {
+    /*position: sticky;
+    top: 0; */
+     width: 100%;
+     height: 50px;
+     /* background: linear-gradient(to right, rgba(13, 17, 22, 0.94), rgba(17, 21, 28, 0.94)); */
+     background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
+     padding: 15px 0;
+     /* border-bottom: 1px solid #181f2a; */
+     z-index: 2;
+ }
+ 
 .wrapper{
     position: relative;
@@ -67,4 +74,5 @@
     z-index: 1;
 }
+/*
 a{
     display: inline-block;
@@ -77,4 +85,6 @@
     padding: 10px;
 }
+*/
+
 button{
     padding: 5px 10px;
@@ -85,4 +95,5 @@
     padding: 0;
 }
+/*
 h1 img{
     width: 100%;
@@ -100,5 +111,7 @@
     margin:0;
 }
-hr{
+*/
+
+hrXX {
     border: 0;
     border-bottom: 1px solid #1c2431;
@@ -106,4 +119,5 @@
     padding-top: 20px;
 }
+
 .button {
     display: inline-block;
Index: /gs3-extensions/tabletop-dl/trunk/tabletop.html
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/tabletop.html	(revision 37462)
+++ /gs3-extensions/tabletop-dl/trunk/tabletop.html	(revision 37463)
@@ -10,9 +10,26 @@
 
     
+    <!-- Import as bundled (All-in-one): -->
+    <!-- <script src="dist/winbox.bundle.min.js"></script> -->
+
+    <!-- Or import JS + CSS separately: -->
+    <!--
+    <link rel="stylesheet" href="winbox-dist/css/winbox.min.css">
+    <script src="winbox-dist/js/winbox.min.js"></script>
+    -->
+    
+    <script src="interactjs-dist/interact.min.js"></script>
+    <script src="my-interact.js"></script>
+
+    <!--
     <script src="drag-with-inertia.js"></script>
-
+    -->
+    
+    <!--
     <link rel="stylesheet" href="tabletop-winbox.css">
+    -->
     
     <style>
+      /*
       html  {
 	  overflow: hidden;
@@ -23,17 +40,153 @@
 	  overflow: hidden;
       }
+
+      html, body {
+	  margin: 0;
+	  padding: 0;
+	  border: 0;
+      }
+
+      body {
+	  position: fixed;
+	  top: 0;
+	  right: 0;
+	  bottom: 0;
+	  left: 0;
+	  font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
+	  text-align: center;
+	  color: #fff;
+      }
+
+      header {
+	  position: sticky;
+	  top: 0;
+	  width: 100%;
+	  //height: 30px; 
+	  color: white;
+	  background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
+	  padding: 0.6rem;
+	  border-bottom: 1px solid #181f2a;
+	  z-index: 2;
+      }
+*/
+      html {
+	  background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
+	  background-size: cover;
+      }
+		  
+      html, body {
+	  overflow: hidden;
+          height: 100%;
+          width:  100%;
+          margin:  0;
+	  padding: 0;
+	  border:  0;
+      }
+
+      body {
+	  font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
+	  color: #fff;
+      }
+      
+      #fixed-height {
+          height: 40px;
+	  color: white;
+	  background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
+          text-align: center; 
+      }
+
+      #remaining-height {
+	  overflow: hidden;	  
+          position: absolute;
+          top: 40px;
+          bottom: 0;
+          width: 100%;
+      }
+
+
+      #drag-1, #drag-2 {
+	  width: 25%;
+	  min-height: 6.5em;
+	  margin: 1rem 0 0 1rem;
+	  background-color: #29e;
+	  color: white;
+	  border-radius: 0.75em;
+	  padding: 4%;
+	  touch-action: none;
+	  user-select: none; 
+	  transform: translate(0px, 0px);
+      }
+      
+      .resize-drag {
+	  width: 120px;
+	  border-radius: 8px;
+	  padding: 20px;
+	  margin: 1rem;
+	  background-color: #29e;
+	  color: white;
+	  font-size: 20px;
+	  font-family: sans-serif;
+	  
+	  touch-action: none;
+	  
+	  /* This makes things *much* easier */
+	  box-sizing: border-box;
+      }
+
+
+      #scale-element {
+	  display: block;
+	  max-width: 100%;
+	  margin: 1rem auto;
+	  touch-action: none;
+      }
+      
     </style>
 </head>
 
+<!--
+    https://www.w3docs.com/snippets/html/how-to-make-a-div-fill-the-height-of-the-remaining-space.html#:~:text=Another%20way%20of%20making%20a,to%20stretch%20the%20.
+  -->
+
 <body>
-  <main>
-    <header>
-      Greenstone Tabletop Digital Library
+    <header id="fixed-height">
+      <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
     </header>
 
-    <div class="wrapper">
-      <div class="button" onclick="window.examples['iframe']()" style="background-color: #004000">Open DL Home</div>
-      <br /><br />
-
+    <!--
+	<div class="wrapperXXX" style="position: absolute; height: 95%; width: 100%; margin: 0.8rem;">
+	  -->
+     <div id="remaining-height">
+
+      <!--
+	  <div class="button" onclick="window.examples['iframe']()" style="background-color: #004000">Open DL Home</div>
+	  -->
+
+      <!-- 
+        <hr />
+      -->
+	
+	<div id="gesture-area" style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
+	  <img src="backgrounds/unsplash--matrix-like-binary.jpg"
+	       style="width: 576px; height: 384px"
+	       alt="sample image" id="scale-element" />
+	</div>
+
+	<div id="drag-1" class="resize-drag">
+	  <p> You can drag one element </p>
+	  <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
+	</div>
+	<div id="drag-2" class="resize-drag">
+	  <p> with each pointer </p>
+	  <form>
+	    <input type="text" />
+	  </form>
+	</div>
+
+	
+<!--
+	<hr />
+-->	
+      <!--
       <div style="position: relative; height: 400px; ">
 	<div id="myWindow" style="width: 500px; padding: 16px; background-color: #004000; position: absolute;">
@@ -46,5 +199,5 @@
       <div style="position: relative">
 	
-	<div id="myWindow2" style="width: 500px; padding: 16px; background-color: #200000; position: absolute;">
+	<div id="myWindow2" style="width: 500px; padding: 16px; background-color: #200000; position: absolute; left: 600px;">
 	  <div style="width: 100% height 40px; background-color: #400000;">Fixed -- no handler</div>
 	  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
@@ -54,7 +207,6 @@
       
     </div>
-      
+    -->
     </div>
-  </main>
 </body>
 </html>
