Show
Ignore:
Timestamp:
09.05.2016 22:04:34 (4 years ago)
Author:
davidb
Message:

Breakbar moved from right-hand side to left-hand side. Page turn upgraded to swipe left-to-right after breakbar marker; more carefully prescribed size of window through CGI params so page can be centred in window if opened up full-size, as can happen in Expeditee with embedded browser

Location:
main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand
Files:
6 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/etc/collectionConfig.xml

    r30462 r30519  
    267267                 
    268268<style> 
    269 #nextpagediv { 
     269#nextpagediv,#nextpage-lr-div { 
    270270  position: absolute;  
    271271  top:0px; left:0px;  
     
    276276} 
    277277 
    278 #prevpagediv { 
     278#prevpagediv, #prevpage-lr-div { 
    279279  position: absolute;  
    280280  top:0px; left:0px;  
     
    285285} 
    286286 
    287 #animedgebleed { 
     287#animedgebleed, #animedgebleed-lr { 
    288288  position: absolute;  
    289289  top:0px; left:0px;  
  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/script/annotate.js

    r30461 r30519  
    271271      //alert("num annotations = " + numAnnotations + " removeMetapos = " + removeMetapos); 
    272272 
    273       for (var a=0; a<numAnnotations; a++) { 
     273      for (var a=1; a<numAnnotations; a++) { // start 'a' at 1 to skip the <!-- filler --> text 
    274274          var annotateDiv = annotateDivs[a]; 
    275275 
  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/script/musicstand-main.js

    r30461 r30519  
    118118  // setup page 2 as next page 
    119119  var nextPageImg = document.getElementById("nextpageimg"); 
     120  var nextPageImg_LR = document.getElementById("nextpage-lr-img"); 
    120121  var nextPageUrl = musicStand.httpnextanim(gs.cgiParams["pagePrefix"],gs.cgiParams["pageSuffix"],musicStand.getPageNum()+1); 
    121122 
     
    126127  ////} 
    127128  nextPageImg.src = nextPageUrl; 
     129  nextPageImg_LR.src = nextPageUrl; 
    128130 
    129131    if (musicStand.getPageNum()>1) { 
     
    136138    } 
    137139     
    138   // some browsers clear clip rectangle with new image => set it to what we need 
     140    // some browsers clear clip rectangle with new image => set it to what we need 
     141  var clip_str = "rect(0px, "+gs.cgiParams["pageWidth"]+"px, "+gs.cgiParams["pageHeight"]+"px, "+gs.cgiParams["pageWidth"]+"px)"; 
     142     
    139143  var nextpagediv = document.getElementById("nextpagediv"); 
    140   nextpagediv.style.clip = "rect(0px, "+gs.cgiParams["pageWidth"]+"px, "+gs.cgiParams["pageHeight"]+"px, "+gs.cgiParams["pageWidth"]+"px)"; 
     144  nextpagediv.style.clip = clip_str; 
     145  var nextpagediv_lr = document.getElementById("nextpage-lr-div"); 
     146  nextpagediv_lr.style.clip = clip_str; 
    141147 
    142148  var prevpagediv = document.getElementById("prevpagediv"); 
    143   prevpagediv.style.clip = "rect(0px, "+gs.cgiParams["pageWidth"]+"px, "+gs.cgiParams["pageHeight"]+"px, "+gs.cgiParams["pageWidth"]+"px)"; 
     149  prevpagediv.style.clip = clip_str; 
     150  var prevpagediv_lr = document.getElementById("prevpage-lr-div"); 
     151  prevpagediv_lr.style.clip = clip_str; 
    144152 
    145153  var animedgebleed = document.getElementById("animedgebleed"); 
    146   animedgebleed.style.clip = "rect(0px, "+gs.cgiParams["pageWidth"]+"px, "+gs.cgiParams["pageHeight"]+"px, "+gs.cgiParams["pageWidth"]+"px)"; 
     154  animedgebleed.style.clip = clip_str; 
     155  var animedgebleed_lr = document.getElementById("animedgebleed-lr"); 
     156  animedgebleed_lr.style.clip = clip_str; 
    147157 
    148158  // no previous page to set up 
  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/script/musicstand-open.js

    r30446 r30519  
    22  var GUITopGap = 135; 
    33  var GUIBotGap =  30; 
    4   var GUILeftRightGap = 80; 
     4  var GUILeftRightGap = 60; // used to be 80 
    55 
    66  function openMusicStand(docid,pagePrefix,pageSuffix,numPages,maxPageWidth,maxPageHeight) 
     
    6464    url += "&numPages="+numPages; 
    6565    url += "&pageWidth="+pageWidth+"&pageHeight="+pageHeight; 
     66    url += "&pageWidthWithBreakbar="+pageWidth+(GUILeftRightGap/2); 
     67    url += "&musicStandWidth="+musicStandWidth+"&musicStandHeight="+musicStandHeight; 
    6668    url += "&scaleFactor="+ratio; 
    6769 
     
    7072    options += ',width='+musicStandWidth+',height='+musicStandHeight; 
    7173 
     74    //var options = 'toolbar=no, menubar=no, location=no, scrollbars=no, status=yes'; 
     75    //options += ', width='+musicStandWidth+', height='+musicStandHeight; 
     76 
     77    // The following worked in MS-Edge 
     78    //var options = 'height='+Number(musicStandHeight-340)+', width='+musicStandWidth;  
     79    //options += ', status=yes, toolbar=no, menubar=no, location=no'; 
     80 
     81    //var options = "height=600, width=400, status=yes, toolbar=no, menubar=no, location=no"; 
     82 
     83    console.log("Opening new window with options:" + options); 
     84       
    7285    window.open(url, 'musicstand', options); 
    73  
     86    //window.open(url, null, options); 
     87    //window.open("Sample.htm", null, "height=600, width=400, status=yes, toolbar=no, menubar=no, location=no"); 
     88       
    7489    return false; 
    7590  } 
  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/script/musicstand.js

    r30461 r30519  
    2222  var topVal    = 0; 
    2323  var rightVal  = pageXDim; 
    24   var bottomVal = 0; 
    25   var leftVal   = 0; 
     24  var bleedingEdgeValY = 0; 
     25  var bleedingEdgeValX = 0; 
     26  var leftVal    = 0; 
    2627 
    2728  var pageNum = cgiGotoPage; 
     
    156157  } 
    157158 
    158  
    159   pageAnimPrivate = function(direction,pagePrefix,pageSuffix)  
    160   { 
    161     var imagediv = (direction>0) ? 'nextpagediv' : 'prevpagediv'; 
    162         var imagelayer = document.getElementById(imagediv) 
    163         var bleedlayer = document.getElementById('animedgebleed') 
    164  
    165     var deltaY; 
    166     var deltaTime; 
    167  
    168     if (bottomVal<speedBreak) { 
    169       deltaY = 2; 
    170       deltaTime = 10; 
    171     } 
    172     else { 
    173       deltaY = 1; 
    174       deltaTime = 30; 
    175     } 
    176  
    177     if(bottomVal < pageYDim) {   
    178         bottomVal += deltaY; 
    179         imagelayer.style.clip="rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)" 
    180         bleedlayer.style.clip="rect("+topVal+"px "+rightVal+"px "+(bottomVal+2)+"px "+leftVal+"px)" 
    181         var callPageAnim = "pageAnimPrivate("+direction+",'"+pagePrefix+"','"+pageSuffix+"')"; 
    182         pageAnimTimer = setTimeout(callPageAnim,deltaTime) 
    183     } 
    184     else { 
    185  
    186       // finished => update the image that is the current page 
    187       var thisimg = document.getElementById('thispageimg') 
    188       var nextimg = document.getElementById('nextpageimg') 
    189       var previmg = document.getElementById('prevpageimg') 
    190        
    191       if (direction>0) { 
    192         if (pageNum<totalPageCount) { 
    193             pageNum++; 
    194         previmg.src = thisimg.src; 
    195             thisimg.src = nextimg.src; 
    196  
    197         resetValues(); // reset clip rectangles 
    198  
    199             var nextSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum+1); 
    200             nextimg.src = nextSrc; 
    201  
    202             var nextspan = document.getElementById('nextpagespan'); 
    203  
    204         // update page numbers displayed for next and prev 
    205             var nextval = document.getElementById('nextpageval'); 
    206         if (pageNum<totalPageCount) { 
    207             nextval.innerHTML = (pageNum+1); 
    208             displayInline('nextpagespan'); 
    209         } 
    210         else { 
    211             nextval.innerHTML = ""; 
    212             displayNone('nextpagespan'); 
    213         } 
    214  
    215             var prevval = document.getElementById('prevpageval'); 
    216         prevval.innerHTML = (pageNum-1); 
    217  
    218         displayInline('prevpagespan'); 
    219         } 
     159     
     160  pageAnimFinishedPrivate = function(direction,pagePrefix,pageSuffix)  
     161  { 
     162      var thisimg = document.getElementById('thispageimg') 
     163 
     164      var nextimg = document.getElementById('nextpageimg') 
     165      var nextimg_lr = document.getElementById('nextpage-lr-img') 
     166 
     167      var previmg = document.getElementById('prevpageimg') 
     168      var previmg_lr = document.getElementById('prevpage-lr-img') 
     169       
     170      if (direction>0) { 
     171      if (pageNum<totalPageCount) { 
     172          pageNum++; 
     173          previmg.src = thisimg.src; 
     174          previmg_lr.src = thisimg.src;        
     175          thisimg.src = nextimg.src; 
     176 
     177          setTimeout(function() { 
     178          resetValues(); // reset clip rectangles 
     179           
     180          var nextSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum+1); 
     181          nextimg.src = nextSrc; 
     182          nextimg_lr.src = nextSrc; 
     183           
     184          var nextspan = document.getElementById('nextpagespan'); 
     185           
     186          // update page numbers displayed for next and prev 
     187          var nextval = document.getElementById('nextpageval'); 
     188          if (pageNum<totalPageCount) { 
     189              nextval.innerHTML = (pageNum+1); 
     190              displayInline('nextpagespan'); 
     191          } 
     192          else { 
     193              nextval.innerHTML = ""; 
     194              displayNone('nextpagespan'); 
     195          } 
     196           
     197          var prevval = document.getElementById('prevpageval'); 
     198          prevval.innerHTML = (pageNum-1); 
     199           
     200          displayInline('prevpagespan'); 
     201          },700); 
    220202      } 
    221       else { 
    222         // previous page 
    223         if (pageNum>0) { 
    224             pageNum--; 
    225         nextimg.src = thisimg.src; 
    226             thisimg.src = previmg.src; 
    227  
    228         resetValues(); // reset clip rectangles 
    229  
    230             var prevSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum-1); 
    231             previmg.src = prevSrc; 
    232  
    233         // update page numbers displayed for next and prev 
    234             var nextval = document.getElementById('nextpageval'); 
    235         nextval.innerHTML = (pageNum+1); 
    236  
    237         displayInline('nextpagespan'); 
    238             //var nextspan = document.getElementById('nextpagespan'); 
    239         //nextspan.style.display = "block"; 
    240  
    241             var prevspan = document.getElementById('prevpagespan'); 
    242  
    243             var prevval = document.getElementById('prevpageval'); 
    244         if (pageNum>1) { 
    245             prevval.innerHTML = (pageNum-1); 
    246             displayInline('prevpagespan'); 
    247         } 
    248         else { 
    249             prevval.innerHTML = ""; 
    250             displayNone('prevpagespan'); 
    251         } 
    252         } 
    253       } 
    254  
    255       // update docid member variable (pageNum reflect new page value) 
    256           docid = docRoot + "." + pageNum; 
    257  
    258 /* 
     203      } 
     204      else { 
     205      // previous page 
     206      if (pageNum>0) { 
     207          pageNum--; 
     208          nextimg.src = thisimg.src; 
     209          nextimg_lr.src = thisimg.src; 
     210          thisimg.src = previmg.src; 
     211 
     212          setTimeout(function() { 
     213          resetValues(); // reset clip rectangles 
     214           
     215          var prevSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum-1); 
     216          previmg.src = prevSrc; 
     217          previmg_lr.src = prevSrc; 
     218           
     219          // update page numbers displayed for next and prev 
     220          var nextval = document.getElementById('nextpageval'); 
     221          nextval.innerHTML = (pageNum+1); 
     222           
     223          displayInline('nextpagespan'); 
     224          //var nextspan = document.getElementById('nextpagespan'); 
     225          //nextspan.style.display = "block"; 
     226           
     227          var prevspan = document.getElementById('prevpagespan'); 
     228           
     229          var prevval = document.getElementById('prevpageval'); 
     230          if (pageNum>1) { 
     231              prevval.innerHTML = (pageNum-1); 
     232              displayInline('prevpagespan'); 
     233          } 
     234          else { 
     235              prevval.innerHTML = ""; 
     236              displayNone('prevpagespan'); 
     237          } 
     238          }, 700); 
     239      }          
     240      } 
     241       
     242      // update docid member variable (pageNum reflect new page value) 
     243      docid = docRoot + "." + pageNum; 
     244       
     245      /* 
    259246      // remove any existing annotations 
    260247      annotate.clearAnnotations(); 
     
    272259 
    273260 
    274       var username = musicStand.getUsername(); 
    275       var metaval; 
    276  
    277       if (username != null) { 
    278           // try of user specific one, if it exists 
    279           var metaname = username + "-sliderposTop"; 
    280           metaval  = gsapi.getLiveMetadata(docid,metaname); 
     261      var username = musicStand.getUsername(); 
     262      var metaval; 
     263       
     264      if (username != null) { 
     265      // try of user specific one, if it exists 
     266      var metaname = username + "-sliderposTop"; 
     267      metaval  = gsapi.getLiveMetadata(docid,metaname); 
    281268          if (metaval == "") { 
    282269              // fallback to looking up non-user specific one 
    283270              metaval  = gsapi.getLiveMetadata(docid,"sliderposTop"); 
    284271          } 
    285       } 
    286       else { 
    287               //metaval  = gsapi.getLiveMetadata(docid,"sliderposTop"); 
    288               metaval  = 700; // ******** hack 
    289       } 
    290       var sliderposTop = parseInt(metaval); 
    291  
    292       updateSlider(sliderposTop); 
    293  
     272      } 
     273      else { 
     274          //metaval  = gsapi.getLiveMetadata(docid,"sliderposTop"); 
     275          metaval  = 700; // ******** hack 
     276      } 
     277      var sliderposTop = parseInt(metaval); 
     278       
     279      updateSlider(sliderposTop);       
     280  } 
     281     
     282  pageAnimPrivate = function(direction,pagePrefix,pageSuffix)  
     283  { 
     284    var imagediv = (direction>0) ? 'nextpagediv' : 'prevpagediv'; 
     285        var imagelayer = document.getElementById(imagediv) 
     286        var bleedlayer = document.getElementById('animedgebleed') 
     287 
     288    var deltaY = 3; 
     289    var deltaTime = 15; 
     290        var callback; 
     291       
     292    if (bleedingEdgeValY<speedBreak) { 
     293        callback="pageAnimPrivate"; 
    294294    } 
    295   } 
    296  
     295    else { 
     296        callback="pageAnimLRPrivate"; 
     297    } 
     298 
     299    if(bleedingEdgeValY < pageYDim) {    
     300        bleedingEdgeValY += deltaY; 
     301        imagelayer.style.clip="rect("+topVal+"px "+rightVal+"px "+bleedingEdgeValY+"px "+leftVal+"px)" 
     302        bleedlayer.style.clip="rect("+topVal+"px "+rightVal+"px "+(bleedingEdgeValY+2)+"px "+leftVal+"px)" 
     303        var callPageAnim = callback+"("+direction+",'"+pagePrefix+"','"+pageSuffix+"')"; 
     304        pageAnimTimer = setTimeout(callPageAnim,deltaTime) 
     305    } 
     306    else { 
     307        // finished => update the image that is the current page 
     308        pageAnimFinished(); 
     309    } 
     310  } 
     311 
     312 
     313  pageAnimLRPrivate = function(direction,pagePrefix,pageSuffix)  
     314  { 
     315    var imagediv = (direction>0) ? 'nextpage-lr-div' : 'prevpage-lr-div'; 
     316        var imagelayer = document.getElementById(imagediv) 
     317        var bleedlayer = document.getElementById('animedgebleed-lr') 
     318 
     319        var deltaX = 2; 
     320    var deltaTime = 40; // used to be 30 
     321 
     322    if(bleedingEdgeValX < pageXDim) {    
     323        bleedingEdgeValX += deltaX; 
     324        imagelayer.style.clip="rect("+(bleedingEdgeValY+2)+"px "+bleedingEdgeValX+"px "+pageYDim+"px "+leftVal+"px)" 
     325        bleedlayer.style.clip="rect("+(bleedingEdgeValY+2)+"px "+(bleedingEdgeValX+2)+"px "+pageYDim+"px "+leftVal+"px)" 
     326        var callPageAnim = "pageAnimLRPrivate("+direction+",'"+pagePrefix+"','"+pageSuffix+"')"; 
     327        pageAnimTimer = setTimeout(callPageAnim,deltaTime) 
     328    } 
     329    else { 
     330        // finished => update the image that is the current page 
     331        pageAnimFinishedPrivate(direction,pagePrefix,pageSuffix); 
     332    } 
     333  } 
     334 
     335 
     336     
     337 
     338     
    297339  cancelPageAnimPrivate = function() { 
    298340      clearTimeout(pageAnimTimer); 
     
    502544  { 
    503545      var nextlayer = document.getElementById('nextpagediv') 
     546      var nextlayer_lr = document.getElementById('nextpage-lr-div') 
     547 
    504548      var prevlayer = document.getElementById('prevpagediv') 
     549      var prevlayer_lr = document.getElementById('prevpage-lr-div') 
     550 
    505551      var bleedlayer = document.getElementById('animedgebleed') 
     552      var bleedlayer_lr = document.getElementById('animedgebleed-lr') 
    506553 
    507554      topVal=0; 
    508555      rightVal=pageXDim; 
    509       bottomVal=0; 
     556      bleedingEdgeValY=0; 
     557      bleedingEdgeValX=0; 
    510558      leftVal=0 
    511559 
    512       var startingClip = "rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)"; 
     560      //var startingClip = "rect("+topVal+"px "+rightVal+"px "+bleedingEdgeValY+"px "+leftVal+"px)"; 
     561      var startingClip = "rect(0px 0px 0px 0px)"; 
    513562 
    514563      nextlayer.style.clip=startingClip; 
     564      nextlayer_lr.style.clip=startingClip; 
     565 
    515566      prevlayer.style.clip=startingClip; 
     567      prevlayer_lr.style.clip=startingClip; 
     568 
    516569      bleedlayer.style.clip=startingClip; 
     570      bleedlayer_lr.style.clip=startingClip; 
    517571  } 
    518572} 
  • main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/transform/pages/document.xsl

    r30463 r30519  
    4848    </gsf:variable> 
    4949     
     50    <gsf:variable name="cgiParamMusicStandWidth"> 
     51      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'musicStandWidth']/@value"/> 
     52    </gsf:variable> 
     53    <gsf:variable name="cgiParamMusicStandHeight"> 
     54      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'musicStandHeight']/@value"/> 
     55    </gsf:variable> 
    5056    <gsf:variable name="cgiParamPageWidth"> 
    5157      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageWidth']/@value"/> 
     
    5460      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageHeight']/@value"/> 
    5561    </gsf:variable> 
     62    <gsf:variable name="cgiParamPageWidthWithBreakbar"> 
     63      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageWidthWithBreakbar']/@value"/> 
     64    </gsf:variable> 
    5665    <gsf:variable name="cgiParamPagePrefix"> 
    5766      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pagePrefix']/@value"/> 
     
    6776    </gsf:variable> 
    6877 
    69      
    70     <table id="gotoNavBar" align="center" width="{$cgiParamPageWidth}">  
     78    <div style="width:{$cgiParamMusicStandWidth}px; margin: 0 auto;"> <!-- start of centering div --> 
     79       
     80    <table id="gotoNavBar" align="center" width="{$cgiParamPageWidth}" style="position: relative; left: 30px;">  
    7181      <tr> 
    7282        <td align="left" width="20%"> 
     
    118128      </tr> 
    119129    </table> 
     130 
    120131    <table width="100%"> 
     132      <tbody> 
    121133      <tr> 
    122         <td/> 
    123         <td> 
     134        <td><xsl:comment>filler</xsl:comment></td> 
     135 
     136        <td width="34"> 
     137          <div id="slidercontainer" style="background: white; position: relative; left: 0px; top: 0px; width: 34px; height: {$cgiParamPageHeight}px;"> 
     138        <div style="position: relative; left: 5px; top 0px;"> 
     139         <div id="sliderbg"> 
     140          <div id="slidertrackabove" style="position: absolute; left: 8px; top: 0px; width: 4px; height: 500px; z-index:4; background-color:#606060;"> 
     141            <xsl:comment>filler</xsl:comment> 
     142          </div> 
     143          <div id="slidertrackbelow" style="position: absolute; left: 10px; top: 500px; width: 1px; height: 100px; z-index:4; background-color:#606060;"> 
     144            <xsl:comment>filler</xsl:comment> 
     145          </div> 
     146         </div> 
     147 
     148         <!-- 
     149         <div id="sliderpos" style="width:30px; height:11px;"> 
     150          <img height="11" src="{$httpCollection}/images/brown2-slider-leftmargin.png" width="30"/> 
     151          </div> 
     152          --> 
     153         <div id="sliderpos" style="width:32px; height:27px;"> 
     154          <img style="position: absolute; top: -15px; left: 5px;" width="32" height="27" src="{$httpCollection}/images/corner-arrow-left-margin.png" /> 
     155         </div> 
     156 
     157 
     158        </div> 
     159        <script language="javascript" type="text/javascript"> 
     160          <xsl:text disable-output-escaping="yes">var username = musicStand.getUsername(); 
     161      var metaval; 
     162 
     163      if (username != null) { 
     164          var metaname = username + "-sliderposTop"; 
     165          metaval = 700; // ***** major hack **** 
     166          //metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],metaname); 
     167          //if (metaval == "") { 
     168          //    // fallback to looking up non-user specific one 
     169          //    metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],"sliderposTop"); 
     170          //} 
     171      } 
     172      else { 
     173          //metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],"sliderposTop"); 
     174          metaval = 700; // ***** major hack **** 
     175      } 
     176      var sliderposTop = parseInt(metaval); 
     177 
     178      var speedBreak = musicStand.getSpeedBreak(); 
     179 
     180      if (sliderposTop &gt; 0) { 
     181          sliderposTop *= musicStand.getScaleFactor(); 
     182          speedBreak = sliderposTop; 
     183          musicStand.setSpeedBreak(speedBreak); 
     184      } 
     185 
     186      var sliderpos = document.getElementById('sliderpos'); 
     187      sliderpos.style.top = speedBreak + "px"; 
     188          sliderpos.style.left = "-8px"; 
     189      sliderpos.onmousedown = dragSlider; 
     190      var sliderbg = document.getElementById('sliderbg'); 
     191      sliderbg.onmousedown = dragSlider; 
     192 
     193 
     194      var trackabove = document.getElementById('slidertrackabove'); 
     195      trackabove.style.height = speedBreak + "px"; 
     196 
     197      var trackbelow = document.getElementById('slidertrackbelow'); 
     198      trackbelow.style.top = speedBreak + "px"; 
     199      trackbelow.style.height = (gs.cgiParams["pageHeight"] - speedBreak) + "px"; 
     200          </xsl:text> 
     201        </script> 
     202          </div> 
     203        </td> 
     204 
     205 
     206         
     207        <td style="position: relative;"> 
    124208          <div id="thispage" style="cursor: e-resize; background: white;        position: relative; left: 0px; top: 0px;        width: {$cgiParamPageWidth}px; height: {gs.cgiparam.PageHeight}px;"> 
    125209        <a onClick="return false;" onContextMenu="return false;" onMouseDown="return musicStand.nextOrPrevPageEvent(event,gs.cgiParams['d'],'.png')" onMouseUp="return false;"> 
     
    129213          <img border="0" id="nextpageimg" src=""/> 
    130214        </div> 
     215        <div id="nextpage-lr-div" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"> 
     216          <img border="0" id="nextpage-lr-img" src=""/> 
     217        </div> 
    131218        <div id="prevpagediv" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"> 
    132219          <img border="0" id="prevpageimg" src=""/> 
    133220        </div> 
    134         <div id="animedgebleed" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">                             </div>                              <div id="loading"> 
    135         <table height="100%" width="100%"> 
    136           <tr> 
    137             <td width="45%">                                            </td>                                           <td align="left"> 
    138             <span id="loadingdots">loading</span> 
    139           </td> 
     221        <div id="prevpage-lr-div" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"> 
     222          <img border="0" id="prevpage-lr-img" src=""/> 
     223        </div> 
     224        <div id="animedgebleed" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"><xsl:comment>filler</xsl:comment></div> 
     225        <div id="animedgebleed-lr" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"><xsl:comment>filler</xsl:comment></div> 
     226         
     227        <div id="loading"> 
     228          <table height="100%" width="100%"> 
     229            <tr> 
     230              <td width="45%">                                          </td>                                           <td align="left"> 
     231              <span id="loadingdots">loading</span> 
     232            </td> 
    140233          </tr> 
    141234        </table> 
     
    227320           
    228321          <div id="annotateCanvas" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 2;" > 
    229         <!-- filler --> 
    230           </div> 
    231         </td> 
     322        <xsl:comment>filler</xsl:comment> 
     323          </div> 
     324        </td> 
     325 
     326<!-- 
     327 
    232328        <td> 
    233329          <div id="slidercontainer" style="background: white; position: relative; left: 0px; top: 0px; width: 40px; height: {$cgiParamPageHeight}px;"> 
    234330        <div id="sliderbg"> 
    235331          <div id="slidertrackabove" style="position: absolute; left: 8px; top: 0px; width: 4px; height: 500px; z-index:4; background-color:#606060;"> 
    236             <!-- filler --> 
     332            <xsl:comment>filler</xsl:comment> 
    237333          </div> 
    238334          <div id="slidertrackbelow" style="position: absolute; left: 10px; top: 500px; width: 1px; height: 100px; z-index:4; background-color:#606060;"> 
    239             <!-- filler --> 
     335            <xsl:comment>filler</xsl:comment> 
    240336          </div> 
    241337        </div> 
     
    289385          </div> 
    290386        </td> 
     387 
     388--> 
     389         
    291390         </tr> 
     391         </tbody> 
    292392        </table> 
    293                        
     393 
     394        </div> <!-- end of centering div --> 
     395       
    294396      </div> 
    295397    </div>