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 29876)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/etc/collectionConfig.xml	(revision 29877)
@@ -345,4 +345,7 @@
 				<gsf:script src="{$httpCollection}/js/jquery-drums.js" />
 
+				<gsf:style  src="{$httpCollection}/style/jam-guitar.css" />				
+				<gsf:script src="{$httpCollection}/js/jam-guitar.js"/>
+
 
                                 <!-- MIDI.js library -->
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 29876)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js	(revision 29877)
@@ -378,8 +378,8 @@
 
 	    mediaPlayedNotes[String(mediaStartPlayTime)].push( 
-		{ 'midiPitch': playedMidiPitch, 
+		{ 'midiPitch'   : playedMidiPitch, 
 		  'midiNoteOn'  : relativePlayedNoteStartTime,
 		  'midiNoteOff' : relativePlayedNoteEndTime,
-		  'duration': playedDuration,
+		  'duration    ': playedDuration,
 		  'humanReadble': playedNotePitch }
 	    );
@@ -402,5 +402,7 @@
 
 		    MIDI.noteOff(0, playedMidiPitch, 0);
-		    calcMidiNoteInfo();
+		    if (mediaPlaybackMode == "record") {
+			calcMidiNoteInfo();
+		    }
 
 		    visualKeyboard[keyboard[e.keyCode]].style.backgroundColor = '';
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 29876)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js	(revision 29877)
@@ -1,3 +1,6 @@
-// Sample Media Player using HTML5's Media API
+"use strict";
+
+// Based on: 
+//   Sample Media Player using HTML5's Media API
 // 
 // Ian Devlin (c) 2012
@@ -16,9 +19,15 @@
 var progressBar;
 
+var mediaPlaybackMode = null;
+
 var mediaStartPlayTime;
 var mediaStartPauseTime;
 var mediaPlayedNotes;
 
+var recordedNotesArray = null;
+
 function initialiseMediaPlayer() {
+
+    setPlaybackMode();
 
     mediaStartPlayTime  = null;
@@ -54,27 +63,35 @@
     });
 
-	// Add a listener for the play and pause events so the buttons state can be updated
-	mediaPlayer.addEventListener('play', function() {
-		// Change the button to be a pause button
-		changeButtonType(playPauseBtn, 'buttonx2 pause');
-	}, false);
-	mediaPlayer.addEventListener('pause', function() {
-		// Change the button to be a play button
-		changeButtonType(playPauseBtn, 'buttonx2 play');
-	}, false);
+    // Add a listener for the play and pause events so the buttons state can be updated
+    mediaPlayer.addEventListener('play', function() {
+	// Change the button to be a pause button
+	changeButtonType(playPauseBtn, 'buttonx2 pause');
+    }, false);
+    mediaPlayer.addEventListener('pause', function() {
+	// Change the button to be a play button
+	changeButtonType(playPauseBtn, 'buttonx2 play');
+    }, false);
 	
-	// need to work on this one more...how to know it's muted?
-	mediaPlayer.addEventListener('volumechange', function(e) { 
-		// Update the button to be mute/unmute
-		if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute');
-		else changeButtonType(muteBtn, 'button mute');
-	}, false);	
-	mediaPlayer.addEventListener('ended', function() { this.pause(); }, false);	
+    // need to work on this one more...how to know it's muted?
+    mediaPlayer.addEventListener('volumechange', function(e) { 
+	// Update the button to be mute/unmute
+	if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute');
+	else changeButtonType(muteBtn, 'button mute');
+    }, false);	
+
+    mediaPlayer.addEventListener('ended', stopPlayer, false);	
 }
 
 function togglePlayPause() {
-	// If the mediaPlayer is currently paused or has ended
+    // If the mediaPlayer is currently paused or has ended
+    console.log("togglePlayPause()");
+    //console.log("*** mediaPlayer (paused,ended): (" + mediaPlayer.paused + "," + mediaPlayer.ended + ")");
+    //console.log("*** currentTime = " + mediaPlayer.currentTime);
+
 	if (mediaPlayer.paused || mediaPlayer.ended) {
 	    if (mediaStartPlayTime == null) {
+		// Fresh play start
+		console.log("**** mediaPlaybackMode = " + mediaPlaybackMode);
+
 	        mediaStartPlayTime = Date.now();
 		//console.log("*** mediaStartPlayTime=" + mediaStartPlayTime);
@@ -83,4 +100,5 @@
 	    }
 	    else {
+		// Resume playing
 		var mediaPauseBuildup = mediaStartPauseTime - Date.now();
 
@@ -98,5 +116,7 @@
 	// Otherwise it must currently be playing
 	else {
-	    mediaPauseTime = Date.now();
+	    // put into pause state
+
+	    mediaStartPauseTime = Date.now();
 
 	    // Change the button to be a play button
@@ -109,5 +129,5 @@
 }
 
-function pad(n, width, z) {
+function _pad(n, width, z) {
   z = z || '0';
   n = n + '';
@@ -118,12 +138,7 @@
 {
     var int_mins = Math.floor(time / 60);   
-
     var float_secs = time % 60;
-    //var int_secs = Math.floor(float_secs); 
-    
-    //var float_sub_sec = float_secs - int_secs;
-    //var int_sub_sec = float_sub_sec.toFixed(2)
-
-    var padded_secs = pad(float_secs.toFixed(1),4); // (2), 5 for 2 dec place
+
+    var padded_secs = _pad(float_secs.toFixed(1),4); // (2), 5 for 2 dec place
     return int_mins + ":" + padded_secs
 }
@@ -145,9 +160,24 @@
 
 // Stop the current media from playing, and return it to the start position
+
 function stopPlayer() 
 {
+    console.log("stopPlayer()");
     mediaPlayer.pause();
+
+    if (mediaPlaybackMode == "record") {
+	recordedNotesArray = mediaPlayedNotes[String(mediaStartPlayTime)];
+	if (recordedNotesArray.length>0) {
+	    // non-trival data recorded
+	    $('#save-recording-popup').dialog('open');
+	}
+    }
+
+    mediaStartPlayTime = null;
+    mediaStartPauseTime = null;
+
     mediaPlayer.currentTime = 0;
     displayCurrentTime();
+
 }
 
@@ -180,4 +210,7 @@
 	mediaPlayer.play();
 }
+
+
+
 
 // Update the progress bar
@@ -235,4 +268,5 @@
 }
 
+
 // Resets the media player
 function resetPlayer() {
@@ -246,4 +280,74 @@
     displayCurrentTime();
     // Ensure that the play pause button is set as 'play'
-    changeButtonType(playPauseBtn, 'play');
-}
+    changeButtonType(playPauseBtn, 'buttonx2 play');
+}
+
+
+function setPlaybackMode() 
+{
+    //console.log("setPlaybackMode()");
+    mediaPlaybackMode = $('input[name=mpm-radio]:checked', '#mpmForm').val();
+}
+
+
+
+function saveRecording()
+{
+    var valid = true;
+
+    var $save_name_input = $("#save-recording-name");
+    var save_name = $save_name_input.val();
+    
+    if (save_name.match(/^\s*$/)) {
+	valid = false;
+	$save_name_input.addClass( "ui-state-error" );
+    }
+    else {
+	console.log("**** Saving under name '" + save_name +"': " + JSON.stringify(recordedNotesArray));
+
+	var $dialog = $('#save-recording-popup');
+
+	$dialog.dialog( "close" );
+    }
+
+    return valid;
+}
+
+
+$(document).ready(function() {
+    // Setup dialog
+
+    var dialog = $('#save-recording-popup').dialog({
+	width : 500,
+	height: 350,
+	autoOpen: false, // Do not open on page load
+	modal: true,     // Freeze the background behind the overlay
+
+	show: {
+            effect: "blind",
+            duration: 1000
+	},
+	hide: {
+            effect: "blind",
+            duration: 500
+	},
+
+	buttons: {
+            "Save Recording": saveRecording,
+            Cancel: function() {
+		dialog.dialog("close");
+            }
+	},
+	close: function() {
+            form[0].reset();
+            $( "#save-recording-name" ).removeClass( "ui-state-error" );
+	}
+    });
+
+    var form = dialog.find( "form" ).on( "submit", function( event ) {
+	event.preventDefault();
+    });
+ 
+
+});
+
Index: /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/respool-midi.js
===================================================================
--- /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/respool-midi.js	(revision 29876)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/respool-midi.js	(revision 29877)
@@ -151,5 +151,8 @@
 
 //var instrument_name = "lead 1 (square)";
-var instrument_name = "lead 2 (sawtooth)";
+//var instrument_name = "lead 2 (sawtooth)";
+//var instrument_name = "acoustic grand piano";
+//var instrument_name = "distortion guitar";
+var instrument_name = "overdriven guitar";
 
 window.onload = function () {
Index: /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/style/media-player.css
===================================================================
--- /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/style/media-player.css	(revision 29876)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/style/media-player.css	(revision 29877)
@@ -105,4 +105,9 @@
 
 
-
-
+.ui-widget-overlay {
+    height: 100%;
+    width: 100%;
+    opacity: 0.2;
+    filter: Alpha(Opacity=20);
+    background-color: black;
+}
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 29876)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl	(revision 29877)
@@ -1381,5 +1381,5 @@
     <div class="playlist-bar">
       <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
-	Controls
+	Layer Controls: Create, Edit, View
       </div>
 
@@ -1398,7 +1398,22 @@
 	</div>
 -->
+
+         <div id="save-recording-popup" title="Save Recording">
+	   <p>Do you want to name and save this recording?</p>
+ 
+	   <form>
+	     <fieldset>
+	       <label for="name">Name</label>
+	       <input type="text" name="save-recording-name" id="save-recording-name" value="My Recording" class="text ui-widget-content ui-corner-all"/>
+	       
+	       <!-- Allow form submission with keyboard without duplicating the dialog button -->
+	       <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
+	     </fieldset>
+	   </form>
+	 </div>
+
           <div style="color: white;">
 
-	    <form style="width:99%;">
+	    <form id="mpmForm" style="width:99%;">
 	      <fieldset>
 		<legend id="mpm-legend">Video Player Mode</legend>
@@ -1408,5 +1423,5 @@
 		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
 		    <span>
-		      <input type="radio" id="mpm-record" name="mpm-radio" />
+		      <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/>
 		    </span>
 		    <label for="mpm-record" class="radio-label">
@@ -1419,5 +1434,5 @@
 		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
 		    <span>
-		      <input type="radio" id="mpm-neutral" name="mpm-radio" checked="checked"/>
+		      <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/>
 		    </span>
 		    <label for="mpm-neutral" class="radio-label">
@@ -1430,5 +1445,5 @@
 		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
 		    <span>
-		      <input type="radio" id="mpm-game-on" name="mpm-radio" />
+		      <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/>
 		    </span>
 		    <label for="mpm-game-on" class="radio-label">
@@ -1443,5 +1458,5 @@
 	    </form>
 
-	    <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; background: black">
+	    <form style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
 	      <fieldset>
 		<legend id="mpm-legend">Popup Layers</legend>
@@ -1452,11 +1467,17 @@
 		
 		<div style="padding: 8px;">
-		  <button id="mpm-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
+		  <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;">
 		    Merge Selected
 		  </button>
-		  <button id="mpm-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
+		  <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;">
 		    Split Selected
 		  </button>
-		  <button id="mpm-edit-overlay"  style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
+		  <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;">
 		  Edit Selected
 		  </button>
@@ -1561,5 +1582,5 @@
 	    left: 50%;
 	    transform: translateX(-50%) translateY(-50%);
-	    font-size: 150%;
+	    font-size: 110%;
 	    color: #888888;
 	    pointer-events: onone;
@@ -1571,5 +1592,5 @@
 	      <div style="display:inline-block;">
 		<div style="position: relative;">
-		  <img style="position: relative;" width="202" height="204"
+		  <img style="position: relative;" width="148" height="148"
 		       src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" />
 		  <div class="drumcontainer" style="color: #555555">
@@ -1580,6 +1601,6 @@
 	      <div style="display:inline-block;">
 		<div style="position: relative;">
-		  <img style="position: relative;" width="197" height="192" 
-		      src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
+		  <img style="position: relative;" width="148" height="144" 
+		      src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
 		  <div class="drumcontainer" >
 		    &lt;Shift-B&gt;
@@ -1589,6 +1610,6 @@
 	      <div style="display:inline-block;">
 		<div style="position: relative;">
-		  <img style="position: relative;"  width="197" height="192" 
-		       src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
+		  <img style="position: relative;"  width="167" height="163" 
+		       src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
 		  <div class="drumcontainer" >
 		    &lt;Shift-N&gt;
@@ -1605,8 +1626,7 @@
 		</div>
 	      </div>
-	      <br />
 	      <div style="display:inline-block;">
 		<div style="position: relative;">
-		  <img style="position: relative;" width="240" height="234" 
+		  <img style="position: relative;" width="216" height="211" 
 		       src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" />
 		  <div class="drumcontainer" >
@@ -1623,5 +1643,15 @@
 	<div id="guitar-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
           <div style="color: white;">
-	    Guitar area
+	    <div id="jamWrapper">
+	      <div id="jamStage">
+		<xsl:comment><!--jamStage--></xsl:comment>
+	      </div>
+	      <div id="jamPlate">
+		<xsl:comment><!--jamPlate--></xsl:comment>
+	      </div>
+	      <canvas id="jamStrings" width="750px" height="200px">
+		Your browser does not support the Canvas element
+	      </canvas>
+	    </div>
 	  </div>
 	</div>
