Index: main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/transform/pages/document.xsl
===================================================================
--- main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/transform/pages/document.xsl	(revision 30463)
+++ main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/transform/pages/document.xsl	(revision 30519)
@@ -48,4 +48,10 @@
 	</gsf:variable>
 	
+	<gsf:variable name="cgiParamMusicStandWidth">
+	  <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'musicStandWidth']/@value"/>
+	</gsf:variable>
+	<gsf:variable name="cgiParamMusicStandHeight">
+	  <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'musicStandHeight']/@value"/>
+	</gsf:variable>
 	<gsf:variable name="cgiParamPageWidth">
 	  <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageWidth']/@value"/>
@@ -54,4 +60,7 @@
 	  <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageHeight']/@value"/>
 	</gsf:variable>
+	<gsf:variable name="cgiParamPageWidthWithBreakbar">
+	  <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageWidthWithBreakbar']/@value"/>
+	</gsf:variable>
 	<gsf:variable name="cgiParamPagePrefix">
 	  <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pagePrefix']/@value"/>
@@ -67,6 +76,7 @@
 	</gsf:variable>
 
-	
-	<table id="gotoNavBar" align="center" width="{$cgiParamPageWidth}"> 
+	<div style="width:{$cgiParamMusicStandWidth}px; margin: 0 auto;"> <!-- start of centering div -->
+	  
+	<table id="gotoNavBar" align="center" width="{$cgiParamPageWidth}" style="position: relative; left: 30px;"> 
 	  <tr>
 	    <td align="left" width="20%">
@@ -118,8 +128,82 @@
 	  </tr>
 	</table>
+
 	<table width="100%">
+	  <tbody>
 	  <tr>
-	    <td/>
-	    <td>
+	    <td><xsl:comment>filler</xsl:comment></td>
+
+	    <td width="34">
+	      <div id="slidercontainer" style="background: white; position: relative; left: 0px; top: 0px; width: 34px; height: {$cgiParamPageHeight}px;">
+		<div style="position: relative; left: 5px; top 0px;">
+		 <div id="sliderbg">
+		  <div id="slidertrackabove" style="position: absolute; left: 8px; top: 0px; width: 4px; height: 500px; z-index:4; background-color:#606060;">
+		    <xsl:comment>filler</xsl:comment>
+		  </div>
+		  <div id="slidertrackbelow" style="position: absolute; left: 10px; top: 500px; width: 1px; height: 100px; z-index:4; background-color:#606060;">
+		    <xsl:comment>filler</xsl:comment>
+		  </div>
+		 </div>
+
+		 <!--
+		 <div id="sliderpos" style="width:30px; height:11px;">
+		  <img height="11" src="{$httpCollection}/images/brown2-slider-leftmargin.png" width="30"/>
+		  </div>
+		  -->
+		 <div id="sliderpos" style="width:32px; height:27px;">
+		  <img style="position: absolute; top: -15px; left: 5px;" width="32" height="27" src="{$httpCollection}/images/corner-arrow-left-margin.png" />
+		 </div>
+
+
+		</div>
+		<script language="javascript" type="text/javascript">
+		  <xsl:text disable-output-escaping="yes">var username = musicStand.getUsername();
+	  var metaval;
+
+	  if (username != null) {
+	      var metaname = username + "-sliderposTop";
+	      metaval = 700; // ***** major hack ****
+	      //metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],metaname);
+	      //if (metaval == "") {
+	      //    // fallback to looking up non-user specific one
+	      //    metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],"sliderposTop");
+	      //}
+	  }
+	  else {
+	      //metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],"sliderposTop");
+	      metaval = 700; // ***** major hack ****
+	  }
+	  var sliderposTop = parseInt(metaval);
+
+	  var speedBreak = musicStand.getSpeedBreak();
+
+	  if (sliderposTop &gt; 0) {
+	      sliderposTop *= musicStand.getScaleFactor();
+	      speedBreak = sliderposTop;
+	      musicStand.setSpeedBreak(speedBreak);
+	  }
+
+	  var sliderpos = document.getElementById('sliderpos');
+	  sliderpos.style.top = speedBreak + "px";
+          sliderpos.style.left = "-8px";
+	  sliderpos.onmousedown = dragSlider;
+	  var sliderbg = document.getElementById('sliderbg');
+	  sliderbg.onmousedown = dragSlider;
+
+
+	  var trackabove = document.getElementById('slidertrackabove');
+	  trackabove.style.height = speedBreak + "px";
+
+	  var trackbelow = document.getElementById('slidertrackbelow');
+	  trackbelow.style.top = speedBreak + "px";
+	  trackbelow.style.height = (gs.cgiParams["pageHeight"] - speedBreak) + "px";
+		  </xsl:text>
+		</script>
+	      </div>
+	    </td>
+
+
+	    
+	    <td style="position: relative;">
 	      <div id="thispage" style="cursor: e-resize; background: white;        position: relative; left: 0px; top: 0px;        width: {$cgiParamPageWidth}px; height: {gs.cgiparam.PageHeight}px;">
 		<a onClick="return false;" onContextMenu="return false;" onMouseDown="return musicStand.nextOrPrevPageEvent(event,gs.cgiParams['d'],'.png')" onMouseUp="return false;">
@@ -129,13 +213,22 @@
 		  <img border="0" id="nextpageimg" src=""/>
 		</div>
+		<div id="nextpage-lr-div" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
+		  <img border="0" id="nextpage-lr-img" src=""/>
+		</div>
 		<div id="prevpagediv" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
 		  <img border="0" id="prevpageimg" src=""/>
 		</div>
-		<div id="animedgebleed" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">								</div>								<div id="loading">
-		<table height="100%" width="100%">
-		  <tr>
-		    <td width="45%">											</td>											<td align="left">
-		    <span id="loadingdots">loading</span>
-		  </td>
+		<div id="prevpage-lr-div" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
+		  <img border="0" id="prevpage-lr-img" src=""/>
+		</div>
+		<div id="animedgebleed" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"><xsl:comment>filler</xsl:comment></div>
+		<div id="animedgebleed-lr" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"><xsl:comment>filler</xsl:comment></div>
+		
+		<div id="loading">
+		  <table height="100%" width="100%">
+		    <tr>
+		      <td width="45%">											</td>											<td align="left">
+		      <span id="loadingdots">loading</span>
+		    </td>
 		  </tr>
 		</table>
@@ -227,15 +320,18 @@
 	      
 	      <div id="annotateCanvas" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 2;" >
-		<!-- filler -->
-	      </div>
-	    </td>
+		<xsl:comment>filler</xsl:comment>
+	      </div>
+	    </td>
+
+<!--
+
 	    <td>
 	      <div id="slidercontainer" style="background: white; position: relative; left: 0px; top: 0px; width: 40px; height: {$cgiParamPageHeight}px;">
 		<div id="sliderbg">
 		  <div id="slidertrackabove" style="position: absolute; left: 8px; top: 0px; width: 4px; height: 500px; z-index:4; background-color:#606060;">
-		    <!-- filler -->
+		    <xsl:comment>filler</xsl:comment>
 		  </div>
 		  <div id="slidertrackbelow" style="position: absolute; left: 10px; top: 500px; width: 1px; height: 100px; z-index:4; background-color:#606060;">
-		    <!-- filler -->
+		    <xsl:comment>filler</xsl:comment>
 		  </div>
 		</div>
@@ -289,7 +385,13 @@
 	      </div>
 	    </td>
+
+-->
+	    
          </tr>
+         </tbody>
         </table>
-					  
+
+        </div> <!-- end of centering div -->
+      
       </div>
     </div>
