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

Revision 29898, 73.1 KB (checked in by davidb, 4 years ago)

Graphics equalizer tidyup. Tooltips on Game On sections

  • 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      .control {
718        padding: 5px;
719        border: 1px solid #CCC;
720        background-color: #EEE;
721        float: left;
722        margin-right: 5px;
723
724      }
725
726      .inner-control {
727        background-color: #DDD;
728      }
729
730      .control div {
731    max-width: 400px;
732      }
733
734      .control table td {
735        padding: 5px;
736        width: 25px;
737        color: #999;
738        font-size: 12px;
739      }
740      .control h3 {
741        margin: 0;
742        padding:0;
743        font-size: 12px;
744        margin-bottom: 10px;
745      }
746      .control #debug {
747        border: 1px inset #ccc;
748        background-color: #FFF;
749        font-size: 12px;
750        width: 300px;
751        padding: 10px;
752      }
753      .slider {
754        margin-bottom: 16px;
755        width: 8px;
756      }
757/*
758      .geq-bar {
759        width: 34px;
760      }
761*/
762
763/*
764      .ui-button {
765        font-size: xx-small;
766      }
767*/
768      .ui-slider .ui-slider-handle {
769        width: 8px;
770        margin-left: 3px;
771      }
772    </gsf:style>
773
774
775
776   <gsf:script>
777      <![CDATA[
778
779        var grapheqL;
780        var grapheqR;
781
782      $(function() {
783        var geqSampleRate = 44100;
784        console.log("*** hardwiring Graphic Equalizer sampleRate to be: " + geqSampleRate);
785
786        grapheqL = new GraphicalEq(geqSampleRate);
787        grapheqR = new GraphicalEq(geqSampleRate);
788        grapheqL.recalculateFilters();
789        grapheqR.recalculateFilters();
790
791        var minPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40,
792                     slide: function() { changeMinFreq(grapheqL,"L")} };
793        var minPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40,
794                     slide: function() { changeMinFreq(grapheqR,"R")} };
795
796    var maxPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000,
797                     slide: function() { changeMaxFreq(grapheqL,"L") } };
798    var maxPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000,
799                     slide: function() { changeMaxFreq(grapheqR,"R") } };
800
801        var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
802                     slide: function() { changeBandsPerOctave(grapheqL,"L")} };
803        var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
804                     slide: function() { changeBandsPerOctave(grapheqR,"R")} };
805
806        $('#minFreqL').slider(minPropL);
807        $('#maxFreqL').slider(maxPropL);
808        $('#minFreqR').slider(minPropR);
809        $('#maxFreqR').slider(maxPropR);
810
811        $('#bandsPerOctaveL').slider(bpoPropL);
812        $('#bandsPerOctaveR').slider(bpoPropR);
813
814    //$('#input').attr('volume', 0);
815
816    createSliders(grapheqL,"L");
817    createSliders(grapheqR,"R");
818      });
819
820
821
822      var changeMinFreq = function(grapheq,side) {
823         grapheq.setMinimumFrequency($('#minFreq'+side).slider('option', 'value'));
824         //plotCoeffs();
825     createSliders(grapheq,side);
826      }
827
828      var changeMaxFreq = function(grapheq,side) {
829         grapheq.setMaximumFrequency($('#maxFreq'+side).slider('option', 'value'));
830         //plotCoeffs();
831     createSliders(grapheq,side);
832      }
833
834      var changeBandsPerOctave = function(grapheq,side) {
835         grapheq.setBandsPerOctave($('#bandsPerOctave'+side).slider('option', 'value'));
836         //plotCoeffs();
837     createSliders(grapheq,side);
838      }
839
840    function positionGrapheqControl(grapheq,side) {
841
842        var numSliders = grapheq.filters.length;
843            var offset = (35 * numSliders) + 12;
844        if (side == "L") {
845            offset += 30; // fudge factor
846            $('#grapheqControlL').css("left","-" + offset + "px");
847        }
848        else if (side == "R") {
849            offset += 35; // fudge factor, used to be 5
850            $('#grapheqControlR').css("right","-" + offset + "px");
851        }
852        else {
853            console.error("positionGrapheqControl(): unrecognized side '" + side + "'");
854        }
855    }
856
857      var createSliders = function(grapheq,side) {
858    $('#bandSliders'+side).empty();
859    positionGrapheqControl(grapheq,side);
860    for (var i=0; i<grapheq.filters.length; i++) {
861   
862      var freq = grapheq.filters[i].f0;
863      var units = "Hz";
864      if (freq>=1000000) {
865        freq = (freq/1000000).toFixed(2);
866        units = " MHz";
867      }
868      else if (freq>=1000) {
869        freq = (freq/1000).toFixed(2);
870        units = " KHz";
871      }
872      else if (freq>=100) {
873        freq = freq.toFixed(0);
874      }
875      else {
876        freq = freq.toFixed(0);
877        freq = "&nbsp;" + freq;
878      }
879
880      $('#bandSliders'+side).append('<td class="geq-bar"><div id="band'+side+'_'+i+'" class="slider"></div>'
881          +freq + ' ' + units + '</td>');
882
883      $('#band'+side+'_'+i).slider({ orientation: 'vertical', range: 'min', min: -10, max: 3, step: 0.1, value: 0,
884                                     slide: function(event,ui) { changeBandGain(event,ui,grapheq)} });
885    }
886      }
887     
888      var changeBandGain = function(event, ui, grapheq) {
889    grapheq.setBandGain(ui.handle.parentNode.id.split("_")[1], ui.value);
890        //plotCoeffs();
891      }
892/*
893      var plotCoeffs = function() {
894    freqz = new Float32Array(grapheq.freqzs[0].length);
895
896    for (var i=0; i<freqz.length; i++) {
897      for (var j=0; j<grapheq.freqzs.length; j++) {
898        freqz[i] += grapheq.freqzs[j][i];
899      }
900    }
901      }
902*/
903
904/*
905      function audioWritten(event) {
906        signal = event.mozFrameBuffer;
907
908        // Apply the filter to the signal
909        signal = grapheq.processStereo(signal);
910
911        output.mozWriteAudio([]); // flush
912        output.mozWriteAudio(signal);
913        writeCount++;
914      }
915*/
916
917        //plotCoeffs();
918
919
920      ]]>
921    </gsf:script>
922
923
924      <gsf:script>
925    function minimizeTurnstyle(suffix) {
926      $('#turnstyleMaximizeButton'+suffix).show();
927      $('#turnstyleMinimizeButton'+suffix).hide();
928      $('#turnstyleContentsArea'+suffix).slideUp('fast');
929       }
930
931    function maximizeTurnstyle(suffix) {
932      $('#turnstyleMaximizeButton'+suffix).hide();
933      $('#turnstyleMinimizeButton'+suffix).show();
934      $('#turnstyleContentsArea'+suffix).slideDown('fast');
935       }
936
937      </gsf:script>
938
939<!--   
940    <div class="control" style="float: left; height: 200px">
941-->
942
943
944    <div id="grapheqControlL" class="control" style="position: absolute; top: 280px; left: -132px; heightXX: 200px">
945
946      <h3 style="float: left;">Graphic Equalizer (left channel)</h3>
947      <div style="float: right;">
948    <span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
949    <a id="turnstyleMinimizeButtonL" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('L');">
950      <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
951    </a>
952    <a id="turnstyleMaximizeButtonL" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('L');">
953      <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
954    </a>
955      </div>
956
957      <hr style="clear: both;"/>
958
959      <div id="turnstyleContentsAreaL" style="display: none; float: right;">
960
961    <table class="inner-control" style="margin-bottom: 5px;">
962      <tr>
963        <td><div id="minFreqL" class="slider"><xsl:comment/></div>Min Freq</td>
964        <td><div id="maxFreqL" class="slider"><xsl:comment/></div>Max Freq</td>
965        <td><div id="bandsPerOctaveL" class="slider"><xsl:comment/></div>Bands/ Octave</td>
966      </tr>
967    </table>
968      </div>
969
970      <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
971   
972      <table class="inner-control">
973    <tr id="bandSlidersL">
974    </tr>
975      </table>
976
977
978
979    </div>
980
981<!--
982    <div class="control" style="float: right; height: 200px">
983-->
984
985    <div id="grapheqControlR" class="control" style="position: absolute; top: 280px; right: -330px; heightXX: 200px">
986      <h3 style="float: left;">Graphic Equalizer (right channel)</h3>
987
988      <div style="float: right;">
989    <span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
990    <a id="turnstyleMinimizeButtonR" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('R');">
991      <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
992    </a>
993    <a id="turnstyleMaximizeButtonR" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('R');">
994      <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
995    </a>
996      </div>
997
998      <hr style="clear: both;"/>
999
1000      <div id="turnstyleContentsAreaR" style="display: none; float: left;">
1001    <table class="inner-control" style="margin-bottom: 5px;">
1002      <tr>
1003        <td><div id="minFreqR" class="slider"><xsl:comment/></div>Min Freq</td>
1004        <td><div id="maxFreqR" class="slider"><xsl:comment/></div>Max Freq</td>
1005        <td><div id="bandsPerOctaveR" class="slider"><xsl:comment/></div>Bands/ Octave</td>
1006      </tr>
1007    </table>
1008      </div>
1009
1010      <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
1011
1012      <table class="inner-control">
1013    <tr id="bandSlidersR">
1014    </tr>
1015      </table>
1016
1017    </div>
1018   
1019  </xsl:template>
1020
1021
1022  <!-- *** -->
1023  <!-- * Settings form -->
1024  <!-- *** -->
1025
1026  <xsl:template name="settings-form">
1027    <xsl:param name="cgiargYScaleSimImg"/>
1028
1029    <xsl:variable name="httpCollection">
1030      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
1031    </xsl:variable>
1032
1033<!--
1034    <gsf:variable-array name="overlayNote2">
1035      <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
1036    </gsf:variable-array>
1037
1038    <span id="overlayNewNotes2" class="ui-state-default ui-corner-top" style="font-size:90%; padding: 3px; cursor:pointer;">
1039      New Annotation 2
1040    </span>   
1041
1042    <div id="noteOverlay2" style="width: 100%; height: 300px; background-color: #cccccc;">
1043    </div>
1044
1045    <gsf:script>
1046      $(window).load(function(){
1047           var overlayNotes2 = new OverlayNotes("noteOverlay2","salami.overlayNote");
1048       $('#overlayNewNotes2').click(function() {overlayNotes2.AddNote() });
1049       });
1050
1051    </gsf:script>
1052-->
1053
1054    <div style="display: none;"><!-- wrapped div to force display to none -->
1055
1056    <div id="settings-turnstyle" style="margin: 6px;">
1057      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1058    Audio Content Search
1059      </div>
1060      <div class="documenttext" style="display: none;">
1061
1062
1063      <form id="QueryForm" name="QueryForm" method="get" action="{$library_name}">
1064    <input type="hidden" name="a" value="q"/>
1065    <input type="hidden" name="sa"><xsl:attribute name="value"><xsl:value-of select="/page/pageRequest/@subaction"/></xsl:attribute></input>
1066    <input type="hidden" name="rt" value="rd"/>
1067   
1068    <input type="hidden" name="s" value="AudioQuery"/>
1069    <input type="hidden" name="c" value="{$collName}"/>
1070    <xsl:if test="not(paramList/param[@name='startPage'])">
1071      <input type="hidden" name="startPage" value="1"/>
1072    </xsl:if>
1073    <xsl:choose>
1074      <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.maxDocs']">
1075        <input type="hidden" name="s1.maxDocs">
1076          <xsl:attribute name="value">
1077        <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.maxDocs']/@value"/>
1078          </xsl:attribute>
1079        </input>
1080      </xsl:when>
1081      <xsl:otherwise>
1082        <input type="hidden" name="s1.maxDocs" value="100"/>
1083      </xsl:otherwise>
1084    </xsl:choose>
1085    <xsl:choose>
1086      <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']">
1087        <input type="hidden" name="s1.hitsPerPage">
1088          <xsl:attribute name="value">
1089        <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']/@value"/>
1090          </xsl:attribute>
1091        </input>
1092      </xsl:when>
1093      <xsl:otherwise>
1094        <input type="hidden" name="s1.hitsPerPage" value="20"/>
1095      </xsl:otherwise>
1096    </xsl:choose>
1097   
1098    <input type="hidden" name="q">
1099      <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
1100    </input>
1101   
1102   
1103    <input type="hidden" name="s1.query">
1104<!--
1105      <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
1106-->
1107      <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/@nodeID"/>.dir</xsl:attribute>
1108    </input>
1109   
1110    <input type="hidden" name="s1.offset" value="0" />
1111    <input type="hidden" name="s1.length" value="200" />
1112   
1113    <div style="font-style: italics;">Start new query @ offset
1114    <span id="mysongCurrentPos">0 secs</span>,
1115    with excerpt lasting
1116   
1117    <input type="text" name="mysongWindowDuration" size="4" value="6" />
1118    <!--
1119        <span id="mysongWindowDuration" class="editable-offset"
1120        style="cursor: pointer; border: 1px solid black; padding: 3px; width: 200px; min-width: 200px;">6.0</span>
1121    -->
1122    secs:
1123
1124    <input type="submit" value="Search" onclick="preSubmit(this.form);" />
1125    </div>
1126
1127   
1128    <ul style="font-size: 80%; margin-top: 8px; font-style: italics;" >
1129      <li>Use the <b>Play all of</b> bar to get to the part of the song you are interested in.</li>
1130      <li>... the <b>query @ offset</b> value will change accordingly as the song progresses.</li>
1131      <li>Click <b>pause</b> (anywhere outside of the time-line) to mark the spot you want to start the new music query.</li>
1132      <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>
1133      <li>Finally, click the <b>Search</b> button to initiate the new query.</li>
1134    </ul>
1135   
1136      </form>
1137
1138      <hr/>
1139     
1140<!--
1141      <form id="RescaleForm" name="RescaleForm" method="get" action="{$library_name}">
1142    <div style="font-style: italics;">
1143      Make the scale factor for the y-dimension of the self-similarity
1144      image be
1145      <input type="text" name="ResizeScale" value="{$cgiargYScaleSimImg}"
1146             size="3" /> then
1147      <input type="button" name="ResizeImage" value="Resize Image"
1148             onclick="javascript:rescaleImage()" />
1149     
1150    </div>
1151      </form>
1152     
1153      <hr/>
1154-->
1155
1156      <!-- **** currently not displayed -->
1157
1158      <form id="UpdateCAForm" name="UpdateCAForm" method="get" action="{$library_name}" style="display: none;">
1159    <div style="font-style: italics;">
1160     
1161      Show the song structure automatically computed by analyzing
1162      the audio data using algorithm
1163
1164      <select id="caaMenu" name="caAlgorithm">
1165        <option value="1">BV1</option>
1166        <option value="2">BV2</option>
1167        <option value="3">GP7</option>
1168        <option value="4">MHRAG2</option>
1169        <option value="5">MND1</option>
1170        <option value="6">WB1</option>
1171
1172<!--
1173        <option value="-1">or hide</option>
1174-->
1175
1176      </select>:
1177
1178      <input type="button" name="Reload" value="Reload"
1179             onclick="updateCAAlgorithm()" />
1180
1181    </div>
1182      </form>
1183
1184    <script>
1185      <xsl:text disable-output-escaping="yes">
1186        if (hasStructuredAudio) {
1187          var caaMenu = document.getElementById("caaMenu");
1188               caaMenu.options[caAlgorithm-1].selected = 1;
1189        }
1190      </xsl:text>
1191    </script>
1192     
1193
1194      </div>
1195    </div>
1196    <script>
1197      <xsl:text disable-output-escaping="yes">
1198    $(function(){
1199    transformToTurnstyleBlock("settings");
1200    });
1201      </xsl:text>
1202    </script>
1203
1204    </div><!-- wrapped div to force display to none -->
1205
1206  </xsl:template>
1207
1208
1209  <!-- *** -->
1210  <!-- * Computed Data -->
1211  <!-- *** -->
1212
1213
1214  <xsl:template name="computed-data">
1215    <xsl:param name="httpCollection"/>
1216    <xsl:param name="assocFilePath"/>
1217
1218    <div id="computed-turnstyle" style="margin: 6px;">
1219      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1220    Computed Data
1221      </div>
1222
1223      <div class="documenttext" style="display: none;">
1224    <table class="metadata-stripes" style="width: 100%">
1225      <tbody>
1226        <tr>
1227          <td>jAudio Features</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jaudio.xml">download ACE XML feature values file</a></td>
1228        </tr>
1229       
1230        <tr>
1231          <td>jSongMiner Metadata</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jsongminer.xml">download ACE XML classifications file</a></td>
1232        </tr>
1233       
1234      </tbody>
1235    </table>
1236      </div>
1237    </div>
1238
1239    <gsf:script>
1240    $(function(){
1241      transformToTurnstyleBlock("computed");
1242    });
1243    </gsf:script>
1244
1245  </xsl:template>
1246
1247
1248
1249  <xsl:template name="original-audio">
1250    <xsl:param name="httpCollection"/>
1251    <xsl:param name="assocFilePath"/>
1252    <xsl:param name="Audio"/>
1253    <xsl:param name="streamableaudio"/>
1254
1255    <div id="original-turnstyle" style="margin: 6px;">
1256      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
1257    The Original Audio
1258      </div>
1259
1260      <div style="display: none;">
1261
1262    <div>
1263      <audio style="width: 100%;" id="original-audio" controls="controls" >
1264<!--
1265        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
1266-->
1267        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" />
1268        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}" />
1269      </audio>
1270    </div>
1271
1272      </div>
1273    </div>
1274
1275    <gsf:script>
1276    $(function(){
1277      transformToTurnstyleBlock("original");
1278    });
1279    </gsf:script>
1280
1281
1282
1283  </xsl:template>
1284
1285
1286  <xsl:template name="documentContent">
1287<!--
1288<xsl:call-template name="init-document-xsl-vars"/>
1289-->
1290<!--
1291declare $httpCollection = $httpPath (for better consistency with other places in Greenstone XSL files)
1292-->
1293
1294    <xsl:variable name="httpCollection">
1295      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
1296    </xsl:variable>
1297    <xsl:variable name="assocFilePath">
1298      <gsf:metadata name="assocfilepath" select="root"/>
1299    </xsl:variable>
1300    <xsl:variable name="Source">
1301      <gsf:metadata name="Source" select="root"/>
1302    </xsl:variable>
1303    <xsl:variable name="Audio">
1304      <gsf:switch>
1305    <gsf:metadata name="Audio" select="root"/>
1306    <gsf:when test="exists">
1307      <gsf:metadata name="Audio" select="root"/>
1308    </gsf:when>
1309    <gsf:otherwise>doc.ogg</gsf:otherwise>
1310      </gsf:switch>
1311    </xsl:variable>
1312    <xsl:variable name="streamableaudio">
1313      <gsf:switch>
1314    <gsf:metadata name="streamableaudio" select="root"/>
1315    <gsf:when test="exists">
1316      <gsf:metadata name="streamableaudio" select="root"/>
1317    </gsf:when>
1318    <gsf:otherwise>doc.mp3</gsf:otherwise>
1319      </gsf:switch>
1320    </xsl:variable>
1321   
1322    <xsl:variable name="streamablevideo">
1323      <gsf:metadata name="SourceFile"/>
1324    </xsl:variable>
1325   
1326    <div class="documenttext" id="gs-document">
1327
1328<div>
1329
1330
1331  <div id='media-player' style="width: 96%">
1332
1333    <xsl:if test="$interface_name='dlfm'">
1334      <style>
1335    .openclose a:visited {
1336        color: #ffffff;
1337    }
1338    .openclose a:link {
1339        color: #ffffff;
1340    }
1341    .openclose a:hover {
1342      color: #000000;
1343    }
1344
1345      </style>
1346    </xsl:if>
1347
1348    <div class="about-bar">
1349      <div id="about-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px; z-index: 4; position: relative;">
1350
1351    <xsl:choose>
1352          <xsl:when test="$interface_name='dlfm'">
1353        Linked Data: <xsl:call-template name="choose-title"/>
1354      </xsl:when>
1355      <xsl:otherwise>
1356        About: <xsl:call-template name="choose-title"/>
1357      </xsl:otherwise>
1358    </xsl:choose>
1359      </div>
1360
1361      <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1362
1363      <div id="about-area" class="documenttext"
1364       style="display: none; position: absolute: left: 0px; top: 0px; z-index: 1;">
1365    <xsl:call-template name="fingerprintMetadataBlock" />
1366      </div>
1367    </div>
1368
1369    <div class="video-player-bar">
1370      <div id="video-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px; z-index: 4; position: relative;">
1371    Video Display
1372      </div>
1373
1374      <div id="video-area" class="documenttext"
1375       style="display: none; position: absolute: left: 0px; top: 0px; z-index: 1;">
1376    <center>
1377
1378
1379      <style>
1380        #video_box {position:relative; z-index: 1;}
1381        #overlay {position: absolute; t: 0; left: 0; z-index: 2;}
1382        #video_container {z-index: 1;}
1383
1384        #XXXvideo_container {position:absolute;top: 0px;left: 0px;}
1385      </style>
1386
1387
1388      <div id="video_box">
1389        <div id="overlay"><xsl:comment>filler</xsl:comment></div>
1390        <div id="video_container">
1391
1392          <video id="video" width="60%" controls="false">
1393        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" />
1394        <track id="bubbles" label="Metadata" kind="metadata"
1395               srclang="en" src="{$httpCollection}/tracks/land-down-under-metadata-en.vtt" default="default" />
1396        Your browser does not support the video tag.
1397          </video>
1398
1399        </div>
1400      </div>
1401    </center>
1402      </div>
1403    </div>
1404
1405    <div id='media-controls'>
1406      <div>
1407    <input id="progress-bar" type="range"
1408           min='0' max='100' step='0.01' value='0'
1409           class="ui-state-default ui-corner-all"
1410           style="width: 98%"/> <!-- used to be 100% -->
1411
1412      </div>
1413      <div style="width: 100%;">
1414    <div style="float:left; padding: 8px; ">
1415      <button id='replay-button'     class='buttonx2 replay' title='replay' onclick='replayMedia();'>Replay</button>   
1416      <button id='play-pause-button' class='buttonx2 play' title='play/pause (or press space-bar on keyboard)' onclick='togglePlayPause();'>Play</button>
1417      <button id='stop-button'       class='buttonx2 stop' title='stop' onclick='stopPlayer();'>Stop</button>
1418    </div>
1419    <div style="float:right; padding: 8px; ">
1420      <div style="display: inline; font-family: Arial,Helvetica,sans-serif; color: white">
1421        <span id="mediaPlayerCurrentTime">0:00.0</span>/
1422        <span id="mediaPlayerTotalTime">0:00.0</span>
1423      </div>
1424      <button id="eq-button" class="button" title="Show/Hide graphics equalilzer" onclick="return toggleGraphicEQ()">EQ</button>
1425      <button id='volume-dec-button' class='button volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button>
1426      <button id='volume-inc-button' class='button volume-plus' title='increase volume' onclick="changeVolume('+');">Increase volume</button>
1427      <button id='mute-button'       class='button mute' title='mute' onclick="toggleMute('true');">Mute</button>   
1428    </div>
1429      </div>
1430    </div>
1431
1432
1433    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1434
1435    <xsl:call-template name="graphic-equalizers"/>
1436
1437    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1438
1439    <div class="playlist-bar">
1440      <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
1441    Layer Controls: Create, Edit, View
1442      </div>
1443
1444      <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1445
1446      <div id="playlist-area" class="documenttext"
1447       style="display: none; position: absolute: left: 0px; top: 0px;">
1448<!--
1449    <div id='media-play-list'>
1450      <h2>Play list</h2>
1451      <ul id='play-list'>
1452        <li><span class='play-item' onclick="loadVideo('parrots.webm', 'parrots.mp4');">Parrots</span></li>
1453        <li><span class='play-item' onclick="loadVideo('paddle-wheel.webm', 'paddle-wheel.mp4');">Paddle Steamer Wheel</span></li>
1454        <li><span class='play-item' onclick="loadVideo('grass.webm', 'grass.mp4');">Grass</span></li>
1455      </ul>
1456    </div>
1457-->
1458
1459         <div id="save-recording-popup" title="Save Recording">
1460       <p>Do you want to name and save this recording?</p>
1461 
1462       <form>
1463         <fieldset>
1464           <label for="name">Name</label>
1465           <input type="text"
1466              name="save-recording-name" id="save-recording-name" value="My Recording"
1467              class="text ui-widget-content ui-corner-all"/>           
1468         </fieldset>
1469
1470           <!-- Allow form submission with keyboard without duplicating the dialog button -->
1471           <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
1472
1473       </form>
1474     </div>
1475
1476         <div id="delete-recording-popup" title="Delete Tracks">
1477       <p>Are you sure you want to delete the selected tracks?</p>
1478     </div>
1479
1480
1481         <div id="edit-recording-popup" title="Edit Tracks">
1482       <style>
1483         #trackEditor {
1484           position: absolute;
1485           top: 0; right: 0; bottom: 0; left: 0;
1486         }
1487       </style>
1488       <div id="trackEditor"><xsl:comment>Track Editor Area</xsl:comment></div>
1489     </div>
1490
1491
1492
1493          <div style="color: white;">
1494
1495        <form id="bubForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
1496          <fieldset>
1497        <legend id="mpm-legend">Popup Layers</legend>
1498        <input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br />
1499        <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br />
1500        <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br />
1501        <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br />
1502       
1503        <div style="padding: 8px;">
1504          <button id="mpm-new-overlay"
1505              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
1506              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
1507            New Layer
1508          </button>
1509          <button id="mpm-merge-overlay"
1510              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
1511              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
1512            Merge Selected
1513          </button>
1514          <button id="mpm-split-overlay"
1515              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
1516              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
1517            Split Selected
1518          </button>
1519          <button id="mpm-edit-overlay" 
1520              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
1521              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
1522          Edit Selected
1523          </button>
1524          <button id="mpm-delete-overlay" 
1525              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
1526              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;">
1527          Delete Selected
1528          </button>
1529        </div>
1530          </fieldset>
1531        </form>
1532
1533        <form id="mpmForm" style="width:99%;">
1534          <fieldset>
1535        <legend id="mpm-legend">Video Player Mode</legend>
1536       
1537        <div id="mpm-div" class="radio-div">
1538
1539          <div class="radio-label-combo" style="display:inline-block; width: 32%">
1540            <span>
1541              <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/>
1542            </span>
1543            <label for="mpm-record" class="radio-label">
1544              <span style="color: red;" title="The notes/beat you play on the instruments get recorded, and form a new layer">
1545            Lay down new track
1546              </span>
1547            </label>
1548          </div>
1549
1550          <div class="radio-label-combo" style="display:inline-block; width: 32%">
1551            <span>
1552              <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/>
1553            </span>
1554            <label for="mpm-neutral" class="radio-label">
1555              <span style="color: orange;" title="Sit back and relax listening to the video">
1556            Put into Neutral
1557              </span>
1558            </label>
1559          </div>
1560
1561          <div class="radio-label-combo" style="display:inline-block; width: 32%">
1562            <span>
1563              <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/>
1564            </span>
1565            <label for="mpm-game-on" class="radio-label">
1566              <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">
1567            Game on!
1568              </span>
1569            </label>
1570          </div>
1571
1572        </div>
1573          </fieldset>
1574        </form>
1575
1576
1577        <form id="palForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px; ">
1578          <fieldset>
1579        <legend id="pal-legend">Play Along Layers: Game On!</legend>
1580        <div id="palList"><xsl:comment>play along list</xsl:comment></div>
1581       
1582        <div style="padding: 8px;">
1583          <button id="pal-display-overlay"
1584              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
1585              onclick="return palDisplay()">
1586            Display Selected
1587          </button>
1588          <button id="pal-merge-overlay"   
1589              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;">
1590            Merge Selected
1591          </button>
1592          <button id="pal-split-overlay"   
1593              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;">
1594            Split Selected
1595          </button>
1596          <button id="pal-edit-overlay"   
1597              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
1598              onclick="return palEdit()">
1599          Edit Selected
1600          </button>
1601          <button id="pal-delete-overlay" 
1602              style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
1603              onclick="return palDelete()">
1604          Delete Selected
1605          </button>
1606        </div>
1607          </fieldset>
1608        </form>
1609
1610
1611      </div>
1612
1613    </div>
1614    </div>
1615
1616
1617    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1618
1619    <div class="analysis-bar">
1620      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
1621      Game On
1622      </div>
1623
1624      <div id="analysis-area" class="documenttext"
1625       style="display: none; position: absolute: left: 0px; top: 0px;">
1626    <div style="width:97.7%; height: 500px; margin: 6px; background-colorXX: white">
1627      <div id="gameOnPaper" width="100%" height="445"><xsl:comment>filler</xsl:comment></div>
1628<!--
1629      <svg id="gameOnPaper" xmlns="http://www.w3.org/2000/svg" version="1.1"
1630           width="100%" height="445"
1631           XXviewBox="0 0 100 100" XXpreserveAspectRatio="xMidYMid slice"
1632           XXstyle="width:100%; height:100%;" styleXX="position:absolute; top:0; left:0; z-index:-1;">
1633
1634        <rect x="0" y="0" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
1635        <xsl:comment>filler</xsl:comment>
1636      </svg>
1637-->
1638    </div>
1639     
1640      </div>
1641    </div>
1642
1643
1644    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1645
1646    <div class="turnstyle-bar">
1647
1648      <div id="piano-titlebar"
1649       style="background-image: none; background-color: #2E52A4; width: 30%; float: left; margin-right: 14px;">
1650    Piano
1651      </div>
1652
1653      <div id="drumkit-titlebar"
1654       style="background-image: none; background-color: #2E52A4; width: 30%; float: left; margin-right: 14px;">
1655    Drums
1656      </div>
1657
1658      <div id="guitar-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;">
1659    Guitar
1660      </div>
1661
1662
1663      <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1664
1665      <div style="position: relative;">
1666
1667    <div id="piano-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1668      <div id='jquery-piano'>
1669        <div ID="keyboard" class="keyboard-holder"><xsl:comment>div for piano keyboard</xsl:comment></div>
1670
1671        <div class="keyboard-options" style="color: white">
1672
1673          <div style="float: left;">
1674        General Midi:
1675        <select ID="midi-sound" onchange="changeGMInstrument(this[selectedIndex].value)">
1676          <option value="0" selected="selected">Acoustic Grand Piano</option>
1677          <option value="19">Church Organ</option>
1678          <option value="24">Acoustic Guitar Nylon</option>
1679          <option value="30">Distortion Guitar</option>
1680        </select>
1681          </div>
1682
1683          <div style="float: left;">
1684        Range [C<span ID="OCTAVE_LOWER">3</span>-B<span ID="OCTAVE_UPPER">5</span>]
1685        <input type="button" ID="-_OCTAVE" value="-" />
1686        <input type="button" ID="+_OCTAVE" value="+" /><br />
1687        <i>(Use left/right arrows to adjust with keyboard)</i>
1688          </div>
1689
1690          <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1691
1692<!--       
1693        Sound
1694        <select ID="sound">
1695          <option value="0" selected="selected">Keyboard</option>
1696          <option value="1" selected="selected">Organ</option>
1697          <option value="2">Acoustic Guitar</option>
1698          <option value="3">EDM, bro!</option>
1699        </select>
1700-->
1701        </div>
1702
1703
1704      </div>
1705     
1706    </div>
1707
1708    <style>
1709      .drumcontainer {
1710        position: absolute;
1711        top: 50%;
1712        left: 50%;
1713        transform: translateX(-50%) translateY(-50%);
1714        -webkit-transform: translateX(-50%) translateY(-50%);
1715        font-size: 100%;
1716        color: #888888;
1717        pointer-events: none;
1718      }
1719    </style>
1720    <div id="drumkit-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1721      <div id='jquery-drums' style="padding: 8px;">
1722        <center>
1723          <div style="display:inline-block;">
1724        <div style="position: relative;">
1725          <img style="position: relative;" width="148" height="148"
1726               src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" />
1727          <div class="drumcontainer" style="color: #555555">
1728            <span style="white-space: nowrap;">&lt;Shift-C&gt;</span>
1729          </div>
1730        </div>
1731          </div>
1732          <div style="display:inline-block;">
1733        <div style="position: relative;">
1734          <img style="position: relative;" width="148" height="144"
1735              src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
1736          <div class="drumcontainer" >
1737            <span style="white-space: nowrap;">&lt;Shift-V&gt;</span>
1738          </div>
1739        </div>
1740          </div>
1741          <div style="display:inline-block;">
1742        <div style="position: relative;">
1743          <img style="position: relative;"  width="167" height="163"
1744               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
1745          <div class="drumcontainer" >
1746            <span style="white-space: nowrap;">&lt;Shift-B&gt;</span>
1747          </div>
1748        </div>
1749          </div>
1750          <div style="display:inline-block;">
1751        <div style="position: relative;">
1752          <img style="position: relative;" width="197" height="192"
1753               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum4" border="0" />
1754          <div class="drumcontainer" >
1755            <span style="white-space: nowrap;">&lt;Shift-N&gt;</span>
1756          </div>
1757        </div>
1758          </div>
1759          <div style="display:inline-block;">
1760        <div style="position: relative;">
1761          <img style="position: relative;" width="216" height="211"
1762               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" />
1763          <div class="drumcontainer" >
1764           <span style="white-space: nowrap;"> &lt;Space-M&gt;</span>
1765          </div>
1766        </div>
1767          </div>
1768        </center>
1769      </div>
1770     
1771    </div>
1772
1773
1774    <div id="guitar-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
1775          <div style="color: white;">
1776        <div id="jamWrapper">
1777          <div id="jamStage">
1778        <xsl:comment><!--jamStage--></xsl:comment>
1779          </div>
1780          <div id="jamPlate">
1781        <xsl:comment><!--jamPlate--></xsl:comment>
1782          </div>
1783          <canvas id="jamStrings" width="750px" height="200px">
1784        Your browser does not support the Canvas element
1785          </canvas>
1786        </div>
1787      </div>
1788
1789
1790      <div style="position: relative; background-color: white;">
1791        <div style="display:inline-block; width: 150px; height: 200px;">
1792          <form style="position: absolute; top: 60px; left: 10px;">
1793
1794        <fieldset>
1795          <legend id="clm-legend">Show Chords</legend>
1796         
1797          <div id="clm-div" class="radio-div">
1798           
1799            <div class="radio-label-combo">
1800              <span>
1801            <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode()" value="Maj"
1802                   checked="checked"/>
1803              </span>
1804              <label for="clm-maj" class="radio-label">
1805            <span>
1806              Major
1807            </span>
1808              </label>
1809            </div>
1810           
1811          <div class="radio-label-combo">
1812            <span>
1813              <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode()" value="Maj"/>
1814            </span>
1815            <label for="clm-maj" class="radio-label">
1816              <span>
1817            Minor
1818              </span>
1819            </label>
1820          </div>
1821          </div>
1822          </fieldset>
1823          </form>
1824        </div>
1825
1826        <div id="mytab" style="display:inline-block; height: 160px; width: 780px;">
1827          <svg class="graph" xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%">
1828        <g id="scaled-mytab-group" transform="scale(0.5,0.6)">
1829          <foreignobject id="scaled-mytab" width="2000px" height="300px"><xsl:comment>filler</xsl:comment></foreignobject>
1830        </g>
1831          </svg>
1832        </div>
1833      </div>
1834
1835
1836    </div>
1837
1838      </div>
1839
1840      <div style="position: absolute; top: -300px; background-color: white;">
1841    <style>
1842      .chordLineup {
1843        -webkit-transform-style: preserve-3d;
1844        -moz-transform-style: preserve-3d;
1845        transform-style: preserve-3d;
1846      }
1847
1848      .chordLineupBlock {
1849        display: inline-block;
1850      }
1851     
1852      .chordLineupBlockVerticalCenter {
1853        position: relative;
1854        top: 50%;
1855        transform: translataeY(-50%);
1856        -webkit-transform: translataeY(-50%);
1857        -ms-transform: translataeY(-50%);
1858      }
1859
1860    </style>
1861    <div id="offscreen-jtab-chord-lineup">
1862
1863      <div id="offscreen-jtab-chord-C" class="chordLineupBlock">
1864        <xsl:comment>filler</xsl:comment>
1865      </div>
1866
1867      <div class="chordLineupBlock">
1868        <div id="offscreen-jtab-chord-Db">
1869          <xsl:comment>filler</xsl:comment>
1870        </div>
1871        <div id="offscreen-jtab-chord-Cs">
1872          <xsl:comment>filler</xsl:comment>
1873        </div>
1874      </div>
1875     
1876      <div id="offscreen-jtab-chord-D" class="chordLineupBlock">
1877        <xsl:comment>filler</xsl:comment>
1878      </div>
1879
1880      <div class="chordLineupBlock">
1881        <div id="offscreen-jtab-chord-Eb">
1882          <xsl:comment>filler</xsl:comment>
1883        </div>
1884        <div id="offscreen-jtab-chord-Ds">
1885          <xsl:comment>filler</xsl:comment>
1886        </div>
1887      </div>
1888     
1889      <div id="offscreen-jtab-chord-E" class="chordLineupBlock">
1890        <xsl:comment>filler</xsl:comment>
1891      </div>
1892     
1893      <div id="offscreen-jtab-chord-F" class="chordLineupBlock">
1894        <xsl:comment>filler</xsl:comment>
1895      </div>
1896     
1897      <div class="chordLineupBlock">
1898        <div id="offscreen-jtab-chord-Gb">
1899          <xsl:comment>filler</xsl:comment>
1900        </div>
1901        <div id="offscreen-jtab-chord-Fs">
1902          <xsl:comment>filler</xsl:comment>
1903        </div>
1904      </div>
1905
1906      <div id="offscreen-jtab-chord-G" class="chordLineupBlock">
1907        <xsl:comment>filler</xsl:comment>
1908      </div>
1909     
1910      <div class="chordLineupBlock">
1911        <div id="offscreen-jtab-chord-Ab">
1912          <xsl:comment>filler</xsl:comment>
1913        </div>
1914        <div id="offscreen-jtab-chord-Gs">
1915          <xsl:comment>filler</xsl:comment>
1916        </div>
1917      </div>
1918
1919      <div id="offscreen-jtab-chord-A" class="chordLineupBlock">
1920        <xsl:comment>filler</xsl:comment>
1921      </div>
1922     
1923      <div class="chordLineupBlock">
1924        <div id="offscreen-jtab-chord-Bb">
1925          <xsl:comment>filler</xsl:comment>
1926        </div>
1927        <div id="offscreen-jtab-chord-As">
1928          <xsl:comment>filler</xsl:comment>
1929        </div>
1930      </div>
1931
1932      <div id="offscreen-jtab-chord-B" class="chordLineupBlock">
1933        <xsl:comment>filler</xsl:comment>
1934      </div>
1935     
1936    </div>
1937
1938    <gsf:script>
1939      $(document).ready(function() {
1940
1941        jtab.render($('#offscreen-jtab-chord-C') ,'C');
1942        jtab.render($('#offscreen-jtab-chord-Cs'),'C#');
1943        jtab.render($('#offscreen-jtab-chord-Db'),'Db');
1944        jtab.render($('#offscreen-jtab-chord-D') ,'D');
1945        jtab.render($('#offscreen-jtab-chord-Ds'),'D#');
1946        jtab.render($('#offscreen-jtab-chord-Eb'),'Eb');
1947        jtab.render($('#offscreen-jtab-chord-F') ,'F');
1948        jtab.render($('#offscreen-jtab-chord-Fs'),'F#');
1949        jtab.render($('#offscreen-jtab-chord-Gb'),'Gb');
1950        jtab.render($('#offscreen-jtab-chord-G') ,'G');
1951        jtab.render($('#offscreen-jtab-chord-Gs'),'G#');
1952        jtab.render($('#offscreen-jtab-chord-Ab'),'Ab');
1953        jtab.render($('#offscreen-jtab-chord-A') ,'A');
1954        jtab.render($('#offscreen-jtab-chord-As'),'A#');
1955        jtab.render($('#offscreen-jtab-chord-Bb'),'Bb');
1956        jtab.render($('#offscreen-jtab-chord-B') ,'B');
1957
1958        $('#scaled-mytab').append($('#offscreen-jtab-chord-lineup'));
1959
1960        console.log("!!!! forced background colour for F major in Guitar Tab area!!!")
1961        $('#builder_6').css("background-color","rgba(46,82,164,0.50)");
1962      });
1963    </gsf:script>
1964      </div>
1965
1966    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
1967
1968    </div>
1969
1970
1971
1972
1973    <script>
1974      <xsl:text disable-output-escaping="yes">
1975    $(function(){
1976      transformToTurnstyleBlock("about");
1977
1978      transformToTurnstyleBlock("video");
1979      transformToTurnstyleBlock("playlist");
1980
1981      transformToTurnstyleBlock("piano");
1982      transformToTurnstyleBlock("drumkit");
1983      transformToTurnstyleBlock("guitar");
1984
1985      transformToTurnstyleBlock("analysis");
1986
1987      $('#video-openclose').trigger("click");
1988
1989    });
1990    var piano_keyboard = new AudioSynthView();
1991    piano_keyboard.draw();     
1992      </xsl:text>
1993    </script>
1994   
1995  </div>
1996
1997  <div style="color: white">
1998    <!--
1999    Sound
2000    -->
2001    x
2002  </div>
2003   
2004</div>
2005
2006      <xsl:call-template name="audio-icon-cache"/>
2007   
2008      <hr/>
2009   
2010    </div>
2011  </xsl:template>
2012
2013
2014
2015<xsl:template name="song-ul">
2016
2017  <xsl:variable name="httpCollection">
2018    <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
2019  </xsl:variable>
2020  <xsl:variable name="assocFilePath">
2021    <gsf:metadata name="assocfilepath" select="root"/>
2022  </xsl:variable>
2023  <xsl:variable name="Source">
2024    <gsf:metadata name="Source" select="root"/>
2025  </xsl:variable>
2026  <xsl:variable name="Audio">
2027    <gsf:switch>
2028      <gsf:metadata name="Audio" select="root"/>
2029      <gsf:when test="exists">
2030    <gsf:metadata name="Audio" select="root"/>
2031      </gsf:when>
2032      <gsf:otherwise>doc.ogg</gsf:otherwise>
2033    </gsf:switch>
2034  </xsl:variable>
2035  <xsl:variable name="streamableaudio">
2036    <gsf:switch>
2037      <gsf:metadata name="streamableaudio" select="root"/>
2038      <gsf:when test="exists">
2039    <gsf:metadata name="streamableaudio" select="root"/>
2040      </gsf:when>
2041      <gsf:otherwise>doc.mp3</gsf:otherwise>
2042    </gsf:switch>
2043  </xsl:variable>
2044 
2045  <xsl:variable name="streamablevideo">
2046    <gsf:metadata name="Source"/>
2047  </xsl:variable>
2048 
2049  <gsf:variable name="cgiargFrameOffset">
2050    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameOffset']/@value"/>
2051  </gsf:variable>
2052  <gsf:variable name="cgiargFrameLength">
2053    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameLength']/@value"/>
2054  </gsf:variable>
2055  <xsl:variable name="cgiargYScaleSimImg">
2056    <xsl:choose>
2057      <xsl:when test="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value != ''">
2058    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value"/>
2059      </xsl:when>
2060      <xsl:otherwise>0.5</xsl:otherwise>
2061    </xsl:choose>
2062  </xsl:variable>
2063
2064  <!--
2065      CAA = Content Analysis Algorithm
2066  -->
2067  <xsl:variable name="cgiargCAAlgorithm">
2068    <xsl:choose>
2069      <xsl:when test="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value != ''">
2070    <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value"/>
2071                      </xsl:when>
2072                      <xsl:otherwise>1</xsl:otherwise>
2073    </xsl:choose>
2074  </xsl:variable>
2075 
2076 
2077<!--
2078***
2079-->
2080<!--
2081Main Audio Player
2082-->
2083<!--
2084***
2085-->
2086  <ul class="playlist">
2087    <li class="rounded">
2088      <gsf:script src="{$httpCollection}/script/hybrid-audio-player.js"/>
2089      <a href="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" id="mysong" onclick="togglePlayVisual(document.getElementById('mainPlayButton'))" style="padding-bottom: 2px;">
2090    <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>
2091      </a>
2092      <gsf:script src="ext/diy-audio-player/script/audioDB-play.js"/>
2093      <xsl:choose>
2094    <xsl:when test="($cgiargFrameOffset != '-1') and ($cgiargFrameOffset != '')">
2095      <div style="background-color: rgb(40%,40%,20%)">
2096        <script type="text/javascript">
2097          <xsl:text disable-output-escaping="yes">var frameOffsetStr=gs.variables.cgiargFrameOffset;
2098          var frameLength=gs.variables.cgiargFrameLength;</xsl:text>
2099        </script>
2100        <svg height="24" id="svgAudioDBSegments" onLoadXX="svgAudioDBInit()" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
2101      </svg>                                    </div>
2102    </xsl:when>
2103      </xsl:choose>
2104      <xsl:call-template name="structuredAudioPlayerBlock"/>
2105      <xsl:call-template name="processingPopup"/>
2106      <div id="doublePlay" style="width: 100%; display: none;">
2107    <script type="text/javascript">
2108      <xsl:text disable-output-escaping="yes">// At time of writing this code, this needs to be an OGG file to work in Firefox
2109      var source = "</xsl:text>
2110      <gsf:metadata name="Audio" select="root"/>
2111      <xsl:text disable-output-escaping="yes">";
2112     
2113      var self_sim_png = source.replace(/\.(ogg|mp3|wav)$/,".png");
2114      var collect = "</xsl:text>
2115      <xsl:value-of select="/page/pageResponse/collection/@name"/>
2116      <xsl:text disable-output-escaping="yes">";
2117      var site = "</xsl:text>
2118      <xsl:value-of select="$site_name"/>
2119      <xsl:text disable-output-escaping="yes">";</xsl:text>
2120    </script>
2121    <gsf:script src="ext/diy-audio-player/script/similarity-matrix-play.js"/>
2122    <audio controls="controls" id="leftsong" style="width: 49%;">
2123      <!--
2124          <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
2125      -->
2126      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
2127      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
2128      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
2129    </audio>
2130    <audio controls="controls" id="rightsong" style="width: 49%;">
2131      <!--
2132          <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
2133      -->
2134      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
2135      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
2136      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
2137                                </audio>
2138      </div>
2139      <!--
2140      Real Time Analysis (RTA) audio
2141      -->
2142      <div style="width: 100%;">
2143    <audio id="rta-audio-element" style="width: 100%;">
2144      <!--
2145          <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg"/>
2146      -->
2147      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
2148      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
2149      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
2150    </audio>
2151      </div>
2152      <!--
2153      <xsl:call-template name="workflow-block"/>
2154-->
2155      <div id="controlMarker">
2156    <xsl:comment> filler</xsl:comment>
2157      </div>
2158      <span class="ui-state-default ui-corner-top" id="overlayNewNotes" style="font-size:90%; padding: 3px; cursor:pointer;">New Annotation</span>
2159      <div id="svg-canvas-overlay" style="position: relative">
2160    <!--
2161        drawing canvas
2162    -->
2163    <div style="width: 100%; position: absolute; left: 0px; top: 0px;">
2164      <div style="position: relative">
2165        <div>
2166          <!--
2167          **** better if 100% width, but issue with JS reading these values ???
2168          -->
2169          <canvas height="494" id="freq-plot" style="background-color: #cccccc;" width="941"/>
2170        </div>
2171      </div>
2172    </div>
2173    <div style="width: 100%; position: absolute; left: 0px; top: 0px;">
2174      <div style="position: relative">
2175        <div>
2176          <!--
2177          **** better if 100% width, but issue with JS reading these values ???
2178          -->
2179          <canvas height="494" id="freq-plot-labels" style="background-color: transparent" width="941"/>
2180        </div>
2181      </div>
2182    </div>
2183    <div style="width: 100%; position: absolute; left: 0px; top: 0px; display: none;">
2184      <div style="position: relative">
2185        <div>
2186          <!--
2187          **** better if 100% width, but issue with JS reading these values ???
2188          -->
2189          <canvas height="494" id="selfsim-plot" style="background-color: #0000cc;" width="941"/>
2190        </div>
2191      </div>
2192    </div>
2193    <!--
2194        left/right-mix circle cursor
2195    -->
2196    <div style="background-color: transparent; position: relative; left: 0px; top: 0px;">
2197      <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">
2198        <g id="simPlayLineGroup" transform="scale(1.0,{$cgiargYScaleSimImg})">
2199          <!--
2200          image loaded here, with yScaleSimImg applied to group
2201          -->
2202          </g>                                      <g id="playtracker" onclick="dualPlay(evt)" onmousemove="playTrackerMove(evt)" onmouseout="playTrackerOff(evt)" style="visibility: hidden" transform="translate(0,0)">
2203          <circle cx="0" cy="0" fill="rgba(100%,100%,50%,0.7)" r="20" stroke="black" stroke-width="1"/>
2204          <circle cx="0" cy="0" fill="black" r="1" stroke="black" stroke-width="1"/>
2205          <g style="visibility: hidden;" transform="translate(-15,-15)">
2206        <image height="30" id="playtrackerBusy" width="30" xlink:href="ext/diy-audio-player/images/wait30trans.gif"/>
2207          </g>
2208          <g>
2209        <g transform="rotate(-90)">
2210          <g transform="translate(-20,-25)">
2211            <text id="rightTime" style="font-size: 80%;">L: secs</text>
2212          </g>
2213        </g>
2214        <g transform="translate(-20,30)">
2215          <text id="leftTime" style="font-size: 80%;">R: secs</text>
2216        </g>
2217          </g>
2218        </g>
2219      </svg>
2220    </div>
2221    <gsf:variable-array name="salami.overlayNote">
2222      <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
2223    </gsf:variable-array>
2224    <!--
2225        onclick="var event = arguments[0] || window.event; dualPlay(event)"
2226        onmousemove="var event = arguments[0] || window.event; playTrackerMove(event)"
2227        onmouseout="var event = arguments[0] || window.event; playTrackerOff(event)"
2228    -->
2229    <div id="noteOverlay" style="width: 100%; height: 494px; position: absolute; left: 0px; top: 0px; background-color: transparent;">                              </div>                              <gsf:script>$(window).load(function(){
2230    // **** currently supressed for respooled!!!!                               
2231    //var overlayNotes = new OverlayNotes("noteOverlay","salami.overlayNote");
2232    //$('#overlayNewNotes').click(function() {overlayNotes.AddNote()});
2233    //addStatusBar();
2234    });</gsf:script>
2235      </div>
2236      <!--
2237      end of svg-canvas-overly
2238      -->
2239      <xsl:call-template name="visualization-mode-block"/>
2240    </li>
2241  </ul>
2242 
2243</xsl:template>
2244
2245</xsl:stylesheet>
Note: See TracBrowser for help on using the browser.