Index: main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/document.xsl
===================================================================
--- main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/document.xsl	(revision 28433)
+++ main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/document.xsl	(revision 28593)
@@ -77,4 +77,5 @@
   <xsl:template name="javascript-dsp-header">
     <gsf:script src="ext/js-dsp/dsp-custom.js"/>
+    <gsf:script src="ext/js-dsp/dsp.js"/>
     <gsf:script src="ext/js-dsp/chroma-transform.js"/>
     <gsf:script src="ext/js-dsp/frequency-plotter.js"/>
@@ -99,5 +100,5 @@
 	  height: 100%; 
 	  position: absolute; 
-	  z-index: 10; 
+	  z-index: 10000; 
 	  left: 0px; 
 	  top: 0px; 
@@ -168,4 +169,6 @@
     
   </xsl:template>
+
+
 
   <xsl:template name="fingerprintMetadataBlock">
@@ -218,5 +221,14 @@
 	  <tr valign="top">
 	    <td>Artist Summary</td>
-	    <td><i><gsf:metadata name="LastFM.LastFMArtistWikiSummary"/></i></td>
+	    <td>
+	      <i>
+		<gsf:script>
+		  var summary = gs.documentMetadata["LastFM_LastFMArtistWikiSummary"];
+		  
+		  document.write(summary.replace("\n","&lt;br /&gt;"));
+
+		</gsf:script>
+	      </i>
+	    </td>
 	  </tr>
 	  
@@ -265,11 +277,11 @@
 	      -->
 
-	      <table>
+	      <table style="width: 100%;">
 		<tr>
-		  <td>
+		  <td style="width: 200px;">
 		    MusicBrainz song id: 
 		  </td>
 		  <td>
-		    <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz">
+		    <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz" class="external">
 		      <xsl:copy-of select="$musicbrainzsongid"/>
 		    </a>
@@ -282,5 +294,5 @@
 		  </td>
 		  <td>
-		    <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz">
+		    <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz" class="external">
 		      <xsl:copy-of select="$musicbrainzalbumid"/>
 		    </a>
@@ -293,13 +305,6 @@
 		  </td>
 		  <td>
-		    <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz">
+		    <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz" class="external">
 		      <xsl:copy-of select="$musicbrainzartistid"/>
-		    </a>
-		  </td>
-		</tr>
-		<tr>
-		  <td colspan="2">	      
-		    <a href="{$lastfmtrackurl}" target="#lastfm">
-		      <xsl:copy-of select="$lastfmtrackurl"/>
 		    </a>
 		  </td>
@@ -310,9 +315,21 @@
 		  </td>
 		  <td>
-		    <a href="{$echonestsongid}" target="#echonestsongid">
+		    <a href="http://developer.echonest.com/api/v4/song/profile?api_key=8WNR9XTGCODO9G4YG&amp;format=xml&amp;id={$echonestsongid}" target="#echonestsongid" class="external">
+
+
+
 		      <xsl:copy-of select="$echonestsongid"/>
 		    </a>
 		  </td>
 		</tr>
+		<tr>
+		  <td colspan="2">	      
+		    <i>
+		      <a href="{$lastfmtrackurl}" target="#lastfm" class="external">
+			<xsl:copy-of select="$lastfmtrackurl"/>
+		      </a>
+		    </i>
+		  </td>
+		</tr>
 	      </table>
 
@@ -330,5 +347,4 @@
   <!-- * Audio Player -->
   <!-- *** -->
-
 
   <xsl:template name="js-mad-header">
@@ -379,4 +395,5 @@
 
 
+
   <xsl:template name="audio-icon-cache">
     <div style="display:none;">
@@ -479,6 +496,6 @@
 	</div>
 
-	<gsf:script src="{$httpCollection}/script/meandre-workflow/chromagram.js"/>
-	<gsf:script src="{$httpCollection}/script/meandre-workflow/js-dynamic-mix.js"/>
+	<gsf:script src="{$httpCollection}/script2/meandre-workflow/chromagram.js"/>
+	<gsf:script src="{$httpCollection}/script2/meandre-workflow/js-dynamic-mix.js"/>
 	
 	<gsf:script>
@@ -611,5 +628,5 @@
     <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;">
 
-      <span class="vix-heading">Max Values:</span>
+      <span class="vis-heading">Max Values:</span>
       <div style="padding-left: 8px">
 	<style>
@@ -657,13 +674,334 @@
 -->
 
+
+
 	<form style="padding-left: 8px; padding-bottom: 0px;">
-	  <span class="vis-heading">On Pause:</span>
-	  <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix
+	  <div style="float: left;">
+	    <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix
+	  </div>
+	  <div style="float: left; padding-left: 140px;">
+	    <span class="vis-heading">Accelerated  Processing:</span>
+	    <input type="checkbox" name="acceleratedProcessingInput" onclick="acceleratedProcessingCheckbox(this)"/>&gt; realtime
+	    <span id="accProcStatus"></span>
+	  </div>
+
 	</form>
+	<div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
+
 	<hr/>
 
     </div>
     
-  </xsl:template>
+    <xsl:call-template name="graphic-equalizers"/>
+  </xsl:template>
+
+
+  <xsl:template name="graphic-equalizers">
+
+
+    <gsf:style >
+      .control {
+        padding: 5px;
+        border: 1px solid #CCC;
+        background-color: #EEE;
+        float: left;
+        margin-right: 5px;
+
+      }
+
+      .inner-control {
+        background-color: #DDD;
+      }
+
+      .control div {
+	max-width: 400px;
+      }
+
+      .control table td {
+        padding: 5px;
+        width: 25px;
+        color: #999;
+        font-size: 12px;
+      }
+      .control h3 {
+        margin: 0;
+        padding:0;
+        font-size: 12px;
+        margin-bottom: 10px;
+      }
+      .control #debug {
+        border: 1px inset #ccc;
+        background-color: #FFF;
+        font-size: 12px;
+        width: 300px;
+        padding: 10px;
+      }
+      .slider {
+        margin-bottom: 16px;
+        width: 8px;
+      }
+/*
+      .geq-bar {
+        width: 34px;
+      }
+*/
+
+/*
+      .ui-button {
+        font-size: xx-small;
+      }
+*/
+      .ui-slider .ui-slider-handle {
+        width: 8px;
+        margin-left: 3px;
+      }
+    </gsf:style>
+
+
+
+   <gsf:script>
+      <![CDATA[
+
+        var grapheqL;
+        var grapheqR;
+
+      $(function() {
+        var geqSampleRate = 44100;
+        console.log("*** hardwiring Graphic Equalizer sampleRate to be: " + geqSampleRate);
+
+        grapheqL = new GraphicalEq(geqSampleRate);
+        grapheqR = new GraphicalEq(geqSampleRate);
+        grapheqL.recalculateFilters();
+        grapheqR.recalculateFilters();
+
+        var minPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40, 
+	                 slide: function() { changeMinFreq(grapheqL,"L")} };
+        var minPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40, 
+	                 slide: function() { changeMinFreq(grapheqR,"R")} };
+
+	var maxPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000, 
+	                 slide: function() { changeMaxFreq(grapheqL,"L") } };
+	var maxPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000, 
+	                 slide: function() { changeMaxFreq(grapheqR,"R") } };
+
+        var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1, 
+	                 slide: function() { changeBandsPerOctave(grapheqL,"L")} };
+        var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1, 
+	                 slide: function() { changeBandsPerOctave(grapheqR,"R")} };
+
+        $('#minFreqL').slider(minPropL);
+        $('#maxFreqL').slider(maxPropL);
+        $('#minFreqR').slider(minPropR);
+        $('#maxFreqR').slider(maxPropR);
+
+        $('#bandsPerOctaveL').slider(bpoPropL);
+        $('#bandsPerOctaveR').slider(bpoPropR);
+
+	//$('#input').attr('volume', 0);
+
+	createSliders(grapheqL,"L");
+	createSliders(grapheqR,"R");
+      });
+
+
+
+      var changeMinFreq = function(grapheq,side) {
+         grapheq.setMinimumFrequency($('#minFreq'+side).slider('option', 'value'));
+         //plotCoeffs();
+	 createSliders(grapheq,side);
+      }
+
+      var changeMaxFreq = function(grapheq,side) {
+         grapheq.setMaximumFrequency($('#maxFreq'+side).slider('option', 'value'));
+         //plotCoeffs();
+	 createSliders(grapheq,side);
+      }
+
+      var changeBandsPerOctave = function(grapheq,side) {
+         grapheq.setBandsPerOctave($('#bandsPerOctave'+side).slider('option', 'value'));
+         //plotCoeffs();
+	 createSliders(grapheq,side);
+      }
+
+	function positionGrapheqControl(grapheq,side) {
+
+	    var numSliders = grapheq.filters.length;
+            var offset = (35 * numSliders) + 12;
+	    if (side == "L") {
+	        $('#grapheqControlL').css("left","-" + offset + "px");
+	    }
+	    else if (side == "R") {
+	        offset += 5; // fudge factor
+	        $('#grapheqControlR').css("right","-" + offset + "px");
+	    }
+	    else {
+	        console.error("positionGrapheqControl(): unrecognized side '" + side + "'");
+	    }
+	}
+
+      var createSliders = function(grapheq,side) {
+	$('#bandSliders'+side).empty();
+	positionGrapheqControl(grapheq,side);
+	for (var i=0; i<grapheq.filters.length; i++) {
+	
+	  var freq = grapheq.filters[i].f0;
+	  var units = "Hz";
+	  if (freq>=1000000) {
+	    freq = (freq/1000000).toFixed(2);
+	    units = " MHz";
+	  }
+	  else if (freq>=1000) {
+	    freq = (freq/1000).toFixed(2);
+	    units = " KHz";
+	  }
+	  else if (freq>=100) {
+	    freq = freq.toFixed(0);
+	  }
+	  else {
+	    freq = freq.toFixed(0);
+	    freq = "&nbsp;" + freq;
+	  }
+
+	  $('#bandSliders'+side).append('<td class="geq-bar"><div id="band'+side+'_'+i+'" class="slider"></div>'
+	      +freq + ' ' + units + '</td>');
+
+	  $('#band'+side+'_'+i).slider({ orientation: 'vertical', range: 'min', min: -10, max: 3, step: 0.1, value: 0, 
+	                                 slide: function(event,ui) { changeBandGain(event,ui,grapheq)} });
+	}
+      }
+      
+      var changeBandGain = function(event, ui, grapheq) {
+	grapheq.setBandGain(ui.handle.parentNode.id.split("_")[1], ui.value);
+        //plotCoeffs();
+      }
+/*
+      var plotCoeffs = function() {
+	freqz = new Float32Array(grapheq.freqzs[0].length);
+
+	for (var i=0; i<freqz.length; i++) {
+	  for (var j=0; j<grapheq.freqzs.length; j++) {
+	    freqz[i] += grapheq.freqzs[j][i];
+	  }
+	}
+      }
+*/
+
+/*
+      function audioWritten(event) {
+        signal = event.mozFrameBuffer;
+
+        // Apply the filter to the signal
+        signal = grapheq.processStereo(signal);
+
+        output.mozWriteAudio([]); // flush
+        output.mozWriteAudio(signal);
+        writeCount++;
+      }
+*/
+
+        //plotCoeffs();
+
+
+      ]]>
+    </gsf:script>
+
+
+      <gsf:script>
+	function minimizeTurnstyle(suffix) {
+	  $('#turnstyleMaximizeButton'+suffix).show();
+	  $('#turnstyleMinimizeButton'+suffix).hide();
+	  $('#turnstyleContentsArea'+suffix).slideUp('fast');
+       }
+
+	function maximizeTurnstyle(suffix) {
+	  $('#turnstyleMaximizeButton'+suffix).hide();
+	  $('#turnstyleMinimizeButton'+suffix).show();
+	  $('#turnstyleContentsArea'+suffix).slideDown('fast');
+       }
+
+      </gsf:script>
+
+<!--    
+    <div class="control" style="float: left; height: 200px">
+-->
+
+
+    <div id="grapheqControlL" class="control" style="position: absolute; top: 0px; left: -132px; heightXX: 200px">
+
+      <h3 style="float: left;">Graphic Equalizer (left channel)</h3>
+      <div style="float: right;">
+	<span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
+	<a id="turnstyleMinimizeButtonL" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('L');">
+	  <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
+	</a>
+	<a id="turnstyleMaximizeButtonL" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('L');">
+	  <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
+	</a>
+      </div>
+
+      <hr style="clear: both;"/>
+
+      <div id="turnstyleContentsAreaL" style="display: none; float: right;">
+
+	<table class="inner-control" style="margin-bottom: 5px;">
+	  <tr>
+	    <td><div id="minFreqL" class="slider"><xsl:comment/></div>Min Freq</td>
+	    <td><div id="maxFreqL" class="slider"><xsl:comment/></div>Max Freq</td>
+	    <td><div id="bandsPerOctaveL" class="slider"><xsl:comment/></div>Bands/ Octave</td>
+	  </tr>
+	</table>
+      </div>
+
+      <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
+	
+      <table class="inner-control"> 
+	<tr id="bandSlidersL">
+	</tr>
+      </table>
+
+
+
+    </div>
+
+<!--
+    <div class="control" style="float: right; height: 200px">
+-->
+
+    <div id="grapheqControlR" class="control" style="position: absolute; top: 0px; right: -330px; heightXX: 200px">
+      <h3 style="float: left;">Graphic Equalizer (right channel)</h3>
+
+      <div style="float: right;">
+	<span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
+	<a id="turnstyleMinimizeButtonR" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('R');">
+	  <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
+	</a>
+	<a id="turnstyleMaximizeButtonR" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('R');">
+	  <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
+	</a>
+      </div>
+
+      <hr style="clear: both;"/>
+
+      <div id="turnstyleContentsAreaR" style="display: none; float: left;">
+	<table class="inner-control" style="margin-bottom: 5px;">
+	  <tr>
+	    <td><div id="minFreqR" class="slider"><xsl:comment/></div>Min Freq</td>
+	    <td><div id="maxFreqR" class="slider"><xsl:comment/></div>Max Freq</td>
+	    <td><div id="bandsPerOctaveR" class="slider"><xsl:comment/></div>Bands/ Octave</td>
+	  </tr>
+	</table>
+      </div>
+
+      <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
+
+      <table class="inner-control"> 
+	<tr id="bandSlidersR">
+	</tr>
+      </table>
+
+    </div>
+    
+  </xsl:template>
+
 
   <!-- *** -->
@@ -677,4 +1015,27 @@
       <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
     </xsl:variable>
+
+<!--
+    <gsf:variable-array name="overlayNote2">
+      <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
+    </gsf:variable-array>
+
+    <span id="overlayNewNotes2" class="ui-state-default ui-corner-top" style="font-size:90%; padding: 3px; cursor:pointer;">
+      New Annotation 2
+    </span>	  
+
+    <div id="noteOverlay2" style="width: 100%; height: 300px; background-color: #cccccc;">
+    </div>
+
+    <gsf:script>
+      $(window).load(function(){ 
+           var overlayNotes2 = new OverlayNotes("noteOverlay2","salami.overlayNote");
+	   $('#overlayNewNotes2').click(function() {overlayNotes2.AddNote() });
+       });
+
+    </gsf:script>
+-->
+
+    <div style="display: none;"><!-- wrapped div to force display to none -->
 
     <div id="settings-turnstyle" style="margin: 6px;">
@@ -826,4 +1187,6 @@
     </script>
 
+    </div><!-- wrapped div to force display to none -->
+
   </xsl:template>
 
@@ -865,4 +1228,13 @@
     </gsf:script>
 
+  </xsl:template>
+
+
+
+  <xsl:template name="original-audio">
+    <xsl:param name="httpCollection"/>
+    <xsl:param name="assocFilePath"/>
+    <xsl:param name="Audio"/>
+    <xsl:param name="streamableaudio"/>
 
     <div id="original-turnstyle" style="margin: 6px;">
@@ -875,7 +1247,9 @@
 	<div>
 	  <audio style="width: 100%;" id="original-audio" controls="controls" >
+<!--
 	    <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
-	    <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.mp3" />
-	    <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav" />
+-->
+	    <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" />
+	    <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}" />
 	  </audio>
 	</div>
@@ -891,5 +1265,7 @@
 
 
-  </xsl:template>
+
+  </xsl:template>
+
 
 </xsl:stylesheet>
