Index: main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/about.xsl
===================================================================
--- main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/about.xsl	(revision 28433)
+++ main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/about.xsl	(revision 28593)
@@ -47,5 +47,5 @@
 
 
-    <script src="{$httpPath}/script/browser-detect.js" type="text/javascript">
+    <script src="{$httpPath}/script2/browser-detect.js" type="text/javascript">
 	/* space filler needed */
     </script>
@@ -55,8 +55,7 @@
 
 
-<h2>A Musical Web Observatory: </h2>
+<h2>I Can't <i>Believe</i> It's All Javascript!</h2>
 
-<h3><i><font size="+2">Connecting People with Data, Documents, and Algorithms</font></i></h3>
-
+<!--
 <div style="background-color: #DD3611; color: white; padding: 4pt; margin-bottom: 6pt;">
 <table>
@@ -139,6 +138,8 @@
 </table>
 </div>
+-->
 
-<p class="about">This project is currently work in progress.  The sequence of development so far has been:
+<p class="about">A music DL collection that explores what is possible with only client-side processing.
+
 
 <style>
@@ -149,40 +150,4 @@
 
 <ol>
-  <li>
-  <i>Starting point:</i> Manual (command-line) aggregation of disparate
-    resources prior to building the DL.  A set of bespoke Greenstone
-    document processing plugins corrals the heterogeneous gathered
-    data into a unified (homogeneous) canonical form that the DL can
-    access and display.  Everything presented in the DL is
-    either pre-computed (such as the self-similarity heat-maps) or else
-    computed at build-time.
-  </li>
-
-   <li>
-     <i>Audio-fingerprinting:</i> as before, but now metadata about the audio
-     songs is now enriched through a set of audio-fingerprinting web
-     services.  Everything presented in the DL is still pre-computed
-     or else computed at build-timeâhowever,  the inclusion in the document
-     view of a &quot;Discovery&quot; block allows a user to begin to
-     access and explore through linked-data, information related to
-     the song.
-   </li>
-
-  <li>
-    <i>Client-side audio processing (and visualization):</i> the
-    Pre-computed self-similarity heat-maps are dropped from the
-    collection building process in preference for the same information
-    being computed through Javascript running in the user's web
-    browser.
-  </li>
-
-  <li>
-    <i>Embedded Meandre workflows:</i> the Meandre Workbench is
-    integrated into Greenstone.  Audio documents in the Greenstone
-    digital library can now be dispatched and be processed by the
-    selected Meandre, and output from the workflow returned to the
-    Greenstone document viewâfor example, playing audio that has been
-    processed and output from the workflow.
-  </li>
 
   <li>
@@ -193,326 +158,20 @@
 
   <li>
-    <i>Client/Server hybrid workflows:</i> the Greenstone/Meandre
-    integration is extended to support the dynamic 
-    transmission of <tt>executeCallBack()</tt> methods written 
-    in the user's browser in Javascript to be run on the
-    Meandre server as part of the active workflow.
-  </li>
-
-  <li>
-    <i>Forging ahead:</i> the next area to be worked on is upgrading
-    the level of Greenstone/Meandre integration so that data produced
-    by the workflows can be incorporated back into the underlying
-    digital library itself, rather than being (as it currently stands)
-    transitory data that only lives for the duration of the web page
-    being viewed.  This will form an implementation stepping-stone to
-    a more generalized ability to have data retrieved from other
-    external resources (located through the Discovery block
-    linked-data portion of the document view) ingested in to the DL
-    collection.
+    <i>Visualization:</i> the
+    Pre-computed self-similarity heat-maps are dropped from the
+    collection building process in preference for the same information
+    being computed through Javascript running in the user's web
+    browser.
   </li>
 
 
+  <li>
+    <i>Annotation:</i> ...
+
+  </li>
 </ol>
 
 </p>
 
-
-
-<!--
-
-<p class="about">This digital library collection demonstrates the
-integration of a variety of sources of structural metadata from both
-automatically derived content analysis and manually labelled
-ground-truth data to form a rich interactive web application suitable
-for musicologists (as the target end-users) to explore a collated set
-of music files.</p>
-
-<p class="about">While the base digital library system, <a
-href="http://www.greenstone.org" target="_blank">Greenstone</a>, is
-designed to operate with any web browser, the audio features this
-particular DL collection demonstrates relies on audio processing
-features currently only available in Firefox.  Using one of the other
-web browsers you will be able to access most features of the digital
-library collection, but when you access a particular song you may find
-playing the audioâin particular the panned audio
-effectâdoes not work.</p>
--->
-
-
-<!--
-<p class="about">The developed system combines the open source capabilities of
-Greenstone, \cite{Greenstone}, NEMA \cite{Nema}, Salami \cite{Salami},
-and AudioDB \cite{AudioDB}.
-
-%%
-NEMA and Salami have been previously described in this article, and contribute 
-manual and audio content based metadata.
-%%
-AudioDB is a raw-audio content based searching algorithm based on Local-Sensitivity Hashing \cite{LSH}.
-%%
-Greenstone is a versatile digital library architecture with an
-extensible service-based architecture that.  In
-addition to the text-based searching and browsing capability to
-organize content, Greenstone provides the framework in which to harness the
-structural metadata from NEMA and Salami, and the audio-content based
-search functionality of audioDB.
-
--->
-
-
-
-<h3>A Walkthrough</h3>
-
-
-<p class="about">The following walkthrough is for the initial incarnation of the DL collection, where all
-the information presented is either precomputed or computed at build time.</p>
-
-<p class="about">Taking as a starting point a set of music files identified as worthy
-of study, the <a href="#browse">figure below</a> shows the result of browsing
-the formed digital library collection <a href="dev?a=b&amp;rt=s&amp;s=ClassifierBrowse&amp;c=salami-audioDB&amp;cl=CL1" target="_blank">by title</a> from a web browser.
-The figure is a useful snapshot in which to orientate ourselves with
-the main structure and features to the digital library.  Functionality that
-persistently reoccurs is accessible through the header to the page.</p>
-
-<p class="about">This includes:
-<ul>
-
-<li>help and preferences (top-right);</li>
-<li>a quick-search option (located just
-below) with links to more sophisticated searching options; and</li>
-<li>pin-pointing where within the site a user is currently located
-(top-left).</li>
-</ul>
-
-
-<a name="browse" />
-<table style="width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 6pt;">
-  <tr>
-    <td style="border: solid 1px;">
-      <img style="width: 700px" src="{$httpPath}/images/figs/cropped/salami-browse.png" />
-    </td>
-  </tr>
-  <tr style="background-color: #bbeebb">
-    <td>
-      <i>Browsing in the digital library
-  <a href="dev?a=b&amp;rt=s&amp;s=ClassifierBrowse&amp;c=salami-audioDB&amp;cl=CL1" target="_blank">by titles</a>.</i>
-    </td>
-  </tr>
-</table>
-
-
-The specific content to this location within the site (in this case
-browsing by title) is shown beneath the main banner.  Various
-groupings of title can be accessed by clicking on the bookshelf icons
-vertically aligned as the main part of the page: currently <a
-href="dev?a=b&amp;rt=s&amp;s=ClassifierBrowse&amp;c=salami-audioDB&amp;cl=CL1#CL1.2">CâD</a>
-is open, with the remaining letters to the alphabet below this,
-accessed through scrolling.</p>
-
-
-
-
-<p class="about">Interested in the song <i>Candela</i> our curious musicologist clicks
-on <a href="dev?a=d&amp;ed=1&amp;book=off&amp;c=salami-audioDB&amp;d=D145&amp;dt=simple&amp;sib=1&amp;p.a=b&amp;p.sa=&amp;p.s=ClassifierBrowse" target="_blank">the link for this</a>.  This brings up the document view to this song:</p>
-
-<a name="self-similarity" />
-<table style="width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 6pt;">
-  <tr>
-    <td style="border: solid 1px;">
-      <img style="width: 700px" src="{$httpPath}/images/figs/cropped/salami-self-similarity2.png" />
-    </td>
-  </tr>
-  <tr style="background-color: #bbeebb">
-    <td>
-      <i>The <a href="dev?a=d&amp;ed=1&amp;book=off&amp;c=salami-audioDB&amp;d=D145&amp;dt=simple&amp;sib=1&amp;p.a=b&amp;p.sa=&amp;p.s=ClassifierBrowse" target="_blank">musicologically enriched document view</a> for</i> Candela.
-    </td>
-  </tr>
-</table>
-
-<p class="about">Normally in a digital
-library the document view brings up a page that is strongly derived
-from textual metadata.  If the document viewed was a text-document,
-some summary information such as title and author is typically
-presented, say in tabular form, before the main text is presented.
-Even in the case of multimedia digital libraries, the view presented
-is still strongly derived from textual metadata: this time including
-details such as the length of the video, the TV company that produced
-it, whether captions are available, and so forth, accompanied with an
-embedded video player for viewing the contentâessentially more
-textual metadata (in this case the URL to the video content) which in
-terms of the user-interface is largely divorced from the other
-elements displayed on the page.</p>
-
-<p class="about">This contrasts sharply with the document view developed in this
-digital library.
-Naturally it allows the song to be played (akin to the embedded video player),
-however this is largely of secondary importance to the 
-other functionality available this is much more closely
-integrated.</p>
-
-<p class="about">The most striking visual component to the document view is a
-self-similarity &quot;heat map&quot; where the duration of the song forms both
-the <i>x</i>- and <i>y</i>-axis, and a red pixel located at a given <i>(x,y)</i>
-co-ordinate in the map represents a location where two parts of the
-song are strongly similar, proportionally shifting to blue to
-represent dissimilar.  Given this configuration, the leading diagonal
-to the matrix (<i>x=y</i>) is always coloured red as this represents the
-comparison of one part of the song with itself.</p>
-
-<p class="about">When the user moves the mouse cursor around the self-similarity map
-a highlighting circle is shown to emphasize the area the user is over,
-with a black dot at the centre (visible in in
-the <a href="#self-similarity">above figure</a>); annotated vertically
-and horizontally are the two time-offsets in seconds that that point
-in the map corresponds to.  Clicking the cursor at this point results
-in the audio being played <i>simultaneously</i> from these two points.
-To aid the musicologist in listening to the two parts of the song, one
-part is panned to the left speaker, and the other to the right (this
-was implemented using the extended audio API provided by Firefox, and
-so this particular feature only work when viewing the collection with
-this browserâsee implementation details below).  In our figure,
-the musicologist has zeroed in the location <i>x=33</i>, <i>y=97</i>
-which corresponds to the start of a strong red diagonal that occurs
-some distance off the leading diagonal.  Listening to the two sounds
-played (most reliably done with headphones on), they hear that these
-two sections of the song are indeed repeating sections of the guitar
-piece <i>Candela</i> with a minor variation in the latter section
-where a recorder is also playing in the arrangement.</p>
-
-<p class="about">The structured audio time-lines (labelled A, B, ..., and 6, 5, 2,
-... in the figure) located above the self-similarity map are another
-area of enriched musical content in the digital library. The upper
-line shows the ground-truth data for this song generated by
-the <a href="http://www.music-ir.org/?q=node/14" target="_blank">Salami project</a>;
-the lower line is generated by an algorithmically based content
-analysis algorithm.</p>
-
-<p class="about">While there is some agreement between these two lines, there are
-also significant differences.  The play and search buttons within the
-structured time-lines (the latter represented by a magnifying glass)
-allow the user to investigate further these structures.  We shall
-return to the search functionality shortly (which is content based,
-using <a href="http://omras2.doc.gold.ac.uk/software/audiodb/" target="_blank">AudioDB</a>),
-but in the meantime note that with the time-lines positioned above the
-self-similarity map, there is further opportunity to study the
-differences between the two structured time-line.  It is certainly the
-case that there are strong visual cues in the map that line up with
-the algorithmic time-line, even though they do not align with a
-boundary in the ground-truth data, and the user can click on these
-parts of the similarity map to hear what is occurring at these
-points.</p>
-
-
-
-<a name="resultspage" />
-<table style="width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 6pt;">
-  <tr>
-    <td style="border: solid 1px;">
-      <img style="width: 350px" src="{$httpPath}/images/figs/cropped/salami-audiodb-search-resultspage-halfcut.png" />
-    </td>
-    <td style="border: solid 1px;">
-      <img style="width: 350px" src="{$httpPath}/images/figs/cropped/salami-structured-search-resultspage-halfcut.png" />
-    </td>
-  </tr>
-  <tr style="background-color: #bbeebb">
-    <td colspan="2">
-      <i>Audio content based search results: left) the 
-	<a href="dev?a=q&amp;sa=&amp;rt=rd&amp;s=AudioQuery&amp;c=salami-audioDB&amp;startPage=1&amp;s1.maxDocs=100&amp;s1.hitsPerPage=20&amp;q=D206.dir&amp;s1.query=D206.dir&amp;s1.offset=263&amp;s1.length=24&amp;mysongWindowDuration=6" target="_blank">result list</a> from
-      an audio content based query taken from an extract of </i>
-      Michelle; <i>and right)
-      the <a href="dev?a=q&amp;sa=&amp;rt=rd&amp;s=TextQuery&amp;c=salami-audioDB&amp;startPage=1&amp;s1.query=%22b+b+c+b+c%22&amp;s1.index=JS" target="_blank">result of a structured music search</a> for
-      content containing &quot;b b c b a&quot; as a sequence.</i>
-    </td>
-  </tr>
-</table>
-
-<p class="about">Returning to the search capability provided by the structured
-time-lines, the <a href="#resultspage">above figure (left)</a> show the result of
-using this feature while study the song <i>Michelle</i> by The
-Beatles.  In this case the user selected the section of the
-ground-truth time-line corresponding to section starting &quot;I want you
-...&quot;, but could have equally used the algorithmically calculated
-time-line, or in fact paused the song playing at any point, and
-started a match from there.</p>
-
-
-<p class="about">Not surprisingly <i>Michelle</i> is returned as the top hit (at
-92.1%)âwe shall see shortly that this is because the system found
-several sections of the song that matched thisâthe next hit being
-<i>Bigger Than JC</i> at 74.4%, and so on down, where only one hit
-per song occurs.  Clicking on the top hit,
-the <a href="#audiodb">figure below</a> shows the document view that is
-displayed, focusing in on the key area to this screen.  This time the
-time-line area has an additional bar: the points within the song that
-AudioDB found to be similar.  Like the other time-lines, a play button
-is present on these segments so the user can play the matching points
-directly.  In this case
-clicking on them reveals the matching sections found correspond to
-melodically repeating sections of the song, only with different lyrics
-(&quot;I love you ...&quot; and &quot;I need you ...&quot;).</p>
-
-
-<p class="about">A further form of musical content-based searching is available through
-the main header to the digital library.  Instead of searching by title
-or artist (which are also available) the user can click on this
-&quot;search by&quot; menu next to the quick-search text box and select
-&quot;ground-truth structure&quot; instead.
-The <a href="#resultspage">figure above</a> (right) shows the result of using this
-option, where the user has entered &quot;b b c b c&quot; as the query, in
-other words searching for songs that have two sections in a row the
-same, then a new section, then returning to the original section,
-before progressing to a recurrence of the second distinct section.  In
-pop and rock music this is a popular sequence corresponding to verse,
-verse, chorus, verse, chorus.  A more intriguing framing of a query
-along these linesâequally possible in the digital libraryâwould be
-to go to the fielded search page (accessible through the <i>advanced
-  search</i> link below the quick-search box, and entered the same
-music structure query, but this time combine it with other fielded
-query terms (Genre=Blues OR Jazz, Year&lt;1950).  Results from this
-query would let the musicologist explore potential evidence of this
-pattern of sections being used in two of the key musical genres that
-influenced the development of Rock and Roll music.</p>
-
-
-<a name="audiodb" />
-<table style="width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 6pt;">
-  <tr>
-    <td style="border: solid 1px;">
-      <img style="width: 700px" src="{$httpPath}/images/figs/cropped/salami-audiodb-search2.png" />
-    </td>
-  </tr>
-  <tr style="background-color: #bbeebb">
-    <td>
-      <i>The document view for</i> Michelle <i><a href="dev?a=d&amp;c=salami-audioDB&amp;d=D206&amp;dt=simple&amp;p.frameOffset=133,393,264,262,392&amp;p.frameLength=24&amp;p.a=q&amp;p.s=AudioQuery&amp;hl=on&amp;ed=1#D206" target="_blank">augmented with the locations of the matches</a> of the audio query.</i>
-    </td>
-  </tr>
-</table>
-
-
-
-
-<h3>Implementation details</h3>
-
-<p class="about">The core part of the interactive elements in the document view were
-implemented using SVG combined with Javascript.  The left- and
-right-panning interactively available from the self-similarity map was
-implemented by processing the raw audio stream, made accessible by the
-Firefox Audio extension
-<a href="https://wiki.mozilla.org/Audio_Data_API" target="_blank">API</a>.</p>
-
-<p class="about">AudioDB content based searching was integrated into Greenstone through
-two components of the digital library software architecture: its
-build-time document processing plugin system, and its runtime
-message-passing service-base framework.  The developed plugin accepts
-a wide range of audio formats (including OGG and MP3), and converts
-them to WAV, the format needed by AudioDB for processing.  The new
-search service took the form of a proxy, accepting messages in the
-XML syntax used by Greenstone, turning them into the necessary calls
-to the AudioDB command-line interface, and then converting the output
-from AudioDB back into the XML syntax expected by the digital library
-architecture.  Finally, the two parts were packaged to operate as a
-Greenstone extension; the software is available at:
-<a href="http://trac.greenstone.org/gs3-extensions/audioDB/trunk/src" target="_blank">http://trac.greenstone.org/gs3-extensions/audioDB/trunk/src</a>.</p>
 
 </div>
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>
