Index: /gs3-extensions/tabletop-dl/trunk/tabletop-interact.js
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/tabletop-interact.js	(revision 37558)
+++ /gs3-extensions/tabletop-dl/trunk/tabletop-interact.js	(revision 37559)
@@ -40,11 +40,10 @@
 }
 
-// http://localhost:8383/greenstone3/library
-
 function getCoreResizableOptions()
 {
     let core_resizable_options = {
-	
-	edges: { left: true, right: true, bottom: true, top: true },
+
+	preserveAspectRatio: false,
+	edges: { left: true, right: true, bottom: true, top: false },
 	    
 	listeners: {
@@ -249,9 +248,9 @@
 	    const winbox1 = new WinBox({
 		id:    "my-winbox1",
-		title: 'Winbox + Interact Example 1',
-		x: 200,
-		y: 200,
-		width: '900px',
-		height: '400px',
+		title: 'Winbox + Interact Example: Drag and Resize',
+		x:  80,
+		y: 90,
+		width:  "465px",
+		height: "585px",
 		border: "0.3em",
 		background: "#29e",
@@ -262,4 +261,6 @@
 	    $('#my-winbox1 .wb-header').css("user-select", "none");
 	    $('#my-winbox1 .wb-header').css("touch-action","none");
+
+	    $('#my-winbox1 .wb-body').addClass("winbox-info-window");
 	    
 	    let draggable_options = getCoreDraggableOptions();
@@ -275,49 +276,72 @@
 
 
-    const win2 = new WinBox({
-	id:    "my-winbox2",
-	title: 'Winbox + Interact Example 2',
-	x: 800,
-	y: 200,
-	width: '500px',
-	height: '300px',
-	border: "0.3em",
-	background: "#29e",
-	html: "<p classXXX=\"scale-element\" style=\"padding: 8px; color: #000;\">This window can be dragged around, rotated and zoomed in and out</p>"
-    });
-
-    // user-select: none;
-    // touch-action: none;
-    
-    let $win2 = $('#my-winbox2');
-    let $scale_element_div = $('<div>').attr("class","scale-element");
-    $scale_element_div.append($win2.children()).clone();
-    
-    $win2.empty().append($scale_element_div);
-    
-    
-	
-    /*
-    interact('#my-winbox2')
-	.draggable(draggable_options)
-	.resizable(resizable_options);
-    */
-
-    let this_elem = document.getElementById('my-winbox2');
-    
-    let this_angle_scale = {
-	angle: 0,
-	scale: 1
-    }
-    
-    
-    let gdraggable_options = getCoreDraggableOptions();
-    let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
-    
-    interact('#my-winbox2')
-	.gesturable(gesturable_options)
-	.draggable(gdraggable_options);
-    
-    
+
+    let doc_url = "http://localhost:8383/greenstone3/library/collection/gs2mgdemo/document/HASHe3aae2159b0dda6553cee4";
+
+    $.ajax({
+	url: doc_url,
+	data: {
+	    "excerptid": "gs_content",
+	    "ed": "1"
+	}
+    })
+	.done(function(html_result) {
+
+	    
+	    const win2 = new WinBox({
+		id:    "my-winbox2",
+		title: 'Winbox + Interact Example: Drag, Scale and Rotate',
+		x: 1000,
+		y: 80,
+		width: '900px',
+		height: '600px',
+		border: "0.3em",
+		//background: "#29e",
+		//html: "<p>Some Sample Text</p>"
+		html: html_result
+	    });
+	    
+	    // user-select: none;
+	    // touch-action: none;
+	    
+	    let $win2 = $('#my-winbox2');
+	    let $scale_element_div = $('<div>')
+		.attr("class","scale-element")
+	    	.css("position","relative")
+	    	.css("width","100%")
+	    	.css("height","100%")
+		.css("background-color", "#29e");
+	    
+	    $scale_element_div.append($win2.children()).clone();
+	    
+	    $win2.empty().append($scale_element_div);
+	    
+	    $('#my-winbox2 .wb-body').addClass("winbox-info-window");
+    
+	    
+	    //
+	    //  interact('#my-winbox2')
+	    //  .draggable(draggable_options)
+	    //  .resizable(resizable_options);
+	    //
+	    
+	    let this_elem = document.getElementById('my-winbox2');
+	    
+	    let this_angle_scale = {
+		angle: 0,
+		scale: 1
+	    }
+	    
+	    
+	    let gdraggable_options = getCoreDraggableOptions();
+	    let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
+	    
+	    interact('#my-winbox2')
+		.gesturable(gesturable_options)
+		.draggable(gdraggable_options);
+	    
+	});
+
+
 	/*
 	interact('#my-winbox')
Index: /gs3-extensions/tabletop-dl/trunk/tabletop.css
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/tabletop.css	(revision 37558)
+++ /gs3-extensions/tabletop-dl/trunk/tabletop.css	(revision 37559)
@@ -25,4 +25,11 @@
 }
 
+div.collectionLinkText {
+    min-width: 365px;
+}
+
+span.collectionAndGroupLinks {
+    display: inline-block;
+}
 
 
@@ -93,7 +100,14 @@
     min-height: 6.5em;
     margin: 0.5em;
-    
-    background-color: var(--gs-bg-primary-col);
-    color: var(--gs-fg-primary-col);
+
+    /*
+    background-color: var(--gs-bg-primary-col);
+    color: var(--gs-fg-primary-col);
+   */
+    
+    background-color: #fff;
+    color: #000; 
+    
+    border: 0.25rem var(--gs-bg-primary-col) solid;
     
     font-size: 1.2rem;
@@ -111,4 +125,71 @@
 }
 
+
+.winbox-info-window {
+    min-height: 6.5em;
+    margin: 0.5em;
+
+    /*
+    background-color: var(--gs-bg-primary-col);
+    color: var(--gs-fg-primary-col);
+   */
+    
+    background-color: #fff;
+    color: #000;
+    /*
+    border: 0.25rem var(--gs-bg-primary-col) solid;
+   */
+    
+    font-size: 1.2rem;
+
+    /* border-radius: 0.6em; */
+    padding: 1em;
+
+    touch-action: none;
+    user-select:  none; 
+    transform: translate(0px, 0px);
+
+    /* This makes things *much* easier */
+    box-sizing: border-box;
+
+}
+
+
+.wb-header {
+    background-color: var(--gs-bg-primary-col);
+}
+
+.winbox {
+    background-color: transparent;
+}
+
+.wb-n {
+    cursor: revert;
+}
+
+
+
+/* Visual artefact turns up from box-shadow when roting */
+/* This is due to the parent div dtaying in the same fixed place, but the
+   scaled and rotated inner elements breaking out of that shap */
+
+/* Perhaps we only want none, when its being rotated? */
+
+.winbox {
+    box-shadow: none;
+}
+
+/* Report to help promote anti-aliasing affects on transform elements
+
+e.g. https://slickmedia.io/blog/stop-blurring-jagged-edges-css-transform-transition
+
+outline: 1px solid transparent;
+-webkit-backface-visibility: hidden;
+transform: translateZ(0);
+will-change: transform;
+-webkit-perspective: 1000;
+*/
+
+    
 /* currently nothing specific for resize-drag that info-window does already do */
 /*
Index: /gs3-extensions/tabletop-dl/trunk/tabletop.xsl
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/tabletop.xsl	(revision 37558)
+++ /gs3-extensions/tabletop-dl/trunk/tabletop.xsl	(revision 37559)
@@ -17,5 +17,28 @@
     <gslib:siteName/>
   </xsl:template>
+
+
+  <!-- This and the following template rule is copied verbatim from document.xsl -->
   
+  <xsl:template name="javascriptForDocumentView">
+    <script type="text/javascript" src="interfaces/{$interface_name}/js/utility_scripts.js"><xsl:text> </xsl:text></script>
+    <script type="text/javascript" src="interfaces/{$interface_name}/js/document_scripts.js"><xsl:text> </xsl:text></script>
+    <gsf:metadata name="Thumb" hidden="true"/>
+    <script type="text/javascript">
+      <xsl:text disable-output-escaping="yes">
+   	function goToAnchor(sectionID,anchor)
+	{
+	    var docIdentifier = '</xsl:text><xsl:value-of select="//documentNode[@nodeType = 'root']/@nodeID"/><xsl:text disable-output-escaping="yes">';
+	    focusAnchor(docIdentifier + "."+ sectionID,0,1,anchor);
+	}
+      </xsl:text>
+    </script>
+    <xsl:call-template name="customJavascriptForDocumentView"/>
+  </xsl:template>
+
+  <!-- Use this to add in extra javascript/files for an interface, site, collection -->
+  <xsl:template name="customJavascriptForDocumentView">
+  </xsl:template>
+
   <!-- the main layout is defined here -->
   <xsl:template name="mainTemplate">
@@ -26,4 +49,5 @@
         <!-- ***** in header.xsl ***** -->
         <xsl:call-template name="create-html-header" />
+	<xsl:call-template name="javascriptForDocumentView"/>
 
 	
