Index: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/etc/collectionConfig.xml
===================================================================
--- main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/etc/collectionConfig.xml	(revision 29882)
+++ main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/etc/collectionConfig.xml	(revision 29883)
@@ -308,4 +308,10 @@
 					<xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
 				</gsf:variable>
+
+                                <gsf:script src="{$httpCollection}/js/pep.js"/>
+
+				<gsf:link src="{$httpCollection}/style/jtab-helper.css"/>				
+                                <gsf:script src="{$httpCollection}/js/raphael.js"/>
+                                <gsf:script src="{$httpCollection}/js/jtab.js"/>
 <!--
 				<xsl:call-template name="soundmanager2-header"/>
@@ -350,5 +356,4 @@
 
                                 <!-- MIDI.js library -->
-
 
                                 <gsf:script src="{$httpCollection}/js/midi/inc/shim/Base64.js"/>
Index: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js
===================================================================
--- main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js	(revision 29882)
+++ main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js	(revision 29883)
@@ -243,6 +243,10 @@
     var playedNotePitch;
     var playedMidiPitch;
+
     var playedNoteStartTime;
+    var playedNoteStartCurrentTime;
+
     var playedDuration;
+
 
     // Creates our audio player
@@ -252,4 +256,6 @@
 
 	playedNoteStartTime = Date.now();
+	playedNoteStartCurrentTime = mediaPlayer.currentTime;
+
 	playedNotePitch = "note = " + note + ",  octave = " + octave;
 	playedMidiPitch = midiMiddleC + (12 * (octave-4)) +  midiOctaveMap[note];
@@ -280,4 +286,10 @@
 	    // avoid playing a note if some kind of control-key
 	    // combination (such a web page reload) is pressed
+	    return false;
+	}
+
+	if (e.key == " ") {
+	    togglePlayPause();
+	    e.preventDefault();
 	    return false;
 	}
@@ -381,4 +393,5 @@
 		  'midiNoteOn'  : relativePlayedNoteStartTime,
 		  'midiNoteOff' : relativePlayedNoteEndTime,
+		  'startCurrentTime' : playedNoteStartCurrentTime,
 		  'duration    ': playedDuration,
 		  'humanReadble': playedNotePitch }
@@ -442,14 +455,14 @@
 	    $('#drum1').trigger("mousedown");
 	}
+	else if (e.key == "V") {
+	    $('#drum2').trigger("mousedown");
+	}
 	else if (e.key == "B") {
-	    $('#drum2').trigger("mousedown");
+	    $('#drum3').trigger("mousedown");
 	}
 	else if (e.key == "N") {
-	    $('#drum3').trigger("mousedown");
+	    $('#drum4').trigger("mousedown");
 	}
 	else if (e.key == "M") {
-	    $('#drum4').trigger("mousedown");
-	}
-	else if (e.key == " ") {
 	    $('#drum5').trigger("mousedown");
 	}
Index: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js
===================================================================
--- main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js	(revision 29882)
+++ main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js	(revision 29883)
@@ -1,3 +1,3 @@
-"use strict";
+//"use strict";
 
 // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createScriptProcessor
@@ -5,5 +5,9 @@
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 
-//var InTheGroove = true;
+if( 'webkitAudioContext' in window) {
+    console.log("*** Web Audio found in webkit namespace");
+    audioCtx = new webkitAudioContext();
+}
+
 var InTheGroove = false;
 var MissingTheGroovePending = false;
@@ -44,5 +48,6 @@
 		
 		for (var i = 0; i < bufferSize; i++) {
-		    if (InTheGroove) {
+		    if ( ((mediaPlaybackMode == "neutral") || (mediaPlaybackMode == "record"))
+			 || InTheGroove) {
 			output[i] = input[i];
 		    }
@@ -51,7 +56,4 @@
 			output[i] = input[i] - prev_input[c];
 		    }
-		    //if (i==128) {
-		    //	console.log("*** input[128] = " + input[i]);
-		    //}
 
 		    prev_input[c] = input[i];
Index: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js
===================================================================
--- main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js	(revision 29882)
+++ main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js	(revision 29883)
@@ -1,3 +1,3 @@
-"use strict";
+//"use strict";
 
 // Based on: 
@@ -240,5 +240,5 @@
 // Updates a button's title, innerHTML and CSS class to a certain value
 function changeButtonType(btn, value) {
-	btn.title = value;
+	//btn.title = value;
 	btn.innerHTML = value;
 	btn.className = value;
Index: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl
===================================================================
--- main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl	(revision 29882)
+++ main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl	(revision 29883)
@@ -76,4 +76,5 @@
 
   <xsl:template name="javascript-dsp-header">
+
     <gsf:script src="ext/js-dsp/dsp-custom.js"/>
     <gsf:script src="ext/js-dsp/dsp.js"/>
@@ -1324,9 +1325,10 @@
       <div id="video-area" class="documenttext" 
 	   style="display: none; position: absolute: left: 0px; top: 0px;">
-
-	<video id="video" width="100%" controls="true">
-	  <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" />
-	  Your browser does not support the video tag.
-	</video> 
+	<center>
+	  <video id="video" width="60%" controls="true">
+	    <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" />
+	    Your browser does not support the video tag.
+	  </video>
+	</center> 
       </div>
     </div>
@@ -1342,5 +1344,5 @@
 	<div style="float:left; padding: 8px; ">
 	  <button id='replay-button'     class='buttonx2 replay' title='replay' onclick='replayMedia();'>Replay</button>	
-	  <button id='play-pause-button' class='buttonx2 play' title='play' onclick='togglePlayPause();'>Play</button>
+	  <button id='play-pause-button' class='buttonx2 play' title='play/pause (or press space-bar on keyboard)' onclick='togglePlayPause();'>Play</button>
 	  <button id='stop-button'       class='buttonx2 stop' title='stop' onclick='stopPlayer();'>Stop</button>
 	</div>
@@ -1350,29 +1352,10 @@
 	    <span id="mediaPlayerTotalTime">0:00.0</span>
 	  </div>
+	  <button id='volume-dec-button' class='button volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button>
 	  <button id='volume-inc-button' class='button volume-plus' title='increase volume' onclick="changeVolume('+');">Increase volume</button>
-	  <button id='volume-dec-button' class='button volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button>
 	  <button id='mute-button'       class='button mute' title='mute' onclick="toggleMute('true');">Mute</button>	
 	</div>
       </div>
     </div>
-
-
-
-    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
-
-    <div class="analysis-bar">
-      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
-	Play Along
-      </div>
-
-
-	<div id="analysis-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
-          <div style="color: white; width:100%; height: 400px;">
-	    <xsl:comment>filler</xsl:comment>
-	  </div>
-	  
-	</div>
-    </div>
-
 
 
@@ -1469,16 +1452,21 @@
 		  <button id="mpm-merge-overlay" 
 			  classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
-			  style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
+			  style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
 		    Merge Selected
 		  </button>
 		  <button id="mpm-split-overlay" 
 			  classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
-			  style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
+			  style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
 		    Split Selected
 		  </button>
 		  <button id="mpm-edit-overlay"  
 			  classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
-			  style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
+			  style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
 		  Edit Selected
+		  </button>
+		  <button id="mpm-delete-overlay"  
+			  classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
+			  style="background-color:#2E52A4; color:white; width:24%; text-align: center;">
+		  Delete Selected
 		  </button>
 		</div>
@@ -1493,12 +1481,15 @@
 		
 		<div style="padding: 8px;">
-		  <button id="pam-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
+		  <button id="pam-merge-overlay" style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
 		    Merge Selected
 		  </button>
-		  <button id="pam-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
+		  <button id="pam-split-overlay" style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
 		    Split Selected
 		  </button>
-		  <button id="pam-edit-overlay"  style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
+		  <button id="pam-edit-overlay"  style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
 		  Edit Selected
+		  </button>
+		  <button id="pam-delete-overlay"  style="background-color:#2E52A4; color:white; width:24%; text-align: center;">
+		  Delete Selected
 		  </button>
 		</div>
@@ -1511,4 +1502,22 @@
 	</div>
     </div>
+
+
+    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
+
+    <div class="analysis-bar">
+      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
+	Game On
+      </div>
+
+
+	<div id="analysis-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
+          <div style="color: white; width:100%; height: 400px;">
+	    <xsl:comment>filler</xsl:comment>
+	  </div>
+	  
+	</div>
+    </div>
+
 
     <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
@@ -1582,7 +1591,8 @@
 	    left: 50%;
 	    transform: translateX(-50%) translateY(-50%);
-	    font-size: 110%;
+	    -webkit-transform: translateX(-50%) translateY(-50%);
+	    font-size: 100%;
 	    color: #888888;
-	    pointer-events: onone;
+	    pointer-events: none;
 	  }
 	</style>
@@ -1595,5 +1605,5 @@
 		       src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" />
 		  <div class="drumcontainer" style="color: #555555">
-		    &lt;Shift-C&gt;
+		    <span style="white-space: nowrap;">&lt;Shift-C&gt;</span>
 		  </div>
 		</div>
@@ -1604,5 +1614,5 @@
 		      src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
 		  <div class="drumcontainer" >
-		    &lt;Shift-B&gt;
+		    <span style="white-space: nowrap;">&lt;Shift-V&gt;</span>
 		  </div>
 		</div>
@@ -1613,5 +1623,5 @@
 		       src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
 		  <div class="drumcontainer" >
-		    &lt;Shift-N&gt;
+		    <span style="white-space: nowrap;">&lt;Shift-B&gt;</span>
 		  </div>
 		</div>
@@ -1622,5 +1632,5 @@
 		       src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum4" border="0" />
 		  <div class="drumcontainer" >
-		    &lt;Shift-M&gt;
+		    <span style="white-space: nowrap;">&lt;Shift-N&gt;</span>
 		  </div>
 		</div>
@@ -1631,5 +1641,5 @@
 		       src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" />
 		  <div class="drumcontainer" >
-		    &lt;Space-Bar&gt;
+		   <span style="white-space: nowrap;"> &lt;Space-M&gt;</span>
 		  </div>
 		</div>
@@ -1655,10 +1665,181 @@
 	    </div>
 	  </div>
+
+
+	  <div style="position: relative; background-color: white;">
+	    <div style="display:inline-block; width: 150px; height: 200px;">
+	      <form style="position: absolute; top: 60px; left: 10px;">
+
+		<fieldset>
+		  <legend id="clm-legend">Show Chords</legend>
+		  
+		  <div id="clm-div" class="radio-div">
+		    
+		    <div class="radio-label-combo">
+		      <span>
+			<input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode()" value="Maj"
+			       checked="checked"/>
+		      </span>
+		      <label for="clm-maj" class="radio-label">
+			<span>
+			  Major
+			</span>
+		      </label>
+		    </div>
+		    
+		  <div class="radio-label-combo">
+		    <span>
+		      <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode()" value="Maj"/>
+		    </span>
+		    <label for="clm-maj" class="radio-label">
+		      <span>
+			Minor
+		      </span>
+		    </label>
+		  </div>
+		  </div>
+	      </fieldset>
+	      </form>
+	    </div>
+
+	    <div id="mytab" style="display:inline-block; height: 160px; width: 780px;">
+	      <svg class="graph" xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%">
+		<g id="scaled-mytab-group" transform="scale(0.5,0.6)">
+		  <foreignobject id="scaled-mytab" width="2000px" height="300px"><xsl:comment>filler</xsl:comment></foreignobject>
+		</g>
+	      </svg>
+	    </div>
+	  </div>
+
+
 	</div>
 
       </div>
 
+      <div style="position: absolute; top: -300px; background-color: white;">
+	<style>
+	  .chordLineup {
+  	    -webkit-transform-style: preserve-3d;
+	    -moz-transform-style: preserve-3d;
+	    transform-style: preserve-3d;
+	  }
+
+	  .chordLineupBlock {
+	    display: inline-block;
+	  }
+	  
+	  .chordLineupBlockVerticalCenter {
+	    position: relative;
+	    top: 50%;
+	    transform: translataeY(-50%);
+	    -webkit-transform: translataeY(-50%);
+	    -ms-transform: translataeY(-50%);
+	  }
+
+	</style>
+	<div id="offscreen-jtab-chord-lineup">
+
+	  <div id="offscreen-jtab-chord-C" class="chordLineupBlock">
+	    <xsl:comment>filler</xsl:comment>
+	  </div>
+
+	  <div class="chordLineupBlock">
+	    <div id="offscreen-jtab-chord-Db">
+	      <xsl:comment>filler</xsl:comment>
+	    </div>
+	    <div id="offscreen-jtab-chord-Cs">
+	      <xsl:comment>filler</xsl:comment>
+	    </div>
+	  </div>
+	  
+	  <div id="offscreen-jtab-chord-D" class="chordLineupBlock">
+	    <xsl:comment>filler</xsl:comment>
+	  </div>
+
+	  <div class="chordLineupBlock">
+	    <div id="offscreen-jtab-chord-Eb">
+	      <xsl:comment>filler</xsl:comment>
+	    </div>
+	    <div id="offscreen-jtab-chord-Ds">
+	      <xsl:comment>filler</xsl:comment>
+	    </div>
+	  </div>
+	  
+	  <div id="offscreen-jtab-chord-E" class="chordLineupBlock">
+	    <xsl:comment>filler</xsl:comment>
+	  </div>
+	  
+	  <div id="offscreen-jtab-chord-F" class="chordLineupBlock">
+	    <xsl:comment>filler</xsl:comment>
+	  </div>
+	  
+	  <div class="chordLineupBlock">
+	    <div id="offscreen-jtab-chord-Gb">
+	      <xsl:comment>filler</xsl:comment>
+	    </div>
+	    <div id="offscreen-jtab-chord-Fs">
+	      <xsl:comment>filler</xsl:comment>
+	    </div>
+	  </div>
+
+	  <div id="offscreen-jtab-chord-G" class="chordLineupBlock">
+	    <xsl:comment>filler</xsl:comment>
+	  </div>
+	  
+	  <div class="chordLineupBlock">
+	    <div id="offscreen-jtab-chord-Ab">
+	      <xsl:comment>filler</xsl:comment>
+	    </div>
+	    <div id="offscreen-jtab-chord-Gs">
+	      <xsl:comment>filler</xsl:comment>
+	    </div>
+	  </div>
+
+	  <div id="offscreen-jtab-chord-A" class="chordLineupBlock">
+	    <xsl:comment>filler</xsl:comment>
+	  </div>
+	  
+	  <div class="chordLineupBlock">
+	    <div id="offscreen-jtab-chord-Bb">
+	      <xsl:comment>filler</xsl:comment>
+	    </div>
+	    <div id="offscreen-jtab-chord-As">
+	      <xsl:comment>filler</xsl:comment>
+	    </div>
+	  </div>
+
+	  <div id="offscreen-jtab-chord-B" class="chordLineupBlock">
+	    <xsl:comment>filler</xsl:comment>
+	  </div>
+	  
+	</div>
+
+	<gsf:script>
+	  $(document).ready(function() {
+
+	    jtab.render($('#offscreen-jtab-chord-C') ,'C');
+	    jtab.render($('#offscreen-jtab-chord-Cs'),'C#');
+	    jtab.render($('#offscreen-jtab-chord-Db'),'Db');
+	    jtab.render($('#offscreen-jtab-chord-D') ,'D');
+	    jtab.render($('#offscreen-jtab-chord-Ds'),'D#');
+	    jtab.render($('#offscreen-jtab-chord-Eb'),'Eb');
+	    jtab.render($('#offscreen-jtab-chord-F') ,'F');
+	    jtab.render($('#offscreen-jtab-chord-Fs'),'F#');
+	    jtab.render($('#offscreen-jtab-chord-Gb'),'Gb');
+	    jtab.render($('#offscreen-jtab-chord-G') ,'G');
+	    jtab.render($('#offscreen-jtab-chord-Gs'),'G#');
+	    jtab.render($('#offscreen-jtab-chord-Ab'),'Ab');
+	    jtab.render($('#offscreen-jtab-chord-A') ,'A');
+	    jtab.render($('#offscreen-jtab-chord-As'),'A#');
+	    jtab.render($('#offscreen-jtab-chord-Bb'),'Bb');
+	    jtab.render($('#offscreen-jtab-chord-B') ,'B');
+
+	    $('#scaled-mytab').append($('#offscreen-jtab-chord-lineup'));
+
+	  });
+	</gsf:script>
+      </div>
+
     <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
-
 
     </div>
