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

Revision 29901, 73.3 KB (checked in by davidb, 4 years ago)

Graphics Equalizer not on by default. Better name for Game On now used in dlfm interface_name

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