root/main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl @ 29867

Revision 29867, 61.9 KB (checked in by davidb, 4 years ago)

Next round of improvements. More open-close bars. Drums with better images. Drums played on mousedown + key mappings. Playbar layout changed. Timing info when playing added.

  • Property svn:mime-type set to application/xml
Line 
1<?xml version="1.0" encoding="UTF-8"?>
2<xsl:stylesheet version="1.0"
3    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
4    xmlns:java="http://xml.apache.org/xslt/java"
5    xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
6    xmlns:gslib="http://www.greenstone.org/skinning"
7    xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
8    xmlns:xlink="http://www.w3.org/1999/xlink"
9    extension-element-prefixes="java util"
10    exclude-result-prefixes="java util gsf">
11 
12
13  <!-- *** -->
14  <!-- Document header -->
15  <!-- *** -->
16
17  <xsl:template name="soundmanager2-header">
18
19    <!-- soundManager2 API -->
20    <gsf:style src="ext/sound-manager2/css/flashblock.css" /> 
21    <gsf:script src="ext/sound-manager2/script/soundmanager2-nodebug.js"/>
22
23    <!-- The Page player (variant of SoundManger) main script -->
24    <gsf:script src="ext/sound-manager2/script/page-player.js"/>
25    <gsf:style src="ext/sound-manager2/css/page-player.css" />
26       
27    <!-- optional: annotations/sub-tracks/notes, and alternate themes -->
28    <gsf:style src="ext/sound-manager2/css/optional-annotations.css" />
29    <gsf:style src="ext/sound-manager2/css/optional-themes.css" />
30
31    <!-- optional: Metadata UI prototype (not needed unless you want the bottom-most demo bits) -->
32    <gsf:script src="ext/sound-manager2/script/optional-page-player-metadata.js"/>
33   
34    <gsf:style>
35      ul.playlist li .comment {font-size:0.65em;opacity:0.5}
36    </gsf:style>
37   
38    <!-- Customization of page-player for this collection -->
39
40    <gsf:script>
41
42      soundManager.flashVersion = 9;
43      soundManager.preferFlash = true;        /* for visualization effects */
44      soundManager.useHighPerformance = true; /* keep flash on screen, boost performance */
45      soundManager.wmode = "transparent";     /* transparent SWF, if possible */
46      soundManager.useFastPolling = true;     /* increased JS callback frequency */
47      soundManager.url = "ext/sound-manager2/swf/";
48
49      /* custom page player configuration */
50
51      var PP_CONFIG = {
52        autoStart:       false,  /* begin playing first sound when page loads */
53    playNext:        false,  /* stop after one sound, or play through list until end */
54    useThrottling:   false,  /* try to rate-limit potentially-expensive calls (eg. dragging position around) */
55    usePeakData:     true,   /* [Flash 9 only] whether or not to show peak data (left/right channel values) - nor noticable on CPU */
56    useWaveformData: false,  /* [Flash 9 only] show raw waveform data - WARNING: LIKELY VERY CPU-HEAVY */
57    useEQData:       false,  /* [Flash 9 only] show EQ (frequency spectrum) data */
58    useFavIcon:      false,  /* try to apply peakData to address bar (Firefox + Opera) - performance note: appears to make Firefox 3 do some temporary, heavy disk access/swapping/garbage collection at first(?) - may be too heavy on CPU */
59    useMovieStar:    true    /* Flash 9.0r115+ only: Support for a subset of MPEG4 formats. */
60      }
61    </gsf:script>
62  </xsl:template>
63
64
65  <!-- CAA = Content Analysis Algorithm -->
66  <xsl:variable name="cgiargCAAlgorithm">
67    <xsl:choose>
68      <xsl:when test="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value != ''"><xsl:value-of select="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value"/></xsl:when>
69      <xsl:otherwise>1</xsl:otherwise>
70    </xsl:choose>
71  </xsl:variable>
72
73  <!-- *** -->
74  <!-- The Javascript DSP files for computing chroma features in the browser -->
75  <!-- *** -->
76
77  <xsl:template name="javascript-dsp-header">
78    <gsf:script src="ext/js-dsp/dsp-custom.js"/>
79    <gsf:script src="ext/js-dsp/dsp.js"/>
80    <gsf:script src="ext/js-dsp/chroma-transform.js"/>
81    <gsf:script src="ext/js-dsp/frequency-plotter.js"/>
82    <gsf:script src="ext/js-dsp/frequency-player.js"/>
83
84
85    <gsf:script src="ext/js-dsp/component/crockford-inheritance.js"/>
86    <gsf:script src="ext/js-dsp/component/workflow-core.js"/>
87    <gsf:script src="ext/js-dsp/component/audio-mixer.js"/>
88    <gsf:script src="ext/js-dsp/component/wf-freq-spectrum.js"/>
89    <gsf:script src="ext/js-dsp/component/wf-filter-bank.js"/>
90    <gsf:script src="ext/js-dsp/component/wf-chroma-transform.js"/>
91    <gsf:script src="ext/js-dsp/component/active-workflow.js"/>
92
93  </xsl:template>
94
95  <xsl:template name="processingPopup">
96    <div>
97      <style type="text/css">   
98    #processing {
99      width: 100%;
100      height: 100%;
101      position: absolute;
102      z-index: 10000;
103      left: 0px;
104      top: 0px;
105      background-color: rgba(255,255,255,0.75);
106      opacity: 1;
107      display: none;
108    }
109
110    #processingMessage {
111      position: absolute;
112      padding: 10px;
113      border-radius: 10px;
114      margin-left: 50%;
115      width: 380px;
116      height: 105px;
117      left: -250px; top: 200px;
118      background-color: rgba(255,255,255,1);
119      box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
120    }
121
122    #processingMessage p {
123      font-size: 18px;
124      text-align: center;
125      font-family:
126      sans-serif;
127      font-weight: bold;
128      color: #666;
129    }
130      </style>
131     
132      <div id="processing">
133    <div id="processingMessage">
134      <h2 id="processingTitle" class="ui-state-default ui-corner-all" style="padding: 8px; font-size: 110%; width: auto;">
135        Heading
136      </h2>
137      <p id="processingText">text</p>
138    </div>
139      </div>
140    </div>
141
142  </xsl:template>
143
144  <!-- *** -->
145  <!-- * Discovery -->
146  <!-- *** -->
147
148  <xsl:template name="discovery-block">
149   
150    <div id="fingerprint-turnstyle">
151
152      <div style="background-image: none; background-color: #2E52A4;">
153    Discovery: <xsl:call-template name="choose-title"/>
154      </div>
155
156      <div class="documenttext" style="display: none;">
157    <xsl:call-template name="fingerprintMetadataBlock" />
158      </div>
159
160    </div>
161
162    <script>
163      <xsl:text disable-output-escaping="yes">
164    $(function(){
165    transformToTurnstyleBlock("fingerprint");
166    });
167      </xsl:text>
168    </script>
169   
170  </xsl:template>
171
172
173
174  <xsl:template name="fingerprintMetadataBlock">
175   
176    <xsl:variable name="httpCollection"><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/></xsl:variable>
177    <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
178
179
180    <xsl:variable name="musicbrainzsongid">
181      <gsf:metadata name="dc.Identifier.musicbrainzsongid"/>
182    </xsl:variable>
183
184    <xsl:variable name="musicbrainzalbumid">
185      <gsf:metadata name="dc.Source.musicbrainzalbumid"/>
186    </xsl:variable>
187
188    <xsl:variable name="musicbrainzartistid">
189      <gsf:metadata name="dc.Creator.musicbrainzartistid"/>
190    </xsl:variable>
191   
192    <xsl:variable name="lastfmtrackurl">
193      <gsf:metadata name="dc.Identifier.lastfmtrackurl"/>
194    </xsl:variable>
195
196    <xsl:variable name="echonestsongid">
197      <gsf:metadata name="dc.Identifier.echonestsongid"/>
198    </xsl:variable>
199   
200      <table class="metadata-stripes">
201    <tbody>
202      <tr>
203        <td>
204          Title
205        </td>
206        <td>
207          <gsf:metadata name="dc.Title"/>
208        </td>
209      </tr>
210     
211      <tr>
212        <td>Album Title</td>
213        <td><gsf:metadata name="dc.Title.albumtitle"/></td>
214      </tr>
215     
216      <tr>
217        <td>Artist</td>
218        <td><gsf:metadata name="dc.Creator"/></td>
219      </tr>
220     
221      <tr valign="top">
222        <td>Artist Summary</td>
223        <td>
224          <i>
225        <gsf:script>
226          var summary = gs.documentMetadata["LastFM_LastFMArtistWikiSummary"];
227         
228          if (summary) {
229            document.write(summary.replace("\n","&lt;br /&gt;"));
230          }
231
232        </gsf:script>
233          </i>
234        </td>
235      </tr>
236     
237<!--
238dc.Identifier.echonestsongid
239dc.Identifier.echonestartistid
240
241dc.Identifier.lastfmtrackurl
242dc.Identifier.lastfmalbumurl
243dc.Identifier.lastfmartisturl
244
245//dc.Identifier
246dc.Identifier.musicbrainzalbumid
247dc.Identifier.musicbrainzartistid
248dc.Identifier.musicbrainzsongid
249dc.Identifier.playmeartistid
250
251-->
252
253      <tr>
254        <td colspan="2">
255
256          <xsl:for-each select="/page/pageResponse/document/metadataList/metadata[@name = 'dc.Relation.artistrelatedimage']">
257        <xsl:if test="position() &lt;= 6">
258          <a target="_blank">
259            <xsl:attribute name='href'>
260              <xsl:value-of disable-output-escaping="yes" select="."/>
261            </xsl:attribute>
262           
263            <img width="150">
264              <xsl:attribute name='src'>
265            <xsl:value-of disable-output-escaping="yes" select="."/>
266              </xsl:attribute>
267            </img>
268          </a>
269        </xsl:if>
270          </xsl:for-each>
271        </td>
272      </tr>
273
274      <tr>
275        <td>Linked Data</td>
276        <td>
277          <!--
278          <gsf:metadata name="dc.Identifier"/><br />
279          -->
280
281          <table style="width: 100%;">
282        <tr>
283          <td style="width: 200px;">
284            MusicBrainz song id:
285          </td>
286          <td>
287            <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz" class="external">
288              <xsl:copy-of select="$musicbrainzsongid"/>
289            </a>
290          </td>
291        </tr>
292
293        <tr>
294          <td>
295            MusicBrainz album id:
296          </td>
297          <td>
298            <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz" class="external">
299              <xsl:copy-of select="$musicbrainzalbumid"/>
300            </a>
301          </td>
302        </tr>
303
304        <tr>
305          <td>
306            MusicBrainz artist id:
307          </td>
308          <td>
309            <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz" class="external">
310              <xsl:copy-of select="$musicbrainzartistid"/>
311            </a>
312          </td>
313        </tr>
314        <tr>
315          <td>
316            EchoNest song id:
317          </td>
318          <td>
319            <a href="http://developer.echonest.com/api/v4/song/profile?api_key=8WNR9XTGCODO9G4YG&amp;format=xml&amp;id={$echonestsongid}" target="#echonestsongid" class="external">
320
321
322
323              <xsl:copy-of select="$echonestsongid"/>
324            </a>
325          </td>
326        </tr>
327        <tr>
328          <td colspan="2">       
329            <i>
330              <a href="{$lastfmtrackurl}" target="#lastfm" class="external">
331            <xsl:copy-of select="$lastfmtrackurl"/>
332              </a>
333            </i>
334          </td>
335        </tr>
336          </table>
337
338        </td>
339      </tr>
340     
341
342    </tbody>
343      </table>
344  </xsl:template>
345
346
347
348  <!-- *** -->
349  <!-- * Audio Player -->
350  <!-- *** -->
351
352  <xsl:template name="js-mad-header">
353
354        <gsf:script src="ext/js-mad/script/mad.js"/>
355        <gsf:script src="ext/js-mad/script/rq_table.js"/>
356        <gsf:script src="ext/js-mad/script/imdct_s.js"/>
357        <gsf:script src="ext/js-mad/script/huffman.js"/>
358        <gsf:script src="ext/js-mad/script/bit.js"/>
359        <gsf:script src="ext/js-mad/script/stream.js"/>
360        <gsf:script src="ext/js-mad/script/layer3.js"/>
361        <gsf:script src="ext/js-mad/script/frame.js"/>
362        <gsf:script src="ext/js-mad/script/synth.js"/>
363       
364        <gsf:script src="ext/js-mad/script/arraybuffer/bytestream.js"/>
365        <gsf:script src="ext/js-mad/script/arraybuffer/filestream.js"/>
366        <gsf:script src="ext/js-mad/script/arraybuffer/substream.js"/>
367        <gsf:script src="ext/js-mad/script/arraybuffer/arraystream.js"/>
368        <gsf:script src="ext/js-mad/script/arraybuffer/ajaxstream.js"/>
369
370        <gsf:script src="ext/js-mad/script/binarystring/bytestream.js"/>
371        <gsf:script src="ext/js-mad/script/binarystring/filestream.js"/>
372        <gsf:script src="ext/js-mad/script/binarystring/substream.js"/>
373        <gsf:script src="ext/js-mad/script/binarystring/stringstream.js"/>
374        <gsf:script src="ext/js-mad/script/binarystring/ajaxstream.js"/>
375
376        <gsf:script src="ext/js-mad/script/id3v22stream.js"/>
377        <gsf:script src="ext/js-mad/script/id3v23stream.js"/>
378        <gsf:script src="ext/js-mad/script/mp3file.js"/>
379       
380<!--
381        <gsf:script src="ext/js-mad/script/player.js"/>
382-->
383
384        <gsf:script src="ext/js-mad/script/sink.min.js"/>
385
386<!--
387        <gsf:script src="ext/js-mad/script/require.js"/>
388-->
389<!--
390        <gsf:script src="ext/js-mad/script/sink-light.js"/>
391-->
392
393        <gsf:script src="ext/js-mad/script/browser-detect.js"/>
394        <gsf:script src="ext/js-mad/script/main-jsmad.js"/>
395
396  </xsl:template>
397
398
399
400  <xsl:template name="audio-icon-cache">
401    <div style="display:none;">
402      <!-- pre-load various play/pause images to help with speed of interface update -->
403      <img src="ext/diy-audio-player/images/play32Highlight.png" />
404      <img src="ext/diy-audio-player/images/pause32.png" />
405      <img src="ext/diy-audio-player/images/pause32Highlight.png" />
406      <img src="ext/diy-audio-player/images/play20Highlight.png" />
407      <img src="ext/diy-audio-player/images/stop32.png" />
408      <img src="ext/diy-audio-player/images/stop32Highlight.png" />
409      <img src="ext/diy-audio-player/images/search20Highlight.png" />   
410    </div>
411  </xsl:template>
412
413
414  <!-- *** -->
415  <!-- * Workflow control -->
416  <!-- *** -->
417
418  <xsl:template name="workflow-block">
419    <xsl:variable name="httpCollection">
420      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
421    </xsl:variable>
422
423    <div id="workflow-turnstyle">
424
425      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
426    Workflow
427      </div>
428
429      <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
430   
431<!--
432    <form style="padding-left: 8px;">
433      <span class="vis-heading">Input Selection:</span>
434      <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="left"/>Left only
435      <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="right"/>Right only
436      <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="diff"/>Average
437      <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="mix" checked="checked"/>Difference
438    </form>
439    <hr/>
440-->
441
442    <form style="padding-left: 8px; height: 48px;">
443      <span class="vis-heading" style="padding-right: 10px" >Meandre Workflow:</span>
444
445      <select id="meandre-workflow-pos" onChange="loadSelectedWorkflow(this)" style="font-size: 90%; padding 8px;">
446        <option value="0" selected="selected">Chromagram</option>
447        <option value="1" >Dynamic Javascript Mixer</option>
448      </select>
449
450      <div style="float: right;" id="meandre-buttons">
451     
452        <button type="button" id="meandre-run-button" 
453            onclick="selectedMeandreWorkflow.runThisMeandreFlow(this)">
454          <img id="meandre-run-button" src="ext/diy-audio-player/images/play32.png"
455           width="32"
456           height="32" 
457           XXonmouseover="playHighlightOn(this)"
458           XXonmouseout="playHighlightOff(this)"
459           XXonclick="runThisMeandreFlow(this)"
460           style="vertical-align: middle;"/>
461          Run
462        </button>
463
464        <button type="button" id="meandre-stop-button" onclick="selectedMeandreWorkflow.stopThisMeandreFlow(this)" disabled="disabled">
465          <img id="meandre-stop-button" src="ext/diy-audio-player/images/stop32.png"
466           width="32"
467           height="32" 
468           XXonmouseover="stopHighlightOn(this)"
469           XXonmouseout="stopHighlightOff(this)"
470           XXonclick="stopThisMeandreFlow(this)"
471           style="vertical-align: middle;"/>
472          Stop
473        </button>
474
475<!--
476        <button type="button" id="meandre-run-button" onclick="runThisMeandreFlow(this)" >Run</button>
477        <button type="button" id="meandre-stop-button" onclick="stopThisMeandreFlow(this)" disabled="disabled">Stop</button>
478-->
479
480      </div>
481
482    </form>
483
484    <style>
485      #meandre-buttons button:hover:enabled {
486        background-color: #CCCC33;
487        color: #FFFFFF;
488      }
489    </style>
490     
491
492    <div style="position: relative;">
493      <iframe id="workbenchFrame"
494          style="width: 100%; height: 400px;" >
495        If you see this, then your browser does not support the iframe element.
496      </iframe>
497
498    </div>
499
500    <gsf:script src="{$httpCollection}/script/meandre-workflow/chromagram.js"/>
501    <gsf:script src="{$httpCollection}/script/meandre-workflow/js-dynamic-mix.js"/>
502   
503    <gsf:script>
504      var chromagramMeandreWorkflow = new ChromagramMeandreWorkflow();
505      var jsDynamicMixMeandreWorkflow = new JSDynamicMixMeandreWorkflow();
506
507      var meandreWorkflows = [ chromagramMeandreWorkflow, jsDynamicMixMeandreWorkflow ];
508
509      var selectedMeandreWorkflowPos =$('#meandre-workflow-pos option:selected').val();
510      var selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
511
512      selectedMeandreWorkflow.meandreController.loadWorkbench( "workbenchFrame",selectedMeandreWorkflowPos);
513     
514      function loadSelectedWorkflow(elem) {           
515          selectedMeandreWorkflowPos = elem.value;
516          selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
517
518        if (selectedMeandreWorkflowPos==1) {
519          $('#jsdynamic-turnstyle').show();
520        }
521        else {
522          $('#jsdynamic-turnstyle').hide();
523        }
524
525        console.info("Loading in new Meandre workbench flow (pos=" + selectedMeandreWorkflowPos+ ")");     
526        selectedMeandreWorkflow.meandreController.loadWorkbench("workbenchFrame",selectedMeandreWorkflowPos);
527
528      }
529    </gsf:script>
530   
531
532
533
534    <div id="jsdynamic-turnstyle" style="display:none">
535     
536      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
537        Dynamic Javascript Meandre Component
538      </div>
539
540      <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
541
542        <textarea id="js-dynamic-code" style="width:100%; height: 520px; font-size: 60%">
543          <xsl:text disable-output-escaping="yes">
544
545
546var arrayBinding = new JavaImporter(java.lang.reflect.Array);
547
548var JSDynamicComponent = function() {
549  this.frameCount = 0;
550}
551
552JSDynamicComponent.prototype.executeCallBack = function(cc) {
553
554  with(arrayBinding) {
555
556    if ((this.frameCount % 1000)==0) {
557      print("JSDynamicComponent: " + this.frameCount + "\n");
558    }
559
560    var inputObject = cc.getDataComponentFromInput("input");
561    var rawInput1DArray = inputObject;
562
563    var rawOutput1DArray = Array.newInstance(java.lang.Double.TYPE, rawInput1DArray.length);
564
565    for (var i=1; i&lt;rawOutput1DArray.length; i++) {
566      var diff = Array.getDouble(rawInput1DArray,i) - Array.getDouble(rawInput1DArray, i-1);
567      Array.setDouble(rawOutput1DArray,i,diff);
568    }
569
570    cc.pushDataComponentToOutput("output", rawOutput1DArray);
571
572    this.frameCount++;
573  }
574
575}
576
577var jsDynamicComponent = new JSDynamicComponent();
578
579          </xsl:text>
580        </textarea>
581      </div> <!-- end of Dynamic JS turnstyle block -->
582    </div>
583
584      </div>
585
586    </div>
587
588    <script>
589      <xsl:text disable-output-escaping="yes">
590    $(function(){
591        transformToTurnstyleBlock("workflow");
592        transformToTurnstyleBlock("jsdynamic");
593    });
594      </xsl:text>
595    </script>
596  </xsl:template>
597
598
599  <!-- *** -->
600  <!-- * Structured audio player -->
601  <!-- *** -->
602 
603  <xsl:template name="structuredAudioPlayerBlock">
604
605    <gsf:script src="ext/diy-audio-player/script/structured-audio-play.js"/>
606   
607    <div style="background-color: rgb(40%,40%,20%)">
608      <svg xmlns="http://www.w3.org/2000/svg"
609           xmlns:xlink="http://www.w3.org/1999/xlink"
610       version="1.1"
611           id="svgGroundTruthSegments"
612       width="100%" height="24"
613           onLoadXX="svgGTStructuredInit()">
614      </svg>
615    </div>
616   
617    <div style="background-color: rgb(40%,40%,20%)">
618      <svg xmlns="http://www.w3.org/2000/svg"
619           xmlns:xlink="http://www.w3.org/1999/xlink"
620       version="1.1"
621           id="svgContentAnalysisSegments"
622       width="100%" height="24"
623           onLoadXX="svgCAStructuredInit({$cgiargCAAlgorithm})">
624      </svg>
625    </div>
626  </xsl:template>
627 
628  <xsl:template name="visualization-mode-block">
629   
630    <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;">
631
632      <span class="vis-heading">Max Values:</span>
633      <div style="padding-left: 8px">
634    <style>
635      span.mv-fixed { display: inline-block; width: 30pt; }
636    </style>
637    <table width="100%">
638      <tr>
639        <td><span class="mv-fixed" id="freqSpectrumMax"     >0.000</span>(Freq Spectrum)       </td>
640        <td><span class="mv-fixed" id="freqPowerSpectrumMax">0.000</span>(Freq Power Spectrum) </td>
641        <td><span class="mv-fixed" id="filterBankMax"       >0.000</span>(Filter Bank)         </td>
642        <td><span class="mv-fixed" id="chromaFeaturesMax"   >0.000</span>(Chroma Features)     </td>
643      </tr>
644    </table>
645      </div>
646      <hr/>
647 
648      <form style="padding-left: 8px; padding-right: 8px; padding-bottom: 0px;">
649    <div style="float: left;">
650      <span class="vis-heading">Visualization:</span>
651<!--
652    <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqSpectrum" />Frequency Spectrum
653    <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqPowerSpectrum"/>Frequency Power Spectrum
654-->
655   
656      <input type="radio" name="visualization" onclick="setTransformMode(this)" value="filterBank"/>Filter Bank
657      <input type="radio" name="visualization" onclick="setTransformMode(this)" value="chromaFeatures" checked="checked"/>Chroma Features
658    </div>
659
660    <div style="float: left; padding-left: 140px;">
661      <span class="vis-heading">Colour Mapping:</span>
662      <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
663      <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat
664    </div>
665      </form>
666     
667      <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
668
669<!--
670      <form style="padding-left: 8px;">
671    <span class="vis-heading">Colour Mapping:</span>
672    <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
673    <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat Map
674      </form>
675      <hr/>
676-->
677
678
679
680    <form style="padding-left: 8px; padding-bottom: 0px;">
681      <div style="float: left;">
682        <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix
683      </div>
684      <div style="float: left; padding-left: 140px;">
685        <span class="vis-heading">Accelerated  Processing:</span>
686        <input type="checkbox" name="acceleratedProcessingInput" onclick="acceleratedProcessingCheckbox(this)"/>&gt; realtime
687        <span id="accProcStatus"></span>
688      </div>
689
690    </form>
691    <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
692
693    <hr/>
694
695    </div>
696   
697    <xsl:call-template name="graphic-equalizers"/>
698  </xsl:template>
699
700
701  <xsl:template name="graphic-equalizers">
702
703
704    <gsf:style >
705      .control {
706        padding: 5px;
707        border: 1px solid #CCC;
708        background-color: #EEE;
709        float: left;
710        margin-right: 5px;
711
712      }
713
714      .inner-control {
715        background-color: #DDD;
716      }
717
718      .control div {
719    max-width: 400px;
720      }
721
722      .control table td {
723        padding: 5px;
724        width: 25px;
725        color: #999;
726        font-size: 12px;
727      }
728      .control h3 {
729        margin: 0;
730        padding:0;
731        font-size: 12px;
732        margin-bottom: 10px;
733      }
734      .control #debug {
735        border: 1px inset #ccc;
736        background-color: #FFF;
737        font-size: 12px;
738        width: 300px;
739        padding: 10px;
740      }
741      .slider {
742        margin-bottom: 16px;
743        width: 8px;
744      }
745/*
746      .geq-bar {
747        width: 34px;
748      }
749*/
750
751/*
752      .ui-button {
753        font-size: xx-small;
754      }
755*/
756      .ui-slider .ui-slider-handle {
757        width: 8px;
758        margin-left: 3px;
759      }
760    </gsf:style>
761
762
763
764   <gsf:script>
765      <![CDATA[
766
767        var grapheqL;
768        var grapheqR;
769
770      $(function() {
771        var geqSampleRate = 44100;
772        console.log("*** hardwiring Graphic Equalizer sampleRate to be: " + geqSampleRate);
773
774        grapheqL = new GraphicalEq(geqSampleRate);
775        grapheqR = new GraphicalEq(geqSampleRate);
776        grapheqL.recalculateFilters();
777        grapheqR.recalculateFilters();
778
779        var minPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40,
780                     slide: function() { changeMinFreq(grapheqL,"L")} };
781        var minPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40,
782                     slide: function() { changeMinFreq(grapheqR,"R")} };
783
784    var maxPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000,
785                     slide: function() { changeMaxFreq(grapheqL,"L") } };
786    var maxPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000,
787                     slide: function() { changeMaxFreq(grapheqR,"R") } };
788
789        var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
790                     slide: function() { changeBandsPerOctave(grapheqL,"L")} };
791        var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
792                     slide: function() { changeBandsPerOctave(grapheqR,"R")} };
793
794        $('#minFreqL').slider(minPropL);
795        $('#maxFreqL').slider(maxPropL);
796        $('#minFreqR').slider(minPropR);
797        $('#maxFreqR').slider(maxPropR);
798
799        $('#bandsPerOctaveL').slider(bpoPropL);
800        $('#bandsPerOctaveR').slider(bpoPropR);
801
802    //$('#input').attr('volume', 0);
803
804    createSliders(grapheqL,"L");
805    createSliders(grapheqR,"R");
806      });
807
808
809
810      var changeMinFreq = function(grapheq,side) {
811         grapheq.setMinimumFrequency($('#minFreq'+side).slider('option', 'value'));
812         //plotCoeffs();
813     createSliders(grapheq,side);
814      }
815
816      var changeMaxFreq = function(grapheq,side) {
817         grapheq.setMaximumFrequency($('#maxFreq'+side).slider('option', 'value'));
818         //plotCoeffs();
819     createSliders(grapheq,side);
820      }
821
822      var changeBandsPerOctave = function(grapheq,side) {
823         grapheq.setBandsPerOctave($('#bandsPerOctave'+side).slider('option', 'value'));
824         //plotCoeffs();
825     createSliders(grapheq,side);
826      }
827
828    function positionGrapheqControl(grapheq,side) {
829
830        var numSliders = grapheq.filters.length;
831            var offset = (35 * numSliders) + 12;
832        if (side == "L") {
833            $('#grapheqControlL').css("left","-" + offset + "px");
834        }
835        else if (side == "R") {
836            offset += 5; // fudge factor
837            $('#grapheqControlR').css("right","-" + offset + "px");
838        }
839        else {
840            console.error("positionGrapheqControl(): unrecognized side '" + side + "'");
841        }
842    }
843
844      var createSliders = function(grapheq,side) {
845    $('#bandSliders'+side).empty();
846    positionGrapheqControl(grapheq,side);
847    for (var i=0; i<grapheq.filters.length; i++) {
848   
849      var freq = grapheq.filters[i].f0;
850      var units = "Hz";
851      if (freq>=1000000) {
852        freq = (freq/1000000).toFixed(2);
853        units = " MHz";
854      }
855      else if (freq>=1000) {
856        freq = (freq/1000).toFixed(2);
857        units = " KHz";
858      }
859      else if (freq>=100) {
860        freq = freq.toFixed(0);
861      }
862      else {
863        freq = freq.toFixed(0);
864        freq = "&nbsp;" + freq;
865      }
866
867      $('#bandSliders'+side).append('<td class="geq-bar"><div id="band'+side+'_'+i+'" class="slider"></div>'
868          +freq + ' ' + units + '</td>');
869
870      $('#band'+side+'_'+i).slider({ orientation: 'vertical', range: 'min', min: -10, max: 3, step: 0.1, value: 0,
871                                     slide: function(event,ui) { changeBandGain(event,ui,grapheq)} });
872    }
873      }
874     
875      var changeBandGain = function(event, ui, grapheq) {
876    grapheq.setBandGain(ui.handle.parentNode.id.split("_")[1], ui.value);
877        //plotCoeffs();
878      }
879/*
880      var plotCoeffs = function() {
881    freqz = new Float32Array(grapheq.freqzs[0].length);
882
883    for (var i=0; i<freqz.length; i++) {
884      for (var j=0; j<grapheq.freqzs.length; j++) {
885        freqz[i] += grapheq.freqzs[j][i];
886      }
887    }
888      }
889*/
890
891/*
892      function audioWritten(event) {
893        signal = event.mozFrameBuffer;
894
895        // Apply the filter to the signal
896        signal = grapheq.processStereo(signal);
897
898        output.mozWriteAudio([]); // flush
899        output.mozWriteAudio(signal);
900        writeCount++;
901      }
902*/
903
904        //plotCoeffs();
905
906
907      ]]>
908    </gsf:script>
909
910
911      <gsf:script>
912    function minimizeTurnstyle(suffix) {
913      $('#turnstyleMaximizeButton'+suffix).show();
914      $('#turnstyleMinimizeButton'+suffix).hide();
915      $('#turnstyleContentsArea'+suffix).slideUp('fast');
916       }
917
918    function maximizeTurnstyle(suffix) {
919      $('#turnstyleMaximizeButton'+suffix).hide();
920      $('#turnstyleMinimizeButton'+suffix).show();
921      $('#turnstyleContentsArea'+suffix).slideDown('fast');
922       }
923
924      </gsf:script>
925
926<!--   
927    <div class="control" style="float: left; height: 200px">
928-->
929
930
931    <div id="grapheqControlL" class="control" style="position: absolute; top: 0px; left: -132px; heightXX: 200px">
932
933      <h3 style="float: left;">Graphic Equalizer (left channel)</h3>
934      <div style="float: right;">
935    <span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
936    <a id="turnstyleMinimizeButtonL" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('L');">
937      <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
938    </a>
939    <a id="turnstyleMaximizeButtonL" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('L');">
940      <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
941    </a>
942      </div>
943
944      <hr style="clear: both;"/>
945
946      <div id="turnstyleContentsAreaL" style="display: none; float: right;">
947
948    <table class="inner-control" style="margin-bottom: 5px;">
949      <tr>
950        <td><div id="minFreqL" class="slider"><xsl:comment/></div>Min Freq</td>
951        <td><div id="maxFreqL" class="slider"><xsl:comment/></div>Max Freq</td>
952        <td><div id="bandsPerOctaveL" class="slider"><xsl:comment/></div>Bands/ Octave</td>
953      </tr>
954    </table>
955      </div>
956
957      <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
958   
959      <table class="inner-control">
960    <tr id="bandSlidersL">
961    </tr>
962      </table>
963
964
965
966    </div>
967
968<!--
969    <div class="control" style="float: right; height: 200px">
970-->
971
972    <div id="grapheqControlR" class="control" style="position: absolute; top: 0px; right: -330px; heightXX: 200px">
973      <h3 style="float: left;">Graphic Equalizer (right channel)</h3>
974
975      <div style="float: right;">
976    <span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
977    <a id="turnstyleMinimizeButtonR" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('R');">
978      <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
979    </a>
980    <a id="turnstyleMaximizeButtonR" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('R');">
981      <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
982    </a>
983      </div>
984
985      <hr style="clear: both;"/>
986
987      <div id="turnstyleContentsAreaR" style="display: none; float: left;">
988    <table class="inner-control" style="margin-bottom: 5px;">
989      <tr>
990        <td><div id="minFreqR" class="slider"><xsl:comment/></div>Min Freq</td>
991        <td><div id="maxFreqR" class="slider"><xsl:comment/></div>Max Freq</td>
992        <td><div id="bandsPerOctaveR" class="slider"><xsl:comment/></div>Bands/ Octave</td>
993      </tr>
994    </table>
995      </div>
996
997      <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
998
999      <table class="inner-control">
1000    <tr id="bandSlidersR">
1001    </tr>
1002      </table>
1003
1004    </div>
1005   
1006  </xsl:template>
1007
1008
1009  <!-- *** -->
1010  <!-- * Settings form -->
1011  <!-- *** -->
1012
1013  <xsl:template name="settings-form">
1014    <xsl:param name="cgiargYScaleSimImg"/>
1015
1016    <xsl:variable name="httpCollection">
1017      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
1018    </xsl:variable>
1019
1020<!--
1021    <gsf:variable-array name="overlayNote2">
1022      <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
1023    </gsf:variable-array>
1024
1025    <span id="overlayNewNotes2" class="ui-state-default ui-corner-top" style="font-size:90%; padding: 3px; cursor:pointer;">
1026      New Annotation 2
1027    </span>   
1028
1029    <div id="noteOverlay2" style="width: 100%; height: 300px; background-color: #cccccc;">
1030    </div>
1031
1032    <gsf:script>
1033      $(window).load(function(){
1034           var overlayNotes2 = new OverlayNotes("noteOverlay2","salami.overlayNote");
1035       $('#overlayNewNotes2').click(function() {overlayNotes2.AddNote() });
1036       });
1037
1038    </gsf:script>
1039-->
1040
1041    <div style="display: none;"><!-- wrapped div to force display to none -->
1042
1043    <div id="settings-turnstyle" style="margin: 6px;">
1044      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1045    Audio Content Search
1046      </div>
1047      <div class="documenttext" style="display: none;">
1048
1049
1050      <form id="QueryForm" name="QueryForm" method="get" action="{$library_name}">
1051    <input type="hidden" name="a" value="q"/>
1052    <input type="hidden" name="sa"><xsl:attribute name="value"><xsl:value-of select="/page/pageRequest/@subaction"/></xsl:attribute></input>
1053    <input type="hidden" name="rt" value="rd"/>
1054   
1055    <input type="hidden" name="s" value="AudioQuery"/>
1056    <input type="hidden" name="c" value="{$collName}"/>
1057    <xsl:if test="not(paramList/param[@name='startPage'])">
1058      <input type="hidden" name="startPage" value="1"/>
1059    </xsl:if>
1060    <xsl:choose>
1061      <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.maxDocs']">
1062        <input type="hidden" name="s1.maxDocs">
1063          <xsl:attribute name="value">
1064        <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.maxDocs']/@value"/>
1065          </xsl:attribute>
1066        </input>
1067      </xsl:when>
1068      <xsl:otherwise>
1069        <input type="hidden" name="s1.maxDocs" value="100"/>
1070      </xsl:otherwise>
1071    </xsl:choose>
1072    <xsl:choose>
1073      <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']">
1074        <input type="hidden" name="s1.hitsPerPage">
1075          <xsl:attribute name="value">
1076        <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']/@value"/>
1077          </xsl:attribute>
1078        </input>
1079      </xsl:when>
1080      <xsl:otherwise>
1081        <input type="hidden" name="s1.hitsPerPage" value="20"/>
1082      </xsl:otherwise>
1083    </xsl:choose>
1084   
1085    <input type="hidden" name="q">
1086      <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
1087    </input>
1088   
1089   
1090    <input type="hidden" name="s1.query">
1091<!--
1092      <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
1093-->
1094      <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/@nodeID"/>.dir</xsl:attribute>
1095    </input>
1096   
1097    <input type="hidden" name="s1.offset" value="0" />
1098    <input type="hidden" name="s1.length" value="200" />
1099   
1100    <div style="font-style: italics;">Start new query @ offset
1101    <span id="mysongCurrentPos">0 secs</span>,
1102    with excerpt lasting
1103   
1104    <input type="text" name="mysongWindowDuration" size="4" value="6" />
1105    <!--
1106        <span id="mysongWindowDuration" class="editable-offset"
1107        style="cursor: pointer; border: 1px solid black; padding: 3px; width: 200px; min-width: 200px;">6.0</span>
1108    -->
1109    secs:
1110
1111    <input type="submit" value="Search" onclick="preSubmit(this.form);" />
1112    </div>
1113
1114   
1115    <ul style="font-size: 80%; margin-top: 8px; font-style: italics;" >
1116      <li>Use the <b>Play all of</b> bar to get to the part of the song you are interested in.</li>
1117      <li>... the <b>query @ offset</b> value will change accordingly as the song progresses.</li>
1118      <li>Click <b>pause</b> (anywhere outside of the time-line) to mark the spot you want to start the new music query.</li>
1119      <li>Optionally click on the <b>excerpt lasting</b> value and edit, if you want to change the length of excerpt used in the match.</li>
1120      <li>Finally, click the <b>Search</b> button to initiate the new query.</li>
1121    </ul>
1122   
1123      </form>
1124
1125      <hr/>
1126     
1127<!--
1128      <form id="RescaleForm" name="RescaleForm" method="get" action="{$library_name}">
1129    <div style="font-style: italics;">
1130      Make the scale factor for the y-dimension of the self-similarity
1131      image be
1132      <input type="text" name="ResizeScale" value="{$cgiargYScaleSimImg}"
1133             size="3" /> then
1134      <input type="button" name="ResizeImage" value="Resize Image"
1135             onclick="javascript:rescaleImage()" />
1136     
1137    </div>
1138      </form>
1139     
1140      <hr/>
1141-->
1142
1143      <!-- **** currently not displayed -->
1144
1145      <form id="UpdateCAForm" name="UpdateCAForm" method="get" action="{$library_name}" style="display: none;">
1146    <div style="font-style: italics;">
1147     
1148      Show the song structure automatically computed by analyzing
1149      the audio data using algorithm
1150
1151      <select id="caaMenu" name="caAlgorithm">
1152        <option value="1">BV1</option>
1153        <option value="2">BV2</option>
1154        <option value="3">GP7</option>
1155        <option value="4">MHRAG2</option>
1156        <option value="5">MND1</option>
1157        <option value="6">WB1</option>
1158
1159<!--
1160        <option value="-1">or hide</option>
1161-->
1162
1163      </select>:
1164
1165      <input type="button" name="Reload" value="Reload"
1166             onclick="updateCAAlgorithm()" />
1167
1168    </div>
1169      </form>
1170
1171    <script>
1172      <xsl:text disable-output-escaping="yes">
1173        if (hasStructuredAudio) {
1174          var caaMenu = document.getElementById("caaMenu");
1175               caaMenu.options[caAlgorithm-1].selected = 1;
1176        }
1177      </xsl:text>
1178    </script>
1179     
1180
1181      </div>
1182    </div>
1183    <script>
1184      <xsl:text disable-output-escaping="yes">
1185    $(function(){
1186    transformToTurnstyleBlock("settings");
1187    });
1188      </xsl:text>
1189    </script>
1190
1191    </div><!-- wrapped div to force display to none -->
1192
1193  </xsl:template>
1194
1195
1196  <!-- *** -->
1197  <!-- * Computed Data -->
1198  <!-- *** -->
1199
1200
1201  <xsl:template name="computed-data">
1202    <xsl:param name="httpCollection"/>
1203    <xsl:param name="assocFilePath"/>
1204
1205    <div id="computed-turnstyle" style="margin: 6px;">
1206      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1207    Computed Data
1208      </div>
1209
1210      <div class="documenttext" style="display: none;">
1211    <table class="metadata-stripes" style="width: 100%">
1212      <tbody>
1213        <tr>
1214          <td>jAudio Features</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jaudio.xml">download ACE XML feature values file</a></td>
1215        </tr>
1216       
1217        <tr>
1218          <td>jSongMiner Metadata</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jsongminer.xml">download ACE XML classifications file</a></td>
1219        </tr>
1220       
1221      </tbody>
1222    </table>
1223      </div>
1224    </div>
1225
1226    <gsf:script>
1227    $(function(){
1228      transformToTurnstyleBlock("computed");
1229    });
1230    </gsf:script>
1231
1232  </xsl:template>
1233
1234
1235
1236  <xsl:template name="original-audio">
1237    <xsl:param name="httpCollection"/>
1238    <xsl:param name="assocFilePath"/>
1239    <xsl:param name="Audio"/>
1240    <xsl:param name="streamableaudio"/>
1241
1242    <div id="original-turnstyle" style="margin: 6px;">
1243      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1244    The Original Audio
1245      </div>
1246
1247      <div style="display: none;">
1248
1249    <div>
1250      <audio style="width: 100%;" id="original-audio" controls="controls" >
1251<!--
1252        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
1253-->
1254        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" />
1255        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}" />
1256      </audio>
1257    </div>
1258
1259      </div>
1260    </div>
1261
1262    <gsf:script>
1263    $(function(){
1264      transformToTurnstyleBlock("original");
1265    });
1266    </gsf:script>
1267
1268
1269
1270  </xsl:template>
1271
1272
1273  <xsl:template name="documentContent">
1274<!--
1275<xsl:call-template name="init-document-xsl-vars"/>
1276-->
1277<!--
1278declare $httpCollection = $httpPath (for better consistency with other places in Greenstone XSL files)
1279-->
1280
1281    <xsl:variable name="httpCollection">
1282      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
1283    </xsl:variable>
1284    <xsl:variable name="assocFilePath">
1285      <gsf:metadata name="assocfilepath" select="root"/>
1286    </xsl:variable>
1287    <xsl:variable name="Source">
1288      <gsf:metadata name="Source" select="root"/>
1289    </xsl:variable>
1290    <xsl:variable name="Audio">
1291      <gsf:switch>
1292    <gsf:metadata name="Audio" select="root"/>
1293    <gsf:when test="exists">
1294      <gsf:metadata name="Audio" select="root"/>
1295    </gsf:when>
1296    <gsf:otherwise>doc.ogg</gsf:otherwise>
1297      </gsf:switch>
1298    </xsl:variable>
1299    <xsl:variable name="streamableaudio">
1300      <gsf:switch>
1301    <gsf:metadata name="streamableaudio" select="root"/>
1302    <gsf:when test="exists">
1303      <gsf:metadata name="streamableaudio" select="root"/>
1304    </gsf:when>
1305    <gsf:otherwise>doc.mp3</gsf:otherwise>
1306      </gsf:switch>
1307    </xsl:variable>
1308   
1309    <xsl:variable name="streamablevideo">
1310      <gsf:metadata name="Source"/>
1311    </xsl:variable>
1312   
1313    <div class="documenttext" id="gs-document">
1314
1315<div>
1316  <div id='media-player' style="width: 96%">
1317
1318
1319    <div class="video-player-bar">
1320      <div id="video-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
1321    Video Display
1322      </div>
1323
1324      <div id="video-area" class="documenttext"
1325       style="display: none; position: absolute: left: 0px; top: 0px;">
1326
1327    <video id="video" width="100%" controls="true">
1328      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" />
1329      Your browser does not support the video tag.
1330    </video>
1331      </div>
1332    </div>
1333
1334    <div id='media-controls'>
1335      <div>
1336    <input id="progress-bar" type="range"
1337           min='0' max='100' step='0.01' value='0'
1338           style="width: 100%"/>
1339
1340      </div>
1341      <div style="width: 100%;">
1342    <div style="float:left; padding: 8px; ">
1343      <button id='replay-button'     class='buttonx2 replay' title='replay' onclick='replayMedia();'>Replay</button>   
1344      <button id='play-pause-button' class='buttonx2 play' title='play' onclick='togglePlayPause();'>Play</button>
1345      <button id='stop-button'       class='buttonx2 stop' title='stop' onclick='stopPlayer();'>Stop</button>
1346    </div>
1347    <div style="float:right; padding: 8px; ">
1348      <div style="display: inline; font-family: Arial,Helvetica,sans-serif; color: white">
1349        <span id="mediaPlayerCurrentTime">0:00.0</span>/
1350        <span id="mediaPlayerTotalTime">0:00.0</span>
1351      </div>
1352      <button id='volume-inc-button' class='button volume-plus' title='increase volume' onclick="changeVolume('+');">Increase volume</button>
1353      <button id='volume-dec-button' class='button volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button>
1354      <button id='mute-button'       class='button mute' title='mute' onclick="toggleMute('true');">Mute</button>   
1355    </div>
1356      </div>
1357    </div>
1358
1359
1360
1361    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1362
1363    <div class="analysis-bar">
1364      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
1365    Play Along
1366      </div>
1367
1368
1369    <div id="analysis-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1370          <div style="color: white; width:100%; height: 400px;">
1371        <xsl:comment>filler</xsl:comment>
1372      </div>
1373     
1374    </div>
1375    </div>
1376
1377
1378
1379    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1380
1381    <div class="playlist-bar">
1382      <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
1383    Controls
1384      </div>
1385
1386      <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1387
1388      <div id="playlist-area" class="documenttext"
1389       style="display: none; position: absolute: left: 0px; top: 0px;">
1390<!--
1391    <div id='media-play-list'>
1392      <h2>Play list</h2>
1393      <ul id='play-list'>
1394        <li><span class='play-item' onclick="loadVideo('parrots.webm', 'parrots.mp4');">Parrots</span></li>
1395        <li><span class='play-item' onclick="loadVideo('paddle-wheel.webm', 'paddle-wheel.mp4');">Paddle Steamer Wheel</span></li>
1396        <li><span class='play-item' onclick="loadVideo('grass.webm', 'grass.mp4');">Grass</span></li>
1397      </ul>
1398    </div>
1399-->
1400          <div style="color: white;">
1401
1402        <form style="width:99%;">
1403          <fieldset>
1404        <legend id="mpm-legend">Video Player Mode</legend>
1405       
1406        <div id="mpm-div" class="radio-div">
1407
1408          <div class="radio-label-combo" style="display:inline-block; width: 32%">
1409            <span>
1410              <input type="radio" id="mpm-record" name="mpm-radio" />
1411            </span>
1412            <label for="mpm-record" class="radio-label">
1413              <span style="color: red;">
1414            Lay down new track (record)
1415              </span>
1416            </label>
1417          </div>
1418
1419          <div class="radio-label-combo" style="display:inline-block; width: 32%">
1420            <span>
1421              <input type="radio" id="mpm-neutral" name="mpm-radio" checked="checked"/>
1422            </span>
1423            <label for="mpm-neutral" class="radio-label">
1424              <span style="color: orange;">
1425            Put into Neutral
1426              </span>
1427            </label>
1428          </div>
1429
1430          <div class="radio-label-combo" style="display:inline-block; width: 32%">
1431            <span>
1432              <input type="radio" id="mpm-game-on" name="mpm-radio" />
1433            </span>
1434            <label for="mpm-game-on" class="radio-label">
1435              <span style="color: green;">
1436            Game on!
1437              </span>
1438            </label>
1439          </div>
1440
1441        </div>
1442          </fieldset>
1443        </form>
1444
1445        <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; background: black">
1446          <fieldset>
1447        <legend id="mpm-legend">Popup Layers</legend>
1448        <input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br />
1449        <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br />
1450        <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br />
1451        <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br />
1452       
1453        <div style="padding: 8px;">
1454          <button id="mpm-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
1455            Merge Selected
1456          </button>
1457          <button id="mpm-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
1458            Split Selected
1459          </button>
1460          <button id="mpm-edit-overlay"  style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
1461          Edit Selected
1462          </button>
1463        </div>
1464          </fieldset>
1465        </form>
1466
1467        <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; ">
1468          <fieldset>
1469        <legend id="pam-legend">Play Along Layers</legend>
1470        <input type="checkbox" name="PianoHero" value="PianoHero" />Piano Hero<br />
1471        <input type="checkbox" name="DrumHero"  value="DrumHero" />Drum-beat Hero<br />
1472       
1473        <div style="padding: 8px;">
1474          <button id="pam-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
1475            Merge Selected
1476          </button>
1477          <button id="pam-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
1478            Split Selected
1479          </button>
1480          <button id="pam-edit-overlay"  style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
1481          Edit Selected
1482          </button>
1483        </div>
1484          </fieldset>
1485        </form>
1486
1487
1488      </div>
1489
1490    </div>
1491    </div>
1492
1493    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1494
1495    <div class="turnstyle-bar">
1496
1497      <div id="piano-titlebar"
1498       style="background-image: none; background-color: #2E52A4; width: 30%; float: left; margin-right: 14px;">
1499    Piano
1500      </div>
1501
1502      <div id="drumkit-titlebar"
1503       style="background-image: none; background-color: #2E52A4; width: 30%; float: left; margin-right: 14px;">
1504    Drums
1505      </div>
1506
1507      <div id="guitar-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;">
1508    Guitar
1509      </div>
1510
1511
1512      <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1513
1514      <div style="position: relative;">
1515
1516    <div id="piano-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1517      <div id='jquery-piano'>
1518        <div ID="keyboard" class="keyboard-holder"><xsl:comment>div for piano keyboard</xsl:comment></div>
1519
1520        <div class="keyboard-options" style="color: white">
1521
1522          <div style="float: left;">
1523        General Midi:
1524        <select ID="midi-sound" onchange="changeGMInstrument(this[selectedIndex].value)">
1525          <option value="0" selected="selected">Acoustic Grand Piano</option>
1526          <option value="19">Church Organ</option>
1527          <option value="24">Acoustic Guitar Nylon</option>
1528          <option value="30">Distortion Guitar</option>
1529        </select>
1530          </div>
1531
1532          <div style="float: left;">
1533        Range [C<span ID="OCTAVE_LOWER">3</span>-B<span ID="OCTAVE_UPPER">5</span>]
1534        <input type="button" ID="-_OCTAVE" value="-" />
1535        <input type="button" ID="+_OCTAVE" value="+" /><br />
1536        <i>(Use left/right arrows to adjust with keyboard)</i>
1537          </div>
1538
1539          <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1540
1541<!--       
1542        Sound
1543        <select ID="sound">
1544          <option value="0" selected="selected">Keyboard</option>
1545          <option value="1" selected="selected">Organ</option>
1546          <option value="2">Acoustic Guitar</option>
1547          <option value="3">EDM, bro!</option>
1548        </select>
1549-->
1550        </div>
1551
1552
1553      </div>
1554     
1555    </div>
1556
1557    <style>
1558      .drumcontainer {
1559        position: absolute;
1560        top: 50%;
1561        left: 50%;
1562        transform: translateX(-50%) translateY(-50%);
1563        font-size: 150%;
1564        color: #888888;
1565        pointer-events: onone;
1566      }
1567    </style>
1568    <div id="drumkit-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1569      <div id='jquery-drums' style="padding: 8px;">
1570        <center>
1571          <div style="display:inline-block;">
1572        <div style="position: relative;">
1573          <img style="position: relative;" width="202" height="204"
1574               src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" />
1575          <div class="drumcontainer" style="color: #555555">
1576            &lt;Shift-C&gt;
1577          </div>
1578        </div>
1579          </div>
1580          <div style="display:inline-block;">
1581        <div style="position: relative;">
1582          <img style="position: relative;" width="197" height="192"
1583              src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
1584          <div class="drumcontainer" >
1585            &lt;Shift-B&gt;
1586          </div>
1587        </div>
1588          </div>
1589          <div style="display:inline-block;">
1590        <div style="position: relative;">
1591          <img style="position: relative;"  width="197" height="192"
1592               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
1593          <div class="drumcontainer" >
1594            &lt;Shift-N&gt;
1595          </div>
1596        </div>
1597          </div>
1598          <div style="display:inline-block;">
1599        <div style="position: relative;">
1600          <img style="position: relative;" width="197" height="192"
1601               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum4" border="0" />
1602          <div class="drumcontainer" >
1603            &lt;Shift-M&gt;
1604          </div>
1605        </div>
1606          </div>
1607          <br />
1608          <div style="display:inline-block;">
1609        <div style="position: relative;">
1610          <img style="position: relative;" width="240" height="234"
1611               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" />
1612          <div class="drumcontainer" >
1613            &lt;Space-Bar&gt;
1614          </div>
1615        </div>
1616          </div>
1617        </center>
1618      </div>
1619     
1620    </div>
1621
1622
1623    <div id="guitar-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1624          <div style="color: white;">
1625        Guitar area
1626      </div>
1627    </div>
1628
1629      </div>
1630
1631    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1632
1633
1634    </div>
1635
1636
1637
1638
1639    <script>
1640      <xsl:text disable-output-escaping="yes">
1641    $(function(){
1642      transformToTurnstyleBlock("video");
1643      transformToTurnstyleBlock("playlist");
1644
1645      transformToTurnstyleBlock("piano");
1646      transformToTurnstyleBlock("drumkit");
1647      transformToTurnstyleBlock("guitar");
1648
1649      transformToTurnstyleBlock("analysis");
1650
1651      $('#video-openclose').trigger("click");
1652
1653    });
1654    var piano_keyboard = new AudioSynthView();
1655    piano_keyboard.draw();     
1656      </xsl:text>
1657    </script>
1658   
1659  </div>
1660
1661  <div style="color: white">
1662    <!--
1663    Sound
1664    -->
1665    x
1666  </div>
1667   
1668</div>
1669
1670      <xsl:call-template name="audio-icon-cache"/>
1671   
1672      <hr/>
1673   
1674    </div>
1675  </xsl:template>
1676
1677
1678
1679<xsl:template name="song-ul">
1680
1681  <xsl:variable name="httpCollection">
1682    <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
1683  </xsl:variable>
1684  <xsl:variable name="assocFilePath">
1685    <gsf:metadata name="assocfilepath" select="root"/>
1686  </xsl:variable>
1687  <xsl:variable name="Source">
1688    <gsf:metadata name="Source" select="root"/>
1689  </xsl:variable>
1690  <xsl:variable name="Audio">
1691    <gsf:switch>
1692      <gsf:metadata name="Audio" select="root"/>
1693      <gsf:when test="exists">
1694    <gsf:metadata name="Audio" select="root"/>
1695      </gsf:when>
1696      <gsf:otherwise>doc.ogg</gsf:otherwise>
1697    </gsf:switch>
1698  </xsl:variable>
1699  <xsl:variable name="streamableaudio">
1700    <gsf:switch>
1701      <gsf:metadata name="streamableaudio" select="root"/>
1702      <gsf:when test="exists">
1703    <gsf:metadata name="streamableaudio" select="root"/>
1704      </gsf:when>
1705      <gsf:otherwise>doc.mp3</gsf:otherwise>
1706    </gsf:switch>
1707  </xsl:variable>
1708 
1709  <xsl:variable name="streamablevideo">
1710    <gsf:metadata name="Source"/>
1711  </xsl:variable>
1712 
1713  <gsf:variable name="cgiargFrameOffset">
1714    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameOffset']/@value"/>
1715  </gsf:variable>
1716  <gsf:variable name="cgiargFrameLength">
1717    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameLength']/@value"/>
1718  </gsf:variable>
1719  <xsl:variable name="cgiargYScaleSimImg">
1720    <xsl:choose>
1721      <xsl:when test="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value != ''">
1722    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value"/>
1723      </xsl:when>
1724      <xsl:otherwise>0.5</xsl:otherwise>
1725    </xsl:choose>
1726  </xsl:variable>
1727
1728  <!--
1729      CAA = Content Analysis Algorithm
1730  -->
1731  <xsl:variable name="cgiargCAAlgorithm">
1732    <xsl:choose>
1733      <xsl:when test="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value != ''">
1734    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value"/>
1735                      </xsl:when>
1736                      <xsl:otherwise>1</xsl:otherwise>
1737    </xsl:choose>
1738  </xsl:variable>
1739 
1740 
1741<!--
1742***
1743-->
1744<!--
1745Main Audio Player
1746-->
1747<!--
1748***
1749-->
1750  <ul class="playlist">
1751    <li class="rounded">
1752      <gsf:script src="{$httpCollection}/script/hybrid-audio-player.js"/>
1753      <a href="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" id="mysong" onclick="togglePlayVisual(document.getElementById('mainPlayButton'))" style="padding-bottom: 2px;">
1754    <span><img height="32" id="mainPlayButton" onclick="var event = arguments[0] || window.event; togglePlay(event,this)" onmouseout="playHighlightOff(this)" onmouseover="playHighlightOn(this)" src="ext/diy-audio-player/images/play32.png" style="vertical-align: middle;" width="32"/>Play/Pause<span id="extraPlayText"/></span>
1755      </a>
1756      <gsf:script src="ext/diy-audio-player/script/audioDB-play.js"/>
1757      <xsl:choose>
1758    <xsl:when test="($cgiargFrameOffset != '-1') and ($cgiargFrameOffset != '')">
1759      <div style="background-color: rgb(40%,40%,20%)">
1760        <script type="text/javascript">
1761          <xsl:text disable-output-escaping="yes">var frameOffsetStr=gs.variables.cgiargFrameOffset;
1762          var frameLength=gs.variables.cgiargFrameLength;</xsl:text>
1763        </script>
1764        <svg height="24" id="svgAudioDBSegments" onLoadXX="svgAudioDBInit()" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
1765      </svg>                                    </div>
1766    </xsl:when>
1767      </xsl:choose>
1768      <xsl:call-template name="structuredAudioPlayerBlock"/>
1769      <xsl:call-template name="processingPopup"/>
1770      <div id="doublePlay" style="width: 100%; display: none;">
1771    <script type="text/javascript">
1772      <xsl:text disable-output-escaping="yes">// At time of writing this code, this needs to be an OGG file to work in Firefox
1773      var source = "</xsl:text>
1774      <gsf:metadata name="Audio" select="root"/>
1775      <xsl:text disable-output-escaping="yes">";
1776     
1777      var self_sim_png = source.replace(/\.(ogg|mp3|wav)$/,".png");
1778      var collect = "</xsl:text>
1779      <xsl:value-of select="/page/pageResponse/collection/@name"/>
1780      <xsl:text disable-output-escaping="yes">";
1781      var site = "</xsl:text>
1782      <xsl:value-of select="$site_name"/>
1783      <xsl:text disable-output-escaping="yes">";</xsl:text>
1784    </script>
1785    <gsf:script src="ext/diy-audio-player/script/similarity-matrix-play.js"/>
1786    <audio controls="controls" id="leftsong" style="width: 49%;">
1787      <!--
1788          <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
1789      -->
1790      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
1791      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
1792      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
1793    </audio>
1794    <audio controls="controls" id="rightsong" style="width: 49%;">
1795      <!--
1796          <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
1797      -->
1798      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
1799      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
1800      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
1801                                </audio>
1802      </div>
1803      <!--
1804      Real Time Analysis (RTA) audio
1805      -->
1806      <div style="width: 100%;">
1807    <audio id="rta-audio-element" style="width: 100%;">
1808      <!--
1809          <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg"/>
1810      -->
1811      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
1812      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
1813      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
1814    </audio>
1815      </div>
1816      <!--
1817      <xsl:call-template name="workflow-block"/>
1818-->
1819      <div id="controlMarker">
1820    <xsl:comment> filler</xsl:comment>
1821      </div>
1822      <span class="ui-state-default ui-corner-top" id="overlayNewNotes" style="font-size:90%; padding: 3px; cursor:pointer;">New Annotation</span>
1823      <div id="svg-canvas-overlay" style="position: relative">
1824    <!--
1825        drawing canvas
1826    -->
1827    <div style="width: 100%; position: absolute; left: 0px; top: 0px;">
1828      <div style="position: relative">
1829        <div>
1830          <!--
1831          **** better if 100% width, but issue with JS reading these values ???
1832          -->
1833          <canvas height="494" id="freq-plot" style="background-color: #cccccc;" width="941"/>
1834        </div>
1835      </div>
1836    </div>
1837    <div style="width: 100%; position: absolute; left: 0px; top: 0px;">
1838      <div style="position: relative">
1839        <div>
1840          <!--
1841          **** better if 100% width, but issue with JS reading these values ???
1842          -->
1843          <canvas height="494" id="freq-plot-labels" style="background-color: transparent" width="941"/>
1844        </div>
1845      </div>
1846    </div>
1847    <div style="width: 100%; position: absolute; left: 0px; top: 0px; display: none;">
1848      <div style="position: relative">
1849        <div>
1850          <!--
1851          **** better if 100% width, but issue with JS reading these values ???
1852          -->
1853          <canvas height="494" id="selfsim-plot" style="background-color: #0000cc;" width="941"/>
1854        </div>
1855      </div>
1856    </div>
1857    <!--
1858        left/right-mix circle cursor
1859    -->
1860    <div style="background-color: transparent; position: relative; left: 0px; top: 0px;">
1861      <svg id="svgSimilarityPlay" onLoad="svgInitSimilarityPlay()" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
1862        <g id="simPlayLineGroup" transform="scale(1.0,{$cgiargYScaleSimImg})">
1863          <!--
1864          image loaded here, with yScaleSimImg applied to group
1865          -->
1866          </g>                                      <g id="playtracker" onclick="dualPlay(evt)" onmousemove="playTrackerMove(evt)" onmouseout="playTrackerOff(evt)" style="visibility: hidden" transform="translate(0,0)">
1867          <circle cx="0" cy="0" fill="rgba(100%,100%,50%,0.7)" r="20" stroke="black" stroke-width="1"/>
1868          <circle cx="0" cy="0" fill="black" r="1" stroke="black" stroke-width="1"/>
1869          <g style="visibility: hidden;" transform="translate(-15,-15)">
1870        <image height="30" id="playtrackerBusy" width="30" xlink:href="ext/diy-audio-player/images/wait30trans.gif"/>
1871          </g>
1872          <g>
1873        <g transform="rotate(-90)">
1874          <g transform="translate(-20,-25)">
1875            <text id="rightTime" style="font-size: 80%;">L: secs</text>
1876          </g>
1877        </g>
1878        <g transform="translate(-20,30)">
1879          <text id="leftTime" style="font-size: 80%;">R: secs</text>
1880        </g>
1881          </g>
1882        </g>
1883      </svg>
1884    </div>
1885    <gsf:variable-array name="salami.overlayNote">
1886      <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
1887    </gsf:variable-array>
1888    <!--
1889        onclick="var event = arguments[0] || window.event; dualPlay(event)"
1890        onmousemove="var event = arguments[0] || window.event; playTrackerMove(event)"
1891        onmouseout="var event = arguments[0] || window.event; playTrackerOff(event)"
1892    -->
1893    <div id="noteOverlay" style="width: 100%; height: 494px; position: absolute; left: 0px; top: 0px; background-color: transparent;">                              </div>                              <gsf:script>$(window).load(function(){
1894    // **** currently supressed for respooled!!!!                               
1895    //var overlayNotes = new OverlayNotes("noteOverlay","salami.overlayNote");
1896    //$('#overlayNewNotes').click(function() {overlayNotes.AddNote()});
1897    //addStatusBar();
1898    });</gsf:script>
1899      </div>
1900      <!--
1901      end of svg-canvas-overly
1902      -->
1903      <xsl:call-template name="visualization-mode-block"/>
1904    </li>
1905  </ul>
1906 
1907</xsl:template>
1908
1909</xsl:stylesheet>
Note: See TracBrowser for help on using the browser.