Changeset 37588

Timestamp:

2023-03-28T16:17:01+13:00 (13 months ago)

Author:

davidb

Message:

refinement and expansion of the audio diarization editor

File:

• main/trunk/greenstone3/web/interfaces/default/js/utility_scripts.js (modified) (76 diffs)

main/trunk/greenstone3/web/interfaces/default/js/utility_scripts.js

@@ -293 +293 @@
 var wavesurfer;
 
+/**
+ * @param audio input audio file
+ * @param sectionData diarization data (.csv)
+ */
 function loadAudio(audio, sectionData) {
+   const inputFile = sectionData;
+   const mod_meta_base_url = gs.xsltParams.library_name + "?a=g&rt=r&ro=0&s=ModifyMetadata&s1.collection=" + gs.cgiParams.c + "&s1.site=" + gs.xsltParams.site_name + "&s1.d=" + gs.cgiParams.d;
+   const interface_bootstrap_images = "interfaces/" + gs.xsltParams.interface_name + "/images/bootstrap/"; // path to toolbar images
+
    let editMode = false;
    let currentRegion = {speaker: '', start: '', end: ''};
    let currentRegions = [];
 
-   // let speakerObjects = [];
-   // let tempSpeakerObjects = [];
-   // let uniqueSpeakers;
-   const inputFile = sectionData;
    let itemType;
 
    let dualMode = false;
    let secondaryLoaded = false;
+   let selectedVersions = ['current'];
 
    let waveformCursorX = 0;
@@ -322 +327 @@
    let isZooming;
 
+   let canvasImages = {}; // stores canvas images of each version for fast loading from cache
+
    let accentColour = "#66d640";
    // let accentColour = "#F8C537";
@@ -328 +335 @@
    let regionColourSet = [];
 
+
    let waveformContainer = document.getElementById("waveform");
+   let waveformSpinner = document.getElementById('waveform-blocker');
+   let loader = document.getElementById('waveform-loader');
+   let initialLoad = true;
    
    wavesurfer = WaveSurfer.create({ // wavesurfer options
+      autoCenterImmediately: true,
       container: waveformContainer,
-      backend: "MediaElement",
-      backgroundColor: "rgb(40, 54, 58)",
-      // backgroundColor: "rgb(24, 36, 39)",
+      backend: "WebAudio",
+      // backgroundColor: "rgb(40, 54, 58)",
+      backgroundColor: "rgb(29, 43, 47)",
       waveColor: "white",
       progressColor: accentColour,
       // progressColor: "grey",
-      // barWidth: 2,
-      barHeight: 1.2,
+      // barWidth: 1,
+      // barHeight: 1.2,
       // barGap: 2,
       // barRadius: 1,
+      height: 140,
       cursorColor: 'black',
-      cursorWidth: 2,
-      normalize: true, // normalizes by maximum peak
+      // maxCanvasWidth: 32000,
+      minPxPerSec: 15, // default 20
+      partialRender: true, // use the PeakCache to improve rendering speed of large waveforms
+      pixelRatio: 1, // 1 results in faster rendering
+      scrollParent: true,
       plugins: [
          WaveSurfer.regions.create({
@@ -356 +372 @@
             secondaryFontColor: "white",
             notchPercentHeight: "0",
-            fontSize: "12"
+            fontSize: "12",
+            // zoomDebounce: 30,
+            fontFamily: "Courier New"
          }),
          WaveSurfer.cursor.create({
@@ -372 +390 @@
    });
 
-   wavesurfer.load(audio);
-
-   // wavesurfer events
-
-   wavesurfer.on('region-click', handleRegionClick);
-
-   function handleRegionClick(region, e) { 
-      contextMenu.classList.remove('visible');
-      e.stopPropagation();
-      if (!editMode) { // play region audio on click
-         wavesurfer.play(region.start); // plays from start of region
-      } else { // select or deselect current region
-         if (region.element.classList.contains("region-top")) {
-            currSpeakerSet = primarySet;
-            swapCarets(true);
-         } else if (region.element.classList.contains("region-bottom")) {
-            currSpeakerSet = secondarySet;
-            swapCarets(false);
-         }
-         prevUndoState = "";
-
-         if (!e.ctrlKey && !e.shiftKey) {
-            currentRegions = [];
-            if (getCurrentRegionIndex() != -1 && isCurrentRegion(region)) {
-               // removeCurrentRegion(); // deselect current region on click
-            } else {
-               currentRegion = region;
-               currentRegion.speaker = currentRegion.attributes.label.innerText;
-               region.play(); // start and stop to move play cursor to beginning of region
-               wavesurfer.playPause();
-            }
-         } else if (e.ctrlKey) { // control was held during click
-            if (currentRegions.length == 0 && isCurrentRegion(region)) {
-               removeCurrentRegion();
-            } else if (getCurrentRegionIndex() != -1 && isInCurrentRegions(region)) {
-               const removeIndex = getIndexInCurrentRegions(region);
-               if (removeIndex != -1) currentRegions.splice(removeIndex, 1);
-               if (currentRegions.length > 0 && isCurrentRegion(region)) { // change current region if removed
-                  currentRegion = currentRegions[0];
-               }
-            } else {
-               if (currentRegions.length < 1) currentRegions.push(currentRegion);
-               if (getIndexInCurrentRegions(region) == -1) currentRegions.push(region); // add if it doesn't already exist
-               currentRegion = region;
-               currentRegion.speaker = currentRegion.attributes.label.innerText;
-               region.play();
-               wavesurfer.playPause();
-            }
-            if (currentRegions.length == 1)  currentRegions = []; // clear selected regions if there is only one
-         } else if (e.shiftKey) { // shift was held during click
-            clearChapterSearch();
-            if (getCurrentRegionIndex() != -1 && getIndexOfRegion(region) != -1) {
-               if (currentRegions && currentRegions.length > 0) {
-                  if (Math.max(...getCurrentRegionsIndexes()) < getIndexOfRegion(region)) { // shifting forwards / down
-                     currentRegions = currSpeakerSet.tempSpeakerObjects.slice(Math.min(...getCurrentRegionsIndexes()), getIndexOfRegion(region)+1);
-                  } else { // shifting backwards / up
-                     currentRegions = currSpeakerSet.tempSpeakerObjects.slice(getIndexOfRegion(region), Math.max(...getCurrentRegionsIndexes())+1);
-                  }
-               } else {
-                  if (getCurrentRegionIndex() < getIndexOfRegion(region)) { // shifting forwards / down
-                     currentRegions = currSpeakerSet.tempSpeakerObjects.slice(getCurrentRegionIndex(), getIndexOfRegion(region)+1);
-                  } else { // shifting backwards / up
-                     currentRegions = currSpeakerSet.tempSpeakerObjects.slice(getIndexOfRegion(region), getCurrentRegionIndex()+1);
-                  }
-               }
-            }
-         }
-         if (changeAllCheckbox.checked) { currentRegions = getRegionsWithSpeaker(currentRegion.speaker) } 
-         reloadRegionsAndChapters();
-      }
-   }
-
-   function getIndexInCurrentRegions(region) {
-      for (const reg of currentRegions) {
-         const regSpeaker = reg.attributes ? reg.attributes.label.innerText : reg.speaker;
-         if (reg.start == region.start && reg.end == region.end && regSpeaker == region.attributes.label.innerText) {
-            return currentRegions.indexOf(reg);
-         }
-      }
-      return -1;
-   }
-
-   function getIndexOfRegion(region) {
-      for (const reg of currSpeakerSet.tempSpeakerObjects) {
-         if (reg.start == region.start && reg.end == region.end && reg.speaker == region.attributes.label.innerText) {
-            return currSpeakerSet.tempSpeakerObjects.indexOf(reg);
-         }
-      }
-      return -1;
-   }
-
-   wavesurfer.on('region-mouseenter', function(region) { // region hover effects
-      if (!mouseDown) {
-         handleRegionColours(region, true); 
-         setHoverSpeaker(region.element.style.left, region.attributes.label.innerText);
-         if (!isInCurrentRegions(region)) {
-            removeRegionBounds();
-            drawRegionBounds(region, wave.scrollLeft, "black");
-         }
-         if (isCurrentRegion(region) && editMode) drawRegionBounds(region, wave.scrollLeft, "FireBrick");
-      }
-   });
-
-   function setHoverSpeaker(offset, name) {
-      hoverSpeaker.innerHTML = name;  
-      let newOffset = parseInt(offset.slice(0, -2)) - wave.scrollLeft;
-      // if (newOffset < 0) newOffset = 0;
-      hoverSpeaker.style.marginLeft = newOffset + "px";
-   }
-
-   wavesurfer.on('region-mouseleave', function(region) { 
-      hoverSpeaker.innerHTML = "";
-      if (!mouseDown) {
-         if (!(wavesurfer.getCurrentTime() <= region.end && wavesurfer.getCurrentTime() >= region.start)) handleRegionColours(region, false); 
-         if (!editMode) hoverSpeaker.innerHTML = "";
-         removeRegionBounds();
-         if (currentRegion.speaker && getCurrentRegionIndex() != -1) { 
-            setHoverSpeaker(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left, currentRegion.speaker);
-            drawCurrentRegionBounds();
-         } 
-      }
-   });
-   wavesurfer.on('region-in', function(region) { 
-      // handleRegionColours(region, true); 
-      if (itemType == "chapter" && Array.from(chapters.children)[getIndexOfRegion(region)]) {
-         Array.from(chapters.children)[getIndexOfRegion(region)].scrollIntoView({  
-            behavior: "smooth",
-            block: "nearest"
-         });
-      }
-   });
-   wavesurfer.on('region-out', function(region) { handleRegionColours(region, false) });
-   wavesurfer.on('region-update-end', handleRegionEdit); // end of click-drag event
-   wavesurfer.on('region-updated', handleRegionSnap);
-
-   let loader = document.createElement("span"); // loading audio element
-   loader.innerHTML = "Loading audio";
-   loader.id = "waveform-loader";
-   document.querySelector("#waveform wave").prepend(loader);
-
-   wavesurfer.on('waveform-ready', function() { // retrieve regions once waveforms have loaded
-      if (inputFile.endsWith("csv")) { // diarization if csv
-         itemType = "chapter";
-         if (localStorage.getItem('undoStates') && localStorage.getItem('undoLevel')) {
-            console.log('-- Loading regions from localStorage --');
-            undoStates = JSON.parse(localStorage.getItem('undoStates'));
-            undoLevel = JSON.parse(localStorage.getItem('undoLevel'));
-            primarySet.tempSpeakerObjects = undoStates[undoLevel].state;
-            primarySet.uniqueSpeakers = [];
-            for (const item of primarySet.tempSpeakerObjects) {
-               if (!primarySet.uniqueSpeakers.includes(item.speaker)) primarySet.uniqueSpeakers.push(item.speaker);
-            }
-            populateChapters(primarySet);
-            if (undoStates[undoLevel].secState && undoStates[undoLevel].secState.length > 0) {
-               secondarySet.tempSpeakerObjects = undoStates[undoLevel].secState;
-               secondarySet.uniqueSpeakers = [];
-               for (const item of secondarySet.tempSpeakerObjects) {
-                  if (!secondarySet.uniqueSpeakers.includes(item.speaker)) secondarySet.uniqueSpeakers.push(item.speaker);
-               }
-               secondaryLoaded = true;
-               // editButton.click(); // open edit panel and enable dual mode if secondary set was previously altered
-               // dualModeCheckbox.checked = true;
-               // dualModeChanged(true);
-            }
-            updateRegionEditPanel(); 
-         } else {
-            loadCSVFile(inputFile, ["speaker", "start", "end"], primarySet);
-            dualModeCheckbox.checked = true;
-            dualModeChanged(true);
-            
-            setTimeout(()=>{
-               dualModeCheckbox.checked = false;
-               dualModeChanged(true);
-            }, 150)
-         }
-      } else if (inputFile.endsWith("json")) { // transcription if json
-         itemType = "word";
-         loadJSONFile(inputFile);
-      } else {                      
-         console.log("Filetype of " + inputFile + " not supported.")
-      }
-      
-      loader.remove(); // remove load text
-      chapters.style.cursor = "default"; // remove load cursor
-      wave.className = "audio-scroll";
-      drawVersionNames(); // draw version names if editPanel is expanded
-   });
-   
-   function downloadURI(loc, name) {
-      let link = document.createElement("a");
-      link.download = name;
-      link.href = loc;
-      link.click();
-   }
-
    // toolbar elements & event handlers
    const audioContainer = document.getElementById("audioContainer");
    const dualModeCheckbox = document.getElementById("dual-mode-checkbox");
    const wave = document.getElementsByTagName("wave")[0];
+   const caretContainer = document.getElementById("caret-container");
    const primaryCaret = document.getElementById("primary-caret");
    const secondaryCaret = document.getElementById("secondary-caret");
@@ -602 +426 @@
    const hoverSpeaker = document.getElementById("hover-speaker");
    const contextMenu = document.getElementById("context-menu");
-   const contextDelete = document.getElementById("context-menu-delete");
    const contextReplace = document.getElementById("context-menu-replace");
    const contextOverdub = document.getElementById("context-menu-overdub");
-   // const contextCopy = document.getElementById("context-menu-copy");
-   const contextSave = document.getElementById("context-menu-save");
-   const dualModeMenuButton = document.getElementById("dual-mode-menu-button");
-   const dualModeMenu = document.getElementById("dual-mode-menu");
+   const contextLock = document.getElementById("context-menu-lock");
+   const contextDelete = document.getElementById("context-menu-delete");
+   const timelineMenu = document.getElementById("timeline-menu");
+   const timelineMenuButton = document.getElementById("timeline-menu-button");
+   const timelineMenuHide = document.getElementById("timeline-menu-hide");
+   const timelineMenuDualMode = document.getElementById("timeline-menu-dualmode");
+   const timelineMenuRegionConflict = document.getElementById("timeline-menu-region");
+   const timelineMenuSpeakerConflict = document.getElementById("timeline-menu-speaker");
+   const versionSelectMenu = document.getElementById('version-select-menu');
+   const versionSelectLabels = document.querySelectorAll(".track-arrow");
+   const savePopup = document.getElementById("save-popup");
+   const savePopupBG = document.getElementById("save-popup-bg");
+   const savePopupCancel = document.getElementById("save-popup-cancel");
+   const savePopupCommit = document.getElementById("save-popup-commit");
+   const savePopupCommitMsg = document.getElementById("commit-message");
 
    audioContainer.addEventListener('fullscreenchange', (e) => { fullscreenChanged() });
@@ -631 +465 @@
    editButton.addEventListener("click", toggleEditMode); 
    downloadButton.addEventListener("click", () => { downloadURI(audio, audio.split(".dir/")[1]) }); 
-   muteButton.addEventListener("click", () => { wavesurfer.toggleMute() });
+   muteButton.addEventListener("click", () => { 
+      if (volumeSlider.value == 0) wavesurfer.setMute(false) 
+      else wavesurfer.setMute(true) 
+   });
    volumeSlider.style["accent-color"] = accentColour; 
    fullscreenButton.addEventListener("click", toggleFullscreen);
@@ -640 +477 @@
    createButton.addEventListener("click", createNewRegion);
    removeButton.addEventListener("click", removeRegion);
-   discardButton.addEventListener("click", discardRegionChanges);
+   discardButton.addEventListener("click", () => discardRegionChanges(false));
    undoButton.addEventListener("click", undo);
    redoButton.addEventListener("click", redo);
    saveButton.addEventListener("click", saveRegionChanges);
-   document.addEventListener('click', () => contextMenu.classList.remove('visible'));
+   document.addEventListener('click', documentClicked);
    document.addEventListener('mouseup', () => mouseDown = false);
    document.addEventListener('mousedown', (e) => { if (e.target.id !== "create-button") newRegionOffset = 0 }); // resets new region offset on click
@@ -651 +488 @@
       e.onblur = () => { prevUndoState = "" }; 
    }); 
-   contextDelete.addEventListener("click", removeRightClicked);
    contextReplace.addEventListener("click", replaceSelected);
    contextOverdub.addEventListener("click", overdubSelected);
-   // contextCopy.addEventListener("click", copySelected);
-   contextSave.addEventListener("click", saveSelected);
-   dualModeMenuButton.addEventListener("click", dualModeMenuToggle);
-   dualModeMenuButton.addEventListener("click", dualModeMenuToggle);
-
+   contextLock.addEventListener("click", toggleLockSelected);
+   contextDelete.addEventListener("click", removeRightClicked);
+   timelineMenu.addEventListener("click", e => e.stopPropagation());
+   timelineMenuButton.addEventListener("click", timelineMenuToggle);
+   timelineMenuHide.addEventListener("click", timelineMenuHideClicked);
+   timelineMenuDualMode.addEventListener("click", () => { dualModeChanged() });
+   timelineMenuRegionConflict.addEventListener("click", showStartStopConflicts);
+   timelineMenuSpeakerConflict.addEventListener("click", showSpeakerNameConflicts);
+
+   savePopupCancel.addEventListener("click", toggleSavePopup)
+   savePopupCommit.addEventListener("click", commitChanges);
+   savePopupBG.addEventListener("click", toggleSavePopup);
+   versionSelectLabels.forEach(arrow => arrow.addEventListener('click', toggleVersionDropdown));
+
+   volumeSlider.addEventListener("input", function() {
+      wavesurfer.setVolume(this.value);
+      if (this.value == 0) {
+         muteButton.src = interface_bootstrap_images + "mute.svg"; 
+         muteButton.style.opacity = 0.6;
+      } else {
+         muteButton.src = interface_bootstrap_images + "unmute.svg"; 
+         muteButton.style.opacity = 1;
+      }
+   });
+
+   zoomSlider.addEventListener('input', function() { // slider changes waveform zoom
+      wavesurfer.zoom(Number(this.value) / 4); 
+      if (currentRegion.speaker && getCurrentRegionIndex() != -1) { 
+         setHoverSpeaker(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left, currentRegion.speaker);
+         drawCurrentRegionBounds();
+      }
+      let handles = document.getElementsByClassName("wavesurfer-handle");
+      if (this.value < 20) {
+         for (const handle of handles) handle.style.setProperty("width", "1px", "important");
+      } else {
+         for (const handle of handles) handle.style.setProperty("width", "3px", "important");
+      }
+   });
+   showAudioLoader();
+   
    if (gs.variables.allowEditing === '0') { editButton.style.display = "none" }
 
-   function chapterSearchInputChange(e) {
+   wavesurfer.load(audio);
+
+   // wavesurfer events
+
+   wavesurfer.on('region-click', handleRegionClick);
+   wavesurfer.on('region-mouseenter', function(region) { // region hover effects
+      if (!mouseDown) {
+         handleRegionColours(region, true); 
+         setHoverSpeaker(region.element.style.left, region.attributes.label.innerText);
+         if (!isInCurrentRegions(region)) {
+            removeRegionBounds();
+            drawRegionBounds(region, wave.scrollLeft, "black");
+         }
+         if (isCurrentRegion(region) && editMode) drawRegionBounds(region, wave.scrollLeft, "FireBrick");
+      }
+   });
+   wavesurfer.on('region-mouseleave', function(region) { 
+      hoverSpeaker.innerHTML = "";
+      if (!mouseDown) {
+         if (!(wavesurfer.getCurrentTime() <= region.end && wavesurfer.getCurrentTime() >= region.start)) handleRegionColours(region, false); 
+         if (!editMode) hoverSpeaker.innerHTML = "";
+         removeRegionBounds();
+         if (currentRegion && currentRegion.speaker && getCurrentRegionIndex() != -1) { 
+            setHoverSpeaker(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left, currentRegion.speaker);
+            drawCurrentRegionBounds();
+         } 
+      }
+   });
+   wavesurfer.on('region-in', function(region) { // play caret enters region
+      if (!mouseDown) {
+         handleRegionColours(region, true); 
+         if (itemType == "chapter" && Array.from(chapters.children)[getIndexOfRegion(region)]) {
+            Array.from(chapters.children)[getIndexOfRegion(region)].scrollIntoView({  
+               behavior: "smooth",
+               block: "nearest"
+            });
+         }
+      }
+   });
+   wavesurfer.on('region-out', function(region) { handleRegionColours(region, false) });
+   wavesurfer.on('region-update-end', handleRegionEdit); // end of click-drag event
+   wavesurfer.on('region-updated', handleRegionSnap);
+   wavesurfer.on('error', error => console.log(error));
+
+   wavesurfer.on("play", () => { playPauseButton.src = interface_bootstrap_images + "pause.svg"; });
+   wavesurfer.on("pause", () => { playPauseButton.src = interface_bootstrap_images + "play.svg"; });
+   wavesurfer.on("mute", function(mute) { 
+      if (mute) {
+         muteButton.src = interface_bootstrap_images + "mute.svg"; 
+         muteButton.style.opacity = 0.6;
+         volumeSlider.value = 0;
+      }
+      else {
+         muteButton.src = interface_bootstrap_images + "unmute.svg"; 
+         muteButton.style.opacity = 1;
+         volumeSlider.value = 1;
+      } 
+   });
+
+   wavesurfer.on('ready', function() { // retrieve regions once waveforms have loaded
+      window.onbeforeunload = (e) => {
+         if (undoStates.length > 1) { 
+            console.log('undoStates.length: ' + undoStates.length);
+            e.returnValue = "Data will be lost if you leave the page, are you sure?";
+            return "Data will be lost if you leave the page, are you sure?";
+         }
+      };
+      if (document.getElementById('new-canvas')) document.getElementById('new-canvas').remove();
+      setTimeout(() => { // if not delayed exportImage does not retrieve waveform (despite being in waveform-ready?)
+         const currVersion = selectedVersions[(!dualMode || primaryCaret.src.includes("fill")) ? 0 : 1];
+         for (let key in canvasImages) {
+            if (currVersion == key && canvasImages[key] == undefined) { canvasImages[key] = wavesurfer.exportImage() } // add waveform image to cache if one isn't already assigned to the version
+         }
+      }, 1000);
+
+      if (initialLoad) {
+         if (inputFile.endsWith("csv")) { // diarization if csv
+            itemType = "chapter";
+            if (localStorage.getItem('undoStates') && localStorage.getItem('undoLevel')) {
+               console.log('-- Loading regions from localStorage --');
+               undoStates = JSON.parse(localStorage.getItem('undoStates'));
+               undoLevel = JSON.parse(localStorage.getItem('undoLevel'));
+               primarySet.tempSpeakerObjects = undoStates[undoLevel].state;
+               primarySet.speakerObjects = cloneSpeakerObjectArray(primarySet.tempSpeakerObjects);
+               primarySet.uniqueSpeakers = [];
+               for (const item of primarySet.tempSpeakerObjects) {
+                  if (!primarySet.uniqueSpeakers.includes(item.speaker)) primarySet.uniqueSpeakers.push(item.speaker);
+               }
+               populateChaptersAndRegions(primarySet);
+               if (undoStates[undoLevel].secState && undoStates[undoLevel].secState.length > 0) {
+                  secondarySet.tempSpeakerObjects = undoStates[undoLevel].secState;
+                  secondarySet.speakerObjects = cloneSpeakerObjectArray(secondarySet.tempSpeakerObjects);
+                  secondarySet.uniqueSpeakers = [];
+                  for (const item of secondarySet.tempSpeakerObjects) {
+                     if (!secondarySet.uniqueSpeakers.includes(item.speaker)) secondarySet.uniqueSpeakers.push(item.speaker);
+                  }
+                  secondaryLoaded = true;
+               }
+               updateRegionEditPanel(); 
+            } else {
+               loadCSVFile(inputFile, primarySet);
+               dualModeChanged(true, "true");
+               setTimeout(()=>{
+                  dualModeChanged(true, "false");
+               }, 150)
+            }
+         } else if (inputFile.endsWith("json")) { // transcription if json
+            itemType = "word";
+            loadJSONFile(inputFile);
+         } else {                      
+            console.log("Filetype of " + inputFile + " not supported.")
+         }
+         
+         chapters.style.cursor = "default"; // remove load cursor
+         wave.className = "audio-scroll";
+         $.ajax({
+            type: "GET",
+            url: gs.variables.metadataServerURL,
+            data: { a: 'get-fldv-info', site: gs.xsltParams.site_name, c: gs.cgiParams.c, d: gs.cgiParams.d },
+            dataType: "json",
+         }).then(data => {
+            for (const version of ["current", ...data]) {
+               canvasImages[version] = undefined;
+               let menuItem = document.createElement("div");
+               menuItem.classList.add("version-select-menu-item");
+               menuItem.id = version;
+               let text = version.includes("nminus") ? version.replace("nminus-", "Previous(") + ")" : version;
+               menuItem.innerText = text.charAt(0).toUpperCase() + text.slice(1);
+               menuItem.addEventListener('click', versionClicked);
+               let dataObj = { a: 'get-archives-metadata', site: gs.xsltParams.site_name, c: gs.cgiParams.c, d: gs.cgiParams.d, metaname: "commitmessage" };
+               if (version != "current") Object.assign(dataObj, {dv: version});
+               $.ajax({ // get commitmessage metadata to show as hover tooltip
+                  type: "GET",
+                  url: gs.variables.metadataServerURL,
+                  data: dataObj,
+                  dataType: "text",
+               }).then(comment => {
+                  menuItem.title = "Commit message: " + comment;
+                  versionSelectMenu.append(menuItem);
+                  [...versionSelectMenu.children].sort((a,b) => a.innerText>b.innerText?1:-1).forEach(n=>versionSelectMenu.appendChild(n)); // sort alphabetically
+               }, (error) => { console.log("get-archives-metadata error:"); console.log(error); });
+            }
+         }, (error) => { console.log("get-fldv-info error:"); console.log(error); });
+         initialLoad = false;
+      }
+      // fixes blank waveform/regions when loading Current -> Prev.1 -> Prev.2
+      zoomSlider.value = 25;
+      zoomSlider.dispatchEvent(new Event("input"));
+      wavesurfer.zoom(50 / 4);
+      hideAudioLoader();
+   });
+
+   /**
+   * Draws string above waveform at the provided offset
+   * @param {number} offset Offset (from left) to desired location
+   * @param {string} name String to be drawn
+   */
+   function setHoverSpeaker(offset, name) {
+      hoverSpeaker.innerHTML = name;  
+      let newOffset = parseInt(offset.slice(0, -2)) - wave.scrollLeft;
+      hoverSpeaker.style.marginLeft = newOffset + "px";
+   }
+
+   /** Click handler, manages selected region/s, set swapping, region playing */
+   function handleRegionClick(region, e) { 
+      if (e.target.classList.contains("region-menu")) return;
+      e.stopPropagation();
+      contextMenu.classList.remove('visible');
+      if (!editMode) { // play region audio on click
+         wavesurfer.play(region.start); // plays from start of region
+      } else { // select or deselect current region
+         if (!region.element) return;
+         if (region.element.classList.contains("region-top")) {
+            currSpeakerSet = primarySet;
+            swapCarets(true);
+         } else if (region.element.classList.contains("region-bottom")) {
+            currSpeakerSet = secondarySet;
+            swapCarets(false);
+         }
+         prevUndoState = "";
+
+         if (!e.ctrlKey && !e.shiftKey) {
+            currentRegions = [];
+            currentRegion = region;
+            currentRegion.speaker = currentRegion.attributes.label.innerText;
+            wavesurfer.backend.seekTo(currentRegion.start);
+         } else if (e.ctrlKey) { // control was held during click
+            if (currentRegions.length == 0 && isCurrentRegion(region)) {
+               removeCurrentRegion();
+            } else if (getCurrentRegionIndex() != -1 && isInCurrentRegions(region)) {
+               const removeIndex = getIndexInCurrentRegions(region);
+               if (removeIndex != -1) currentRegions.splice(removeIndex, 1);
+               if (currentRegions.length > 0 && isCurrentRegion(region)) { // change current region if removed
+                  currentRegion = currentRegions[0];
+               }
+            } else {
+               if (currentRegions.length < 1) currentRegions.push(currentRegion);
+               if (getIndexInCurrentRegions(region) == -1) currentRegions.push(region); // add if it doesn't already exist
+               currentRegion = region;
+               currentRegion.speaker = currentRegion.attributes.label.innerText;
+               wavesurfer.backend.seekTo(currentRegion.start); 
+            }
+            if (currentRegions.length == 1)  currentRegions = []; // clear selected regions if there is only one
+         } else if (e.shiftKey) { // shift was held during click
+            clearChapterSearch();
+            if (getCurrentRegionIndex() != -1 && getIndexOfRegion(region) != -1) {
+               if (currentRegions && currentRegions.length > 0) {
+                  if (Math.max(...getCurrentRegionsIndexes()) < getIndexOfRegion(region)) { // shifting forwards / down
+                     currentRegions = currSpeakerSet.tempSpeakerObjects.slice(Math.min(...getCurrentRegionsIndexes()), getIndexOfRegion(region)+1);
+                  } else { // shifting backwards / up
+                     currentRegions = currSpeakerSet.tempSpeakerObjects.slice(getIndexOfRegion(region), Math.max(...getCurrentRegionsIndexes())+1);
+                  }
+               } else {
+                  if (getCurrentRegionIndex() < getIndexOfRegion(region)) { // shifting forwards / down
+                     currentRegions = currSpeakerSet.tempSpeakerObjects.slice(getCurrentRegionIndex(), getIndexOfRegion(region)+1);
+                  } else { // shifting backwards / up
+                     currentRegions = currSpeakerSet.tempSpeakerObjects.slice(getIndexOfRegion(region), getCurrentRegionIndex()+1);
+                  }
+               }
+            }
+         }
+         if (changeAllCheckbox.checked) { currentRegions = getRegionsWithSpeaker(currentRegion.speaker) } 
+         reloadRegionsAndChapters();
+      }
+   }
+
+   /**
+   * Returns index of given region within the currently selected regions
+   * @param {object} region Region within currently selected regions to return index for
+   * @returns {int} Index position of region
+   */
+   function getIndexInCurrentRegions(region) {
+      for (const reg of currentRegions) {
+         const regSpeaker = reg.attributes ? reg.attributes.label.innerText : reg.speaker;
+         if (reg.start == region.start && reg.end == region.end && regSpeaker == region.attributes.label.innerText) {
+            return currentRegions.indexOf(reg);
+         }
+      }
+      return -1;
+   }
+
+   /**
+   * Returns index of region within speakerObject array
+   * @param {object} region Region to return index for
+   * @returns {int} Index position of region
+   */
+   function getIndexOfRegion(region) {
+      for (const reg of currSpeakerSet.tempSpeakerObjects) {
+         if (region.attributes && reg.start == region.start && reg.end == region.end && reg.speaker == region.attributes.label.innerText) {
+            return currSpeakerSet.tempSpeakerObjects.indexOf(reg);
+         }
+      }
+      return -1;
+   }
+
+   /** 
+   * Builds metadata-server.pl URL to retrieve audio at given version 
+   * @param {string} version GS document version to retrieve from (nminus-X)
+   */
+   function getAudioURLFromVersion(version) {
+      let base_url = gs.variables.metadataServerURL + "?a=get-archives-assocfile&site=" + gs.xsltParams.site_name + "&c=" + gs.cgiParams.c + "&d=" + gs.cgiParams.d;
+      if (version !== "current") base_url += "&dv=" + version // get fldv if not current version
+      return base_url  + "&assocname=" + gs.documentMetadata.Audio;
+   }
+
+   /** 
+   * Builds metadata-server.pl URL to retrieve CSV at given version 
+   * @param {string} version GS document version to retrieve from (nminus-X)
+   */
+   function getCSVURLFromVersion(version) {
+      let base_url = gs.variables.metadataServerURL + "?a=get-archives-assocfile&site=" + gs.xsltParams.site_name + "&c=" + gs.cgiParams.c + "&d=" + gs.cgiParams.d;
+      if (version !== "current") base_url += "&dv=" + version; // get fldv if not current version
+      return base_url  + "&assocname=" + "structured-audio.csv";
+   }
+
+   /** Version click handler, first checks if changes have been made and shows popup if true */
+   function versionClicked(e) {
+      let unsavedChanges = false;
+      if (undoStates.length > 0) { // only if changes have been made in track being changed FROM
+         let clickedVersionPos = e.target.parentElement.classList.contains('versionTop') ? 0 : 1;
+         for (const state of undoStates) {
+            if (state.changedTrack == selectedVersions[clickedVersionPos]) {
+               unsavedChanges = true;
+               break;
+            }
+         }
+      } 
+      if (unsavedChanges) {
+         const areYouSure = "There are unsaved changes.\nAre you sure you want to lose changes made in this version?";
+         if (window.confirm(areYouSure)) {
+            console.log('OK');
+            discardRegionChanges(true);
+            changeVersion(e);
+         } else {
+            console.log('CANCEL');
+            return;
+         }
+      } else changeVersion(e);
+   }
+
+   /** Changes current audio/csv set to clicked version's equivalent */
+   function changeVersion(e) {  
+      removeCurrentRegion();
+      const audio_url = getAudioURLFromVersion(e.target.id);
+      const csv_url = getCSVURLFromVersion(e.target.id);
+      versionSelectMenu.classList.remove('visible');
+      const setToUpdate = e.target.parentElement.classList.contains('versionTop') ? primarySet : secondarySet;
+      if (e.target.parentElement.classList.contains('versionTop')) {
+         if (!currSpeakerSet.isSecondary) {
+            if (dualMode) $(".region-top").remove();
+            else $(".wavesurfer-region").remove();
+            showAudioLoader();
+            // if (canvasImages[e.target.id]) { // if waveform image exists in cache
+            //    drawImageOnWaveform(canvasImages[e.target.id]);
+            // }            
+            wavesurfer.load(audio_url); // load audio
+         } else {
+            $(".region-top").remove();
+         }
+         document.getElementById('track-set-label-top').children[0].innerText = e.target.id.includes("nminus") ? e.target.id.replace("nminus-", "Previous(") + ")" : "Current"; // update top label text
+         selectedVersions[0] = e.target.id; // update the selected versions
+      } else {
+         if (currSpeakerSet.isSecondary) {
+            if (dualMode) $(".region-bottom").remove();
+            else $(".wavesurfer-region").remove();
+            showAudioLoader();
+            // if (canvasImages[e.target.id]) { // if waveform image exists in cache
+            //    drawImageOnWaveform(canvasImages[e.target.id]);
+            // }
+            wavesurfer.load(audio_url);
+         } else {
+            $(".region-bottom").remove();
+         }
+         document.getElementById('track-set-label-bottom').children[0].innerText = e.target.id.includes("nminus") ? e.target.id.replace("nminus-", "Previous(") + ")" : "Current"; // update bottom label text
+         selectedVersions[1] = e.target.id;
+      }
+      loadCSVFile(csv_url, setToUpdate, true);
+   }
+   
+   /** Utility function to download audio */
+   function downloadURI(loc, name) {
+      let link = document.createElement("a");
+      link.download = name;
+      link.href = loc;
+      link.click();
+   }
+
+   /** Document click listener for context box closure and region deselection */
+   function documentClicked(e) { // document on click
+      if (e.target.classList.contains("region-menu")) return;
+      contextMenu.classList.remove('visible'); 
+      timelineMenu.classList.remove('visible'); 
+      versionSelectMenu.classList.remove('visible'); 
+      versionSelectLabels.forEach(arrow => {
+         // arrow.style.transform = 'rotate(90deg)';
+         // arrow.style.paddingTop = '0';
+         arrow.style.display = 'inline';
+      });
+      if (editMode && e.target.tagName !== "INPUT" && e.target.tagName !== "IMG" && !e.target.classList.contains("ui-button") && !$("#audio-dropdowns").has($(e.target)).length
+         && !e.target.classList.contains("context-menu-item")) {
+         let currReg = getCurrentRegionIndex() != -1 ? currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region : false; // save for deselection
+         let currRegs = getCurrentRegionsIndexes().length > 1 ? currentRegions : false; // save for deselection
+         removeCurrentRegion();
+         reloadChapterList();
+         if (currReg != false) regionLeave(currReg); // deselect curr region
+         if (currRegs != false) {
+            for (const reg of currRegs) {
+               regionLeave(reg.region); // deselect curr regions
+               regionLeave(reg.region); // deselect curr regions
+            }
+         }
+         removeRegionBounds();
+         removeButton.innerHTML = "Remove Selected Region";
+         updateRegionEditPanel();
+      }
+   }
+
+   /** Draws and returns padlock image at given parent element */
+   function drawPadlock(parent) { 
+      let lockedImg = document.createElement("img");
+      lockedImg.classList.add("region-padlock");
+      lockedImg.src = interface_bootstrap_images + "lock.svg";
+      lockedImg.title = "This region is locked. Click to unlock region.";
+      parent.prepend(lockedImg); 
+      return lockedImg;
+   }
+
+   /**
+    * Draws triple dot menu button and attaches click listener
+    * @param {object} region Region to attach menu button to
+    */
+   function drawMenuButton(region) {
+      let menuImg = document.createElement("img");
+      menuImg.src = interface_bootstrap_images + "menu.svg";
+      menuImg.classList.add("region-menu");
+      menuImg.title = "Show region options";
+      menuImg.addEventListener("click", e => {
+         audioContainer.dispatchEvent(new MouseEvent("contextmenu", { clientX: menuImg.x + 20, clientY: menuImg.y + 5 }));
+      });
+      region.element.append(menuImg);
+   }
+
+   /**
+   * Attaches a click listener to given padlock element
+   * @param padlock Element to attach listener to
+   * @param region Associated region 
+   * @param isChapter Whether padlock exists in chapter (true) or wavesurfer region (false)
+   */
+   function attachPadlockListener(padlock, region, isChapter) {
+      if (isChapter == true) {
+         padlock.addEventListener('click', () => { // attach to chapter padlock
+            let index = getIndexOfRegion(region);
+            currSpeakerSet.tempSpeakerObjects[index].locked = false;
+            padlock.classList.add('hide');
+            if (currSpeakerSet.tempSpeakerObjects[index].region.element.firstChild) currSpeakerSet.tempSpeakerObjects[index].region.element.firstChild.remove();
+            addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "lockChange", index);
+         });
+      } else {
+         padlock.addEventListener('click', () => { // attach to region padlock
+            let index = getIndexOfRegion(region);
+            currSpeakerSet.tempSpeakerObjects[index].locked = false;
+            padlock.remove();
+            addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "lockChange", index);
+         });
+      }
+   }
+
+   /** Locks or unlocks selected region based on its current state */
+   function toggleLockSelected(e) { // locks / unlocks selected region(s) 
+      if (e) e.stopPropagation(); 
+      if (getCurrentRegionIndex() != -1 && currentRegions.length <= 1) { // single selected
+         let currIndex = getCurrentRegionIndex(); 
+         currSpeakerSet.tempSpeakerObjects[currIndex].locked = !e.target.innerText.includes("Unlock"); 
+         if (currSpeakerSet.tempSpeakerObjects[currIndex].locked) {
+            chapters.childNodes[currIndex].childNodes[1].classList.remove('hide'); 
+            let lock = drawPadlock(currSpeakerSet.tempSpeakerObjects[currIndex].region.element);
+            attachPadlockListener(lock, currSpeakerSet.tempSpeakerObjects[currIndex].region, false);
+            contextLock.innerText = "Unlock Selected";
+         } else {
+            chapters.childNodes[currIndex].childNodes[1].classList.add('hide');
+            if (currSpeakerSet.tempSpeakerObjects[currIndex].region.element.getElementsByClassName("region-padlock").length > 0) {
+               currSpeakerSet.tempSpeakerObjects[currIndex].region.element.getElementsByClassName("region-padlock")[0].remove();
+            }
+            contextLock.innerText = "Lock Selected";
+         }
+      } else if (currentRegions.length > 1) { // multiple selected
+         let toLock = !e.target.innerText.includes("Unlock");
+         for (const idx of getCurrentRegionsIndexes()) {
+            currSpeakerSet.tempSpeakerObjects[idx].locked = toLock;
+            if (currSpeakerSet.tempSpeakerObjects[idx].locked) {
+               chapters.childNodes[idx].childNodes[1].classList.remove('hide'); 
+               if (currSpeakerSet.tempSpeakerObjects[idx].region.element.getElementsByClassName("region-padlock").length == 0) {
+                  let lock = drawPadlock(currSpeakerSet.tempSpeakerObjects[idx].region.element);
+                  attachPadlockListener(lock, currSpeakerSet.tempSpeakerObjects[idx].region, false);
+               }
+               contextLock.innerText = "Unlock Selected";
+            } else {
+               chapters.childNodes[idx].childNodes[1].classList.add('hide');
+               if (currSpeakerSet.tempSpeakerObjects[idx].region.element.getElementsByClassName("region-padlock").length > 0) {
+                  currSpeakerSet.tempSpeakerObjects[idx].region.element.getElementsByClassName("region-padlock")[0].remove();
+               }
+               contextLock.innerText = "Lock Selected";
+            }
+         }
+         if (document.getElementById("context-menu-lock-2")) document.getElementById("context-menu-lock-2").remove();
+      }
+      addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "lockChange", getCurrentRegionIndex());
+   }
+
+   /** TODO */
+   function timelineMenuHideClicked(e) { // hides all regions and chapter/edit divs
+      if (!e.target.children[0].checked) {
+         e.target.children[0].checked = true;
+         timelineMenuDualMode.classList.add('disabled');
+         timelineMenuRegionConflict.classList.add('disabled');
+         timelineMenuSpeakerConflict.classList.add('disabled');
+         if (editPanel.style.height != "0px") toggleEditMode();
+         if (chapters.style.height != "0px") toggleChapters();
+         $('.wavesurfer-region').fadeOut(100);
+      }
+      else {
+         e.target.children[0].checked = false;
+         timelineMenuDualMode.classList.remove('disabled');
+         timelineMenuRegionConflict.classList.remove('disabled');
+         timelineMenuSpeakerConflict.classList.remove('disabled');
+         let fadeIn = true;
+         if (timelineMenuRegionConflict.firstElementChild.checked) {
+            showStartStopConflicts(e, true);
+            fadeIn = false;
+         }
+         if (timelineMenuSpeakerConflict.firstElementChild.checked) {
+            showSpeakerNameConflicts(e, true);
+            fadeIn = false;
+         }
+         if (fadeIn) $('.wavesurfer-region').fadeIn(100); 
+      }
+   }
+
+   function chapterSearchInputChange(e) { // filters chapters and regions by given speaker name
       if (e.isTrusted) { // triggered from user action
          if (document.getElementById("chapter-alert")) document.getElementById("chapter-alert").remove();
@@ -695 +1064 @@
    }
 
-   function clearChapterSearch() {
+   function clearChapterSearch() { // clears search filter and updates results
       chapterSearchInput.value = "";
       chapterSearchInput.dispatchEvent(new Event("input"));
    }
 
-   function dualModeMenuToggle() {
-      if (editMode && dualMode) {
-         if (dualModeMenu.classList.contains('visible')) dualModeMenu.classList.remove('visible');
-         else dualModeMenu.classList.add('visible');
-      }
-   }
-
-   function handleRegionSnap(region, e) {
-      if (editMode && currentRegion) { 
+   function showStartStopConflicts(e, forceRun) { // hides regions that have identical start/stop time
+      removeCurrentRegion();
+      if ((dualMode && !timelineMenuRegionConflict.children[0].checked) || forceRun) {
+         timelineMenuRegionConflict.children[0].checked = true;
+         let primHide = [];
+         let secHide = [];
+         if (!timelineMenuSpeakerConflict.children[0].checked) hideAll();
+         for (const primIdx in primarySet.tempSpeakerObjects) {
+            for (const secIdx in secondarySet.tempSpeakerObjects) {
+               if (regionsMatch(primarySet.tempSpeakerObjects[primIdx], secondarySet.tempSpeakerObjects[secIdx])) { // if regions have same start/end time, hide
+                  primHide.push(primIdx);
+                  secHide.push(secIdx);
+               }
+            }
+         }
+         for (const primIdx in primarySet.tempSpeakerObjects) {
+            if (!primHide.includes(primIdx)) {
+               primarySet.tempSpeakerObjects[primIdx].region.element.style.display = "";
+               if (primaryCaret.src.includes('fill')) chapters.children[primIdx].style.display = "flex";
+            }
+         }
+         for (const secIdx in secondarySet.tempSpeakerObjects) {
+            if (!secHide.includes(secIdx)) {
+               secondarySet.tempSpeakerObjects[secIdx].region.element.style.display = "";
+               if (secondaryCaret.src.includes('fill')) chapters.children[secIdx].style.display = "flex";
+            }
+         }
+      } else {
+         timelineMenuRegionConflict.children[0].checked = false;
+         if (timelineMenuSpeakerConflict.children[0].checked) showSpeakerNameConflicts(e, true);
+         else clearConflicts();
+      }
+   }
+   
+   function showSpeakerNameConflicts(e, forceRun) { // shows regions that have identical start/stop time but different names 
+      removeCurrentRegion();
+      if ((dualMode && !timelineMenuSpeakerConflict.children[0].checked) || forceRun) {
+         timelineMenuSpeakerConflict.children[0].checked = true;
+         if (!timelineMenuRegionConflict.children[0].checked) hideAll();
+         for (const primIdx in primarySet.tempSpeakerObjects) {
+            for (const secIdx in secondarySet.tempSpeakerObjects) {
+               if (regionsMatch(primarySet.tempSpeakerObjects[primIdx], secondarySet.tempSpeakerObjects[secIdx]) &&
+               primarySet.tempSpeakerObjects[primIdx].speaker != secondarySet.tempSpeakerObjects[secIdx].speaker) { // hide if regions match but names don't
+                  primarySet.tempSpeakerObjects[primIdx].region.element.style.display = "";
+                  secondarySet.tempSpeakerObjects[secIdx].region.element.style.display = "";
+                  if (primaryCaret.src.includes('fill')) chapters.children[primIdx].style.display = "flex";
+                  else chapters.children[secIdx].style.display = "flex";
+               }
+            }
+         }
+      } else {
+         timelineMenuSpeakerConflict.children[0].checked = false;
+         if (timelineMenuRegionConflict.children[0].checked) showStartStopConflicts(e, true);
+         else clearConflicts();
+      }
+   }
+
+   function clearConflicts() { // shows all regions and chapters
+      for (const primIdx in primarySet.tempSpeakerObjects) {
+         for (const secIdx in secondarySet.tempSpeakerObjects) {
+            primarySet.tempSpeakerObjects[primIdx].region.element.style.display = "";
+            secondarySet.tempSpeakerObjects[secIdx].region.element.style.display = "";
+            chapters.children[primIdx].style.display = "flex";
+         }
+      }
+   }
+
+   function hideAll() { // hides all regions and chapters
+      for (const primIdx in primarySet.tempSpeakerObjects) {
+         for (const secIdx in secondarySet.tempSpeakerObjects) {
+            primarySet.tempSpeakerObjects[primIdx].region.element.style.display = "none";
+            secondarySet.tempSpeakerObjects[secIdx].region.element.style.display = "none";
+            chapters.children[primIdx].style.display = "none";
+         }
+      }
+   }
+
+   function timelineMenuToggle(e) { // shows / hides timeline menu
+      e.stopPropagation();
+      if (timelineMenu.classList.contains('visible')) {
+         timelineMenu.classList.remove('visible');
+         e.target.style.transform = 'rotate(0deg)';
+      }
+      else {
+         timelineMenu.classList.add('visible');
+         e.target.style.transform = 'rotate(-90deg)';
+      }
+   }
+
+   function handleRegionSnap(region, e) { // clips region to opposite set region if nearby, called on region update (lots)
+      if (editMode && currentRegion && !wavesurfer.isPlaying()) { 
          removeRegionBounds();
          setHoverSpeaker(region.element.style.left, currentRegion.speaker);
-         drawRegionBounds(region, wave.scrollLeft, "FireBrick"); 
+         drawRegionBounds(region, wave.scrollLeft, "FireBrick"); // gets set to red if currRegion
          if (e && e.action === "resize" && dualMode && editMode && !ctrlDown) { // won't actuate on drag
             let oppositeSet = secondarySet; // look down
@@ -728 +1179 @@
    }
 
+   /** 
+   * Returns snap value if near [snapRadius] adjacent region edge
+   * @param newDragPos Drag position in seconds to check for
+   * @param speakerSet Adjacent region set
+   * @returns {number} If found, returns snapped position, otherwise returns input position
+   */
    function getSnapValue(newDragPos, speakerSet) { 
       const snapRadius = 1;      
       for (const region of speakerSet) { // scan opposite region for potential snapping points
          if (newDragPos > parseFloat(region.start) - snapRadius && newDragPos < parseFloat(region.start) + snapRadius) { 
-            // console.log("snap to start: " + region.start); 
             snappedTo = "start";
             if (snappedToX == 0) snappedToX = waveformCursorX;
@@ -738 +1194 @@
          }
          if (newDragPos > parseFloat(region.end) - snapRadius && newDragPos < parseFloat(region.end) + snapRadius) {
-            // console.log("snap to end: " + region.end); 
             snappedTo = "end";
             if (snappedToX == 0) snappedToX = waveformCursorX;
             return region.end; 
          }
-
          if (snappedTo !== "none" && (waveformCursorX - snappedToX > 10 || waveformCursorX - snappedToX < -10)) {
-            // console.log('released!');
             snappedTo = "none";
             snappedToX = 0;
@@ -765 +1218 @@
    }
 
-   function removeRightClicked(e) {
-      if (!e.target.classList.contains('faded')) {
+   function removeRightClicked(e) { 
+      if (!e.target.classList.contains('disabled')) {
          removeRegion();
       }
    }
 
-   function replaceSelected(e) {
-      if (!e.target.classList.contains('faded')) {
+   function replaceSelected(e) { // moves selected region across, replaces and removes any overlapping regions in the opposite set 
+      if (!e.target.classList.contains('disabled')) {
          let destinationSet = secondarySet; // replace down
          if (currSpeakerSet.isSecondary) destinationSet = primarySet; // replace up
@@ -793 +1246 @@
    }
 
-   function containsRegion(set, region) {
+   function containsRegion(set, region) { // true if given region exists in given set
       for (const item of set) {
          if (regionsMatch(region, item)) return true;
@@ -800 +1253 @@
    }
 
-   function overdubSelected(e) {
-      if (!e.target.classList.contains('faded')) {
+   function overdubSelected(e) { // moves selected region across, merges any overlapping regions in the opposite set 
+      if (!e.target.classList.contains('disabled')) {
          let destinationSet = secondarySet; // replace down
          if (currSpeakerSet.isSecondary) destinationSet = primarySet; // replace up
          let backup;
-         if (destinationSet.isSecondary) backup = cloneSpeakerObjectArray(primarySet.tempSpeakerObjects); // saves selected set as this process changes values in selected set (unknown reason)
+         if (destinationSet.isSecondary) backup = cloneSpeakerObjectArray(primarySet.tempSpeakerObjects); // saves selected set as this process changes values in selected set
          else backup = cloneSpeakerObjectArray(secondarySet.tempSpeakerObjects);
-            copySelected(e, true);
+         copySelected(e, true);
          if (!currentRegions || currentRegions.length < 1) { // overdub single
-            handleSameSpeakerOverlap(getCurrentRegionIndex(), destinationSet);
+            handleSameSpeakerOverlap(getCurrentRegionIndex(), destinationSet, true);
          } else { // overdub multiple
             for (const item of getCurrentRegionsIndexes().reverse()) { // reverse indexes so index doesn't break when regions are removed
-               handleSameSpeakerOverlap(item, destinationSet);
+               handleSameSpeakerOverlap(item, destinationSet, true);
             }
          }
@@ -822 +1275 @@
    }
 
-   function copySelected(e, skipUndoState) {
-      if (!e.target.classList.contains('faded')) {
-         let out = -1;
+   function copySelected(e, skipUndoState) { // copies region to opposite set [utility function for replace and overdub]
+      if (!e.target.classList.contains('disabled')) {
          let destinationSet = secondarySet; // copy down
-         if (currSpeakerSet.isSecondary) { destinationSet = primarySet } // copy up
+         if (currSpeakerSet.isSecondary) destinationSet = primarySet // copy up
+            const selectedRegion = currentRegion;
          if (currentRegions && currentRegions.length > 1) { // copy multiple
-            const selectedRegion = currentRegion;
-            const selectedRegions = currentRegions;
-            destinationSet.tempSpeakerObjects.push(...selectedRegions);
-            currSpeakerSet.isSecondary ? caretClicked("primary-caret") : caretClicked("secondary-caret"); // swap selected speakerSet (clears current regions)
-            for (const reg of destinationSet.tempSpeakerObjects) { // restore currentRegions in dest. set
-               for (const selReg of selectedRegions) {
-                  if (regionsMatch(reg, selReg) && !containsRegion(currentRegions, reg)) { 
-                     currentRegions.push(reg);
-                  }
-               }
-               if (regionsMatch(reg, selectedRegion)) { currentRegion = reg; }
-            }
+            destinationSet.tempSpeakerObjects.push(...selectedRegions); // append current regions to dest. set
+            // currSpeakerSet.isSecondary ? caretClicked("primary-caret") : caretClicked("secondary-caret"); // swap selected speakerSet (clears current regions)
+            // for (const reg of destinationSet.tempSpeakerObjects) { // restore currentRegions in dest. set
+            //    for (const selReg of selectedRegions) {
+            //       if (regionsMatch(reg, selReg) && !containsRegion(currentRegions, reg)) { 
+            //          currentRegions.push(reg);
+            //       }
+            //    }
+            //    if (regionsMatch(reg, selectedRegion)) { currentRegion = reg; }
+            // }
          } else { // copy singular
-            const selectedRegion = currentRegion; // copy currRegion as caretClicked wipes it
             destinationSet.tempSpeakerObjects.push(selectedRegion); // append current region to dest. set
-            currSpeakerSet.isSecondary ? caretClicked("primary-caret") : caretClicked("secondary-caret"); // swap selected speakerSet (clears current regions)
-            for (const reg of destinationSet.tempSpeakerObjects) { // restore currentRegion in dest. set
-               if (regionsMatch(reg, selectedRegion)) { 
-                  currentRegion = reg; 
-                  break; 
-               }
-            }
+            // currSpeakerSet.isSecondary ? caretClicked("primary-caret") : caretClicked("secondary-caret"); // swap selected speakerSet (clears current regions)
+            // for (const reg of destinationSet.tempSpeakerObjects) { // restore currentRegion in dest. set
+            //    if (regionsMatch(reg, selectedRegion)) { 
+            //       currentRegion = reg; 
+            //       break; 
+            //    }
+            // }
          }
          reloadRegionsAndChapters();
@@ -856 +1306 @@
    }
 
+   /**
+    * Shows context menu with various region options
+    * @param {MouseEvent} e Either right click event or left click triple menu click event 
+    */
    function onRightClick(e) {
-      if (e.target.classList.contains("wavesurfer-region") && editMode) {
+      if ((e.target.classList.contains("wavesurfer-region") || e.target.id === "audioContainer" || e.target.classList.contains("chapter")) && editMode) {
          e.preventDefault();
+         e.stopPropagation();
+         // set current region to clicked region LLLLLLL
+         let clickedRegion; // could be used to select clicked region
+         for (const reg of currSpeakerSet.tempSpeakerObjects) {
+            if (reg.region.element.title == e.target.title) {
+               clickedRegion = reg;
+               break;
+            }
+         }
+         // console.log(clickedRegion)
          contextMenu.classList.add("visible");
          if (e.clientX + 200 > $(window).width()) contextMenu.style.left = ($(window).width() - 220) + "px"; // ensure menu doesn't clip on right
@@ -864 +1328 @@
          contextMenu.style.top = e.clientY + "px";
 
+         let lockConflict = false;
+         if (currentRegions.length > 1) {
+            let firstIsLocked = 0;
+            for (const reg of currentRegions) {
+               if (firstIsLocked === 0) firstIsLocked = reg.locked;
+               else if (firstIsLocked != reg.locked) lockConflict = true;
+            }
+         }
+         if (lockConflict) {
+            contextLock.classList.remove('disabled');
+            if (!document.getElementById("context-menu-lock-2")) {
+               let contextLock2 = contextLock.cloneNode();
+               contextLock.innerText = "Lock Selected";
+               contextLock2.innerText = "Unlock Selected";
+               contextLock2.id = "context-menu-lock-2";
+               contextLock2.addEventListener('click', toggleLockSelected);
+               contextLock.parentNode.insertBefore(contextLock2, contextLock.nextSibling);
+            }
+         } else {
+            contextLock.classList.remove('disabled');
+            let currIndex = getCurrentRegionIndex();
+            if (currSpeakerSet.tempSpeakerObjects[currIndex] && currSpeakerSet.tempSpeakerObjects[currIndex].locked) {
+               contextLock.innerText = "Unlock Selected";
+               chapters.childNodes[currIndex].childNodes[1].classList.remove('hide');  
+            } else if (currSpeakerSet.tempSpeakerObjects[currIndex]) {
+               contextLock.innerText = "Lock Selected";
+               chapters.childNodes[currIndex].childNodes[1].classList.add('hide');
+            } 
+         }
+
          if (dualMode && currentRegion && currentRegion.speaker !== "") {
-            contextReplace.classList.remove('faded');
-            contextOverdub.classList.remove('faded');
-            // contextCopy.classList.remove('faded');
+            contextReplace.classList.remove('disabled');
+            contextOverdub.classList.remove('disabled');
          } else {
-            contextDelete.classList.add('faded');
-            contextReplace.classList.add('faded');
-            contextOverdub.classList.add('faded');
-            // contextCopy.classList.add('faded');
-         }
-         if (currentRegion && currentRegion.speaker !== "") contextDelete.classList.remove('faded');
+            contextDelete.classList.add('disabled');
+            contextLock.classList.add('disabled');
+            contextReplace.classList.add('disabled');
+            contextOverdub.classList.add('disabled');
+         }
+         if (currentRegion && currentRegion.speaker !== "") {
+            contextDelete.classList.remove('disabled');
+            contextLock.classList.remove('disabled');
+         }
          if (dualMode) { // manipulate context texts
             const actionDirection = currSpeakerSet.isSecondary ? "Up" : "Down";
             contextReplace.innerHTML = "Replace Selected " + actionDirection;
             contextOverdub.innerHTML = "Overdub Selected " + actionDirection;
-            // contextCopy.innerHTML = "Copy Selected " + actionDirection;
          } 
       }
@@ -891 +1386 @@
    }
 
-   function keyUp(e) {
+   function keyUp(e) { // key up listener
       if (e.key == "Control") ctrlDown = false;
       if (e.target.tagName !== "INPUT") {
          if (e.code === "Backspace" || e.code === "Delete") removeRegion();
-         else if (e.code === "Space") wavesurfer.playPause();
+         else if (e.code === "Space") { wavesurfer.playPause(); }
          else if (e.code === "ArrowLeft") wavesurfer.skipBackward();
          else if (e.code === "ArrowRight") wavesurfer.skipForward();
+         else if (e.code === "KeyL") toggleLockSelected(e);
       }
       if (e.code == "KeyZ" && e.ctrlKey) undo();
@@ -903 +1399 @@
    }
 
-   function keyDown(e) {
+   function keyDown(e) { // keydown listener
       if (e.key == "Control") ctrlDown = true;
-   }
-
-   function dualModeChanged(skipUndoState) { // on dualmode checkbox value change
-      clearChapterSearch();
+      if (e.code == "Space" && e.target.tagName.toLowerCase() != "input") e.preventDefault();
+   }
+
+   /**
+   * Shows / hides secondary speaker set
+   * @param skipUndoState Utility param - skips the addition of an undo state
+   * @param overrideValue Utility param - overrides the checkbox state
+   */
+   function dualModeChanged(skipUndoState, overrideValue) {
+      if (overrideValue) dualModeCheckbox.checked = overrideValue == "true" ? true : false;
+      else dualModeCheckbox.checked = !dualModeCheckbox.checked; // toggle dual mode checkbox
       dualMode = dualModeCheckbox.checked; 
       currSpeakerSet = primarySet;
       if (!dualMode) removeCurrentRegion();
+      clearChapterSearch();
       reloadRegionsAndChapters();
       if (dualMode) {
-         dualModeMenuButton.classList.add('visible');
          if (!secondaryLoaded) {
-            loadCSVFile(inputFile.replace(".csv", "-2.csv"), ["speaker", "start", "end"], secondarySet);
+            const secondaryCSVURL = "http://localhost:8383/greenstone3/cgi-bin/metadata-server.pl?a=get-archives-assocfile&site=" + gs.xsltParams.site_name + "&c=" + gs.collectionMetadata.indexStem + 
+                                    "&d=" + gs.documentMetadata.Identifier + "&assocname=structured-audio.csv&dv=nminus-1";
+            loadCSVFile(secondaryCSVURL, secondarySet);
             secondaryLoaded = true; // ensure secondarySet doesn't get re-read > once
          }
          document.getElementById("caret-container").style.display = "flex";
+         timelineMenuRegionConflict.classList.remove("disabled");
+         timelineMenuSpeakerConflict.classList.remove("disabled");
+         $('#track-set-label-bottom').fadeIn(100);
+         selectedVersions[1] = document.getElementById('track-set-label-bottom').children[0].innerText;
       } else {
-         dualModeMenuButton.classList.remove('visible');
          caretClicked('primary-caret');
          document.getElementById("caret-container").style.display = "none";
+         selectedVersions.splice(1, 1); // trim to one version in array
+         timelineMenuRegionConflict.firstElementChild.checked = false;
+         timelineMenuSpeakerConflict.firstElementChild.checked = false;
+         timelineMenuRegionConflict.classList.add("disabled");
+         timelineMenuSpeakerConflict.classList.add("disabled");
+         $('#track-set-label-bottom').fadeOut(100);
       }
       currSpeakerSet = primarySet;
-      drawVersionNames();
       if (!skipUndoState) addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "dualModeChange", getCurrentRegionIndex());
    } 
 
-   // path to toolbar images
-   let interface_bootstrap_images = "interfaces/" + gs.xsltParams.interface_name + "/images/bootstrap/";
-
+   /**
+   * Changes selected speaker set
+   * @param {string} id ID of clicked caret image
+   */
    function caretClicked(id) {
       clearChapterSearch();
@@ -944 +1458 @@
    }
 
+   /**
+   * Loads destination waveform and audio if required, updates caret images
+   * @param {boolean} toPrimary whether destination set is primary (true) or secondary (false)
+   */
    function swapCarets(toPrimary) {
-      const currCaretIsPrimary = primaryCaret.src.includes("fill") ? true : false;
+      const currCaretIsPrimary = primaryCaret.src.includes("fill") ? true : false; // initial value before swap
       if ((toPrimary && !currCaretIsPrimary) || (!toPrimary && currCaretIsPrimary)) { 
          removeCurrentRegion(); // ensure currentRegion is only removed if changing speakerSet
@@ -952 +1470 @@
       } 
       if (toPrimary) {
+         if (!currCaretIsPrimary) {
+            showAudioLoader();
+            if (canvasImages[selectedVersions[0]]) { // if waveform image exists in cache
+               drawImageOnWaveform(canvasImages[selectedVersions[0]]);
+               // hideAudioLoader();
+            } 
+            // else showAudioLoader();
+            let url = gs.variables.metadataServerURL + "?a=get-archives-assocfile&site=" + gs.xsltParams.site_name + 
+                        "&c=" + gs.cgiParams.c + "&d=" + gs.cgiParams.d + "&assocname=" + gs.documentMetadata.Audio;
+            if (selectedVersions[0] !== "current") {
+               if (selectedVersions[0].includes("Previous")) url += "&dv=" + selectedVersions[0].replace("Previous(", "nminus-").replace(")", "");
+               else url += "&dv=" + selectedVersions[0];
+            }
+            wavesurfer.load(url); 
+         }
          primaryCaret.src = interface_bootstrap_images + "caret-right-fill.svg";
          secondaryCaret.src = interface_bootstrap_images + "caret-right.svg";
       } else {
+         if (currCaretIsPrimary) {
+            showAudioLoader();
+            if (canvasImages[selectedVersions[1]]) { 
+               drawImageOnWaveform(canvasImages[selectedVersions[1]]);
+               // hideAudioLoader();
+            } 
+            // else showAudioLoader();
+            let url = gs.variables.metadataServerURL + "?a=get-archives-assocfile&site=" + gs.xsltParams.site_name + 
+                        "&c=" + gs.cgiParams.c + "&d=" + gs.cgiParams.d + "&assocname=" + gs.documentMetadata.Audio;
+            if (selectedVersions[1] !== "current") {
+               if (selectedVersions[1].includes("Previous")) url += "&dv=" + selectedVersions[1].replace("Previous(", "nminus-").replace(")", "");
+               else url += "&dv=" + selectedVersions[1];
+            }
+            wavesurfer.load(url); 
+         }
          primaryCaret.src = interface_bootstrap_images + "caret-right.svg";
          secondaryCaret.src = interface_bootstrap_images + "caret-right-fill.svg";
@@ -960 +1508 @@
    }
 
+   /**
+   * Shows spinning loader over waveform, hides regions
+   */
+   function showAudioLoader() {
+      $('.wavesurfer-region').fadeOut(100);
+      $(".chapter").fadeOut(100);
+      $(".track-set-label").fadeOut(100);
+      waveformSpinner.style.display = 'block';
+      loader.style.display = "inline";
+      for (const ele of editPanel.children) ele.classList.add("disabled");
+      playPauseButton.classList.add("disabled");
+   }
+
+   /**
+   * Hides spinning loader, brings back regions
+   */
+   function hideAudioLoader() {
+      $('.wavesurfer-region').fadeIn(100);
+      $(".chapter").fadeIn(100);
+      $("#track-set-label-top").fadeIn(100);
+      if (dualMode) $('#track-set-label-bottom').fadeIn(100);
+      waveformSpinner.style.display = 'none';
+      loader.style.display = "none";
+      for (const ele of editPanel.children) ele.classList.remove("disabled");
+      updateRegionEditPanel();
+      playPauseButton.classList.remove("disabled");
+   }
+
+   /**
+   * Draws given image URL on waveform 
+   * @param image URL of image to be drawn
+   */
+   function drawImageOnWaveform(image) {
+      // console.log('draw waveform image from cache')
+      if (document.getElementById('new-canvas')) document.getElementById('new-canvas').remove();
+      var newCanvas = document.createElement("div");
+      newCanvas.id = "new-canvas";
+      newCanvas.style.width = wavesurfer.drawer.canvases[0].wave.width + 'px';
+      newCanvas.style.height = '140px';
+      newCanvas.style.backgroundImage = "url('" + image + "')";
+      waveformContainer.appendChild(newCanvas); 
+   }
+
+   /**
+   * Regenerates chapter list to update any changes made in speakerSet
+   */
    function reloadChapterList() { 
       chapters.innerHTML = "";
@@ -969 +1563 @@
          speakerName.classList.add("speakerName");
          speakerName.innerText = currSpeakerSet.tempSpeakerObjects[i].speaker;
+         let regionLocked = document.createElement("img");
+         regionLocked.src = interface_bootstrap_images + "lock.svg"; 
+         regionLocked.classList.add("speakerLocked", "hide"); 
+         attachPadlockListener(regionLocked, currSpeakerSet.tempSpeakerObjects[i].region, true);
+         if (currSpeakerSet.tempSpeakerObjects[i].locked && editMode) regionLocked.classList.remove("hide");
          let speakerTime = document.createElement("span"); 
          speakerTime.classList.add("speakerTime"); 
          speakerTime.innerHTML = minutize(currSpeakerSet.tempSpeakerObjects[i].start) + " - " + minutize(currSpeakerSet.tempSpeakerObjects[i].end) + "s";
          chapter.appendChild(speakerName);
+         chapter.appendChild(regionLocked);
          chapter.appendChild(speakerTime);
          chapter.addEventListener("click", chapterClicked);
@@ -985 +1585 @@
    }
 
-   wavesurfer.on("play", () => { playPauseButton.src = interface_bootstrap_images + "pause.svg"; });
-   wavesurfer.on("pause", () => { playPauseButton.src = interface_bootstrap_images + "play.svg"; });
-   wavesurfer.on("mute", function(mute) { 
-      if (mute) {
-         muteButton.src = interface_bootstrap_images + "mute.svg"; 
-         muteButton.style.opacity = 0.6;
-         volumeSlider.value = 0;
-      }
-      else {
-         muteButton.src = interface_bootstrap_images + "unmute.svg"; 
-         muteButton.style.opacity = 1;
-         volumeSlider.value = 1;
-      } 
-   });
-
-   volumeSlider.addEventListener("input", function() {
-      wavesurfer.setVolume(this.value);
-      if (this.value == 0) {
-         muteButton.src = interface_bootstrap_images + "mute.svg"; 
-         muteButton.style.opacity = 0.6;
-      } else {
-         muteButton.src = interface_bootstrap_images + "unmute.svg"; 
-         muteButton.style.opacity = 1;
-      }
-   });
-
-   zoomSlider.addEventListener("input", function() { // slider changes waveform zoom
-      wavesurfer.zoom(Number(this.value) / 4); 
-      if (currentRegion.speaker && getCurrentRegionIndex() != -1) { 
-         setHoverSpeaker(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left, currentRegion.speaker);
-         drawCurrentRegionBounds();
-      }
-      let handles = document.getElementsByClassName("wavesurfer-handle");
-      if (this.value < 20) {
-         for (const handle of handles) {
-            handle.style.setProperty("width", "1px", "important");
-         }
-      } else {
-         for (const handle of handles) {
-            handle.style.setProperty("width", "3px", "important");
-         }
-      }
-   });
-   wavesurfer.zoom(zoomSlider.value / 4); // set default zoom point
-
-   let toggleChapters = function() { // show & hide chapter section
+   /**
+   * Shows / hides chapter section
+   */
+   let toggleChapters = function() {
       if (chapters.style.height == "0px") {
          chapters.style.height = "90%";
@@ -1042 +1600 @@
    }
 
+   /**
+   * Object representing elements of a diarization output
+   * @param {boolean} isSecondary Whether or not the set is secondary/bottom (true) or primary/top (false)
+   * @param {Array} uniqueSpeakers Array of all unique speaker names within the diarization data, used for colouring regions
+   * @param {Array} speakerObjects Array of objects containing speaker start/stop times and names
+   * @param {Array} tempSpeakerObjects Temporary version of speakerObjects, which can be reverted back to if required 
+   */
    function SpeakerSet(isSecondary, uniqueSpeakers, speakerObjects, tempSpeakerObjects) {
       this.isSecondary = isSecondary;
@@ -1048 +1613 @@
       this.tempSpeakerObjects = tempSpeakerObjects;
    }
-   let primarySet = new SpeakerSet(false, [], [], []);
-   let secondarySet = new SpeakerSet(true, [], [], []);
+
+   let primarySet = new SpeakerSet(false, [], [], [], []);
+   let secondarySet = new SpeakerSet(true, [], [], [], []);
    let currSpeakerSet = primarySet;
 
-   function loadCSVFile(filename, manualHeader, speakerSet) { // based on: https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript
+   /**
+   * Reads diarization CSV file and populates speakerSet
+   * @param {string} filename Source destination of input CSV file
+   * @param {object} speakerSet speaker set to be populated
+   * @param {boolean} forcePopulate Forces redraw of regions and chapters
+   */
+   function loadCSVFile(filename, speakerSet, forcePopulate) { // based on: https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript
       $.ajax({
          type: "GET",
@@ -1060 +1632 @@
          let dataLines = data.split(/\r\n|\n/);
          let headers;
-         let startIndex;
+         let startIndex = 0;
          speakerSet.uniqueSpeakers = []; // used for obtaining unique colours
          speakerSet.speakerObjects = []; // list of speaker items
 
-         if (manualHeader) { // headers for columns can be provided if not existent in csv
-            headers = manualHeader;
-            startIndex = 0;
-         } else {
-            headers = dataLines[0].split(',');
-            startIndex = 1;
-         }
+         if (dataLines[0].split(',').length === 3) headers = ["speaker", "start", "end"]; // assume speaker, start, end
+         else if (dataLines[0].split(',').length === 4) headers = ["speaker", "start", "end", "locked"]; // assume speaker, start, end, locked
 
          for (let i = startIndex; i < dataLines.length; i++) {
@@ -1082 +1649 @@
                   }
                }
+               if (headers.length === 3) item['locked'] = false;
                speakerSet.speakerObjects.push(item);
             }
          }
          speakerSet.tempSpeakerObjects = cloneSpeakerObjectArray(speakerSet.speakerObjects);
-         populateChapters(speakerSet);
+         if (!speakerSet.isSecondary || forcePopulate) populateChaptersAndRegions(speakerSet); // prevents secondary set being drawn on first load
          resetUndoStates(); // undo stack init
-      });
-   }
-
-   function populateChapters(data) { // populates chapter section and adds regions to waveform
+      }, (error) => { console.log("loadCSVFile error:"); console.log(error); });
+   }
+
+   /**
+   * Populates chapter list div and regions on waveform with given speaker set
+   * @param {object} data Speaker set object with diarization data
+   */
+   function populateChaptersAndRegions(data) {
       // colorbrewer is a web tool for guidance in choosing map colour schemes based on a letiety of settings.
       // this colour scheme is designed for qualitative data
-
       if (regionColourSet.length < 1) {
          for (let i = 0; i < data.uniqueSpeakers.length; i++) { // not tested in cases where there are more than 8 speakers!!
@@ -1107 +1678 @@
       data.tempSpeakerObjects = sortSpeakerObjectsByStart(data.tempSpeakerObjects); // sort speakerObjects by start time
       if (isSelectedSet || !dualMode) chapters.innerHTML = ""; // clear chapter div for re-population
-
       for (let i = 0; i < data.tempSpeakerObjects.length; i++) {
          let chapter = document.createElement("div"); 
@@ -1115 +1685 @@
          speakerName.classList.add("speakerName");
          speakerName.innerText = data.tempSpeakerObjects[i].speaker;
+         let regionLocked = document.createElement("img");
+         regionLocked.src = interface_bootstrap_images + "lock.svg"; 
+         regionLocked.classList.add("speakerLocked", "hide"); 
+         attachPadlockListener(regionLocked, data.tempSpeakerObjects[i].region, true);
+         if (data.tempSpeakerObjects[i].locked && editMode) regionLocked.classList.remove("hide");
          let speakerTime = document.createElement("span"); 
          speakerTime.classList.add("speakerTime"); 
          speakerTime.innerHTML = minutize(data.tempSpeakerObjects[i].start) + " - " + minutize(data.tempSpeakerObjects[i].end) + "s";
          chapter.appendChild(speakerName);
+         chapter.appendChild(regionLocked);
          chapter.appendChild(speakerTime);
          chapter.addEventListener("click", chapterClicked);
@@ -1151 +1727 @@
                label: speakerName,
             },
-            // color: colourbrewerSet[data.uniqueSpeakers.indexOf(data.tempSpeakerObjects[i].speaker)%8] + regionTransparency,
             color: regColour + regionTransparency,
             ...(selected) && {color: "rgba(255,50,50,0.5)"},
          });
          data.tempSpeakerObjects[i].region = associatedReg;
-      }
-
+         if (selected && data.tempSpeakerObjects[i].locked) { // add padlock to regions if they are selected and locked
+            let lock = drawPadlock(associatedReg.element);
+            attachPadlockListener(lock, associatedReg, false);
+         }
+         if (selected) drawMenuButton(associatedReg);
+      }
+      if (waveformSpinner.style.display == 'block') $(".wavesurfer-region").fadeOut(100); // keep regions hidden until wavesurfer.load() has finished
       let handles = document.getElementsByTagName('handle');
       for (const handle of handles) handle.addEventListener('mousedown', () => mouseDown = true);
@@ -1163 +1743 @@
       let regions = document.getElementsByTagName("region");
       if (dualMode) {
-         if (document.getElementsByClassName("region-top").length === 0) for (const reg of regions) reg.classList.add("region-top"); 
-         else for (const rego of regions) if (!rego.classList.contains("region-top")) rego.classList.add("region-bottom");
+         if (document.getElementsByClassName("region-top").length == 0) {
+            for (const reg of regions) {
+               if (reg.classList.length == 1) reg.classList.add("region-top"); 
+            }
+         } else {
+            for (const rego of regions) {
+               if (!rego.classList.contains("region-top") && rego.classList.length == 1) rego.classList.add("region-bottom");
+            }
+         }
       }
       if (editMode) for (const reg of regions) reg.style.setProperty("z-index", "3", "important");
@@ -1177 +1764 @@
          url: filename,
          dataType: "text",
-      }).then(function(data){ populateWords(JSON.parse(data)) });
+      }).then(function(data){ populateWords(JSON.parse(data)) }, (error) => { console.log("loadJSONFile error:"); console.log(error); });
    }
 
@@ -1239 +1826 @@
       } 
    }
-
+   /**
+   * Handles region and chapter colours
+   * @param {object} region Region element to adjust
+   * @param {boolean} highlight Whether or not region should be white-highlighted
+   */
    function handleRegionColours(region, highlight) { // handles region, chapter & word colours
       if (!dualMode || (region.element.classList.contains("region-top") && primaryCaret.src.includes("fill")) || region.element.classList.contains("region-bottom") && secondaryCaret.src.includes("fill")) {
          let colour;
          if (highlight) {
-            colour = "rgb(101, 116, 116)";
+            colour = "rgb(81, 90, 90)";
             regionEnter(region);
          } else {
@@ -1253 +1844 @@
             colour = "rgba(255, 50, 50, 0.5)";
          }
-         chapters.childNodes[region.id.replace("region","")].style.backgroundColor = colour;
+         if (chapters.childNodes[getIndexOfRegion(region)]) chapters.childNodes[getIndexOfRegion(region)].style.backgroundColor = colour;
       }
    }
 
    function regionEnter(region) {
-      // console.log("regionEnter");
       if (isCurrentRegion(region) || isInCurrentRegions(region)) {
          region.update({ color: "rgba(255, 50, 50, 0.5)" });
       } else {
-         region.update({ color: "rgba(255, 255, 255, 0.35)" });
+         region.update({ color: "rgba(255, 255, 255, 0.3)" });
+      }
+      if (editMode && currSpeakerSet.tempSpeakerObjects[getIndexOfRegion(region)] && currSpeakerSet.tempSpeakerObjects[getIndexOfRegion(region)].locked 
+         && region.element.getElementsByClassName("region-padlock").length == 0) { // hovered region is locked
+         let lock = drawPadlock(region.element);
+         attachPadlockListener(lock, region, false);
+      }
+      if (editMode && region.element.getElementsByClassName("region-menu").length == 0) {
+         drawMenuButton(region);
       }
    }
@@ -1270 +1868 @@
          if (isCurrentRegion(region) || isInCurrentRegions(region)) {
             region.update({ color: "rgba(255, 50, 50, 0.5)" });
-         } else if (!(wavesurfer.getCurrentTime() + 0.1 < region.end && wavesurfer.getCurrentTime() > region.start)) {
+         // } else if (!(wavesurfer.getCurrentTime() + 0.1 < region.end && wavesurfer.getCurrentTime() > region.start)) {
+         } else {
             let index = region.id.replace("region", "");
             region.update({ color: regionColourSet.find(item => item.name === currSpeakerSet.tempSpeakerObjects[index].speaker).colour + regionTransparency });
+         }
+         if (region.element.getElementsByTagName("img").length > 0 && !isCurrentRegion(region) && !isInCurrentRegions(region)) {
+            for (let child of Array.from(region.element.children)) {
+               if (child.tagName == "IMG") {
+                  child.remove();
+               }
+            }
          }
       } else {
@@ -1291 +1897 @@
 
    function getLetter(val) {
-      // return val.replace("SPEAKER_","");
       let speakerNum = parseInt(val.replace("SPEAKER_",""));
       return String.fromCharCode(65 + speakerNum); // 'A' == UTF-16 65
    }
 
-
-
-   // edit functionality
-
-   function toggleEditMode() { // toggles edit panel and redraws regions with resize handles
+   function toggleEditMode(skipDualModeToggle) { // toggles edit panel and redraws regions with resize handles
       if (gs.variables.allowEditing === '1') {
-         if (dualMode) dualModeCheckbox.click(); // dual mode is disabled when leaving edit mode
          toggleEditPanel();
          updateRegionEditPanel();
-         drawVersionNames();
-      }
-   }
-
-   function drawVersionNames() { 
-      if (document.getElementById("prim-set-label")) document.getElementById("prim-set-label").remove();
-      if (document.getElementById("sec-set-label")) document.getElementById("sec-set-label").remove();
-      if (editMode && !document.body.contains(loader)) { // editmode is opposite here
-         let dataLabel = document.createElement("span");
-         dataLabel.textContent = gs.documentMetadata.Title + " V1.0";
-         dataLabel.id = "prim-set-label";
-         waveformContainer.prepend(dataLabel);
-         if (dualMode) {
-            let dataLabel = document.createElement("span");
-            dataLabel.textContent = gs.documentMetadata.Title + " V2.0";
-            dataLabel.id = "sec-set-label";
-            waveformContainer.prepend(dataLabel);
-         } 
-      } 
+         reloadChapterList();
+      }
+   }
+
+   function toggleVersionDropdown(e) {
+      e.stopPropagation();
+      if (versionSelectMenu.classList.contains("visible")) {
+         e.target.style.display = 'inline';
+         versionSelectMenu.classList.remove("visible");
+      }
+      else {
+         e.target.style.display = 'none';
+         versionSelectMenu.classList.add("visible");
+         versionSelectMenu.style.top = "2rem";
+         versionSelectMenu.style.height = wave.clientHeight + wavesurfer.timeline.container.clientHeight + document.getElementById("audio-toolbar").clientHeight - 6 + "px";
+         if (e.target.parentElement.id.includes("top")) versionSelectMenu.classList.add("versionTop");
+         else versionSelectMenu.classList.remove("versionTop");
+         for (version of versionSelectMenu.children) { // handle disabling of regions if being viewed
+            if (selectedVersions.includes(version.id) || selectedVersions.includes(version.innerText)) version.classList.add('disabled');
+            else version.classList.remove('disabled');
+         }
+      }
    }
 
@@ -1330 +1933 @@
       hoverSpeaker.innerHTML = "";
       if (editPanel.style.height == "0px") {
-         if (chapters.style.height == "0px") { // expands chapter panel
-            toggleChapters();
-         } 
+         if (chapters.style.height == "0px") toggleChapters(); // expands chapter panel
          editPanel.style.height = "30vh";
-         editPanel.style.padding = "1rem";
+         editPanel.style.padding = "0.5rem";
          setRegionEditMode(true);
       } else { 
@@ -1343 +1944 @@
    }
 
-   function setRegionEditMode(state) {
+   function setRegionEditMode(state) { 
       editMode = state;
       chapters.innerHTML = '';
-      wavesurfer.clearRegions();
-      populateChapters(currSpeakerSet);
-   }
-
+      $('.wavesurfer-region').hide();
+      reloadRegionsAndChapters(); // editMode sets drag/resize property when regions are redrawn
+   }
+
+   /**
+   * Handles the edit of region start time, stop time, or speaker name, updating the speaker set
+   * @param {object} region Region that has been updated
+   */
    function handleRegionEdit(region, e) { 
       if (region.element.classList.contains("region-bottom")) { currSpeakerSet = secondarySet; swapCarets(false) }
@@ -1355 +1960 @@
       editsMade = true;
       currentRegion = region;
-      region.play();
-      wavesurfer.pause();
+      wavesurfer.backend.seekTo(region.start);
       let regionIndex = getCurrentRegionIndex();
       currentRegion.speaker = currSpeakerSet.tempSpeakerObjects[regionIndex].speaker;
@@ -1369 +1973 @@
       handleSameSpeakerOverlap(getCurrentRegionIndex(), currSpeakerSet); // recalculate index in case start pos has changed
       addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "dragdrop", getCurrentRegionIndex());
+      editLockedRegion(currSpeakerSet.tempSpeakerObjects[regionIndex], chaps); 
+
       editPanel.click(); // fixes buttons needing to be clicked twice (unknown cause!)
    }
 
-   function handleSameSpeakerOverlap(regionIdx, speakerSet) { // consumes/merges same-speaker regions with overlapping bounds
+   /**
+   * Shows popup to ensure user is aware they are editing a locked region
+   * @param {object} region Region that is being edited
+   */
+   function editLockedRegion(region) { // ensures user is aware region being edited is locked
+      if (region.locked) {
+         let confirm = false;
+         confirm = window.confirm("Editing a locked region will unlock it, are you sure you want to continue?"); 
+         if (!confirm) undo(); // undo change if no
+         else { // remove lock if yes
+            region.locked = false; 
+            if (region.region && region.region.element.firstChild) region.region.element.firstChild.remove(); // remove region padlock
+            if (chapters.childNodes[getCurrentRegionIndex()] && chapters.childNodes[getCurrentRegionIndex()].childNodes[1].tagName === "IMG") {
+               chapters.childNodes[getCurrentRegionIndex()].childNodes[1].classList.add('hide'); // remove chapter padlock
+            }
+         }
+      }
+   }
+
+   /**
+   * Merges same-speaker regions with overlapping bounds
+   * @param {int} regionIdx Index of dragged/edited region
+   * @param {object} speakerSet Speaker set dragged region exists in 
+   * @param {boolean} skipCurrentRegionUpdate Whether or not to skip the updating of current region
+   */
+   function handleSameSpeakerOverlap(regionIdx, speakerSet, skipCurrentRegionUpdate) {
       let draggedRegion = speakerSet.tempSpeakerObjects[regionIdx]; // regionIdx may point to a different region within the for-loop after adjustments, so defined here
       let draggedRegionSpeaker = draggedRegion.speaker;
@@ -1381 +2012 @@
                draggedRegion.end = Math.max(speakerSet.tempSpeakerObjects[i].end, draggedRegion.end);
                draggedRegion.region.update({start: Math.min(speakerSet.tempSpeakerObjects[i].start, draggedRegion.start), end: Math.max(speakerSet.tempSpeakerObjects[i].end, draggedRegion.end)});
-               currentRegion = draggedRegion;
+               if (!skipCurrentRegionUpdate) currentRegion = draggedRegion;
                speakerSet.tempSpeakerObjects[i].region.remove();
                speakerSet.tempSpeakerObjects.splice(i, 1); // remove consumed region
@@ -1401 +2032 @@
    }
 
-   function updateRegionEditPanel() { // updates edit panel content/inputs
-      // console.log('updating regionEditPanel')
+   /**
+   * Updates the edit panel elements based on various editing states
+   */
+   function updateRegionEditPanel() { 
       if (currentRegion && currentRegion.speaker == "") { 
          removeButton.classList.add("disabled");
@@ -1441 +2074 @@
    }
 
+   /**
+   * Adds a new region to the waveform at the current caret location with the speaker name "NEW_SPEAKER"
+   */
    function createNewRegion() { // adds a new region to the waveform
       clearChapterSearch();
@@ -1447 +2083 @@
       const start = newRegionOffset + wavesurfer.getCurrentTime();
       const end = newRegionOffset + wavesurfer.getCurrentTime() + 15;
-      newRegionOffset += 5; // offset new region if multiple new regions are created. TODO: check region has different start time
+      newRegionOffset += 5; // offset new region if multiple new regions are created. 
       currSpeakerSet.tempSpeakerObjects.push({speaker: speaker, start: start, end: end});
 
@@ -1467 +2103 @@
    }
 
-   function removeRegion() { // removes currently selected region or regions
+   /**
+   * Removes the currently selected region or regions
+   */
+   function removeRegion() { 
       if (!removeButton.classList.contains("disabled")) {
          if (getCurrentRegionIndex() != -1) { // if currentRegion has been set 
             let currentRegionIndex = getCurrentRegionIndex();
             let currentRegionIndexes = getCurrentRegionsIndexes();
+            let lockTemplate = { locked: currSpeakerSet.tempSpeakerObjects[currentRegionIndex].locked };
             for (let i = 0; i < currSpeakerSet.tempSpeakerObjects.length; i++) {
                if (isCurrentRegion(currSpeakerSet.tempSpeakerObjects[i].region)) {
@@ -1482 +2122 @@
                      addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "remove", currentRegionIndex);
                      updateRegionEditPanel();
+                     reloadChapterList();
+                     editLockedRegion(lockTemplate);
                      return; // jump out of function
                   }
@@ -1493 +2135 @@
             addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "remove", currentRegionIndex, currentRegionIndexes); // multiple regions removed
             updateRegionEditPanel();
+            reloadChapterList();
+            editLockedRegion(lockTemplate);
          } else { console.log("no region selected") }
       }
@@ -1554 +2198 @@
    }
 
-   function speakerChange() { // speaker input name onInput handler
+   /**
+   * Changes the associated speaker name of a region, updating the speaker set
+   */
+   function speakerChange() {
       const newSpeaker = speakerInput.value;
       clearChapterSearch();
-      if (newSpeaker && newSpeaker != "") {
+      if (newSpeaker && newSpeaker.trim() != "") {
          speakerInput.style.outline = "2px solid transparent";
          if (getCurrentRegionIndex() != -1) { // if a region is selected
@@ -1577 +2224 @@
             editsMade = true;
             addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "speaker-change", getCurrentRegionIndex(), getCurrentRegionsIndexes());
+            editLockedRegion(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()]);
          } else { console.log("no region selected") }
       } else { console.log("no text in speaker input"); speakerInput.style.outline = "2px solid firebrick"; }
@@ -1590 +2238 @@
    }
 
+   /**
+   * Selects all (or reverts select-all) regions matching any of the currently selected speaker names
+   * @param {boolean} skipUndoState Whether or not to skip the addition of an undo state
+   */
    function selectAllCheckboxChanged(skipUndoState) { // "Change all" toggled
       if (changeAllCheckbox.checked) {
@@ -1624 +2276 @@
 
    function disableStartEndInputs() { // adds the 'disabled' tag to all time inputs
-      for (idx in startTimeInput.childNodes) { startTimeInput.childNodes[idx].disabled = true; startTimeInput.childNodes[idx].value = 0; }
-      for (idx in endTimeInput.childNodes) { endTimeInput.childNodes[idx].disabled = true; endTimeInput.childNodes[idx].value = 0; }
-   }
-
-   function zoomTo(dest) { // (smoothly?) zooms wavesurfer waveform to destination
+      for (idx in startTimeInput.childNodes) { startTimeInput.childNodes[idx].value = 0; startTimeInput.childNodes[idx].disabled = true; }
+      for (idx in endTimeInput.childNodes) { endTimeInput.childNodes[idx].value = 0; endTimeInput.childNodes[idx].disabled = true; }
+   }
+
+   /**
+   * Zooms wavesurfer waveform to destination zoom level, used in select all function
+   * @param {number} dest Destination zoom level
+   */
+   function zoomTo(dest) { 
       isZooming = true;
       changeAllCheckbox.disabled = true;
@@ -1657 +2313 @@
             }
          }
-      }, 10); // interval
-      
+      }, 10); // 10ms interval
+   }
+
+   function toggleSavePopup() { // shows / hides commit popup div
+      savePopupCommitMsg.value = savePopupCommitMsg.value.trim(); // clears initial whitespace caused by <xsl: text>
+      if (savePopup.classList.contains("visible")) {
+         savePopup.classList.remove("visible");
+         savePopupBG.classList.remove("visible");
+      } else {
+         savePopup.classList.add("visible");
+         savePopupBG.classList.add("visible");
+         savePopup.children[0].innerText = "Commit changes for: " + selectedVersions[(!dualMode || primaryCaret.src.includes("fill")) ? 0 : 1]; 
+      }
    }
 
    function saveRegionChanges() { // saves tempSpeakerObjects to speakerObjects
       if (!saveButton.classList.contains("disabled")) {
-         currSpeakerSet.speakerObjects = cloneSpeakerObjectArray(currSpeakerSet.tempSpeakerObjects);
-         editsMade = false;
-         removeCurrentRegion();
-         reloadRegionsAndChapters();
-         console.log("saved changes");
-      }
-   }
-
-   function discardRegionChanges() { // resets tempSpeakerObjects to speakerObjects
-      if (!discardButton.classList.contains("disabled")) {
-         let confirm = window.confirm("Are you sure you want to discard changes?");
-         if (confirm) {
+         toggleSavePopup();
+         // old save functionality
+         // currSpeakerSet.speakerObjects = cloneSpeakerObjectArray(currSpeakerSet.tempSpeakerObjects);
+         // editsMade = false;
+         // removeCurrentRegion();
+         // reloadRegionsAndChapters();
+         // console.log("saved changes.");
+      }
+   }
+
+   /**
+   * Commits changes made to the currently selected set to Greenstone's version history system. 
+   * Firstly increments FLDV, then saves commit message to document's metadata, then sets document's
+   * associated file to tempSpeakerObjects CSV.
+   */
+   function commitChanges() {
+      if (savePopupCommitMsg.value && savePopupCommitMsg.value.length > 0) {
+         console.log('committing with message: ' + savePopupCommitMsg.value);
+         // inc fldv_history
+         $.ajax({
+            type: "GET",
+            url: mod_meta_base_url,
+            data: { "o": "json", "s1.a": "inc-fldv-nminus1" }
+         }).then((out) => {
+            console.log('fldv inc success with status code: ' + out.page.pageResponse.status.code);
+            if (out.page.pageResponse.status.code == 11) { // more information on codes found in: GSStatus.java
+               ajaxSetCommitMeta();
+            }
+         }, (error) => { console.log("inc-fldv-nminus1 error:\n" + error) });
+         toggleSavePopup();
+      } else {
+         window.alert("Commit message cannot be left empty.");
+      }
+   }
+
+   function ajaxSetCommitMeta() { // saves commit message to current document's metadata
+      $.ajax({
+         type: "GET",
+         url: mod_meta_base_url,
+         data: { "o" : "json", "s1.a": "set-archives-metadata", "s1.metaname": "commitmessage", "s1.metavalue": savePopupCommitMsg.value.trim(), "s1.metamode": "override" },
+      }).then((out) => {
+         console.log('commit success with status code: ' + out.page.pageResponse.status.code);
+         if (out.page.pageResponse.status.code == 11) {
+            ajaxSetAssocFile();
+         }
+      }, (error) => { console.log("commit_msg_url error:"); console.log(error); });
+   }
+
+   function ajaxSetAssocFile() { // sets current document's associated file to tempSpeakerObjects
+         $.ajax({
+            type: "POST",
+            url: gs.xsltParams.library_name,
+            data: { "o" : "json", "a": "g", "rt": "r", "ro": "0", "s": "ModifyMetadata", "s1.collection": gs.cgiParams.c, "s1.site": gs.xsltParams.site_name, "s1.d": gs.cgiParams.d, 
+                    "s1.a": "set-archives-assocfile", "s1.assocname": "structured-audio.csv", "s1.filedata": speakerObjToCSVText() },
+         }).then((out) => {
+            console.log('set-archives-assocfile success with status code: ' + out.page.pageResponse.status.code);
+            resetUndoStates();
+         }, (error) => { console.log("set_assoc_url error:"); console.log(error); });
+   }
+
+   function speakerObjToCSVText() { // converts tempSpeakerObjects to csv-like string 
+      console.log(currSpeakerSet.tempSpeakerObjects.map(item => [item.speaker, item.start, item.end, item.locked]).join('\n'));
+      return currSpeakerSet.tempSpeakerObjects.map(item => [item.speaker, item.start, item.end, item.locked]).join('\n');
+   }
+
+   function discardRegionChanges(forceDiscard) { // resets tempSpeakerObjects to speakerObjects
+      if (!discardButton.classList.contains("disabled") || forceDiscard) {
+         let confirm = false;
+         if (!forceDiscard) { confirm = window.confirm("Are you sure you want to discard changes?"); }
+         if (confirm || forceDiscard) {
             currSpeakerSet.tempSpeakerObjects = cloneSpeakerObjectArray(currSpeakerSet.speakerObjects);
             editsMade = false;
@@ -1685 +2410 @@
    }
 
+   /**
+   * Redraws edit panel, chapter list and wavesurfer regions from speaker set
+   */
    function reloadRegionsAndChapters() { // redraws edit panel, chapter list, wavesurfer regions 
       updateRegionEditPanel();
-      wavesurfer.clearRegions();
       $(".region-top").remove();
       $(".region-bottom").remove();
       $(".wavesurfer-region").remove();
-      populateChapters(primarySet);
+      populateChaptersAndRegions(primarySet);
       if (dualMode) { 
-         populateChapters(secondarySet);
+         populateChaptersAndRegions(secondarySet);
          currSpeakerSet = primarySet;
       }
@@ -1703 +2430 @@
       if (currentRegions.length < 1) { 
          removeButton.innerHTML = "Remove Selected Region";
-         enableStartEndInputs();
+         // enableStartEndInputs();
       } else {
          removeButton.innerHTML = "Remove Selected Regions (x" + currentRegions.length + ")";
-         disableStartEndInputs();
          const uniqueSelectedSpeakers = [... new Set(currentRegions.map(a => a.speaker))]; // gets unique speakers in currentRegions
          uniqueSelectedSpeakers.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
@@ -1713 +2439 @@
    }
 
+   /**
+   * Handles the change of a region's start or end time, updating hte speaker set
+   */
    function changeStartEndTime(e) { // start/end time input handler
       let newStart = getTimeInSecondsFromInput(startTimeInput);
@@ -1735 +2464 @@
          handleSameSpeakerOverlap(currRegIdx, currSpeakerSet);
          addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "change-time", getCurrentRegionIndex());
+         editLockedRegion(currSpeakerSet.tempSpeakerObjects[currRegIdx]);
       } else { 
          console.log("no region selected");
@@ -1742 +2472 @@
    }
 
-   function getTimeInSecondsFromInput(input) { // returns time in seconds from start or end input
+   /**
+   * Calculates time in seconds of start or end time input group
+   * @param {element} input Element of time input groups: hh:mm:ss
+   * @returns {int} Time in seconds 
+   */
+   function getTimeInSecondsFromInput(input) { 
       let hours = input.children[0].valueAsNumber;
       let mins = input.children[1].valueAsNumber;
@@ -1749 +2484 @@
    }
 
+   /**
+   * Sets the start or end time element group inputs 
+   * @param {element} input Element of time input group to be updated
+   * @param {int} seconds Duration in seconds to be converted into hh:mm:ss
+   */
    function setInputInSeconds(input, seconds) { // sets start or end input time when given seconds
       let date = new Date(null);
@@ -1759 +2499 @@
          if (e.classList.contains("seconds") && !e.value.includes(".")) { e.value = e.value + ".0"; }
          else if (e.value.length === 1){ e.value = '0' + e.value; }// 0 padded on left
-         // if (e.value.length === 3) {e.value = '0' + e.value ; console.log('3: ' + e.value)} // 0 on the left (doesn't work on FF)
       });      
    }
 
+   /**
+    * Adds a new undo state to the global undo state list
+    * @param {object} state Primary set at current state
+    * @param {object} secState Secondary set at current state
+    * @param {boolean} isSec Whether or not current change was made to primary (false) or secondary (true) set
+    * @param {boolean} dualMode Whether or not audio editor was in dual mode when undo state was added
+    * @param {string} type Type of change e.g "remove", "speaker-change"
+    * @param {int} currRegIdx Index of currently selected region (for restoration)
+    * @param {Array} currRegIdxs Index of currently selected regions, if applicable (for restoration)
+    */
    function addUndoState(state, secState, isSec, dualMode, type, currRegIdx, currRegIdxs) { // adds a new state to the undoStates stack
       let newState = cloneSpeakerObjectArray(state.tempSpeakerObjects); // clone method removes references
       let newSecState = cloneSpeakerObjectArray(secState.tempSpeakerObjects); // clone method removes references
+      let changedTrack = (type == "dualModeChange" || type == "selectAllChange") ? "none" : selectedVersions[isSec ? 1 : 0] // sets changedTrack to version name of edited region set 
       undoButton.classList.remove("disabled");
       undoStates = undoStates.slice(0, undoLevel + 1); // trim to current level if undos have already been made
-      undoStates.push({state: newState, secState: newSecState, isSec: isSec, dualMode: dualMode, currentRegionIndex: currRegIdx, currentRegionIndexes: currRegIdxs, type: type});
+      undoStates.push({state: newState, secState: newSecState, isSec: isSec, changedTrack: changedTrack, dualMode: dualMode, currentRegionIndex: currRegIdx, currentRegionIndexes: currRegIdxs, type: type});
       if ((type === "change-time" && prevUndoState === "change-time") || (type === "speaker-change" && prevUndoState === "speaker-change")) { // checks if similar change was made previously
          undoStates.splice(-2, 1); // remove second-to-last item in undoStates stack (merge last two changes into one to avoid multiple small edits)
@@ -1783 +2533 @@
    }
 
-   function undo() { // undo action: go back one state in the undoStates stack
+   /**
+    * Returns to the previous state in the undo state list
+    */
+   function undo() {
       if (!undoButton.classList.contains("disabled") && editMode) { // ensure there exist states to undo to
          clearChapterSearch();
@@ -1791 +2544 @@
             let adjustedUndoLevel = undoLevel-1;
             if (undoStates[undoLevel].type == "dualModeChange") { // toggle dual mode
-               dualModeCheckbox.checked = !dualMode;
                dualModeChanged(true);
             } else if (undoStates[undoLevel].type == "selectAllChange") { // toggle select all
@@ -1808 +2560 @@
                   else caretClicked("primary-caret");
                   currentRegion = selectedSpeakerSet.tempSpeakerObjects[undoStates[undoLevel].currentRegionIndex]; // restore previous current state
-                  // console.log("undo-ing to index " + undoStates[undoLevel].currentRegionIndex);
                } else if (undoStates[undoLevel].currentRegionIndex) {
                   if (!dualMode) selectedSpeakerSet = primarySet;
@@ -1824 +2575 @@
             }
             editsMade = true;
-            
             undoLevel--; // decrement undoLevel
             reloadRegionsAndChapters();
@@ -1835 +2585 @@
    }
 
-   function redo() { // redo action: go forward one state in the undoStates stack
+   /**
+    * Moves forward one state in the undo state list
+    */
+   function redo() {
       if (!redoButton.classList.contains("disabled") && editMode) { // ensure there exist states to redo to
          clearChapterSearch();
@@ -1841 +2594 @@
          else {
             if (undoStates[undoLevel+1].type == "dualModeChange") { // toggle dual mode
-               dualModeCheckbox.checked = !dualMode;
                dualModeChanged(true);
             } else if (undoStates[undoLevel+1].type == "selectAllChange") { // toggle select all
@@ -1850 +2602 @@
                secondarySet.tempSpeakerObjects = cloneSpeakerObjectArray(undoStates[undoLevel+1].secState.slice(0)); // set secondary to new state
                let selectedSpeakerSet;
-
                // handle currentRegion change
                removeCurrentRegion();
@@ -1865 +2616 @@
                      currentRegion = selectedSpeakerSet.tempSpeakerObjects[undoStates[undoLevel+1].currentRegionIndex];
                   }
-
-                  // console.log("redo-ing to index " + undoStates[undoLevel+1].currentRegionIndex);
                   if (undoStates[undoLevel+1].currentRegionIndexes && undoStates[undoLevel+1].currentRegionIndexes.length > 1) {
                      for (const idx of undoStates[undoLevel+1].currentRegionIndexes) currentRegions.push(currSpeakerSet.tempSpeakerObjects[idx]);
@@ -1873 +2622 @@
             }
             editsMade = true;  
-            
-            
             reloadRegionsAndChapters();
             undoLevel++; // increment undoLevel
@@ -1882 +2629 @@
          }
          if (undoLevel < undoStates.length) undoButton.classList.remove("disabled");
-         // console.log("new undoLevel: " + undoLevel);
       }
    }
 
    function resetUndoStates() { // clear undo history
-      // console.log('resetUndoStates')
       undoStates = [{state: cloneSpeakerObjectArray(primarySet.tempSpeakerObjects), secState: cloneSpeakerObjectArray(secondarySet.tempSpeakerObjects)}];
       undoLevel = 0;
@@ -1901 +2646 @@
          drawCurrentRegionBounds();
       }
-   }
-
-   function drawCurrentRegionBounds() {
+      if (document.getElementById('new-canvas')) { document.getElementById('new-canvas').style.left = "-" + wave.scrollLeft + 'px' } // update placeholder waveform scroll position
+   }
+
+   function drawCurrentRegionBounds() { // draws bounds of current region
       removeRegionBounds();
-      if (editMode) {
-         let currIndexes = getCurrentRegionsIndexes();
-         if (getCurrentRegionIndex != 0) drawRegionBounds(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region, wave.scrollLeft, "FireBrick");
-         for (let i = 0; i < currIndexes.length; i++) {
-            drawRegionBounds(currSpeakerSet.tempSpeakerObjects[currIndexes[i]].region, wave.scrollLeft, "FireBrick");
-         }
-      }
-   }
-
+      let currIndexes = getCurrentRegionsIndexes();
+      if (getCurrentRegionIndex() != -1) drawRegionBounds(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region, wave.scrollLeft, "FireBrick");
+      for (let i = 0; i < currIndexes.length; i++) {
+         drawRegionBounds(currSpeakerSet.tempSpeakerObjects[currIndexes[i]].region, wave.scrollLeft, "FireBrick");
+      }
+   }
+
+   /**
+    * Draws bounding 'n' above hovered or selected region 
+    * @param {object} region Region to have bound drawn for
+    * @param {number} scrollPos Scroll position of div, used to offset draw position
+    * @param {string} colour Colour to draw bound (black and FireBrick are used)
+    */
    function drawRegionBounds(region, scrollPos, colour) { // draws on canvas to show bounds of hovered/selected region
       const hoverSpeakerCanvas = document.createElement("canvas");
@@ -1920 +2670 @@
       hoverSpeakerCanvas.width = audioContainer.clientWidth; // max width of drawn bounds
       const ctx = hoverSpeakerCanvas.getContext("2d");
-
-      ctx.translate(0.5, 0.5); // fixes lineWidth inconsistency
+      // ctx.translate(0.5, 0.5); // fixes lineWidth inconsistency
       ctx.lineWidth = 1;
       if (colour == "FireBrick") ctx.lineWidth = 3;
@@ -1943 +2692 @@
    }
 
-   function updateCurrSpeakerSet() {
+   function updateCurrSpeakerSet() { // updates 'currSpeakerSet' var
       if (primaryCaret.src.includes("fill")) currSpeakerSet = primarySet;
       else if (secondaryCaret.src.includes("fill")) currSpeakerSet = secondarySet;
@@ -1950 +2699 @@
    function cloneSpeakerObjectArray(inputArray) { // clones speakerObjectArray without references (wavesurfer regions)
       let output = [];
-      for (let i = 0; i < inputArray.length; i++) { output.push({speaker: inputArray[i].speaker, start: inputArray[i].start, end: inputArray[i].end }) }
+      for (let i = 0; i < inputArray.length; i++) { 
+         output.push({ speaker: inputArray[i].speaker, start: inputArray[i].start, end: inputArray[i].end, locked: (inputArray[i].locked === "true" || inputArray[i].locked === true) });
+      }
       return output;
    }
 
-   function flashChapters() {
+   function flashChapters() { // flashes chapters a lighter colour momentarily to indicate an update/change
       chapters.style.backgroundColor = "rgb(66, 84, 88)";
       setTimeout(() => { chapters.style.backgroundColor = "rgb(40, 54, 58)" }, 500);
    }
 
-   function fullscreenChanged() { // fullscreen onChange handler, increases waveform height & adjusts padding/margin
+   /** Fullscreen onChange handler, increases waveform height & adjusts padding/margin */
+   function fullscreenChanged() { 
       if (!audioContainer.classList.contains("fullscreen")) {
          audioContainer.classList.add("fullscreen");
-         wavesurfer.setHeight(175);
+         wavesurfer.setHeight(175); // increase waveform height
+         caretContainer.style.paddingLeft = "2rem"; 
+         caretContainer.style.height = wavesurfer.getHeight() + "px"; // set height to waveform height
+         audioContainer.prepend(caretContainer); // attach to audioContainer (otherwise doesn't show due to AC being fullscreen)
       } else  {
          audioContainer.classList.remove("fullscreen");
-         wavesurfer.setHeight(128);
-      }
-   }
-
-   function toggleFullscreen() { // toggles fullscreen mode of audio player/editor
+         wavesurfer.setHeight(140);
+         caretContainer.style.paddingLeft = "0";
+         caretContainer.style.height = wavesurfer.getHeight() + "px";
+         audioContainer.parentElement.prepend(caretContainer); // move back up in DOM hierarchy 
+      }
+      setTimeout(() => { // ensures waveform shows  
+         zoomOutButton.click();
+         zoomInButton.click();
+      }, 250);
+   }
+
+   /** Enables / disables the fullscreen view of audio player / editor */
+   function toggleFullscreen() { 
       if ((document.fullscreenElement && document.fullscreenElement !== null) ||
         (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
@@ -1976 +2739 @@
          document.exitFullscreen();
       } else {
-         audioContainer.requestFullscreen();
+         if (audioContainer.requestFullscreen) {
+            audioContainer.requestFullscreen();
+         } else if (audioContainer.webkitRequestFullscreen) { /* Safari */
+            audioContainer.webkitRequestFullscreen();
+         } else if (audioContainer.msRequestFullscreen) { /* IE11 */
+            audioContainer.msRequestFullscreen();
+         }
       }
    }
 }
 
+/**
+ * Formats seconds to hh:mm:ss
+ * @param {number} duration 
+ * @returns {string} Time in hh:mm:ss format
+ */
 function formatAudioDuration(duration) {
    // console.log('duration: ' + duration);