Changeset 30093 for main/trunk/model-sites-dev/respooled/collect/popup-video-respooled

Timestamp:

2015-08-04T13:50:35+12:00 (9 years ago)

Author:

davidb

Message:

Development work done in at JCDL

Location:

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled

Files:

• etc/collectionConfig.xml (modified) (1 diff)
• js/audiosynth.view.js (modified) (6 diffs)
• js/game-on.js (modified) (15 diffs)
• js/in-the-groove.js (modified) (2 diffs)
• js/jam-guitar.js (modified) (2 diffs)
• js/jquery-drums.js (modified) (5 diffs)
• js/media-player.js (modified) (8 diffs)
• js/qtip-popups.js (modified) (1 diff)
• js/respool-midi.js (modified) (2 diffs)
• tracks/land-down-under-metadata-en.vtt (modified) (1 diff)
• transform/pages/about.xsl (modified) (2 diffs)
• transform/pages/document.xsl (modified) (17 diffs)

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/etc/collectionConfig.xml

@@ -338 +338 @@
     <gsf:script src="{$httpCollection}/js/qtip-popups.js"/>
 
+    <gsf:script src="{$httpCollection}/js/jquery.panzoom.js"/>
+    
     <gsf:script src="{$httpCollection}/js/key-detection.js"/>
 

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js

@@ -292 +292 @@
 
     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 +307 @@
     }
 
-    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 +321 @@
     if (e.keyCode == 32) { // <space-bar>
         togglePlayPause();
-        //e.preventDefault();
+        e.preventDefault();
         return false;
     }
@@ -438 +438 @@
     }
 
+    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 +464 @@
         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 +515 @@
     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");
     }

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js

@@ -40 +40 @@
     var docStorage = null;
 
+    var site_name  = gs.xsltParams.site_name;
+    var collection = gs.cgiParams["c"];
+
     if (hasLocalStorage) {
 
@@ -55 +58 @@
     }
 
+    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 +141 @@
 }
 
+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 +209 @@
 
 
+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 +323 @@
     go_top_level_group = new goPaper.group("gameOnPaper",[]);
 
+    var docOID = gs.cgiParams.d;
+    
     if (hasLocalStorage) {
 
@@ -173 +330 @@
     //    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 +390 @@
             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 +426 @@
             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 +521 @@
     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 +539 @@
 
     populatePalList(goDocStorage);
+    populatePopList(goDocStorage);
+    
     displayActiveTrackLayers(goDocStorage);
 }
 
+// pal routines
 
 function palDeleteConfirmed()
@@ -359 +553 @@
     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 +563 @@
     delete palTracks[value]; 
     }
+
+    saveDocStorage("palDeleteConfirmed()");    
 }
 
@@ -387 +584 @@
 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 +596 @@
         //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 +627 @@
 }
 
+//
+// 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
+}
+
+
+
+

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js

@@ -42 +42 @@
         var output = e.outputBuffer.getChannelData(c);
         
-        
+/*      
         for (var i = 0; i < bufferSize; i++) {
             if ( ((mediaPlaybackMode == "neutral") || (mediaPlaybackMode == "record"))
@@ -55 +55 @@
             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);

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jam-guitar.js

@@ -239 +239 @@
     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 +265 @@
     if (this._midiPitch>=0) {
         console.log("*** setting strumDuration = 0");
-        MIDI.noteOff(0, this._midiPitch, 0);
+        MIDI.noteOff(guitar_midi_inst_num, this._midiPitch, 0);
     }
     }

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jquery-drums.js

@@ -1 +1 @@
 // 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 +56 @@
     
     $('.drum').mousedown(function() {
+
+    hitDrumStartCurrentTime = mediaPlayer.currentTime;
+    hitDrumMidiPitchReadable = $(this).attr('id');
+    hitDrumMidiPitch = hitDrumMidiPitchReadable.replace(/^drum/,"");
     
     //find the drum hit and play the respective audio
@@ -31 +65 @@
     drum = eval(drum);
     
-    if (drum.ended) {
+    if (drum.ended) {       
         $(this).addClass('hit');
         drum.play();
@@ -40 +74 @@
         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 +87 @@
 
     $('.drum').mouseup(function() {
+    hitDrumEndCurrentTime = mediaPlayer.currentTime;
+    calcDrumMidiNoteInfo();
+    hitDrumStartCurrentTime = null;
+    
     $(this).removeClass('hit');
     });

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js

@@ -47 +47 @@
 
     // 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 +346 @@
         //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 +365 @@
         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 +392 @@
     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 +495 @@
     }
     });
-
+    dialog.parent().css("z-index",999);
+    
     var form = dialog.find( "form" ).on( "submit", function( event ) {
     event.preventDefault();
@@ -450 +529 @@
     }
     });
-
+    delete_dialog.parent().css("z-index",999);
 
     var edit_dialog = $('#edit-recording-popup').dialog({
@@ -479 +558 @@
     }
     });
-
+    edit_dialog.parent().css("z-index",999);
+    
     trackEditor = ace.edit("trackEditor");
     trackEditor.getSession().setMode("ace/mode/json");
@@ -486 +566 @@
     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());
+
+
+
+    
 
 });

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/qtip-popups.js

@@ -6 +6 @@
     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);

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/respool-midi.js

@@ -150 +150 @@
 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 +199 @@
     }
 
+/*  
         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
+    }
     }
         

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/tracks/land-down-under-metadata-en.vtt

@@ -1 +1 @@
 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
 {

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/about.xsl

@@ -63 +63 @@
 <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 +87 @@
 
 
-<!--
-<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>
 

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl

@@ -210 +210 @@
         </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 +227 @@
       </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 +822 @@
                      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 +864 @@
 
         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 +997 @@
       <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 +1423 @@
         Your browser does not support the video tag.
           </video>
+          <gsf:div id="trackBank"/>
 
         </div>
@@ -1502 +1519 @@
 
 
+         <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 +1615 @@
         <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 +1624 @@
             <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 +1644 @@
             <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 +1662 @@
             <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 +1680 @@
 
 
+        
         <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 +1694 @@
             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 +1736 @@
 
     <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 +1749 @@
 
       <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 +1764 @@
 -->
     </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 +1814 @@
           <option value="19">Church Organ</option>
           <option value="24">Acoustic Guitar Nylon</option>
+          <!--
           <option value="30">Distortion Guitar</option>
+          -->
         </select>
           </div>