Index: 3-extensions/tabletop-dl/trunk/my-interact.js
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/my-interact.js	(revision 37464)
+++ 	(revision )
@@ -1,180 +1,0 @@
-
-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)
-}
-
-
-$(document).ready(function() {
-
-
-    //var resize_drag_elems = document.getElementsByClassName('resize-drag')
-
-    //var resize_drag_elem = resize_drag_elems[0];
-    
-    //console.log(resize_drag_elem);
-    
-    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')
-		}
-	    }
-	})
-	.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
-
-
-
-
-
-
-    
-
-    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-interact.js
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/tabletop-interact.js	(revision 37465)
+++ /gs3-extensions/tabletop-dl/trunk/tabletop-interact.js	(revision 37465)
@@ -0,0 +1,180 @@
+
+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)
+}
+
+
+$(document).ready(function() {
+
+
+    //var resize_drag_elems = document.getElementsByClassName('resize-drag')
+
+    //var resize_drag_elem = resize_drag_elems[0];
+    
+    //console.log(resize_drag_elem);
+    
+    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')
+		}
+	    }
+	})
+	.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
+
+
+
+
+
+
+    
+
+    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.html
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/tabletop.html	(revision 37464)
+++ /gs3-extensions/tabletop-dl/trunk/tabletop.html	(revision 37465)
@@ -20,5 +20,5 @@
     
     <script src="interactjs-dist/interact.min.js"></script>
-    <script src="my-interact.js"></script>
+    <script src="tabletop-interact.js"></script>
    
 
@@ -71,52 +71,4 @@
     </div>
     
-    <!--
-    <header id="fixed-height">
-      <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
-    </header>
-    
-    <div id="remaining-height">
-
-      <div style="position: relative; height: 100%; width: 100%; padding: 40px;">
-	<div>
-	  
-      <div class="button" 
-	   style="position: absolute; left: 10px; bottom: 10px; background-color: #004000"
-	   onclick="openGSWindow()">Open DL Home</div>
-       
-      < !- -
-	  <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"
-	       id="scale-element" />
-	</div>
-
-	<div id="info-window-id" class="info-window resize-drag">
-	  <p> You can drag one element </p>
-	  <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
-	  <p>
-	    <form>
-	      <input type="text" />
-	    </form>
-	  </p>
-	</div>
-	
-	< ! - -
-	    <hr />
-	    - - >
-
-	</div>
-      </div>
-	    
-    </div>
-    -->
     
   </body>
