Index: /main/trunk/model-sites-dev/multimodal-mdl/collect/trad-my-ipod/etc/collectionConfig.xml
===================================================================
--- /main/trunk/model-sites-dev/multimodal-mdl/collect/trad-my-ipod/etc/collectionConfig.xml	(revision 28432)
+++ /main/trunk/model-sites-dev/multimodal-mdl/collect/trad-my-ipod/etc/collectionConfig.xml	(revision 28432)
@@ -0,0 +1,578 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CollectionConfig xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+  <metadataList>
+    <metadata name="creator"></metadata>
+    <metadata name="maintainer"></metadata>
+    <metadata name="public">true</metadata>
+  </metadataList>
+  <displayItemList>
+    <displayItem assigned="true" lang="en" name="name">Traditional MDL</displayItem>
+    <displayItem assigned="true" lang="en" name="description"></displayItem>
+  </displayItemList>
+  <!-- Global format statement -->
+  <format>
+    <gsf:template name="choose-title">
+      
+      <gsf:choose-metadata>
+	<gsf:metadata name="dc.Title"/>
+	<gsf:metadata name="exp.Title"/>
+	<gsf:metadata name="ex.dc.Title"/>
+	<gsf:metadata name="ex.ID3.Title"/>
+	<gsf:metadata name="ex.Title"/>
+	<gsf:metadata name="Title"/>
+	<gsf:default>Untitled</gsf:default>
+      </gsf:choose-metadata>
+      
+      <gsf:switch>
+	<gsf:metadata name='dc.Creator'/>
+	<gsf:when test='exists'>
+	  
+	  <gsf:switch>
+	    <gsf:metadata name="dc.Creator"/>
+	    <gsf:when test="notEquals" test-value="Unknown">
+	      
+	      by <i><gsf:metadata name='dc.Creator'/></i>
+	    </gsf:when>
+	  </gsf:switch>
+	  
+	</gsf:when>
+      </gsf:switch>			
+    </gsf:template>    
+  </format>
+
+  <search type="lucene">
+    <level name="document">
+      <displayItem lang="en" name="name">document</displayItem>
+    </level>
+    <level name="section">
+      <displayItem lang="en" name="name">section</displayItem>
+    </level>
+    <defaultLevel name="document"/>
+    <index name="text">
+      <displayItem lang="en" name="name">text</displayItem>
+    </index>
+    <index name="dc.Title,ex.dc.Title,ex.ID3.Title,Title">
+      <displayItem lang="en" name="name">titles</displayItem>
+    </index>
+    <index name="Source">
+      <displayItem lang="en" name="name">filenames</displayItem>
+    </index>
+    <defaultIndex name="text"/>
+    <searchType name="plain"/>
+    <searchType name="simpleform"/>
+    <searchType name="advancedform"/>
+
+    
+    <!-- Search Format Statement -->
+    <format>
+      <gsf:template match="documentNode">
+
+	<gsf:variable name="cgiargFrameLength">
+	  <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameLength']/@value"/>
+	</gsf:variable>
+
+	<xsl:variable name="cgiargYScaleSimImg"><xsl:choose>
+	  <xsl:when test="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value != ''"><xsl:value-of select="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value"/></xsl:when>
+	  <xsl:otherwise>0.5</xsl:otherwise>
+	</xsl:choose>
+	</xsl:variable>
+
+	<td valign="top">
+	  <gsf:icon type="document"/>
+	</td>
+	<td>
+	  <xsl:choose>
+	    <xsl:when test="@rank != 'NaN'">
+  	      (<script>
+	        var rank=<xsl:value-of select="@rank"/>;
+	        var perc=(rank-0.9)*100*10;
+	        document.write(perc.toFixed(1));
+	       </script>%) 
+	    </xsl:when>
+	  </xsl:choose>
+	  
+	  <xsl:choose>
+	    <xsl:when test="/page/pageResponse/service[@name='AudioQuery']">
+  	      <a>
+	        <xsl:attribute name="href"><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection/@name"/>/document/<xsl:value-of select="@nodeID"/>?p.frameOffset=<xsl:value-of select="@frameOffset"/>&amp;p.frameLength=<xsl:value-of select="/page/pageRequest/paramList/param[@name='s1.length']/@value"/>&amp;p.a=q&amp;p.s=<xsl:value-of select="/page/pageResponse/service/@name"/>&amp;p.yScaleSimImg=<xsl:value-of select="$cgiargYScaleSimImg"/>
+
+	        </xsl:attribute>
+		
+                <xsl:call-template name="choose-title"/>
+	      </a>
+	    </xsl:when>
+	    <xsl:otherwise>
+	      <gsf:link>
+                <xsl:call-template name="choose-title"/>
+	      </gsf:link>
+	    </xsl:otherwise>
+	  </xsl:choose>
+	  
+	  <gsf:switch>
+	    <gsf:metadata name="artist"/>
+	    <gsf:when test="exists">
+	      by <gsf:metadata name="artist"/>
+	    </gsf:when>
+	  </gsf:switch>
+
+	  <gsf:switch>
+	    <gsf:metadata name="js.LabelledStructure"/>
+	    <gsf:when test="exists">
+	      <br/><i style="font-size: 80%">(Labelled structure: <gsf:metadata name="js.LabelledStructure"/>)</i>
+	    </gsf:when>
+	  </gsf:switch>
+	  
+	</td>
+      </gsf:template>
+    </format>
+
+  </search>
+
+  <search type="jenaTDB" orthogonal="true" />
+
+  
+  <infodb type="jdbm"/>
+
+  <import>
+    <pluginList>
+      <plugin name="ZIPPlugin"/>
+      <plugin name="GreenstoneXMLPlugin"/>
+
+      <plugin name="EmbeddedMetadataPlugin">
+	<option name="-process_exp" value="(?i)\.mp3$"/>
+      </plugin>
+
+      <plugin name="AudioDBPlugin">
+	<option name="-enable_streaming" value="mp3"/>
+	<option name="-enable_cache"/>
+      </plugin>
+      
+      <plugin name="TextPlugin"/>
+      <plugin name="HTMLPlugin"/>
+      <plugin name="EmailPlugin"/>
+      <plugin name="PDFPlugin"/>
+      <plugin name="RTFPlugin"/>
+      <plugin name="WordPlugin"/>
+      <plugin name="PostScriptPlugin"/>
+      <plugin name="PowerPointPlugin"/>
+      <plugin name="ExcelPlugin"/>
+      <plugin name="ImagePlugin"/>
+      <plugin name="ISISPlugin"/>
+      <plugin name="NulPlugin"/>
+      <plugin name="OAIPlugin"/>
+      <plugin name="MetadataXMLPlugin"/>
+      <plugin name="ArchivesInfPlugin"/>
+      <plugin name="DirectoryPlugin"/>
+    </pluginList>
+  </import>
+
+  <browse>
+    <classifier name="AZCompactList">
+      <option name="-metadata" value="dc.Title;ex.dc.Title;ex.ID3.Title;Title"/>
+      <option name="-mingroup" value="2"/>
+      <option name="-removeprefix" value="(?i)Le|La|Les|The|A\\s+"/>
+    </classifier>
+
+    <classifier name="AZCompactList">
+      <option name="-metadata" value="dc.Creator;ex.ID3.Artist"/>
+      <option name="-buttonname" value="Artists"/>
+      <option name="-mingroup" value="1"/>
+      <option name="-minnesting" value="40"/>
+    </classifier>
+
+    <classifier name="AZCompactList">
+      <option name="-metadata" value="dc.Title.albumtitle;ex.ID3.Album"/>
+      <option name="-buttonname" value="Albums"/>
+      <option name="-mingroup" value="1"/>
+      <option name="-minnesting" value="40"/>
+    </classifier>
+
+
+    <!--
+
+    <classifier name="List">
+      <option name="-metadata" value="dc.Title;Title"/>
+      <option name="-partition_type_within_level" value="approximate_size"/>
+    </classifier>
+    <classifier name="List">
+      <option name="-metadata" value="dc.Creator"/>
+      <option name="-button_name" value="Artists"/>
+      <option name="-partition_type_within_level" value="approximate_size"/>
+    </classifier>
+		
+    -->
+
+    <format>
+      <gsf:template match="documentNode">
+	<td valign="top">
+	  <gsf:link type="document">
+	    <gsf:icon type="document"/>
+	  </gsf:link>
+	</td>
+	<td valign="top">
+	  <gsf:link type="source">
+	    <gsf:choose-metadata>
+	      <gsf:metadata name="thumbicon"/>
+	      <gsf:metadata name="srcicon"/>
+	    </gsf:choose-metadata>
+	  </gsf:link>
+	</td>
+	<td valign="top">
+	  <gsf:link type="document">
+	    <!-- Defined in the global format statement -->
+	    <xsl:call-template name="choose-title"/>
+	    
+	    <gsf:switch>
+	      <gsf:metadata name="dc.Title" />
+	      <gsf:when test="equals" test-value="Unknown">
+		<br/><i>(<gsf:metadata name="Source"/>)</i>
+	      </gsf:when>
+	    </gsf:switch>
+	    
+	  </gsf:link>
+	</td>
+      </gsf:template>
+      
+      <gsf:template match="classifierNode[@classifierStyle = 'VList']">
+	<td valign="top">
+	  <gsf:link type="classifier">
+	    <gsf:icon type="classifier"/>
+	  </gsf:link>
+	</td>
+	<td valign="top">
+	  <gsf:link type="source">
+	    <gsf:choose-metadata>
+	      <gsf:metadata name="thumbicon"/>
+	      <gsf:metadata name="srcicon"/>
+	    </gsf:choose-metadata>
+	  </gsf:link>
+	</td>
+	<td valign="top">
+	  <!-- Defined in the global format statement -->
+	  <xsl:call-template name="choose-title"/>
+	  <gsf:switch>
+	    <gsf:metadata name="Source"/>
+	    <gsf:when test="exists"><br/><i>(<gsf:metadata name="Source"/>)</i></gsf:when>
+	  </gsf:switch>
+	</td>
+      </gsf:template>
+      <gsf:template match="classifierNode[@classifierStyle = 'HList']">
+	<gsf:link type="classifier">
+	  <gsf:metadata name="Title"/>
+	</gsf:link>
+      </gsf:template>
+    </format>
+  </browse>
+
+  <display>
+    <format>
+      <gsf:option name="TOC" value="false"/>
+
+      <!-- 
+	   Overwriting this template allows you to change the heading of the document.
+      -->
+      <gsf:template name="documentHeading">
+	
+	<xsl:variable name="httpCollection">
+	  <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
+	</xsl:variable>
+
+	<!-- Metadata derived from finger-printing --> 
+	
+	<xsl:call-template name="metadata-block">
+	  <xsl:with-param name="httpCollection" select="$httpCollection"/>
+	</xsl:call-template>
+
+      </gsf:template>
+
+      
+      <!-- 
+	   Overwriting this template can be used to redefine the content of the whole document. 
+	   This is useful for simple documents, but not recommended for more complex documents
+	   (e.g. hierachical and paged documents) as it can prevent any sub-sections from showing.
+      -->
+      <!-- 
+	   <gsf:template name="documentContent">
+	   <xsl:call-template name="wrappedSectionImage"/>
+	   <xsl:call-template name="wrappedSectionText"/>
+	   </gsf:template>
+      -->
+
+      <!--
+	  Overwriting this template can be used to change the content of section headings.
+      -->
+      <!--
+	  <gsf:template name="sectionHeading">
+	  <xsl:call-template name="choose-title"/>
+	  </gsf:template>
+      -->
+      
+      <!--
+	  Overwriting this template can be used to change the content of the top-level section.
+      -->
+      <!--
+	  <gsf:template name="topLevelSectionContent">
+	  <xsl:call-template name="wrappedSectionImage"/>
+	  <xsl:call-template name="wrappedSectionText"/>
+	  </gsf:template>
+      -->
+      
+      <!--
+	  Overwriting this template can be used to change the content of sections.
+      -->
+
+      <!--
+	  <gsf:template name="sectionContent">
+	  <xsl:call-template name="wrappedSectionImage"/>
+	  <xsl:call-template name="wrappedSectionText"/>
+	  </gsf:template>
+      -->
+      	
+      <xsl:template name="additionalHeaderContent">
+	
+
+	<xsl:call-template name="soundmanager2-header"/>
+	<xsl:call-template name="js-mad-header"/>
+	
+	<!-- Bespoke jquery-ui extension for turnstyle open/close blocks -->
+	<gsf:style  src="ext/jquery-ui-extra/turnstyle-block.css"/>
+	<gsf:script src="ext/jquery-ui-extra/turnstyle-block.js"/>
+	
+	<!-- The Javascript DSP files for computing chroma features in the browser -->
+	<xsl:call-template name="javascript-dsp-header"/>
+	
+
+	<!-- Javascript support for running, sending input into, monitoring, and stopping Meandre flows -->
+	<gsf:script src="ext/meandre/meandre-controller.js"/>
+
+	<gsf:style>
+	  .metadata-stripes td { padding: 4px; }
+	  .metadata-stripes tr:nth-child(odd)  {background: #CCC}
+	  .metadata-stripes tr:nth-child(even) {background: #FFF}      
+	  
+	  .vis-heading  { font-style:italic; }
+
+	  #rightSidebar { display: none; }
+	</gsf:style>
+	
+      </xsl:template>
+
+
+      <xsl:template name="documentContent">
+	
+<!--
+	<xsl:call-template name="init-document-xsl-vars"/>
+-->	
+
+	<!-- declare $httpCollection = $httpPath (for better consistency with other places in Greenstone XSL files) -->
+	<xsl:variable name="httpCollection">
+	  <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
+	</xsl:variable>
+
+	<xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
+	<xsl:variable name="Source"><gsf:metadata name="Source" select="root"/></xsl:variable>
+
+	<gsf:variable name="cgiargFrameOffset">
+	  <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameOffset']/@value"/>
+	</gsf:variable>
+
+	<gsf:variable name="cgiargFrameLength">
+	  <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameLength']/@value"/>
+	</gsf:variable>
+
+	<xsl:variable name="cgiargYScaleSimImg"><xsl:choose>
+	  <xsl:when test="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value != ''"><xsl:value-of select="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value"/></xsl:when>
+	  <xsl:otherwise>0.5</xsl:otherwise>
+	</xsl:choose>
+	</xsl:variable>
+	
+	<!-- CAA = Content Analysis Algorithm -->
+	<xsl:variable name="cgiargCAAlgorithm">
+	  <xsl:choose>
+	    <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>
+	    <xsl:otherwise>1</xsl:otherwise>
+	  </xsl:choose>
+	</xsl:variable>
+
+	<!-- *** -->
+	<!-- Main Audio Player -->
+	<!-- *** -->
+
+	<div class="documenttext"> 
+
+<!--
+	  <xsl:call-template name="audio-icon-cache"/>
+-->
+	  
+	  <xsl:call-template name="original-audio">
+	    <xsl:with-param name="httpCollection" select="$httpCollection"/>
+	    <xsl:with-param name="assocFilePath" select="$assocFilePath"/>
+	  </xsl:call-template>
+
+
+	  <hr/>
+
+<script>
+  <xsl:text disable-output-escaping="yes">
+    useFancyPlayer = 1;
+
+    /* if (window.location.toString().match(/fancyplayer/i)) { */
+    if (useFancyPlayer) { 
+      PP_CONFIG.usePeakData = true;
+      PP_CONFIG.useEQData = true;
+      // PP_CONFIG.useFavIcon = true;
+    }
+
+    function onFinishSP()
+    {   
+      soundManager._onfinish(); 
+      togglePlayVisual(mainPlayButton); 
+    }
+
+      var mySoundObj;
+
+    function playFromOffset(id,frameOffset) 
+    {
+      var msecOffset = 250 * frameOffset; 
+      idElem = document.getElementById(id);
+      pagePlayer.handleClick({target:idElem}); /* fake a click */
+      soundManager.stopAll();
+
+      var options = {};
+      options.position = msecOffset;
+
+      soundManager.play(id,options);
+
+      togglePlayMode = "pause";
+      playHighlightOff(document.getElementById("mainPlayButton"),32);
+    }
+
+    function preSubmit(form) 
+    {
+      var currentPosElem = document.getElementById("mysongCurrentPos");
+      var offsetInMSecs = currentPosElem.getAttribute("offsetInMSecs");
+      var frameOffset = Math.round(offsetInMSecs/250.0);
+      form.elements["s1.offset"].value = frameOffset;
+
+      //var lengthInSecs = document.getElementById("mysongWindowDuration").innerHTML;
+      var lengthInSecs = form.elements["mysongWindowDuration"].value;
+
+      var frameLength = Math.round(lengthInSecs*1000/250.0);
+      form.elements["s1.length"].value = frameLength;
+
+      return true;
+    }
+
+    function searchSubmit(frameOffset) 
+    {
+      var form = document.getElementById("QueryForm");
+
+      form.elements["s1.offset"].value = frameOffset;
+
+      //var lengthInSecs = document.getElementById("mysongWindowDuration").innerHTML;
+      var lengthInSecs = form.elements["mysongWindowDuration"].value;
+
+      var frameLength = Math.round(lengthInSecs*1000/250.0);
+      form.elements["s1.length"].value = frameLength;
+
+      form.submit();
+    }
+
+
+
+    function rescaleImage() 
+    {
+      var form = document.getElementById("RescaleForm");
+
+      var rescaleSize = form.elements["ResizeScale"].value;
+
+      var currentURL = document.location.toString();
+      var newURL;
+      if (currentURL.match(/p.yScaleSimImg=(\d+(?:\.\d+))/)) {
+        newURL = currentURL.replace(/p.yScaleSimImg=(\d+(?:\.\d+))/,"p.yScaleSimImg="+rescaleSize);
+      }
+      else {
+        var urlParts = currentURL.split("#");
+	newURL = urlParts.shift();
+        newURL += "&amp;p.yScaleSimImg="+rescaleSize;
+	newURL += "#" + urlParts.join("#");
+      }
+
+      document.location = newURL;
+    }
+
+    function updateCAAlgorithm()
+    {
+
+      var form = document.getElementById("UpdateCAForm");
+
+      var caaMenu = form.elements["caAlgorithm"];
+
+      var caIndexPos = caaMenu.options[caaMenu.selectedIndex].value
+
+      var currentURL = document.location.toString();
+      var newURL;
+      if (currentURL.match(/p.caAlgorithm=(\d+)/)) {
+        newURL = currentURL.replace(/p.caAlgorithm=(\d+)/,"p.caAlgorithm="+caIndexPos);
+      }
+      else {
+        var urlParts = currentURL.split("#");
+	newURL = urlParts.shift();
+        newURL += "&amp;p.caAlgorithm="+caIndexPos;
+	newURL += "#" + urlParts.join("#");
+      }
+
+      document.location = newURL;
+
+    }
+
+
+
+  </xsl:text>
+
+</script>
+
+
+    </div>
+  </xsl:template>
+
+
+
+
+    </format>
+  </display>
+
+  <replaceListRef id="gs2-standard"/>
+  <replaceListRef id="gs2-image" />
+  <serviceRackList>
+    <!-- comment out the following serviceRack if you want to disable OAI for this collection -->
+    <serviceRack name="OAIPMH">
+      <ListMetadataFormats>
+	<!--What metadata sets to support is collection specific. To support other metadata schema, simply add a metadataFormat element here.
+	    The support of unqualified Dublin Core metadata set is mandatory in the oai specification.
+	-->
+	<metadataFormat metadataPrefix="oai_dc">
+	  <metadataPrefix>oai_dc</metadataPrefix>
+	  <schema>http://www.openarchives.org/OAI/2.0/oai_dc.xsd</schema>
+	  <metadataNamespace>http://www.openarchives.org/OAI/2.0/oai_dc/</metadataNamespace>
+	  <!--<metadataElements>dc.Title,dc.Creator,dc.Subject,dc.Description,dc.Publisher,dc.Contributor,dc.Date,dc.Type,dc.Format,dc.Identifier,dc.Source,dc.Language,dc.Relation,dc.Coverage,dc.Rights</metadataElements>-->
+	  <mappingList>
+	    <!-- 
+		 The mapping is in the form: <publicly supported metadata name>,<mapped metadata name>, short as <A>,<B> 
+		 The first metadata name is medatory; if there is no mapped name followed, then the first name must be used by the records and
+		 searchable in the database, otherwise it is the mapped name stored in the database. The number of mapping elements matches the
+		 number of external metadata of the records. If only one name is present, the returned metadata will use this name plus the retrieved value;
+		 if both <A>,<B> are present, the returned metadata will use <A>'s name plus <B>'s value retrieved from database.
+		 
+		 **Bear in mind: if this mapping list is not present, the standard dc. metadata names (15 in total) will be used to retrieve metadata in the database.
+		 
+		 **The only case when this mapping is not present is that: 1. this metadata format is oai_dc; 2. the metadata is also stored in the database by Dublin Core's names.
+	    -->
+	    <mapping>dc:title,Title</mapping>
+	    <!-- This mapping example means that the dc.Title is requested and the value of the metadata Title, which is used in this repository, is returned as response. -->
+	  </mappingList>
+	</metadataFormat>
+      </ListMetadataFormats>
+    </serviceRack> 
+  </serviceRackList>
+</CollectionConfig>
Index: /main/trunk/model-sites-dev/multimodal-mdl/collect/trad-my-ipod/transform/pages/about.xsl
===================================================================
--- /main/trunk/model-sites-dev/multimodal-mdl/collect/trad-my-ipod/transform/pages/about.xsl	(revision 28432)
+++ /main/trunk/model-sites-dev/multimodal-mdl/collect/trad-my-ipod/transform/pages/about.xsl	(revision 28432)
@@ -0,0 +1,207 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE videocollection [
+  <!ENTITY ndash "&#8211;">
+  <!ENTITY mdash "&#8212;">
+]>
+<xsl:stylesheet version="1.0"
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+	xmlns:java="http://xml.apache.org/xslt/java"
+	xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
+	xmlns:gslib="http://www.greenstone.org/skinning"
+	extension-element-prefixes="java util"
+	exclude-result-prefixes="java util">
+
+	<!-- use the 'main' layout -->
+	<xsl:include href="layouts/main.xsl"/>
+
+	<!-- set page title -->
+	<xsl:template name="pageTitle"><gslib:collectionName/></xsl:template>
+
+	<!-- set page breadcrumbs -->
+	<xsl:template name="breadcrumbs"><gslib:siteLink/><gslib:rightArrow/></xsl:template>
+
+	<!-- the page content -->
+	<xsl:template match="/page">
+  
+		<!--Display the description text of the current collection,
+		and if some services are available then create a list
+		of links for each service within a <ul id="servicelist"> element.-->
+
+    <xsl:variable name="httpPath"> 
+      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']" />
+    </xsl:variable>
+
+
+    <style>
+      p.about { text-align: justify; }
+      h2 { /* line-height: 135%; */ }
+      h3 { margin-top: 4pt; margin-bottom: 7pt; line-height: 135%; }
+
+        a.mashup {text-decoration: none; } 
+	a.mashup:link    {color:#000080;}  /* unvisited link */
+	a.mashup:visited {color:#303080;}  /* visited link */
+	a.mashup:hover   {color:#000040;}  /* mouse over link */
+	a.mashup:active  {color:#0000a0;}
+
+    </style>
+
+
+    <script src="{$httpPath}/script/browser-detect.js" type="text/javascript">
+	/* space filler needed */
+    </script>
+
+
+<div style="width: 800px; margin-left: auto; margin-right: auto;">
+
+
+<style>
+  li { padding-bottom: 10px; }
+</style>
+
+<h2>A Traditional Music Digital Library: my-ipod </h2>
+
+
+<p class="about">This collection represents the <i>status quo</i> in traditional
+digital library design for music content.  When the collection is built:
+
+
+<ol>
+  <li>The selected audio files are automatically converted to a format suitable for streaming
+      over the web
+  </li>
+
+   <li>
+     Metadata embedded in the files (such as ID3 tags) is automatically extracted and made
+     available to form browsing structures, used in full-text indexes for searching, as well as
+     being manipulated and presented to the user, where applicable.
+   </li>
+
+  <li>
+    Automatically extracted metadata can be override by manually assigned.  This
+    can either be done through a desktop application (the Greenstone Librarian Interface, or GLI for short) 
+    a graphical user interface that controls all aspects of collection design, or directly through 
+    the web browser, on a per-document basis.
+  </li>
+</ol>
+
+</p>
+
+
+<h3>A Walkthrough</h3>
+
+<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>
+
+
+
+<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>
+
+
+	</xsl:template>
+
+
+</xsl:stylesheet>  
+
Index: /main/trunk/model-sites-dev/multimodal-mdl/collect/trad-my-ipod/transform/pages/document.xsl
===================================================================
--- /main/trunk/model-sites-dev/multimodal-mdl/collect/trad-my-ipod/transform/pages/document.xsl	(revision 28432)
+++ /main/trunk/model-sites-dev/multimodal-mdl/collect/trad-my-ipod/transform/pages/document.xsl	(revision 28432)
@@ -0,0 +1,973 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0"
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+	xmlns:java="http://xml.apache.org/xslt/java"
+	xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
+	xmlns:gslib="http://www.greenstone.org/skinning"
+	xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
+	xmlns:xlink="http://www.w3.org/1999/xlink" 
+	extension-element-prefixes="java util"
+	exclude-result-prefixes="java util gsf">
+  
+
+  <!-- *** -->
+  <!-- Document header -->
+  <!-- *** -->
+
+  <xsl:template name="soundmanager2-header">
+
+    <!-- soundManager2 API -->
+    <gsf:style src="ext/sound-manager2/css/flashblock.css" />  
+    <gsf:script src="ext/sound-manager2/script/soundmanager2-nodebug.js"/>
+
+    <!-- The Page player (variant of SoundManger) main script -->
+    <gsf:script src="ext/sound-manager2/script/page-player.js"/>
+    <gsf:style src="ext/sound-manager2/css/page-player.css" />
+        
+    <!-- optional: annotations/sub-tracks/notes, and alternate themes -->
+    <gsf:style src="ext/sound-manager2/css/optional-annotations.css" />
+    <gsf:style src="ext/sound-manager2/css/optional-themes.css" />
+
+    <!-- optional: Metadata UI prototype (not needed unless you want the bottom-most demo bits) -->
+    <gsf:script src="ext/sound-manager2/script/optional-page-player-metadata.js"/>
+    
+    <gsf:style>
+      ul.playlist li .comment {font-size:0.65em;opacity:0.5}
+    </gsf:style>
+    
+    <!-- Customization of page-player for this collection -->
+
+    <gsf:script>
+
+      soundManager.flashVersion = 9;
+      soundManager.preferFlash = true;        /* for visualization effects */
+      soundManager.useHighPerformance = true; /* keep flash on screen, boost performance */
+      soundManager.wmode = "transparent";     /* transparent SWF, if possible */
+      soundManager.useFastPolling = true;     /* increased JS callback frequency */
+      soundManager.url = "ext/sound-manager2/swf/";
+
+      /* custom page player configuration */
+
+      var PP_CONFIG = {
+        autoStart:       false,  /* begin playing first sound when page loads */
+	playNext:        false,  /* stop after one sound, or play through list until end */
+	useThrottling:   false,  /* try to rate-limit potentially-expensive calls (eg. dragging position around) */
+	usePeakData:     true,   /* [Flash 9 only] whether or not to show peak data (left/right channel values) - nor noticable on CPU */
+	useWaveformData: false,  /* [Flash 9 only] show raw waveform data - WARNING: LIKELY VERY CPU-HEAVY */
+	useEQData:       false,  /* [Flash 9 only] show EQ (frequency spectrum) data */
+	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 */
+	useMovieStar:    true    /* Flash 9.0r115+ only: Support for a subset of MPEG4 formats. */
+      }
+    </gsf:script>
+  </xsl:template>
+
+
+  <!-- CAA = Content Analysis Algorithm -->
+  <xsl:variable name="cgiargCAAlgorithm">
+    <xsl:choose>
+      <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>
+      <xsl:otherwise>1</xsl:otherwise>
+    </xsl:choose>
+  </xsl:variable>
+
+  <!-- *** -->
+  <!-- The Javascript DSP files for computing chroma features in the browser -->
+  <!-- *** -->
+
+  <xsl:template name="javascript-dsp-header">
+    <gsf:script src="ext/js-dsp/dsp-custom.js"/>
+    <gsf:script src="ext/js-dsp/chroma-transform.js"/>
+    <gsf:script src="ext/js-dsp/frequency-plotter.js"/>
+    <gsf:script src="ext/js-dsp/frequency-player.js"/>
+
+
+    <gsf:script src="ext/js-dsp/component/crockford-inheritance.js"/>
+    <gsf:script src="ext/js-dsp/component/workflow-core.js"/>
+    <gsf:script src="ext/js-dsp/component/audio-mixer.js"/>
+    <gsf:script src="ext/js-dsp/component/wf-freq-spectrum.js"/>
+    <gsf:script src="ext/js-dsp/component/wf-filter-bank.js"/>
+    <gsf:script src="ext/js-dsp/component/wf-chroma-transform.js"/>
+    <gsf:script src="ext/js-dsp/component/active-workflow.js"/>
+
+  </xsl:template>
+
+  <xsl:template name="processingPopup">
+    <div>
+      <style type="text/css">	
+	#processing { 
+	  width: 100%; 
+	  height: 100%; 
+	  position: absolute; 
+	  z-index: 10; 
+	  left: 0px; 
+	  top: 0px; 
+	  background-color: rgba(255,255,255,0.75); 
+	  opacity: 1; 
+	  display: none;
+	}
+
+	#processingMessage { 
+	  position: absolute;
+	  padding: 10px;
+	  border-radius: 10px; 
+	  margin-left: 50%; 
+	  width: 380px; 
+	  height: 105px; 
+	  left: -250px; top: 200px; 
+	  background-color: rgba(255,255,255,1);
+	  box-shadow: 0px 0px 30px rgba(0,0,0,0.8); 
+	}
+
+	#processingMessage p { 
+	  font-size: 18px; 
+	  text-align: center; 
+	  font-family: 
+	  sans-serif; 
+	  font-weight: bold; 
+	  color: #666; 
+	}
+      </style>
+      
+      <div id="processing">
+	<div id="processingMessage">
+	  <h2 id="processingTitle" class="ui-state-default ui-corner-all" style="padding: 8px; font-size: 110%; width: auto;">
+	    Heading
+	  </h2>
+	  <p id="processingText">text</p>
+	</div>
+      </div>
+    </div>
+
+  </xsl:template>
+
+
+  <!-- *** -->
+  <!-- * Plain old manually assigned and embedded metadata -->
+  <!-- *** -->
+
+  <xsl:template name="metadata-block">
+    
+    <div>
+      <div class="documenttext">
+	<center>
+	  <xsl:call-template name="plainoldMetadataBlock" />
+	</center>
+      </div>
+
+    </div>
+
+  </xsl:template>
+
+
+
+    <xsl:template name="choose-music-title">
+      
+      <gsf:choose-metadata>
+	<gsf:metadata name="dc.Title"/>
+	<gsf:metadata name="exp.Title"/>
+	<gsf:metadata name="ex.dc.Title"/>
+	<gsf:metadata name="ex.ID3.Title"/>
+	<gsf:metadata name="ex.Title"/>
+	<gsf:metadata name="Title"/>
+	<gsf:default>Untitled</gsf:default>
+      </gsf:choose-metadata>
+      
+      <gsf:switch>
+	<gsf:metadata name='dc.Creator'/>
+	<gsf:when test='exists'>
+	  
+	  <gsf:switch>
+	    <gsf:metadata name="dc.Creator"/>
+	    <gsf:when test="notEquals" test-value="Unknown">
+	      
+	      by <i><gsf:metadata name='dc.Creator'/></i>
+	    </gsf:when>
+	  </gsf:switch>
+	  
+	</gsf:when>
+      </gsf:switch>			
+    </xsl:template>    
+
+
+    <xsl:template name="choose-music-artist">
+      
+      <gsf:choose-metadata>
+	<gsf:metadata name="dc.Creator"/>
+	<gsf:metadata name="exp.Creator"/>
+	<gsf:metadata name="ex.dc.Creator"/>
+	<gsf:metadata name="ex.ID3.Artist"/>
+	<gsf:default>Unknown</gsf:default>
+      </gsf:choose-metadata>
+    </xsl:template>    
+
+
+  <xsl:template name="plainoldMetadataBlock">
+    
+    <xsl:variable name="httpCollection"><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/></xsl:variable>
+    <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
+    
+      <table class="metadata-stripes">
+	<tbody>
+	  <tr>
+	    <td>
+	      Title:
+	    </td>
+	    <td>
+	      <xsl:call-template name="choose-music-title"/>
+	    </td>
+	  </tr>
+	  
+	  <gsf:switch>
+	    <gsf:metadata name='ex.ID3.Album'/>
+	    <gsf:when test='exists'>	  
+	      <tr>
+		<td>Album:</td>
+		<td><gsf:metadata name="ex.ID3.Album"/></td>
+	      </tr>
+	    </gsf:when>
+	  </gsf:switch>			
+
+	  <gsf:switch>
+	    <gsf:metadata name='ex.ID3.Genre'/>
+	    <gsf:when test='exists'>	  
+	      <tr>
+		<td>Genre:</td>
+		<td><gsf:metadata name="ex.ID3.Genre"/></td>
+	      </tr>
+	    </gsf:when>
+	  </gsf:switch>			
+	  
+	  <tr>
+	    <td>Artist:</td>
+	    <td>
+	      <xsl:call-template name="choose-music-artist"/>
+	    </td>
+	  </tr>
+	  	  
+
+	</tbody>
+      </table>
+  </xsl:template>
+
+
+
+
+
+
+
+
+  <!-- *** -->
+  <!-- * Discovery -->
+  <!-- *** -->
+
+  <xsl:template name="discovery-block">
+    
+    <div id="fingerprint-turnstyle">
+
+      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
+	Discovery: <xsl:call-template name="choose-title"/>
+      </div>
+
+      <div class="documenttext" style="display: none;">
+	<xsl:call-template name="fingerprintMetadataBlock" />
+      </div>
+
+    </div>
+
+    <script>
+      <xsl:text disable-output-escaping="yes">
+	$(function(){
+	transformToTurnstyleBlock("fingerprint");
+	});
+      </xsl:text>
+    </script>
+    
+  </xsl:template>
+
+  <xsl:template name="fingerprintMetadataBlock">
+    
+    <xsl:variable name="httpCollection"><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/></xsl:variable>
+    <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
+
+
+    <xsl:variable name="musicbrainzsongid">
+      <gsf:metadata name="dc.Identifier.musicbrainzsongid"/>
+    </xsl:variable>
+
+    <xsl:variable name="musicbrainzalbumid">
+      <gsf:metadata name="dc.Source.musicbrainzalbumid"/>
+    </xsl:variable>
+
+    <xsl:variable name="musicbrainzartistid">
+      <gsf:metadata name="dc.Creator.musicbrainzartistid"/>
+    </xsl:variable>
+    
+    <xsl:variable name="lastfmtrackurl">
+      <gsf:metadata name="dc.Identifier.lastfmtrackurl"/>
+    </xsl:variable>
+
+    <xsl:variable name="echonestsongid">
+      <gsf:metadata name="dc.Identifier.echonestsongid"/>
+    </xsl:variable>
+    
+      <table class="metadata-stripes">
+	<tbody>
+	  <tr>
+	    <td>
+	      Title
+	    </td>
+	    <td>
+	      <gsf:metadata name="dc.Title"/>
+	    </td>
+	  </tr>
+	  
+	  <tr>
+	    <td>Album Title</td>
+	    <td><gsf:metadata name="dc.Title.albumtitle"/></td>
+	  </tr>
+	  
+	  <tr>
+	    <td>Artist</td>
+	    <td><gsf:metadata name="dc.Creator"/></td>
+	  </tr>
+	  
+	  <tr valign="top">
+	    <td>Artist Summary</td>
+	    <td><i><gsf:metadata name="LastFM.LastFMArtistWikiSummary"/></i></td>
+	  </tr>
+	  
+<!--
+dc.Identifier.echonestsongid
+dc.Identifier.echonestartistid
+
+dc.Identifier.lastfmtrackurl
+dc.Identifier.lastfmalbumurl
+dc.Identifier.lastfmartisturl
+
+//dc.Identifier
+dc.Identifier.musicbrainzalbumid
+dc.Identifier.musicbrainzartistid
+dc.Identifier.musicbrainzsongid
+dc.Identifier.playmeartistid
+
+-->
+
+	  <tr>
+	    <td colspan="2">
+
+	      <xsl:for-each select="/page/pageResponse/document/metadataList/metadata[@name = 'dc.Relation.artistrelatedimage']">
+		<xsl:if test="position() &lt;= 6">
+		  <a target="_blank">
+		    <xsl:attribute name='href'>
+		      <xsl:value-of disable-output-escaping="yes" select="."/>
+		    </xsl:attribute>
+		    
+		    <img width="150">
+		      <xsl:attribute name='src'>
+			<xsl:value-of disable-output-escaping="yes" select="."/>
+		      </xsl:attribute>
+		    </img>
+		  </a>
+		</xsl:if>
+	      </xsl:for-each>
+	    </td>
+	  </tr>
+
+	  <tr>
+	    <td>Linked Data</td>
+	    <td>
+	      <!--
+		  <gsf:metadata name="dc.Identifier"/><br />
+	      -->
+
+	      <table>
+		<tr>
+		  <td>
+		    MusicBrainz song id: 
+		  </td>
+		  <td>
+		    <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz">
+		      <xsl:copy-of select="$musicbrainzsongid"/>
+		    </a>
+		  </td>
+		</tr>
+
+		<tr>
+		  <td>
+		    MusicBrainz album id: 
+		  </td>
+		  <td>
+		    <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz">
+		      <xsl:copy-of select="$musicbrainzalbumid"/>
+		    </a>
+		  </td>
+		</tr>
+
+		<tr>
+		  <td>
+		    MusicBrainz artist id: 
+		  </td>
+		  <td>
+		    <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz">
+		      <xsl:copy-of select="$musicbrainzartistid"/>
+		    </a>
+		  </td>
+		</tr>
+		<tr>
+		  <td colspan="2">	      
+		    <a href="{$lastfmtrackurl}" target="#lastfm">
+		      <xsl:copy-of select="$lastfmtrackurl"/>
+		    </a>
+		  </td>
+		</tr>
+		<tr>
+		  <td>
+		    EchoNest song id:
+		  </td>
+		  <td>
+		    <a href="{$echonestsongid}" target="#echonestsongid">
+		      <xsl:copy-of select="$echonestsongid"/>
+		    </a>
+		  </td>
+		</tr>
+	      </table>
+
+	    </td>
+	  </tr>
+	  
+
+	</tbody>
+      </table>
+  </xsl:template>
+
+
+
+  <!-- *** -->
+  <!-- * Audio Player -->
+  <!-- *** -->
+
+
+  <xsl:template name="js-mad-header">
+
+        <gsf:script src="ext/js-mad/script/mad.js"/>
+        <gsf:script src="ext/js-mad/script/rq_table.js"/>
+        <gsf:script src="ext/js-mad/script/imdct_s.js"/>
+        <gsf:script src="ext/js-mad/script/huffman.js"/>
+        <gsf:script src="ext/js-mad/script/bit.js"/>
+        <gsf:script src="ext/js-mad/script/stream.js"/>
+        <gsf:script src="ext/js-mad/script/layer3.js"/>
+        <gsf:script src="ext/js-mad/script/frame.js"/>
+        <gsf:script src="ext/js-mad/script/synth.js"/>
+       
+        <gsf:script src="ext/js-mad/script/arraybuffer/bytestream.js"/>
+        <gsf:script src="ext/js-mad/script/arraybuffer/filestream.js"/>
+        <gsf:script src="ext/js-mad/script/arraybuffer/substream.js"/>
+        <gsf:script src="ext/js-mad/script/arraybuffer/arraystream.js"/>
+        <gsf:script src="ext/js-mad/script/arraybuffer/ajaxstream.js"/>
+
+        <gsf:script src="ext/js-mad/script/binarystring/bytestream.js"/>
+        <gsf:script src="ext/js-mad/script/binarystring/filestream.js"/>
+        <gsf:script src="ext/js-mad/script/binarystring/substream.js"/>
+        <gsf:script src="ext/js-mad/script/binarystring/stringstream.js"/>
+        <gsf:script src="ext/js-mad/script/binarystring/ajaxstream.js"/>
+
+        <gsf:script src="ext/js-mad/script/id3v22stream.js"/>
+        <gsf:script src="ext/js-mad/script/id3v23stream.js"/>
+        <gsf:script src="ext/js-mad/script/mp3file.js"/>
+        
+<!--
+        <gsf:script src="ext/js-mad/script/player.js"/>
+-->
+
+        <gsf:script src="ext/js-mad/script/sink.min.js"/>
+
+<!--
+        <gsf:script src="ext/js-mad/script/require.js"/>
+-->
+<!--
+        <gsf:script src="ext/js-mad/script/sink-light.js"/>
+-->
+
+        <gsf:script src="ext/js-mad/script/browser-detect.js"/>
+        <gsf:script src="ext/js-mad/script/main-jsmad.js"/>
+
+  </xsl:template>
+
+
+  <xsl:template name="audio-icon-cache">
+    <div style="display:none;">
+      <!-- pre-load various play/pause images to help with speed of interface update -->
+      <img src="ext/diy-audio-player/images/play32Highlight.png" />
+      <img src="ext/diy-audio-player/images/pause32.png" />
+      <img src="ext/diy-audio-player/images/pause32Highlight.png" />
+      <img src="ext/diy-audio-player/images/play20Highlight.png" />
+      <img src="ext/diy-audio-player/images/stop32.png" />
+      <img src="ext/diy-audio-player/images/stop32Highlight.png" />
+      <img src="ext/diy-audio-player/images/search20Highlight.png" />	
+    </div>
+  </xsl:template>
+
+
+  <!-- *** -->
+  <!-- * Workflow control -->
+  <!-- *** -->
+
+  <xsl:template name="workflow-block">
+    <xsl:variable name="httpCollection">
+      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
+    </xsl:variable>
+
+    <div id="workflow-turnstyle">
+
+      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
+	Workflow
+      </div>
+
+      <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
+	
+<!--
+	<form style="padding-left: 8px;">
+	  <span class="vis-heading">Input Selection:</span>
+	  <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="left"/>Left only
+	  <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="right"/>Right only
+	  <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="diff"/>Average
+	  <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="mix" checked="checked"/>Difference
+	</form>
+	<hr/>
+-->
+
+	<form style="padding-left: 8px; height: 48px;">
+	  <span class="vis-heading" style="padding-right: 10px" >Meandre Workflow:</span>
+
+	  <select id="meandre-workflow-pos" onChange="loadSelectedWorkflow(this)" style="font-size: 90%; padding 8px;">
+	    <option value="0" selected="selected">Chromagram</option>
+	    <option value="1" >Dynamic Javascript Mixer</option>
+	  </select>
+
+	  <div style="float: right;" id="meandre-buttons">
+	 
+	    <button type="button" id="meandre-run-button"  
+		    onclick="selectedMeandreWorkflow.runThisMeandreFlow(this)">
+	      <img id="meandre-run-button" src="ext/diy-audio-player/images/play32.png" 
+		   width="32"
+		   height="32"  
+		   XXonmouseover="playHighlightOn(this)"
+		   XXonmouseout="playHighlightOff(this)"
+		   XXonclick="runThisMeandreFlow(this)"
+		   style="vertical-align: middle;"/>
+	      Run
+	    </button>
+
+	    <button type="button" id="meandre-stop-button" onclick="selectedMeandreWorkflow.stopThisMeandreFlow(this)" disabled="disabled">
+	      <img id="meandre-stop-button" src="ext/diy-audio-player/images/stop32.png" 
+		   width="32"
+		   height="32"  
+		   XXonmouseover="stopHighlightOn(this)"
+		   XXonmouseout="stopHighlightOff(this)"
+		   XXonclick="stopThisMeandreFlow(this)"
+		   style="vertical-align: middle;"/>
+	      Stop
+	    </button>
+
+<!--
+	    <button type="button" id="meandre-run-button" onclick="runThisMeandreFlow(this)" >Run</button>
+	    <button type="button" id="meandre-stop-button" onclick="stopThisMeandreFlow(this)" disabled="disabled">Stop</button>
+-->
+
+	  </div>
+
+	</form>
+
+	<style>
+	  #meandre-buttons button:hover:enabled {
+	    background-color: #CCCC33;
+	    color: #FFFFFF;
+	  }
+	</style>
+	  
+
+	<div style="position: relative;">
+	  <iframe id="workbenchFrame" 
+		  style="width: 100%; height: 400px;" >
+	    If you see this, then your browser does not support the iframe element.
+	  </iframe>
+
+	</div>
+
+	<gsf:script src="{$httpCollection}/script/meandre-workflow/chromagram.js"/>
+	<gsf:script src="{$httpCollection}/script/meandre-workflow/js-dynamic-mix.js"/>
+	
+	<gsf:script>
+	  var chromagramMeandreWorkflow = new ChromagramMeandreWorkflow();
+	  var jsDynamicMixMeandreWorkflow = new JSDynamicMixMeandreWorkflow();
+
+	  var meandreWorkflows = [ chromagramMeandreWorkflow, jsDynamicMixMeandreWorkflow ];
+
+	  var selectedMeandreWorkflowPos =$('#meandre-workflow-pos option:selected').val();
+	  var selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
+
+	  selectedMeandreWorkflow.meandreController.loadWorkbench( "workbenchFrame",selectedMeandreWorkflowPos);
+	  
+	  function loadSelectedWorkflow(elem) { 	       
+	      selectedMeandreWorkflowPos = elem.value;
+	      selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
+
+	    if (selectedMeandreWorkflowPos==1) {
+	      $('#jsdynamic-turnstyle').show();
+	    }
+	    else {
+	      $('#jsdynamic-turnstyle').hide();
+	    }
+
+	    console.info("Loading in new Meandre workbench flow (pos=" + selectedMeandreWorkflowPos+ ")");		
+	    selectedMeandreWorkflow.meandreController.loadWorkbench("workbenchFrame",selectedMeandreWorkflowPos);
+
+	  }
+	</gsf:script>
+	
+
+
+
+	<div id="jsdynamic-turnstyle" style="display:none">
+	  
+	  <div style="background-image: none; background-color: rgb(80%,80%,20%);">
+	    Dynamic Javascript Meandre Component
+	  </div>
+
+	  <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
+
+	    <textarea id="js-dynamic-code" style="width:100%; height: 520px; font-size: 60%">
+	      <xsl:text disable-output-escaping="yes">
+
+
+var arrayBinding = new JavaImporter(java.lang.reflect.Array);
+
+var JSDynamicComponent = function() {
+  this.frameCount = 0;
+}
+
+JSDynamicComponent.prototype.executeCallBack = function(cc) {
+
+  with(arrayBinding) {
+
+    if ((this.frameCount % 1000)==0) {
+      print("JSDynamicComponent: " + this.frameCount + "\n");
+    }
+
+    var inputObject = cc.getDataComponentFromInput("input");
+    var rawInput1DArray = inputObject;
+
+    var rawOutput1DArray = Array.newInstance(java.lang.Double.TYPE, rawInput1DArray.length);
+
+    for (var i=1; i&lt;rawOutput1DArray.length; i++) {
+      var diff = Array.getDouble(rawInput1DArray,i) - Array.getDouble(rawInput1DArray, i-1);
+      Array.setDouble(rawOutput1DArray,i,diff);
+    }
+
+    cc.pushDataComponentToOutput("output", rawOutput1DArray);
+
+    this.frameCount++;
+  }
+
+}
+
+var jsDynamicComponent = new JSDynamicComponent();
+
+	      </xsl:text>
+	    </textarea>
+	  </div> <!-- end of Dynamic JS turnstyle block -->
+	</div>
+
+      </div>
+
+    </div>
+
+    <script>
+      <xsl:text disable-output-escaping="yes">
+	$(function(){
+	    transformToTurnstyleBlock("workflow");
+	    transformToTurnstyleBlock("jsdynamic");
+	});	
+      </xsl:text>
+    </script>
+  </xsl:template>
+
+
+  <!-- *** -->
+  <!-- * Structured audio player -->
+  <!-- *** -->
+ 
+  <xsl:template name="structuredAudioPlayerBlock">
+
+    <gsf:script src="ext/diy-audio-player/script/structured-audio-play.js"/>
+    
+    <div style="background-color: rgb(40%,40%,20%)">
+      <svg xmlns="http://www.w3.org/2000/svg" 
+           xmlns:xlink="http://www.w3.org/1999/xlink" 
+	   version="1.1"
+           id="svgGroundTruthSegments" 
+	   width="100%" height="24"
+           onLoadXX="svgGTStructuredInit()">
+      </svg>
+    </div>
+    
+    <div style="background-color: rgb(40%,40%,20%)">
+      <svg xmlns="http://www.w3.org/2000/svg" 
+           xmlns:xlink="http://www.w3.org/1999/xlink" 
+	   version="1.1"
+           id="svgContentAnalysisSegments" 
+	   width="100%" height="24"
+           onLoadXX="svgCAStructuredInit({$cgiargCAAlgorithm})">
+      </svg>
+    </div>
+  </xsl:template>
+  
+  <xsl:template name="visualization-mode-block">
+    
+    <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;">
+
+      <span class="vix-heading">Max Values:</span>
+      <div style="padding-left: 8px">
+	<style>
+	  span.mv-fixed { display: inline-block; width: 30pt; }
+	</style>
+	<table width="100%">
+	  <tr>
+	    <td><span class="mv-fixed" id="freqSpectrumMax"     >0.000</span>(Freq Spectrum)       </td>
+	    <td><span class="mv-fixed" id="freqPowerSpectrumMax">0.000</span>(Freq Power Spectrum) </td>
+	    <td><span class="mv-fixed" id="filterBankMax"       >0.000</span>(Filter Bank)         </td>
+	    <td><span class="mv-fixed" id="chromaFeaturesMax"   >0.000</span>(Chroma Features)     </td>
+	  </tr>
+	</table>
+      </div>
+      <hr/>
+  
+      <form style="padding-left: 8px; padding-right: 8px; padding-bottom: 0px;">
+	<div style="float: left;">
+	  <span class="vis-heading">Visualization:</span>
+<!--
+	<input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqSpectrum" />Frequency Spectrum 
+	<input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqPowerSpectrum"/>Frequency Power Spectrum
+-->
+	
+	  <input type="radio" name="visualization" onclick="setTransformMode(this)" value="filterBank"/>Filter Bank 
+	  <input type="radio" name="visualization" onclick="setTransformMode(this)" value="chromaFeatures" checked="checked"/>Chroma Features
+	</div>
+
+	<div style="float: left; padding-left: 140px;">
+	  <span class="vis-heading">Colour Mapping:</span>
+	  <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
+	  <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat
+	</div>
+      </form>
+      
+      <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
+
+<!--
+      <form style="padding-left: 8px;">
+	<span class="vis-heading">Colour Mapping:</span>
+	<input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
+	<input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat Map
+      </form>
+      <hr/>
+-->
+
+	<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
+	</form>
+	<hr/>
+
+    </div>
+    
+  </xsl:template>
+
+  <!-- *** -->
+  <!-- * Settings form -->
+  <!-- *** -->
+
+  <xsl:template name="settings-form">
+    <xsl:param name="cgiargYScaleSimImg"/>
+
+    <xsl:variable name="httpCollection">
+      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
+    </xsl:variable>
+
+    <div id="settings-turnstyle" style="margin: 6px;">
+      <div style="background-image: none; background-color: rgb(80%,80%,20%);">
+	Audio Content Search
+      </div>
+      <div class="documenttext" style="display: none;">
+
+
+      <form id="QueryForm" name="QueryForm" method="get" action="{$library_name}">
+	<input type="hidden" name="a" value="q"/>
+	<input type="hidden" name="sa"><xsl:attribute name="value"><xsl:value-of select="/page/pageRequest/@subaction"/></xsl:attribute></input>
+	<input type="hidden" name="rt" value="rd"/>
+	
+	<input type="hidden" name="s" value="AudioQuery"/>
+	<input type="hidden" name="c" value="{$collName}"/>
+	<xsl:if test="not(paramList/param[@name='startPage'])">
+	  <input type="hidden" name="startPage" value="1"/>
+	</xsl:if>
+	<xsl:choose>
+	  <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.maxDocs']">
+	    <input type="hidden" name="s1.maxDocs">
+	      <xsl:attribute name="value">
+		<xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.maxDocs']/@value"/>
+	      </xsl:attribute>
+	    </input>
+	  </xsl:when>
+	  <xsl:otherwise>
+	    <input type="hidden" name="s1.maxDocs" value="100"/>
+	  </xsl:otherwise>
+	</xsl:choose>
+	<xsl:choose>
+	  <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']">
+	    <input type="hidden" name="s1.hitsPerPage">
+	      <xsl:attribute name="value">
+		<xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']/@value"/>
+	      </xsl:attribute>
+	    </input>
+	  </xsl:when>
+	  <xsl:otherwise>
+	    <input type="hidden" name="s1.hitsPerPage" value="20"/>
+	  </xsl:otherwise>
+	</xsl:choose>
+	
+	<input type="hidden" name="q">
+	  <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
+	</input>
+	
+	
+	<input type="hidden" name="s1.query">
+<!--
+	  <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
+-->
+	  <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/@nodeID"/>.dir</xsl:attribute>
+	</input>
+	
+	<input type="hidden" name="s1.offset" value="0" />
+	<input type="hidden" name="s1.length" value="200" />
+	
+	<div style="font-style: italics;">Start new query @ offset
+	<span id="mysongCurrentPos">0 secs</span>,
+	with excerpt lasting
+	
+	<input type="text" name="mysongWindowDuration" size="4" value="6" />
+	<!--
+	    <span id="mysongWindowDuration" class="editable-offset"
+	    style="cursor: pointer; border: 1px solid black; padding: 3px; width: 200px; min-width: 200px;">6.0</span> 
+	-->
+	secs:
+
+	<input type="submit" value="Search" onclick="preSubmit(this.form);" />
+	</div>
+
+	
+	<ul style="font-size: 80%; margin-top: 8px; font-style: italics;" >
+	  <li>Use the <b>Play all of</b> bar to get to the part of the song you are interested in.</li>
+	  <li>... the <b>query @ offset</b> value will change accordingly as the song progresses.</li>
+	  <li>Click <b>pause</b> (anywhere outside of the time-line) to mark the spot you want to start the new music query.</li>
+	  <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>
+	  <li>Finally, click the <b>Search</b> button to initiate the new query.</li>
+	</ul>
+	
+      </form>
+
+      <hr/>
+      
+<!--
+      <form id="RescaleForm" name="RescaleForm" method="get" action="{$library_name}">
+	<div style="font-style: italics;">
+	  Make the scale factor for the y-dimension of the self-similarity
+	  image be
+	  <input type="text" name="ResizeScale" value="{$cgiargYScaleSimImg}"
+	         size="3" /> then 
+	  <input type="button" name="ResizeImage" value="Resize Image" 
+	         onclick="javascript:rescaleImage()" />
+	  
+	</div>
+      </form>
+      
+      <hr/>
+-->
+
+      <!-- **** currently not displayed -->
+
+      <form id="UpdateCAForm" name="UpdateCAForm" method="get" action="{$library_name}" style="display: none;">
+	<div style="font-style: italics;">
+	  
+	  Show the song structure automatically computed by analyzing
+	  the audio data using algorithm 
+
+	  <select id="caaMenu" name="caAlgorithm">
+	    <option value="1">BV1</option>
+	    <option value="2">BV2</option>
+	    <option value="3">GP7</option>
+	    <option value="4">MHRAG2</option>
+	    <option value="5">MND1</option>
+	    <option value="6">WB1</option>
+
+<!--
+	    <option value="-1">or hide</option>
+-->
+
+	  </select>: 
+
+	  <input type="button" name="Reload" value="Reload" 
+	         onclick="updateCAAlgorithm()" />
+
+	</div>
+      </form>
+
+	<script>
+	  <xsl:text disable-output-escaping="yes"> 
+	    if (hasStructuredAudio) {
+	      var caaMenu = document.getElementById("caaMenu");
+               caaMenu.options[caAlgorithm-1].selected = 1;
+	    }
+	  </xsl:text>
+	</script>
+      
+
+      </div>
+    </div>
+    <script>
+      <xsl:text disable-output-escaping="yes">
+	$(function(){
+	transformToTurnstyleBlock("settings");
+	});
+      </xsl:text>
+    </script>
+
+  </xsl:template>
+
+
+  <!-- *** -->
+  <!-- * Computed Data -->
+  <!-- *** -->
+
+
+  <xsl:template name="original-audio">
+    <xsl:param name="httpCollection"/>
+    <xsl:param name="assocFilePath"/>
+
+    <div style="margin: 6px;">
+
+      <div style="display: block;">
+
+	<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" />
+	  </audio>
+	</div>
+
+      </div>
+    </div>
+
+  </xsl:template>
+
+</xsl:stylesheet>
