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 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/etc/collectionConfig.xml	(revision 30093)
@@ -338,4 +338,6 @@
     <gsf:script src="{$httpCollection}/js/qtip-popups.js"/>
 
+    <gsf:script src="{$httpCollection}/js/jquery.panzoom.js"/>
+    
     <gsf:script src="{$httpCollection}/js/key-detection.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 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js	(revision 30093)
@@ -292,5 +292,5 @@
 
     var fnPlayKeyboard = function(e) {
-	console.log("***### fnPlayKeyboard() e=" + e); //JSON.stringify(e));
+	//console.log("***### fnPlayKeyboard() e=" + e); //JSON.stringify(e));
 
 	// check to see if any modal dialogs are open
@@ -307,5 +307,5 @@
 	}
 
-	console.log("**** testing keyboard event key: '" + e.key + "' keycode = " + e.keyCode);
+	//console.log("**** testing keyboard event key: '" + e.key + "' keycode = " + e.keyCode);
 
 	var $focused = $(':focus');
@@ -321,5 +321,5 @@
 	if (e.keyCode == 32) { // <space-bar>
 	    togglePlayPause();
-	    //e.preventDefault();
+	    e.preventDefault();
 	    return false;
 	}
@@ -438,7 +438,9 @@
     }
 
+    var drumKeyDown = { "C": false, "V": false, "B": false, "N": false, "M": false };
+    
     var fnRemoveKeyBinding = function(e) {
 	
-	console.log("**** key up at: " + Date.now())
+	//console.log("**** key up at: " + Date.now())
 	// console.log("*** event e = " + JSON.stringify(e));
 
@@ -462,7 +464,29 @@
 		keysPressed.splice(i, 1);
 		}
-	    }
-	
-	}
+	}
+
+	// See if drum animation should be stopped
+	if (e.keyCode == "C".charCodeAt(0)) {
+	    drumKeyDown["C"] = false;
+	    $('#drum1').trigger("mouseup");
+	}
+	else if (e.keyCode == "V".charCodeAt(0)) {
+	    drumKeyDown["V"] = false;
+	    $('#drum3').trigger("mouseup");
+	}
+	else if (e.keyCode == "B".charCodeAt(0)) {
+	    drumKeyDown["B"] = false;
+	    $('#drum2').trigger("mouseup");
+	}
+	else if (e.keyCode == "N".charCodeAt(0)) {
+	    drumKeyDown["N"] = false;
+	    $('#drum4').trigger("mouseup");
+	}
+	else if (e.keyCode == "M".charCodeAt(0)) {
+	    drumKeyDown["M"] = false;
+	    $('#drum5').trigger("mouseup");
+	}
+	
+    }
 
     var fnPlaySong = function(arr) {
@@ -491,16 +515,21 @@
 	console.log("*** drum pressed keyCode: " + e.keyCode);
 	if (e.keyCode == "C".charCodeAt(0)) {
+	    drumKeyDown["C"] = true;
 	    $('#drum1').trigger("mousedown");
 	}
 	else if (e.keyCode == "V".charCodeAt(0)) {
+	    drumKeyDown["V"] = true;
+	    $('#drum3').trigger("mousedown");
+	}
+	else if (e.keyCode == "B".charCodeAt(0)) {
+	    drumKeyDown["B"] = true;
 	    $('#drum2').trigger("mousedown");
 	}
-	else if (e.keyCode == "B".charCodeAt(0)) {
-	    $('#drum3').trigger("mousedown");
-	}
 	else if (e.keyCode == "N".charCodeAt(0)) {
+	    drumKeyDown["N"] = true;
 	    $('#drum4').trigger("mousedown");
 	}
 	else if (e.keyCode == "M".charCodeAt(0)) {
+	    drumKeyDown["M"] = true;
 	    $('#drum5').trigger("mousedown");
 	}
Index: /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js
===================================================================
--- /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js	(revision 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js	(revision 30093)
@@ -40,4 +40,7 @@
     var docStorage = null;
 
+    var site_name  = gs.xsltParams.site_name;
+    var collection = gs.cgiParams["c"];
+
     if (hasLocalStorage) {
 
@@ -55,5 +58,73 @@
     }
 
+    console.log("docStorage = " + docStorage);
+    //console.log("docOID = " + docOID);
+    //console.log("*** docOID in docStorage = " + (docOID in docStorage));
+    console.log("*** palTracks = " + (JSON.stringify(docStorage.palTracks)));
+    console.log("*** popTracks = " + (JSON.stringify(docStorage.popTracks)));
+    
+    //console.log("*** palTracks.length = " + (Object.keys(docStorage.palTracks).length));
+
+/*
+    
+    //if ((docStorage==null) || !(docOID in docStorage) || (docOID in Storage && !(docStorage[docOID].palTracks.length) )) {
+    if ((docStorage==null) || !(docStorage.palTracks) || (docStorage.palTracks && (Object.keys(docStorage.palTracks).length==0))) {
+	
+
+	console.log("**** Need to retrieve Respooled data from DL");
+
+	if (docStorage==null) {
+	    docStorage = {palTracks:{}, popTracks:{}};
+	}
+	gs.functions.getArchivesMetadata(collection, site_name, docOID,
+					 "docStorage", 0,  function(metadata) {
+					     var metaval_encoded_str = metadata.getValue();
+					     var metaval_str = decodeURIComponent(metaval_encoded_str)
+					     console.log("***!!! metadata = '" + metaval_str + "'");
+					     if (metaval_str != "") {
+						 var metaval = eval("("+metaval_str+")");
+						 console.log("***!!! metadata JSON = " + JSON.stringify(metaval));
+						 docStorage = metaval;
+					     }
+					     else {
+						 docStorage = {palTracks:{}, popTracks:{}};
+					     }
+					     goDocStorage = docStorage;
+					 }
+					);
+	
+    }
+*/
+    
+    //console.log("*** returning docStorage.palTracks " + JSON.stringify(docStorage.palTracks));
+    
     return docStorage;
+}
+
+
+function saveDocStorage(log_prefix)
+{
+    var docOID = gs.cgiParams.d;
+    var site_name = gs.xsltParams.site_name;
+    var collection = gs.cgiParams["c"];
+
+    if (hasLocalStorage) {
+	console.log(log_prefix + ": Saving in Browser localStorage track data for '" + docOID + "'");
+	localStorage.setItem(docOID,JSON.stringify(goDocStorage));
+    }
+
+    /*
+    var goDocStorageStrEncoded = encodeURIComponent(JSON.stringify(goDocStorage));
+
+    console.log(log_prefix+": Away to save metadata to DL: " + goDocStorageStrEncoded);
+
+    gs.functions.setArchivesMetadata(collection, site_name, docOID,
+				     "docStorage", null, goDocStorageStrEncoded, null, "override",
+				     function(response){
+					 console.log("**** saved Respooled metadata to the DL server")
+					 console.log("*** response: " + JSON.stringify(response));
+				     }
+				    );
+*/
 }
 
@@ -70,10 +141,45 @@
 }
 
+function getActiveOverlayLayers(opt_field)
+{
+    var field = opt_field || "name";
+
+    var popActiveLayers = [];
+    $('#popForm input:checked').each(function() {
+        popActiveLayers.push(this[field]);
+    });
+
+    return popActiveLayers;
+}
+
+
+function getPalTracks(docOID) {
+
+    if (!("palTracks" in goDocStorage)) {
+	goDocStorage = {palTracks:{}, popTracks:{}};
+    }
+    
+    return goDocStorage.palTracks;
+    
+}
+
+function getPopTracks(docOID) {
+
+    if (!("popTracks" in goDocStorage)) {
+	goDocStorage = {palTracks:{}, popTracks:{}};
+    }
+    
+    return goDocStorage.popTracks;
+    
+}
+
 function populatePalList(docStorage)
 {
     // populate pal List
+    var docOID = gs.cgiParams.d;
+
     if (hasLocalStorage) {
 
-	var palTracks = docStorage.palTracks || {};
+	var palTracks = getPalTracks(docOID);
 
 	//console.log("*** palTracks = " + JSON.stringify(palTracks));
@@ -103,4 +209,53 @@
 
 
+function populatePopList(docStorage)
+{
+    // populate pop List
+    var docOID = gs.cgiParams.d;
+    var hasPopTracks = false;
+    
+    if (hasLocalStorage) {
+
+	var popTracks = getPopTracks(docOID);
+	
+	//console.log("*** popTracks = " + JSON.stringify(popTracks));
+	var popListKeys = Object.keys(popTracks).sort();
+
+	if (popListKeys.length>0) {
+	    hasPopTracks = true;
+	}
+	for (var i=0; i<popListKeys.length; i++) {
+	    var key = popListKeys[i];
+	    var track = popTracks[key];
+	    var name = key;
+	    var cb_name = name.replace(/[ -]/g,"");
+	    var cb_value = name;
+
+	    var opt_checked = (i==0) ? ' checked="checked"' : "";
+
+	    $('#popList').append('<div id="pop'+cb_name+'"><input type="checkbox" '
+				 + '" name="'+cb_name+'" value="' + cb_value + '"'
+				 + opt_checked + '>' 
+				 + name + '</div>');
+	}
+    }
+
+    if (!hasPopTracks) {
+	// Put in some fake data for now
+	console.log("**** adding baseline Popup Trivia item");
+	
+	$('#popList').append('<input type="checkbox" id="popPopupTrivia"    name="PopupTrivia" value="Popup Trivia" checked="checked"/>Popup Trivia<br />');
+
+	if (hasLocalStorage) {
+	    var popTracks = getPopTracks(docOID);
+	    popTracks["Popup Trivia"] = "";
+	}
+
+	
+	//$('#palList').append('<input type="checkbox" id="palDrumbeatHero" name="DrumbeatHero"  value="Drum-beat Hero" />Drum-beat Hero<br />');
+    }
+}
+
+
 function computeMidiStats(track)
 {
@@ -168,4 +323,6 @@
     go_top_level_group = new goPaper.group("gameOnPaper",[]);
 
+    var docOID = gs.cgiParams.d;
+    
     if (hasLocalStorage) {
 
@@ -173,5 +330,5 @@
 	//    palTracks[save_name] = [ { name: "my recording 1", baseCTime: 123.3, events: [ .... ] } ]
 
-	var palTracks = docStorage.palTracks || {};
+	var palTracks = getPalTracks(docOID);
 
 	var total_duration = mediaPlayer.duration;
@@ -233,15 +390,33 @@
 		    var block_events_len = block_events.length; 
 		    for (var ne=0; ne<block_events_len; ne++) {
-			
+
 			var note_event = block_events[ne];
 			var midi_pitch = note_event.midiPitch;
-
+			
 			var startPercTime = (base_ctime + note_event.startCurrentTime)/total_duration;
+
 			var rx_org = startPercTime * go_paper_x_dim;
-			var ry_org = go_paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing) - midi_y_dim_spacing;
+			var ry_org;
 			
-			var rx_dim = (note_event.duration/1000)/total_duration * go_paper_x_dim;
-			var ry_dim = midi_y_dim_spacing;
+			var rx_dim;
+			var ry_dim;
 			
+			if (note_event.type && (note_event.type=="drum")) {
+			    ry_org = 0;
+			    
+			    rx_dim = 1;
+			    ry_dim = go_paper_y_dim;
+			}
+			else {
+			    var midi_pitch = note_event.midiPitch;
+
+			    //var startPercTime = (base_ctime + note_event.startCurrentTime)/total_duration;
+			    //var rx_org = startPercTime * go_paper_x_dim;
+			    ry_org = go_paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing) - midi_y_dim_spacing;
+			    
+			    rx_dim = (note_event.duration/1000)/total_duration * go_paper_x_dim;
+			    ry_dim = midi_y_dim_spacing;
+			}
+
 			var rect = goPaper.rect(rx_org,ry_org,rx_dim,ry_dim-0.2);
 			//rect.attr({stroke:"none", strokeWidth:0.2, fill:"#2E52A4"});
@@ -251,10 +426,13 @@
 			go_top_level_group.push(rect);
 
-			if (midi_pitch < block_min_midi_pitch) {
-			    block_min_midi_pitch = midi_pitch;
+			if (midi_pitch) {
+			    if (midi_pitch < block_min_midi_pitch) {
+				block_min_midi_pitch = midi_pitch;
+			    }
+			    if (midi_pitch > block_max_midi_pitch) {
+				block_max_midi_pitch = midi_pitch;
+			    }
 			}
-			if (midi_pitch > block_max_midi_pitch) {
-			    block_max_midi_pitch = midi_pitch;
-			}
+
 		    }
 
@@ -343,4 +521,17 @@
     goPaper = Raphael("gameOnPaper",go_paper_x_dim,go_paper_y_dim);
     goPaper.canvas.style.backgroundColor = '#FFFFFF';
+	
+    if (gs.xsltParams.interface_name == "dlfm") {
+	
+	$("#gameOnPaper>svg").panzoom({
+	    $zoomIn: $(".zoom-in"),
+	    $zoomOut: $(".zoom-out"),
+	    $zoomRange: $(".zoom-range"),
+	    $reset: $(".reset")
+	});
+
+	$("#gameOnPaper>svg").panzoom("option", "contain", true );
+
+    }
 
 
@@ -348,7 +539,10 @@
 
     populatePalList(goDocStorage);
+    populatePopList(goDocStorage);
+    
     displayActiveTrackLayers(goDocStorage);
 }
 
+// pal routines
 
 function palDeleteConfirmed()
@@ -359,5 +553,6 @@
     var palActiveLayersValue = getActiveTrackLayers("value");
 
-    var palTracks = goDocStorage.palTracks || {};
+    var docOID = gs.cgiParams.d;
+    var palTracks = getPalTracks(docOID);
 
     for (var i=0; i<palActiveLayersID.length; i++) {
@@ -368,4 +563,6 @@
 	delete palTracks[value]; 
     }
+
+    saveDocStorage("palDeleteConfirmed()");    
 }
 
@@ -387,8 +584,9 @@
 function palSave()
 {
-    var palTracks = goDocStorage.palTracks || {};
+    var docOID = gs.cgiParams.d;
+    var palTracks = getPalTracks(docOID);
 
     var json_edit_str = trackEditor.getSession().getValue();
-    console.log("**** json edit str = " + json_edit_str);
+    console.log("**** palSave() trackEditor.getSession value = " + json_edit_str);
 
     var json_edit = eval("("+json_edit_str+")");
@@ -398,19 +596,17 @@
 	    //console.log("*** key = " + key);
 	    var val = json_edit[key];
-	    console.log("**** Saving under key[ " + key + "]: " + JSON.stringify(val));
+	    console.log("**** Saving under key[" + key + "]: " + JSON.stringify(val));
 	    palTracks[key] = val;	    
 	}
     }
 
-    if (hasLocalStorage) {
-	var docOID = gs.cgiParams.d;
-	console.log("Saving in Browser localStorage track data for '" + docOID + "'");
-	localStorage.setItem(docOID,JSON.stringify(goDocStorage));
-    }
+    saveDocStorage("palSave()");
+    
 }
 
 function palEdit()
 {
-    var palTracks = goDocStorage.palTracks || {};
+    var docOID = gs.cgiParams.d;
+    var palTracks = getPalTracks(docOID);
 
     var palActiveLayers = getActiveTrackLayers("value");
@@ -431,2 +627,106 @@
 }
 
+//
+// Popup Info Overlay routines
+//
+
+
+function popCreate()
+{
+    $('#create-info-popup').dialog('open');
+
+    return false;  // no need to process the event any further
+}
+
+function popDeleteConfirmed()
+{
+    //var popActiveLayers = $('input[type=checkbox]:checked', '#popForm');
+
+    var popActiveLayersID   = getActiveOverlayLayers("name");
+    var popActiveLayersValue = getActiveOverlayLayers("value");
+
+    var docOID = gs.cgiParams.d;
+    var popTracks = getPopTracks(docOID);
+
+    for (var i=0; i<popActiveLayersID.length; i++) {
+	var id = popActiveLayersID[i];
+	$('#pop'+id).remove();
+
+	var value = popActiveLayersValue[i];
+	delete popTracks[value]; 
+    }
+
+    //console.log("***### pop mode, skipping saving for now");
+    saveDocStorage("popDeleteConfirmed()");
+        
+}
+
+
+function popDelete()
+{
+    $('#delete-info-popup').dialog('open');
+
+    return false;  // no need to process the event any further
+}
+
+function popSave()
+{
+    var docOID = gs.cgiParams.d;
+    var popTracks = getPopTracks(docOID);
+
+    var text_edit_str = infoEditor.getSession().getValue();
+    console.log("**** popSave() infoEditor.getSession value = " + text_edit_str);
+
+    var popActiveLayers = getActiveOverlayLayers();
+    //var json_edit = eval("("+json_edit_str+")");
+
+    var key = popActiveLayers[0];
+    //console.log("**** Saving under key[" + key + "]: " + JSON.stringify(val));
+    console.log("**** Saving under key[" + key + "]: " + text_edit_str);
+    popTracks[key] = text_edit_str;
+
+    /*
+    for (var key in json_edit){
+	if (json_edit.hasOwnProperty(key)) {
+	    //console.log("*** key = " + key);
+	    var val = json_edit[key];
+	    console.log("**** Saving under key[" + key + "]: " + JSON.stringify(val));
+	    popTracks[key] = val;	    
+	}
+    }
+    */
+    
+    //console.log("***### pop mode, skipping saving for now");
+    saveDocStorage("popSave()");
+    
+}
+
+
+function popEdit()
+{
+    var docOID = gs.cgiParams.d;
+    var popTracks = getPopTracks(docOID);
+
+    var popActiveLayers = getActiveOverlayLayers("value");
+
+    //var edit_json = {};
+    var edit_text = "";
+  
+    for (var i=0; i<popActiveLayers.length; i++) {
+	var track_name = popActiveLayers[i];
+	//edit_json[track_name] = popTracks[track_name];
+	edit_text += popTracks[track_name];
+    }
+
+    //infoEditor.setValue(JSON.stringify(edit_json,null,'\t'));
+    infoEditor.setValue(edit_text);
+    infoEditor.clearSelection();
+
+    $('#edit-info-popup').dialog('open');
+
+    return false;  // no need to process the event any further
+}
+
+
+
+
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 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js	(revision 30093)
@@ -42,5 +42,5 @@
 		var output = e.outputBuffer.getChannelData(c);
 		
-		
+/*		
 		for (var i = 0; i < bufferSize; i++) {
 		    if ( ((mediaPlaybackMode == "neutral") || (mediaPlaybackMode == "record"))
@@ -55,7 +55,43 @@
 		    prev_input[c] = input[i];
 		}
+*/
+		
+		if ((mediaPlaybackMode == "neutral") || (mediaPlaybackMode == "record")) {
+		    
+
+		    // Apply Graphics Equalizer, and then play the result
+
+		
+		    if ((typeof grapheqL !== "undefined") && (typeof grapheqR !== "undefined")) {
+			if (c==0) {
+			    // left
+			    output.set(grapheqL.process(input));
+			    
+			}
+			else {
+			// right
+			    output.set(grapheqR.process(input));
+			}
+		    }
+		}
+		else {
+
+		    for (var i = 0; i < bufferSize; i++) {
+			if (InTheGroove) {
+			    output[i] = input[i];
+			}
+			else {
+			    // Make sound 'tinny' through simple high-pass filter
+			    output[i] = input[i] - prev_input[c];
+			}
+			
+			prev_input[c] = input[i];
+		    }		    
+		}
+
 	    }
+	   
 	}
-	    
+
 	source.connect(tinnyEffectNode); 
 	tinnyEffectNode.connect(audioCtx.destination);
Index: /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jam-guitar.js
===================================================================
--- /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jam-guitar.js	(revision 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jam-guitar.js	(revision 30093)
@@ -239,5 +239,5 @@
     this._strumDuration = 100;
     if (this._midiPitch>=0) {
-      MIDI.noteOn(0, this._midiPitch, 40);
+      MIDI.noteOn(guitar_midi_inst_num, this._midiPitch, 40);
       console.log("*** Setting Jam guitar strumForce = 5");
     }
@@ -265,5 +265,5 @@
 	if (this._midiPitch>=0) {
 	    console.log("*** setting strumDuration = 0");
-	    MIDI.noteOff(0, this._midiPitch, 0);
+	    MIDI.noteOff(guitar_midi_inst_num, this._midiPitch, 0);
 	}
     }
Index: /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jquery-drums.js
===================================================================
--- /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jquery-drums.js	(revision 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jquery-drums.js	(revision 30093)
@@ -1,4 +1,34 @@
 // Based on:
 //   http://www.theonlytutorials.com/jquery-drum-sets-html5-audio-tag-example/
+
+
+var hitDrumStartCurrentTime = null;
+var hitDrumEndCurrentTime;
+var hitDrumMidiPitch;
+var hitDrumMidiPitchReadable;
+
+function calcDrumMidiNoteInfo() {
+    if (hitDrumStartCurrentTime != null) {
+
+	var hitDrumDuration = hitDrumEndCurrentTime - hitDrumStartCurrentTime;
+	
+	// console.log("**** " + playedNotePitch + " (midi pitch = " + playedMidiPitch+ ") startTime = ", relativePlayStartTime + ", duration = " + playedDuration);
+
+	if (mediaPlayedNotes[String(mediaStartPlayTime)]) {
+	    
+	    mediaPlayedNotes[String(mediaStartPlayTime)].push( 
+		{ 'type'         : "drum",
+		  'midiPitch'    : hitDrumMidiPitch, 
+		  //'midiNoteOn'   : relativePlayedNoteStartTime,
+		  //'midiNoteOff'  : relativePlayedNoteEndTime,
+		  'startCurrentTime' : hitDrumStartCurrentTime,
+		  'duration'     : hitDrumDuration,
+		  'startPercTime': hitDrumStartCurrentTime/mediaPlayer.duration,
+		  'humanReadble' : hitDrumMidiPitchReadable }
+	    );
+	}
+	
+    }
+}
 
 $(document).ready(function() {
@@ -26,4 +56,8 @@
     
     $('.drum').mousedown(function() {
+
+	hitDrumStartCurrentTime = mediaPlayer.currentTime;
+	hitDrumMidiPitchReadable = $(this).attr('id');
+	hitDrumMidiPitch = hitDrumMidiPitchReadable.replace(/^drum/,"");
 	
 	//find the drum hit and play the respective audio
@@ -31,5 +65,5 @@
 	drum = eval(drum);
 	
-	if (drum.ended) {
+	if (drum.ended) {	    
 	    $(this).addClass('hit');
 	    drum.play();
@@ -40,4 +74,11 @@
 		console.log("Error thrown when playing drum sound: " + e);
 	    }
+
+	    // Force finish of previous drum hit
+	    hitDrumEndCurrentTime = mediaPlayer.currentTime;
+	    calcDrumMidiNoteInfo();
+	    hitDrumStartCurrentTime = mediaPlayer.currentTime;
+	    hitDrumEndCurrentTime = null;
+
 	    $(this).addClass('hit');
             drum.play();
@@ -46,4 +87,8 @@
 
     $('.drum').mouseup(function() {
+	hitDrumEndCurrentTime = mediaPlayer.currentTime;
+	calcDrumMidiNoteInfo();
+	hitDrumStartCurrentTime = null;
+	
 	$(this).removeClass('hit');
     });
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 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js	(revision 30093)
@@ -47,6 +47,9 @@
 
 	// Hide the browser's default controls
-	mediaPlayer.controls = false;
-	
+        mediaPlayer.controls = false;
+
+        // Make the default volume a little bit quiter, so instruments can be heard over it
+        mediaPlayer.volume = 0.3
+    
 	// Add a listener for the timeupdate event so we can update the progress bar
 	mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);
@@ -343,5 +346,5 @@
 	    //console.log("*** set up docStorage: " + JSON.stringify(docStorage));
 
-	    var palTracks = docStorage.palTracks;
+	    var palTracks = getPalTracks(docOID);
 	    
 	    // Make timing information relative to ba base value
@@ -362,13 +365,16 @@
 	    palTracks[save_name] = [ { name: save_name + " 1", baseCTime: base_time_sct, events: recordedNotesArray } ]
 
-	    console.log("Storing " + num_rec_notes + " recorded notes as layer '" + save_name +"'");
-	    console.log("**** saved: " + JSON.stringify(palTracks[save_name]));
-
-	    localStorage.setItem(docOID, JSON.stringify(docStorage));
+	    //console.log("Storing " + num_rec_notes + " recorded notes as layer '" + save_name +"'");
+	    //console.log("**** saved: " + JSON.stringify(palTracks[save_name]));
+
+	    //localStorage.setItem(docOID, JSON.stringify(docStorage));
+
 	}
 	else {
-	    console.log("Warning: unable to save '" + save_name +"' as browser does not support LocalStorage");
-	}
-
+	    //console.log("Warning: unable to save '" + save_name +"' as browser does not support LocalStorage");
+	}
+
+	saveDocStorage("saveRecording()");
+		  
 	var cb_name = save_name.replace(/[ -]/g,"");
 	var cb_value = save_name;
@@ -386,4 +392,76 @@
     return valid;
 }
+
+
+function saveNewOverlay()
+{
+    var valid = true;
+
+    var $save_name_input = $("#create-info-name");
+    var save_name = $save_name_input.val();
+    
+    if (save_name.match(/^\s*$/)) {
+	valid = false;
+	$save_name_input.addClass( "ui-state-error" );
+    }
+    else {
+
+	if (hasLocalStorage) {
+	    var docOID = gs.cgiParams.d;
+
+
+	    // Force reset of what has been stored for this item
+	    //localStorage.setItem(docOID, JSON.stringify(null));
+
+	    var docStorage = getDocStorage(docOID);
+
+	    var popTracks = getPopTracks(docOID);
+
+	    var template_webvtt;
+	    template_webvtt = "WEBVTT\n";
+	    template_webvtt += "\n";
+	    template_webvtt += "NOTE Example Popup Info Nugget\n";
+	    template_webvtt += "\n";
+	    template_webvtt += "CueId1\n";
+	    template_webvtt += "00:00.000 --> 00:2.000\n";
+	    template_webvtt += "{\n";
+	    template_webvtt += "\"title\": \"My First Title\",\n";
+	    template_webvtt += "\"text\": \"My first info nugget text\",\n";
+	    template_webvtt += "\"xpos\": \"10px\",\n";
+	    template_webvtt += "\"ypos\": \"30px\"\n";
+	    template_webvtt += "}\n";
+	    template_webvtt += "\n";
+
+	    popTracks[save_name] = [ template_webvtt ]; // Set up new entry, with exemplar webVTT entry
+
+	    //console.log("Storing " + num_rec_notes + " recorded notes as layer '" + save_name +"'");
+	    //console.log("**** saved: " + JSON.stringify(palTracks[save_name]));
+
+	    //localStorage.setItem(docOID, JSON.stringify(docStorage));
+
+	}
+	else {
+	    //console.log("Warning: unable to save '" + save_name +"' as browser does not support LocalStorage");
+	}
+
+	//console.log("***### pop mode, skipping saving for now");
+	saveDocStorage("saveNewOverlay()");
+		  
+	var cb_name = save_name.replace(/[ -]/g,"");
+	var cb_value = save_name;
+	var name     = save_name;
+
+	$('#popList').append('<div id="pop'+cb_name+'"><input type="checkbox" '
+			     + '" name="'+cb_name+'" value="' + cb_value + '"'
+			     + ' checked="checked">' 
+			     + name + '</div>');
+
+	var $dialog = $('#create-info-popup');
+	$dialog.dialog( "close" );
+    }
+
+    return valid;
+}
+
 
 
@@ -417,5 +495,6 @@
 	}
     });
-
+    dialog.parent().css("z-index",999);
+    
     var form = dialog.find( "form" ).on( "submit", function( event ) {
 	event.preventDefault();
@@ -450,5 +529,5 @@
 	}
     });
-
+    delete_dialog.parent().css("z-index",999);
 
     var edit_dialog = $('#edit-recording-popup').dialog({
@@ -479,5 +558,6 @@
 	}
     });
-
+    edit_dialog.parent().css("z-index",999);
+    
     trackEditor = ace.edit("trackEditor");
     trackEditor.getSession().setMode("ace/mode/json");
@@ -486,4 +566,104 @@
     trackEditor.getSession().setUndoManager(new UndoManager());
 
+    //
+    // Pop layer overlays
+    //
+
+    var new_info_dialog = $('#create-info-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: 800
+	},
+	hide: {
+            effect: "blind",
+            duration: 300
+	},
+
+	buttons: {
+            "Create Overlay": saveNewOverlay,
+            Cancel: function() {
+		$(this).dialog("close");
+            }
+	},
+	close: function() {
+            form[0].reset();
+            $( "#create-info-name" ).removeClass( "ui-state-error" );
+	}
+    });
+    new_info_dialog.parent().css("z-index",999);
+
+    var info_delete_dialog = $('#delete-info-popup').dialog({
+	resizable: false,
+	autoOpen: false, 
+	width: 500,
+	height:200,
+	modal: true,
+
+	show: {
+            effect: "blind",
+            duration: 800
+	},
+	hide: {
+            effect: "blind",
+            duration: 300
+	},
+
+	buttons: {
+            "Delete selected items": function() {
+		// call delete
+		popDeleteConfirmed();
+		$( this ).dialog( "close" );
+            },
+            Cancel: function() {
+		$( this ).dialog( "close" );
+            }
+	}
+    });
+    info_delete_dialog.parent().css("z-index",999);
+
+
+    var info_edit_dialog = $('#edit-info-popup').dialog({
+	resizable: true,
+	autoOpen: false, 
+	width: 800,
+	height:600,
+	modal: true,
+
+	show: {
+            effect: "blind",
+            duration: 800
+	},
+	hide: {
+            effect: "blind",
+            duration: 300
+	},
+
+	buttons: {
+            "Save": function() {
+		// call delete
+		popSave();
+		$( this ).dialog( "close" );
+            },
+            Cancel: function() {
+		$( this ).dialog( "close" );
+            }
+	}
+    });
+    info_edit_dialog.parent().css("z-index",999);
+    
+    infoEditor = ace.edit("infoEditor");
+    infoEditor.getSession().setMode("ace/mode/text");
+    infoEditor.getSession().setUseSoftTabs(false);
+    var InfoUndoManager = require("ace/undomanager").UndoManager;
+    infoEditor.getSession().setUndoManager(new UndoManager());
+
+
+
+    
 
 });
Index: /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/qtip-popups.js
===================================================================
--- /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/qtip-popups.js	(revision 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/qtip-popups.js	(revision 30093)
@@ -6,43 +6,55 @@
     var overlay= document.getElementById('overlay');
     var video= document.getElementById('video');
-	
+
     video.addEventListener('timeupdate', function() {
 
+	//var trivia_layer_on = $('input[name=PopupTrivia]:checked', '#popForm').val() || "";
+	var trivia_layer_on = $('input[name=PopupTrivia]:checked', '#popList').val() || "";
+	//var trivia_layer_on = $('input:checked', '#popForm').val() || "";
+
+	console.log("*** trivia_layer_on = " + trivia_layer_on);
 	
-	var trivia_layer_on = $('input[name=PopupTrivia]:checked', '#bubForm').val() || "";
-	if (trivia_layer_on != "PopupTrivia") {
+	if (trivia_layer_on != "Popup Trivia") {
 	    return;
 	}
+
 	// Only get to here if asked for the popup trivia layer
 	//console.log("***#### trivia layer on = " + trivia_layer_on);
+	
+	//var popActiveLayersID   = getActiveOverlayLayers("name");
+	
+	
+	vidTimeStamp = video.currentTime;
 
-	vidTimeStamp = video.currentTime;
-	var textTrack = document.getElementById('bubbles').track;
+	//for (var i=0; i<popActiveLayersID.length; i++) {
+	    //var track_name = popActiveLayersID[i];
+
+	    var textTrack = document.getElementById('bubbles').track;
 		
-	// for each cue
-	if (cueIdxOn>-1) {
-	    // there is a cue presently on
-	    // check if need to turn off cue
-	    if (textTrack.cues[cueIdxOn].endTime<vidTimeStamp) {
-		// turn off
-		hideBubble();
-		console.log("turn off cue:"+cueIdxOn);
-		cueIdxOn = -1;
-	    }
-	}
-	
-	if (cueIdxOn==-1) {
-	    
-	    for (var cueIdx = 0; cueIdx < textTrack.cues.length; cueIdx++) {
-		
-		if (vidTimeStamp>=textTrack.cues[cueIdx].startTime && vidTimeStamp<textTrack.cues[cueIdx].endTime) {
-		    console.log("show cue:"+cueIdx);
-		    // turn on
-		    showBubble(cueIdx);
-		    cueIdxOn = cueIdx;
+	    // for each cue
+	    if (cueIdxOn>-1) {
+		// there is a cue presently on
+		// check if need to turn off cue
+		if (textTrack.cues[cueIdxOn].endTime<vidTimeStamp) {
+		    // turn off
+		    hideBubble();
+		    console.log("turn off cue:"+cueIdxOn);
+		    cueIdxOn = -1;
 		}
 	    }
-	}
-	
+	    
+	    if (cueIdxOn==-1) {
+		
+		for (var cueIdx = 0; cueIdx < textTrack.cues.length; cueIdx++) {
+		    
+		    if (vidTimeStamp>=textTrack.cues[cueIdx].startTime && vidTimeStamp<textTrack.cues[cueIdx].endTime) {
+			console.log("show cue:"+cueIdx);
+			// turn on
+			showBubble(cueIdx);
+			cueIdxOn = cueIdx;
+		    }
+		}
+	    }
+	//}
 	
     }, false);
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 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/respool-midi.js	(revision 30093)
@@ -150,20 +150,30 @@
 var GM_num_to_instrument_array = null;
 
+//MIDI.programChange(0, MIDI.GeneralMIDI.byName["instrument_name"].number);
+//MIDI.programChange(0, MIDI.GM.byName["instrument_name"].number);
+
 //var instrument_name = "lead 1 (square)";
 //var instrument_name = "lead 2 (sawtooth)";
-//var instrument_name = "acoustic grand piano";
+var instrument_name = "acoustic grand piano";
 //var instrument_name = "distortion guitar";
-var instrument_name = "overdriven guitar";
+//var instrument_name = "overdriven guitar";
+
+////var instrument_names = ["acoustic grand piano" , "distortion guitar" ];
+var instrument_names = ["acoustic_grand_piano" , "church_organ", "acoustic_guitar_nylon", "overdriven_guitar" ];
+
+
+var guitar_midi_inst_num = 3;
 
 window.onload = function () {
 
 	MIDI.loadPlugin({
-		//soundfontUrl: "./soundfont/",
-		//soundfontUrl: "./FluidR3_GM/",
+		//soundfontUrl: gs.variables.httpCollection + "/soundfont/",
+		//soundfontUrl: gs.variables.httpCollection + "/FluidR3_GM/",
 	        soundfontUrl: gs.variables.httpCollection + "/soundfont-fluidr3-gm/",
 
 		//instrument: "acoustic_grand_piano",
 		//instrument: "lead_1_square",
-	    instrument: instrument_name.replace(/ /g,"_").replace(/[()]/g,""),
+	    //instrument: instrument_name.replace(/ /g,"_").replace(/[()]/g,""),
+	    instruments: instrument_names,
                 //instrument: "acoustic_bass",
                 //instrument: "voice_oohs",
@@ -189,18 +199,26 @@
 	}
 
+/*	
         var channel = 0; // MIDI allows for 16 channels, 0-15
         // the xylophone is represented as instrument 13 in General MIDI.
-        var instrument_num = GM_instrument_to_num_map[instrument_name];
+	var instrument_num = MIDI.GM.byName[instrument_names[2]].number;
+        //var instrument_num = GM_instrument_to_num_map[instrument_name];
 	console.log("*** instrument name: " + instrument_name + ", instrument num = " + instrument_num);
 
         // middle C (C4) according to General MIDI
-        var note = 60;
-        var velocity = 127; // how hard the note hits, from 0-127
-        var delay = 1.5; // how long to hold the note, in seconds
+        //var note = 60;
+        //var velocity = 127; // how hard the note hits, from 0-127
+        //var delay = 1.5; // how long to hold the note, in seconds
 
         // play the note
-        MIDI.programChange(0, instrument_num); // Load xylophone into Channel 0
-        //MIDI.noteOn(0, note, velocity) // Play middle C on Channel 0
-        //MIDI.noteOff(0, note, delay) // Release the middle C after 0.5 seconds
+        MIDI.programChange(channel, instrument_num);
+*/
+	
+	var i;
+	for (i=0; i<instrument_names.length; i++) {
+	    var instrument_num = MIDI.GM.byName[instrument_names[i]].number;
+	    console.log("*** instrument name: " + instrument_names[i] + ", instrument num = " + instrument_num);
+	    MIDI.programChange(i, instrument_num); // channel, inst_num
+	}
     }
 	    
Index: /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/tracks/land-down-under-metadata-en.vtt
===================================================================
--- /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/tracks/land-down-under-metadata-en.vtt	(revision 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/tracks/land-down-under-metadata-en.vtt	(revision 30093)
@@ -1,15 +1,5 @@
 WEBVTT FILE
 
-Land Down Under
-00:00:40.000 --> 00:00:50.000
-{
-"title":"Land Down Under",
-"text":"Men at Work wrote this song about 'crass European culture being imposed over the natural beauty of Australia.",
-"xpos":"350px",
-"ypos":"250px"
-}
-
-
-Land Down Under
+ZiggyID1
 00:00:20.000 --> 00:00:30.000
 {
Index: /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/about.xsl
===================================================================
--- /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/about.xsl	(revision 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/about.xsl	(revision 30093)
@@ -63,8 +63,17 @@
 <div style="width: 800px; margin-left: auto; margin-right: auto;">
 
+  <xsl:if test="$interface_name='dlfm'">
+    <style>
+      .popbanner {
+        background-color: #DEEDF7;
+	color: #000;
+      } 
+    </style>
+  </xsl:if>
 
+  
   <div class="popbanner">
     <div class="poptitle">
-      Pop-Up Videos Respooled
+      Popup Videos Respooled
     </div>
     <div class="popbannersubtext">
@@ -78,122 +87,59 @@
 
 
-<!--
-<div style="background-color: #DD3611; color: white; padding: 4pt; margin-bottom: 6pt;">
-<table>
+<xsl:choose>
+  <xsl:when test="$interface_name='dlfm'">
+    <p class="about">
+      Welcome to the Digitial Library for Musicology version of the
+      <i>Popup Videos Respooled</i> website.  This is a project that
+      repurposes the <a
+      href="/greenstone3/respooled-library/collection/popup-video-respooled/page/about">original
+      Respooled project</a> (designed for a bit of fun), and recasts
+      it with an interface and functionality more suitable for
+      supporting musicological study.
+    </p>
+  </xsl:when>
+  <xsl:otherwise>
+    <p class="about">
+      Welcome to <i>Popup Videos Respooled</i>, a project that rekindles the
+      ideas present in the popular music video TV show <i>Pop Up Videos</i>,
+      a Music TV format devised in the late 1990s that embellishes the shown
+      content with <i>info nuggets</i> that popup as bubbles and then
+      disappear, as a music video plays.  Through this website we have
+      updated and extended the concept, using the open source <a
+      href="http://www.greenstone.org/greenstone3">Greenstone 3 Digital
+      Library Software</a> system as a way to organize the set of videos
+      contained in the site.  The popup information is collated and
+      displayed as metadata.  We have also introduced a gamification element
+      to the site, where users can play along with a song using a range of
+      virtual musical instruments: piano, drum-kit and guitar.
+    </p>
+  </xsl:otherwise>
+</xsl:choose>
 
-  <tr>
-    <td>
-       <img src="{$httpPath}/images/firefox-128.png" />
-    </td>
-    <td>
-	<p class="about">
-	  <i><font size="+2">
-	    An experiment with Firefox's Advanced
-	    Audio Processing Extension ...
-	  </font></i>
-	</p>
+<p class="about">
+  Use the search box above to search for content in the digital library, or else
+  click on the Titles, Artists, or Albums tabs to browser the collection
+</p>
 
-	<p class="about">
-	  <i><font size="+2">
-... featuring a mash-up of 
-<a class="mashup" href="http://www.greenstone.org" target="_blank">Greenstone</a>,
-<a class="mashup" href="http://www.omras2.org/audioDB" target="_blank">AudioDB</a>, and
-<a class="mashup" href="http://seasr.org/meandre/" target="_blank">Meandre</a>.
-	  </font></i>
-	</p>
+<xsl:if test="$interface_name='respooled'">
+  <p class="about">
+    You might also be interested in the <a
+    href="/greenstone3/dlfm-library/collection/popup-video-respooled/page/about">alternative
+    interface</a> to this content, developed for
+    supporting musicological study.
+  </p>
+</xsl:if>
 
 
-          <div id="bd-version" style="display:none;" class="about">
-	    <p>
-	      <img src="{$httpPath}/images/warning-icon.png" />
-	        Version of Firefox detected:
-	          <script type="text/javascript">
-	            document.write(BrowserDetect.version);
-	          </script>
-	    </p>
-	    <p>
-            You need to upgrade to a more recent version of Firefox 
-	        (v4.0 or greater) to access all the audio features of 
-	        this demonstration.
-	    </p>
-          </div>
-
-          <div id="bd-browser" style="display:none;" class="about">
-
-	    <p>
-	      <img src="{$httpPath}/images/warning-icon.png" />
-Browser detected:
-	      <script type="text/javascript">
-	        document.write(BrowserDetect.browser);
-	      </script>
- 	    </p>
-            <p>You need to access this web-site using Firefox 
-	        (v4.0 or greater) to access all the audio features provided.
-	    </p>
-          </div>
-
-
-
-
-  <script>
-    <xsl:text disable-output-escaping="yes">
-
-if (BrowserDetect.browser == "Firefox") {
-  if (BrowserDetect.version &lt; 4) {
-    document.getElementById("bd-version").style.display="block";
-
-  }
-}
-else {
-  document.getElementById("bd-browser").style.display="block";
-
-}
-      </xsl:text>
-    </script>
-
-
-
-
-    </td>
-  </tr>
-</table>
-</div>
--->
-
-<p class="about">A music DL collection that explores what is possible with only client-side processing.
-
-
-<style>
-  li { padding-bottom: 10px; }
-
-</style>
-
-
-<ol>
-
-  <li>
-    <i>Client-side workflows:</i> the client-side Javascript
-    processing code is refactored to follow the same methodology as
-    Meandre components.
-  </li>
-
-  <li>
-    <i>Visualization:</i> the
-    Pre-computed self-similarity heat-maps are dropped from the
-    collection building process in preference for the same information
-    being computed through Javascript running in the user's web
-    browser.
-  </li>
-
-
-  <li>
-    <i>Annotation:</i> ...
-
-  </li>
-</ol>
-
-</p>
-
-
+<xsl:choose>
+  <xsl:when test="/page/pageRequest/userInformation/@username">
+      <p class="about">
+	To incorpoate new videos into the collection, you need to
+	have the <a href="/greenstone3/Popup_Videos_Respooled.user.js">RespoolMe!</a> User Script installed in your browser
+      </p>
+	
+  </xsl:when>
+</xsl:choose>
+  
 </div>
 
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 30092)
+++ /main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl	(revision 30093)
@@ -210,9 +210,15 @@
 	    </td>
 	  </tr>
+
 	  
-	  <tr>
-	    <td>Album Title</td>
-	    <td><gsf:metadata name="dc.Title.albumtitle"/></td>
-	  </tr>
+          <gsf:switch>
+            <gsf:metadata name='dc.Title.albumtitle'/>
+            <gsf:when test='exists'>
+              <tr>
+                <td>Album Title</td>
+                <td><gsf:metadata name="dc.Title.albumtitle"/></td>
+              </tr>
+            </gsf:when>
+          </gsf:switch>
 	  
 	  <tr>
@@ -221,8 +227,14 @@
 	  </tr>
 
-	  <tr>
-	    <td>Released</td>
-	    <td><gsf:metadata name="dc.Coverage"/></td>
-	  </tr>
+	  <gsf:switch>
+            <gsf:metadata name='dc.Coverage'/>
+            <gsf:when test='exists'>
+              <tr>
+                <td>Released</td>
+                <td><gsf:metadata name="dc.Coverage"/></td>
+              </tr>
+            </gsf:when>
+          </gsf:switch>
+
 	  
 <!--
@@ -810,7 +822,7 @@
 	                 slide: function() { changeMaxFreq(grapheqR,"R") } };
 
-        var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1, 
+        var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 0.5, 
 	                 slide: function() { changeBandsPerOctave(grapheqL,"L")} };
-        var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1, 
+        var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 0.5, 
 	                 slide: function() { changeBandsPerOctave(grapheqR,"R")} };
 
@@ -852,4 +864,8 @@
 
 	    var numSliders = grapheq.filters.length;
+	    if (numSliders<8) {
+	       numSliders=8; // Window can't go any smaller than this, due to length of text in title-bar
+	    }
+	    
             var offset = (35 * numSliders) + 12;
 	    if (side == "L") {
@@ -981,5 +997,5 @@
       <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
 	
-      <table class="inner-control"> 
+      <table class="inner-control" style="float: right;"> 
 	<tr id="bandSlidersL">
 	</tr>
@@ -1407,4 +1423,5 @@
 		Your browser does not support the video tag.
 	      </video>
+	      <gsf:div id="trackBank"/>
 
 	    </div>
@@ -1502,41 +1519,91 @@
 
 
+         <div id="create-info-popup" title="Create Overlay">
+	   <p>Do you want create a new named overlay?</p>
+ 
+	   <form>
+	     <fieldset>
+	       <label for="name">Name</label>
+	       <input type="text" 
+		      name="save-info-name" id="create-info-name" value="My Overlay" 
+		      class="text ui-widget-content ui-corner-all"/>	       
+	     </fieldset>
+
+	       <!-- Allow form submission with keyboard without duplicating the dialog button -->
+	       <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
+
+	   </form>
+	 </div>
+
+         <div id="delete-info-popup" title="Delete Overlay">
+	   <p>Are you sure you want to delete the selected overlays?</p>
+ 	 </div>
+
+	 <div id="edit-info-popup" title="Edit Overlays">
+	   <style>
+	     #infoEditor {
+	       position: absolute;
+	       top: 0; right: 0; bottom: 0; left: 0;
+	     }
+	   </style>
+	   <div id="infoEditor"><xsl:comment>Overlay Editor Area</xsl:comment></div>
+ 	 </div>
+
+
           <div style="color: white;">
 
-	    <form id="bubForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
+	    <form id="popForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
 	      <fieldset>
 		<legend id="mpm-legend">Popup Layers</legend>
-		<input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br />
+		<div id="popList"><xsl:comment>pop (popup overlay) list</xsl:comment></div>
+
+
+<!--
+		<input type="checkbox" name="PopupTrivia" value="Popup Trivia" />Popup Trivia<br />
 		<input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br />
 		<input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br />
 		<input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br />
+		-->
 		
+
+		<xsl:choose>
+		  <xsl:when test="/page/pageRequest/userInformation/@username">
+
 		<div style="padding: 8px;">
 		  <button id="mpm-new-overlay" 
 			  classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
-			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
+			  onclick="return popCreate()">
 		    New Layer
 		  </button>
 		  <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:#CCC; width:19%; text-align: center; margin-right: 8px;">
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
+			  onclick="return false;">
 		    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:#CCC; width:19%; text-align: center; margin-right: 8px;">
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
+			  onclick="return false;">
 		    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:#CCC; width:19%; text-align: center; margin-right: 8px;">
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
+			  onclick="return popEdit()">
 		  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:#CCC; width:19%; text-align: center;">
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
+			  onclick="return popDelete()">
 		  Delete Selected
 		  </button>
 		</div>
+
+		  </xsl:when>
+		</xsl:choose>
+		
 	      </fieldset>
 	    </form>
@@ -1548,4 +1615,7 @@
 		<div id="mpm-div" class="radio-div">
 
+		  <xsl:choose>
+		    <xsl:when test="/page/pageRequest/userInformation/@username">
+				    
 		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
 		    <span>
@@ -1554,9 +1624,18 @@
 		    <label for="mpm-record" class="radio-label">
 		      <span style="color: red;" title="The notes/beat you play on the instruments get recorded, and form a new layer">
-			Lay down new track
+			<xsl:choose>
+			  <xsl:when test="$interface_name='dlfm'">
+			    Record
+			  </xsl:when>
+			  <xsl:otherwise>
+			    Lay down new track
+			  </xsl:otherwise>
+			</xsl:choose>
 		      </span>
 		    </label>
 		  </div>
-
+		    </xsl:when>
+		  </xsl:choose>
+		  
 		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
 		    <span>
@@ -1565,5 +1644,12 @@
 		    <label for="mpm-neutral" class="radio-label">
 		      <span style="color: orange;" title="Sit back and relax listening to the video">
-			Put into Neutral
+			<xsl:choose>
+			  <xsl:when test="$interface_name='dlfm'">
+			    Inactive
+			  </xsl:when>
+			  <xsl:otherwise>
+			    Put into Neutral
+			  </xsl:otherwise>
+			</xsl:choose>
 		      </span>
 		    </label>
@@ -1576,5 +1662,13 @@
 		    <label for="mpm-game-on" class="radio-label">
 		      <span style="color: green;" title="When you play the video, try to play one of the instruments below to match the notes in the chosen layers on display.  Get it right, and a rich rendition of the pop song is played, otherwise it sounds quite and tinny">
-			Game on!
+
+			<xsl:choose>
+			  <xsl:when test="$interface_name='dlfm'">
+			    Play along
+			  </xsl:when>
+			  <xsl:otherwise>
+			    Game on!
+			  </xsl:otherwise>
+			</xsl:choose>
 		      </span>
 		    </label>
@@ -1586,8 +1680,11 @@
 
 
+		
 	    <form id="palForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px; ">
 	      <fieldset>
 		<legend id="pal-legend">Play Along Layers: Game On!</legend>
 		<div id="palList"><xsl:comment>play along list</xsl:comment></div>
+
+
 		
 		<div style="padding: 8px;">
@@ -1597,27 +1694,37 @@
 		    Display Selected
 		  </button>
-		  <button id="pal-merge-overlay"   
-			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;">
-		    Merge Selected
-		  </button>
-		  <button id="pal-split-overlay"   
-			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;">
-		    Split Selected
-		  </button>
-		  <button id="pal-edit-overlay"    
-			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
-			  onclick="return palEdit()">
-		  Edit Selected
-		  </button>
-		  <button id="pal-delete-overlay"  
-			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
-			  onclick="return palDelete()">
-		  Delete Selected
-		  </button>
+		  <xsl:choose>
+		    <xsl:when test="/page/pageRequest/userInformation/@username">
+
+		      <button id="pal-merge-overlay"   
+			      style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
+			      onclick="return false;">
+			Merge Selected
+		      </button>
+		      <button id="pal-split-overlay"   
+			      style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
+			      onclick="return false;">
+			Split Selected
+		      </button>
+		      <button id="pal-edit-overlay"    
+			      style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
+			      onclick="return palEdit()">
+			Edit Selected
+		      </button>
+		      <button id="pal-delete-overlay"  
+			      style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
+			      onclick="return palDelete()">
+			Delete Selected
+		      </button>
+		    </xsl:when>
+		  </xsl:choose>
+		  
 		</div>
+
+
 	      </fieldset>
 	    </form>
 
-
+	    
 	  </div>
 
@@ -1629,5 +1736,5 @@
 
     <div class="analysis-bar">
-      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
+      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;  z-index: 4; position: relative;">
 
 	<xsl:choose>
@@ -1642,7 +1749,8 @@
 
       <div id="analysis-area" class="documenttext" 
-	   style="display: none; position: absolute: left: 0px; top: 0px;">
+	   styleXX="display: none; position: absolute: left: 0px; top: 0px;"
+	   style="display: none; left: 0px; top: 0px; position: relative; z-index: 1;">
 	<div style="width:97.7%; height: 500px; margin: 6px; background-colorXX: white">
-	  <div id="gameOnPaper" width="100%" height="445"><xsl:comment>filler</xsl:comment></div>
+	  <div id="gameOnPaper" width="100%" height="445" style="position: absolute; top: 50px; "><xsl:comment>filler</xsl:comment></div>
 <!--
 	  <svg id="gameOnPaper" xmlns="http://www.w3.org/2000/svg" version="1.1"
@@ -1656,5 +1764,15 @@
 -->
 	</div>
-	  
+
+	<xsl:if test="$interface_name='dlfm'">
+
+	  <div style="padding: 15px; padding-top: 0px;">
+	    <button class="zoom-in">Zoom In</button>
+	    <button class="zoom-out">Zoom Out</button>
+	    <input type="range" class="zoom-range" />
+	    <button class="reset">Reset</button>
+	  </div>
+	</xsl:if>
+	
       </div>
     </div>
@@ -1696,5 +1814,7 @@
 		  <option value="19">Church Organ</option>
 		  <option value="24">Acoustic Guitar Nylon</option>
+		  <!--
 		  <option value="30">Distortion Guitar</option>
+		  -->
 		</select>
 	      </div>
