outline.html

<!-- ================================================== -->
<!--      THIS IS ALL THE HARD-CODED HTML WE GET:       -->
<!-- ================================================== -->

<div id="flexiContainer" class="flexiContainer"></div> 
<div id="cover" class="blurWindow" style="display: none" onclick="closeNewMenu(); toggleTrackingContainer(true); storeAndClosePrintbox(false)"></div>
<!-- <pre id="dumpDiv" style="padding: 10px; bottom: 10px; left: 10px; border-radius: 5px; pointer-events: none; position: absolute; white-space: pre-wrap; background-color: rgba(255,255,255,0.7); font-size: 9px"></pre> -->

<div id="buttonRow">
	<div class="leftgroup">
		<div id="sidepanelButton" class="bottomButton" onclick="mylog('clicked sidepanelButton'); toggleNotepanel()"></div>
		<div id="helpButton" class="bottomButton" onclick="mylog('clicked settingsButton'); toggleNewMenu('settingsMenu')"></div>
		<div id="printButton" class="bottomButton" onclick="mylog('clicked exportButton'); toggleNewMenu('exportMenu')"></div>
		<div id="infoField"></div>
	</div>
	<div class="rightgroup">
		<div id="saturationSlider"><input type="range" min="0" max="100" value="50" class="slider" step="10" style="direction: rtl;" id="saturationRange" oninput="changeSaturation()"></div>
		<div id="indexCardButton" class="bottomButton" onclick="mylog('clicked indexCardButton'); toggleNewMenu('indexCardMenu')"></div>
		<div id="showStuffButton" class="bottomButton" onclick="mylog('clicked stuffButton'); toggleNewMenu('showStuffMenu')"></div>
		<div id="notesButton" class="bottomButton" onclick="mylog('clicked notesButton'); toggleNewMenu('notesMenu')"></div>
		<div id="characterButton" class="bottomButton" onclick="mylog('clicked TrackingButton'); toggleNewMenu('trackingMenu')"></div>
		<div id="zoomButton" class="bottomButton" onclick="mylog('clicked zoomButton'); toggleNewMenu('zoomMenu')"></div>
	</div>
</div>
<!--div id="notepanelOpener" onclick="toggleNotepanel()"></div-->

<div id="notepanel" class="">
	<div id="tabsRow">
		<div class="tab notetab selectedtab" onclick="cycleTabs(event.target)">Notes
		</div>
		<div class="tab dialogtab" onclick="cycleTabs(event.target)">Dialogue
		</div>
		<div class="tab scenestab" onclick="cycleTabs(event.target)">Scenes
		</div>
		<div class="closetab" onclick="toggleNotepanel()">×
		</div>
	</div>
	<div id="notepanelbuttons">
	</div>
	<div id="dialogpanelbuttons">
		<div class="hasSelect dropDownSpan">
			<select id="allDialogFor" class="colorDropdown" onchange="showCharacterBubbles()">
				<option></option>
			</select>
		</div>
		<div id="dialogSearchIcon" class="dialogSearchIcon"></div>
		<input id="dialogsearch" class="dialogsearch" type="text" spellcheck="false" placeholder="search for..." oninput="onlyShowMatchingDialogs()" onfocus="toggleCaptureKeypresses(false)" onblur="toggleCaptureKeypresses(true)" onkeydown="searchboxlisten(event)">
		<div id="clearSearchButton" onclick="clearSearchBox()">×</div>
	</div>
	<div id="scenespanelbuttons">
	</div>
	<div id="notepanelcontent" onscroll="setScrollShadow()">
	</div>
	<div id="dialogpanelcontent">
	</div>
	<div id="scenespanelcontent" class="scenespanelcontent" onclick="deselectAllScenepanelItems()" onscroll="setScrollShadow()">	
		<div id="dividerline"></div>
	</div>
	<div id="drag-bar" onmousedown="resizeNotepanel()" ondblclick="toggleNotepanel()"></div>
</div>

<!-- ================================================== -->
<!--      HERE ENDS THE HTML PART, JAVASCRIPT BELOW     -->
<!-- ================================================== -->

<script>

//MARK: - all the buttons are here

document.addEventListener("dblclick", function(event){
	event.preventDefault()
	event.stopPropagation()
	mylog(event)			
	editContent(event)
})

$id("flexiContainer").addEventListener("contextmenu", function(event){
	if(event.metaKey && event.altKey) return // so as not to get contextmenu when ctrl+alt+cmd is pressed
	event.preventDefault()
	event.stopPropagation()
	mylog(event)			
	displayContextMenu(event)
})
$id("notepanel").addEventListener("contextmenu", function(event){
	if(event.metaKey && event.altKey) return // so as not to get contextmenu when ctrl+alt+cmd is pressed
	event.preventDefault()
	event.stopPropagation()
	mylog(event)			
	displayContextMenu(event)
})

$id("flexiContainer").ondragstart = function(event){onDragStart(event)}
$id("flexiContainer").ondragend = function(event){onDragEnd(event)}
$id("flexiContainer").ondragenter = function(event){onDragEnter(event)}
$id("flexiContainer").ondragleave = function(event){onDragLeave(event)}
$id("flexiContainer").ondragover = function(event){onDragOver(event)}
$id("flexiContainer").ondrop = function(event){onDrop(event)}
$id("flexiContainer").onscroll = function(){flexiContainer.style.setProperty("--flexiScroll", flexiContainer.scrollTop) + "px"}
$id("flexiContainer").classList.add("positionRelative")

window.addEventListener("blur", minimizeFTOutliner)
window.addEventListener("focus", () => maximizeFTOutliner(false))

function minimizeFTOutliner(){ if(userDefault["hideOnBlur"] == true) Beat.call("Beat.custom.minimizeFTOutliner()") }
function maximizeFTOutliner(unconditionally){ if(unconditionally || userDefault["hideOnBlur"] == true) Beat.call("Beat.custom.maximizeFTOutliner()") }

document.getElementById("sidepanelButton").innerHTML = sidebarLeftIcon
document.getElementById("indexCardButton").innerHTML = outlineIcon
document.getElementById("characterButton").innerHTML = funnelIcon + `<div id="selectedCharacterName"></div>`
document.getElementById("showStuffButton").innerHTML = showIcon
document.getElementById("helpButton").innerHTML = gearIcon
document.getElementById("printButton").innerHTML = printerIcon
document.getElementById("notesButton").innerHTML = noteIcon
document.getElementById("zoomButton").innerHTML = zoomIcon
document.getElementById("dialogSearchIcon").innerHTML = searchIcon
document.getElementById("saturationSlider").innerHTML += paletteIcon

if(!document.createElement('dialog').showModal){
	alertThis("Please update your Safari browser", "Beat plugins use WebKit to run, and FTOutliner uses features that were introduced with Webkit version 613.1.17 (which corresponds to Safari 15.4). \\n\\nPlease update your Safari to at least that version, or you may experience unexpected behavior from FTOutliner.")
}

// GLOBAL UI VARIABLES

	let smallTypeTimer //= null; //setting initial timer to avoid errors	
	let fullTypeTimer //= null;
	var settingsContainerVisibility = 0;
	var trackingContainerVisibility = 0;
	var helpContainerVisibility = 0;
	var notesAreDisplayed = false;
	var markersAreDisplayed = false;
	var synopsisAreDisplayed = false;
	var beatsAreDisplayed = false;
	var scenesAreHidden = false;
	var currentZoomLevel;

	var settingsContainer = document.getElementById('settings');
	var trackingContainer = document.getElementById('tracking');
	var helpContainer = document.getElementById('helpWindow');
	var coverContainer = document.getElementById('cover');
	var theRoot = document.querySelector(':root');
	var blockOrNone = ['block', 'none'];

	var classListArray = []

	var contextMenuIsOpen = false

	var logArray=[]

// GLOBAL DEFAULT VARIABLES

	var showSceneLengths, showSceneNumbers, showPageNumbers, realTimeIsOn

// GLOBAL DOCUMENT-RELATED VARIABLES

	var outline, pages
	var heightFactor = 10 //initial value if all else fails

	var currentSectionDepth;
	var previousSectionDepth;
	var lastIndexOfScene;
	var currentLine;

	var lengthOfScene = [];
	var lengthOfSceneInEights = [];
	var outlineElementNumber
	var actNumber, endElement
	var location, length 

	var omittedNumber

	var firstLineThatIsNoSynopsis = 0
	var selectedNote = -1
	var previouslyHovered

	var someoneResizedTheWindow = debounce(function() {

		theRoot.style.setProperty('--theDocumentWidth', window.innerWidth)
		theRoot.style.setProperty('--theDocumentHeight', window.innerHeight)
		saveCurrentState()
		recalculateHeights("from someoneResizedTheWindow")
		if(beatsAreDisplayed){toggleDisplayBeats(); toggleDisplayBeats()}
	}, 150);

//	EVENTLISTENER ON LOAD: FETCH DATA FROM PLUGIN, THEN BUILD THE COMPLETE OUTLINE:

// $id("flexiContainer").onclick = function(event){starthere(event)}

// function starthere(){
window.addEventListener('load', function () {

	flexiContainer.classList.add("focused") //in order to correctly switch focus between main app and plugin right from the start
	console.log("setting eventlisteners")
	setAllEventlisteners()
	console.log("getting settings")
	getSettings(true) //true means startup, which will trigger the showWelcomeWindow function
	
	console.log("calling update")
	
	Beat.call("Beat.custom.updateEntireOutline()")
	
})

function launchWelcomeDialog(ftoutlinerVersion){
	
	//MOVED THE WELCOME WINDOW TO THE HTML CODE in order to hopefully circumvent weirdness where both windows loaded it

	let showWelcome = userDefault["dontShowWelcomeWindowFor" + ftoutlinerVersion?.replace(".", "")]
		
 	if(!showWelcome){
		Beat.call(`Beat.custom.displaySecondWindow("Welcome", "welcomewindow.html", 800, 650, false)`)
	}
}

//	EVENTLISTENERS FOR keypresses and such
function setAllEventlisteners(){

	console.log("settingEventlisteners")

	window.onerror = function(message, source, lineno, colno, error) {
		mylog("===== ERROR =====", true)
		}

	toggleCaptureKeypresses(true)

	document.addEventListener("mouseup", somethingWasClicked)
	window.addEventListener("resize", someoneResizedTheWindow)
	window.addEventListener("focus", function () {
			flexiContainer.classList.add("focused")	
			if(userDefault.realTimeIsOn == 1) return
			document.getElementById('outOfSyncDiv').style.display = "none";
			firstRun()//should provide loc and len here!	
		});
	window.addEventListener("blur", function () {
			flexiContainer.classList.remove("focused")	
			deselectAllElements()
			collapseNote()
			closeContextMenu()
			saveCurrentState()
			releaseALT()
			if (document.querySelector(".sceneTitlePopup")){document.querySelector(".sceneTitlePopup").remove()}
		});	
	document.addEventListener("mouseover", hover)
	document.addEventListener("mouseleave", unhover) //was moouseout
	document.addEventListener("mousemove", storeHoveredElement)
}

function toggleCaptureKeypresses(on){

	if(on){
		// document.addEventListener("keydown", checkWhatKeyGotPressed)
		document.addEventListener("keydown", keypress)
		document.addEventListener("keyup", checkWhatKeyWasReleased)
	}else{
		// document.removeEventListener("keydown", checkWhatKeyGotPressed)
		document.removeEventListener("keydown", keypress)
		document.removeEventListener("keyup", checkWhatKeyWasReleased)
	}
}

function storeHoveredElement(e){

	elementBeingHovered = {
		element: e.target || null, // newly added global, so as to be able to check if it's still being hovered when ALT is pressed
		x: e.clientX,
		y: e.clientY
	}
}

function hover() {
	
	mylog("HOVERING " + event.target.classList)

	let element = event.target

	// $id("buttonRow").innerHTML = element.classList

	//Gatekeeping
		if (weAreCurrentlyEditingText){
			return
		}
		if (JSON.stringify(element.closest(".scene, .section")?.id) == previouslyHovered
			|| element.id == "hiddenSceneTitlePopup"){
				mylog("returning bc previously hovered: " + previouslyHovered)
				return
		}

	//Actual stuff before going to unhover: 
	//NOTEPANEL...
		if(element.classList.contains("notepanelNote") || element.classList.contains("notepanelReview")){
			panelNoteIsHovered(element)
			return
		}
	//BEATS...
		if(element.classList.contains("beat")){
			beatIsHovered(element)
			return
		}
		if(element.classList.contains("review")){
			highlightReviewInPanel(element)
			return
		}
	//markers...
		if(element.classList.contains("marker")){
			return
		}

	unhover()

	//Popping up scene name for small scenes
		if (element.closest(".scene")?.classList.contains("sluglineIsHidden") && !altIsBeingPressed){
			hiddenSlugPopup(element)
		}

	//experimental: pop up snapshot of scene if alt is pressed
		if (altIsBeingPressed){
			storeHoveredElement(event)
			snapshotPopup()
		}

	
	// elementBeingHovered = element // keeps it in mind for ALT-pressing
	
}

function snapshotPopup(element = elementBeingHovered.element){

	if($id("snapshotPopup") && $id("snapshotPopup").dataset.uuid == element?.closest(".scene")?.dataset.uuid) return
	if(!element.closest("#snapshotPopup")) closeSnapShotPopup()

	let scene = element.closest(".scene")
		if(!scene) return
	//find the next same-level sibling, or if none, the next sibling of its parent
	// let nextScene = scene.nextElementSibling || scene.parentElement?.nextElementSibling || scene.parentElement?.parentElement?.nextElementSibling || scene.parentElement?.parentElement?.parentElement?.nextElementSibling
	// let nextScene = scene.querySelector(":scope + .scene") || scene.parentElement?.querySelector(":scope + .section > .scene") || scene.parentElement?.parentElement?.querySelector(":scope + .section > .section > .scene") || scene.parentElement?.parentElement?.parentElement?.querySelector(":scope + .section > .section > .section > .scene")
	let nextScene = getNextSiblingWithClass(scene, '.scene') || getNextSiblingWithClass(scene.parentElement, '.section') || getNextSiblingWithClass(scene.parentElement?.parentElement, '.section') || getNextSiblingWithClass(scene.parentElement?.parentElement?.parentElement, '.section')//?.querySelector('.scene, .section') || getNextSiblingWithClass(scene.parentElement?.parentElement, 'section')?.querySelector('.scene, .section') || getNextSiblingWithClass(scene.parentElement?.parentElement?.parentElement, 'section')?.querySelector('.scene, .section');
		//if(!nextScene) return

		//helper to find next sibling with class
		function getNextSiblingWithClass(element, selector) {
			let sibling = element.nextElementSibling;
			while (sibling) {
				if (sibling.matches(selector)) {
					return sibling;
				}
				sibling = sibling.nextElementSibling;
			}
			return null;
		}

		// console.log("siblings done:", scene, nextScene)

	let startingLine = lines.find(line => line.uuid == scene.dataset.uuid)
		if(!startingLine) return
	let endingLine = lines.find(line => line.uuid == nextScene?.dataset.uuid) || lines.find(line => line.location > scene.dataset.sceneEnd) || lines[lines.length - 1]
		if(!endingLine) return

	let sceneLines = lines.slice(lines.indexOf(startingLine), lines.indexOf(endingLine) - 1)

		// console.log("now to make div")

	let popup = document.createElement("div")
		popup.id = "snapshotPopup"
		popup.dataset.uuid = scene.dataset.uuid
		popup.classList.add("snapshotPopup")
		for (let line of sceneLines){
			let lineDiv = document.createElement("div")
			let cls = line.typeAsString?.toLowerCase()
				if (cls.includes(" ")) cls = cls.split(" ")[1]
				lineDiv.classList.add(cls)
				lineDiv.textContent = line.stringForDisplay || line.string || ""
				lineDiv.dataset.line = line.position
				popup.appendChild(lineDiv)
		}

		// console.log("next up: measures")
	
	let color = window.getComputedStyle(element.closest(".scene")).getPropertyValue('--localColor')
		popup.style.setProperty("--localColor", color) 
		
	let x = elementBeingHovered.x || event.clientX
	let y = elementBeingHovered.y || event.clientY
	// let width = parseInt(JSON.stringify(element.closest(".scene").getBoundingClientRect().width)) * 1.5 + 20
	
	flexiContainer.appendChild(popup)
	
	let width = Math.min(flexiContainer.getBoundingClientRect().width * 0.45, popup.getBoundingClientRect().width)
	let inverseArrow = 0
		if (x + width > flexiContainer.getBoundingClientRect().width - 40){
			x = x - width - 20
			inverseArrow = 1
		}
		popup.style.width = width + "px"
		popup.style.left = (x + 10) + "px"
	
	
	let height = popup.getBoundingClientRect().height
		popup.style.top = (y - height/2) + "px"
		if(y - height/2 < 0) popup.style.top = "0px"
		if(y + height/2 > flexiContainer.offsetHeight - 20) popup.style.top = (flexiContainer.offsetHeight - height - 20) + "px"

	let arrow = document.createElement("div")
		arrow.id = "snapshotArrow"
		arrow.style.top = scene.getBoundingClientRect().top + scene.getBoundingClientRect().height/2 + "px"
		arrow.style.left = elementBeingHovered.x + "px"
		arrow.style.setProperty("--localColor", color) 
		arrow.style.setProperty("--inverse", inverseArrow) 
		flexiContainer.appendChild(arrow)

}

function closeSnapShotPopup(){

	$id("snapshotPopup")?.remove()
	$id("snapshotArrow")?.remove()

}

function hiddenSlugPopup(element) {

	previouslyHovered = JSON.stringify(element.closest(".scene")?.id)
	// elementBeingHovered = false

	// let x = parseInt(JSON.stringify(event.clientX))
	// let y = parseInt(JSON.stringify(event.clientY))
	let x = (event.clientX)
	let y = (event.clientY)
	// let y = parseInt(JSON.stringify(element.closest(".scene").getBoundingClientRect().top))
	let width = parseInt(JSON.stringify(element.closest(".scene").getBoundingClientRect().width)) + 20
	let color = window.getComputedStyle(element.closest(".scene")).getPropertyValue('background-color')

	if (x + width > window.innerWidth - 40){
		x = x - width + 20
	}

	let hiddenSceneTitlePopupDiv = document.createElement("div")
		hiddenSceneTitlePopupDiv.id = "hiddenSceneTitlePopup"
		hiddenSceneTitlePopupDiv.innerHTML = element.innerHTML
		hiddenSceneTitlePopupDiv.classList.add("clickThru")
		hiddenSceneTitlePopupDiv.classList.add("sceneTitlePopup")
		hiddenSceneTitlePopupDiv.style.left = (x + 10) + "px"
		// hiddenSceneTitlePopupDiv.style.top = (y - 22) + "px"
		hiddenSceneTitlePopupDiv.style.top = (y + 10) + "px"
		hiddenSceneTitlePopupDiv.style.maxWidth = width + "px"
		hiddenSceneTitlePopupDiv.style.backgroundColor = color
		
		flexiContainer.appendChild(hiddenSceneTitlePopupDiv)

	clearTimeout(popupTimer)
	let elementToGivePopup = $id('hiddenSceneTitlePopup')
	popupTimer = setTimeout(function(){
		elementToGivePopup.classList.add('revealPopup')
			setTimeout(function(){
				elementToGivePopup.classList.remove('revealPopup')
				// elementToGivePopup.remove()
			}, 3000)
		},400
	)
}

function unhover(){

	mylog()

	let element = event.target
	let relatedElement = event.relatedTarget

	if(relatedElement && ([...relatedElement.classList].includes("notepanelNote") || [...relatedElement.classList].includes("notepanelReview"))){
		panelNoteIsUnhovered(relatedElement)
	}

	if(relatedElement && (relatedElement.classList.contains("review"))){
		highlightReviewInPanel()
	}

	if(relatedElement && (relatedElement.classList.contains("beat"))){
		unhoverAllBeats()
	}
	
	previouslyHovered = false
	
	let elements = document.querySelectorAll(".sceneTitlePopup")
	for (i = elements.length - 1; i>-1; i--) {
		elements[i].remove()
	}

	$id("hiddenSceneTitlePopup")?.remove()
}

// MARK: - ========== UPDATING THE TIMELINE ==========

function __________TIMELINE (){}

var typeTimer

function firstRun(location, length){ 
	
	//Called AT STARTUP (and, if non-realtime, WHEN FOCUSED)
	Beat.log("firstRun called")
	mylog()

	weAreCurrentlyEditingText = false
	Beat.call("Beat.custom.updateEntireOutline(" + location + "," + length + ")")

}

function updateEntireOutline(json, location, length, absoluteLength, linesAsJson, novel = false, screenplay) {

	mylog()
	closeContextMenu()
	toggleWaitState(true) // probably already turned on elsewhere, but for good measure
	
	// making data global:
		outline = json 
		lines = linesAsJson
		absoluteTextLength = absoluteLength
		novelMode = novel
		entireScreenplay = screenplay
	
	if(outline.length < 1){displayEmptyScreenMessage(); return}
	
	//Pre-building the outline
		addSceneEnds()
		findPageDividers()

	//Building the outline!
		divMaker() 
		youAreHere(location, length) 
		
	//Post-building the outline: Add data to existing, already painted divs
		if (characterMenuList.selectedIndex != -1){
			collectCharacters()
			updateFilter()
		}
		collectNotes("updateEntireOutline")
		collectReviews()
		collectRevisionIndices()
		updateDialogPanel()
		updateScenePanel()
		updateSelectionInfo()

		toggleWaitState(false)	

		if(weAreCurrentlyEditingText){ // this is if update takes place when live editing outline text -- can this happen??
			exitEdit()
		}

	mylog("End of creating outline, now returning to idle")
}

function addSceneEnds(){

	mylog()

	function hierarchy(obj){
		let level = false
		if (obj.typeAsString == "Section"){level = Number(obj.sectionDepth)}
		if (obj.typeAsString == "Heading"){level = 100}
		if (obj.typeAsString == "Synopse"){level = 1000}
		return level 
	}

	//Insert SceneEnd value, which ends not at next arbitrary outline element, but one which is the same or higher! 
	for (let i = 0; i < outline.length; i++){

		let nextSameLevelObject = i + 1

		while ((nextSameLevelObject < outline.length) 
				&& 
				(hierarchy({...outline[nextSameLevelObject]}) > hierarchy({...outline[i]})
				||
				outline[nextSameLevelObject].omitted //THIS MAKES OMITTED SCENES LIVE INSIDE (AND MOVE WITH) THEIR PREVIOUS SCENES
				)){
			nextSameLevelObject++
		}
		
		outline[i].sceneEnd = (outline[nextSameLevelObject]) ? 
			outline[nextSameLevelObject].sceneStart - 1 : 
			absoluteTextLength
	}
}


function divMaker(){

	mylog()

	let startTime = new Date()

	let start = 0
	let end = outline.length
		// let's try to avoid crashes due to empty outline!
		// this will probably not work, I'm suspecting new outlines can now be pushed from the plugin asynchronosly?
			if (!outline || outline.length < 1) return 

	let newFlexi = document.createElement("div")
	let currentAct = 0
	let actLengths = []
	let actIndex = []
	let alternatePageNumber = 0

	let lowerLevelNum = -1

	for (num = start; num < end; num ++) {

		currentItem = outline[num]

		//first creating a FAUX ACT if doc does not start with a level 1 section
			if (num == 0 && (outline[num].typeAsString != "Section" || outline[num].sectionDepth > 1 /*|| outline[num].sceneStart > frontMatter*/)) {

				actLengths[currentAct] = 0
				currentAct ++
							
				let sectionDiv = document.createElement("div")
					sectionDiv.id = "-1"
					sectionDiv.classList.add("faux")
					sectionDiv.classList.add("section")
					sectionDiv.classList.add("level1")
					sectionDiv.classList.add("isExpanded")

					sectionDiv.dataset.line = 0
					sectionDiv.dataset.lineEnd = Math.max(+currentItem.sceneStart - 1, 0)

					sectionDiv.dataset.lengthOfScene = currentItem.numberOfPages
					sectionDiv.dataset.inAct = "0"

				let sectionSynConDiv = document.createElement("div")
					sectionSynConDiv.id = "synopsisFor-1"
					sectionSynConDiv.classList.add("synopsiscontainer")
					sectionSynConDiv.dataset.line = 0
					
					sectionDiv.appendChild(sectionSynConDiv)
					newFlexi.appendChild(sectionDiv)

					let actlengthDiv = document.createElement("div")
						actlengthDiv.classList.add("showActLength")
						sectionDiv.appendChild(actlengthDiv)
					
				}
		
		let color
		switch(currentItem.typeAsString){

			case "Section":

				let parentSection = newFlexi

				if(currentItem.sectionDepth == 1){
					actLengths[currentAct] = currentItem.startsOnPage

					actIndex[currentAct] = currentItem.sceneStart
					currentAct ++
			
				}

				if(currentItem.sectionDepth > 1)lowerLevelNum ++

				for (let i = num; i > -1; i--){

					if (outline[i].typeAsString == "Section" && outline[i].sectionDepth < currentItem.sectionDepth){

						let allParents = newFlexi.querySelectorAll(".level" + outline[i].sectionDepth)
						parentSection = allParents[allParents.length - 1]

						break
					}
				}

				//below: when there is no initial act, put corresponding stuff inside faux act
					if(parentSection == newFlexi && outline[num].sectionDepth > 1){
						parentSection = newFlexi.querySelector(".faux")
					}		
			
				let sectionDiv = document.createElement("div")
					sectionDiv.id = num.toString()
					sectionDiv.dataset.myId = num.toString()
					sectionDiv.classList.add("section")
					sectionDiv.classList.add("level" + currentItem.sectionDepth)
					sectionDiv.dataset.line = currentItem.sceneStart
					sectionDiv.dataset.lineEnd = +currentItem.sceneStart + +currentItem.line.range.length
					sectionDiv.dataset.lengthOfScene = currentItem.numberOfPages
					sectionDiv.dataset.inAct = currentAct
					sectionDiv.dataset.uuid = currentItem.uuid
					sectionDiv.draggable = true

					color = currentItem.color
					if (color.includes("]") || color.includes('[') || color.split(" ").length > 1){
						color = color.replace(/(\]|\[|\s).*/, "")
					}

					if(color){
						if (color.match(/(#[A-F, 0-9]{6})/i)){
							sectionDiv.style.setProperty("--localColor", color)
						}else{
							sectionDiv.classList.add(color.toLowerCase())
							sectionDiv.style.setProperty("--localColor", `hsl(var(--${color.toLowerCase()}))`)
						}
					}

					if (currentItem.stringForDisplay?.toLowerCase() == "boneyard"
						&&
						currentItem.sectionDepth == 1){
						sectionDiv.classList.add("boneyard")
					}

					if(outlineBeforeUpdate && outline.length == outlineBeforeUpdate.length){
						let isExpanded = cardStateForScenes[num]
						let collapsedSection = cardStateForSections[num]
						let isPinned = $id(num.toString())?.classList.contains("wider")
						if(isExpanded)sectionDiv.classList.add("isExpanded")
						if(collapsedSection && currentItem.sectionDepth > 1)sectionDiv.classList.add("collapsedSection")
						if(isPinned)sectionDiv.classList.add("wider")
					}

				let sectionheaderDiv = document.createElement("div")
					sectionheaderDiv.classList.add("section-heading")
					sectionheaderDiv.dataset.line = currentItem.sceneStart

					if(currentItem.sectionDepth > 0){
						let sectionarrowDiv = document.createElement("div")
							sectionarrowDiv.classList.add("sectionArrow")
							sectionheaderDiv.appendChild(sectionarrowDiv) 

					let infoDiv = document.createElement("div")
						infoDiv.classList.add("sectionInfoDiv")
						sectionheaderDiv.appendChild(infoDiv)
					
					let pagenumberDiv = document.createElement("div")
						pagenumberDiv.classList.add("showSectionPageNumber")
						pagenumberDiv.innerHTML = "Pg " + Math.max(Math.floor(currentItem.startsOnPage), 1) + "."

					let sectionLengthDiv = document.createElement("div")
						sectionLengthDiv.classList.add("sectionLengths")
						sectionLengthDiv.innerHTML = "(--)"

					infoDiv.appendChild(pagenumberDiv)
					// pagenumberDiv.appendChild(sectionLengthDiv)
					infoDiv.appendChild(sectionLengthDiv)
					}

					if(loggingIsOn){sectionheaderDiv.innerHTML += currentItem.uuid + " -- "}
					// sectionheaderDiv.innerHTML += (novelMode ? currentItem.numberOfPages + "minus" + currentItem.lineHeight : "") + " "
					// sectionheaderDiv.innerHTML += currentItem.positionOnPage + " -- "
					sectionheaderDiv.innerHTML += currentItem.stringForDisplay.replace(/^#+/, "").replace(/</g, "&lt;")
					if(currentItem.sectionDepth == 1)sectionheaderDiv.innerHTML += `<span class='widerButton'>${pinIcon}</span><span class='widerButtonOn'>${pinPushedIcon}</span>`


				let sectionSynConDiv = document.createElement("div")
					sectionSynConDiv.id = "synopsisContainerFor" + num
					sectionSynConDiv.classList.add("synopsiscontainer")
					sectionSynConDiv.classList.add("noAnimation")
					sectionSynConDiv.dataset.line = currentItem.sceneStart
					
					if(currentItem.sectionDepth == 1){
						sectionSynConDiv.style.backgroundColor = "transparent"
					}

					let zeroForSections = novelMode ? currentItem.lineHeight : 0
					if(currentItem.numberOfPages > zeroForSections){

						let orphanDiv = document.createElement("div")
							orphanDiv.classList.add("orphanText")
							orphanDiv.id = "orphanInside" + num
							orphanDiv.dataset.myId = "orphanInside" + num
							orphanDiv.dataset.line = (currentItem.sceneStart)
							orphanDiv.dataset.lengthOfScene = currentItem.numberOfPages	- zeroForSections
						
						if(pageDividers[num]) insertDividersIn(orphanDiv)
						
						sectionDiv.appendChild(sectionheaderDiv)
						sectionDiv.appendChild(orphanDiv)
						orphanDiv.appendChild(sectionSynConDiv)

					}else{

						sectionDiv.appendChild(sectionheaderDiv)
						sectionDiv.appendChild(sectionSynConDiv)
					}

				parentSection.appendChild(sectionDiv)

				if(currentItem.sectionDepth == 1){
					actlengthDiv = document.createElement("div")
					actlengthDiv.classList.add("showActLength")
					sectionDiv.appendChild(actlengthDiv)
				}

				if(currentItem.synopsis && currentItem.synopsis.length > 0){ //this will put synopsis into place (for sections) for version 1.977 and on
					for (let synopsisItem of currentItem.synopsis){
						synopsisMaker(synopsisItem)
					}
				}

				break

			case "Heading":

				let allSections = newFlexi.querySelectorAll(".section")
				let lastSection = allSections[allSections.length - 1]
				let lockedString = ""
				let sceneNumber = currentItem.sceneNumber
					if (currentItem.omitted == 1){sceneNumber = "OMITTED"}
				
				if (/(?:#)(.+)(?:#){1}\s*$/.test(currentItem.string)){
					lockedString =  "<a id='padlockIcon' class='padlockIcon' style='transition: none'>" + padlockIcon + "</a>"			 	
				}

				let sceneDiv = document.createElement("div")
					sceneDiv.id = num.toString()
					sceneDiv.dataset.myId = num.toString()
					sceneDiv.classList.add("scene")
					if (currentItem.omitted == 1){
						sceneDiv.classList.add("isOmitted")
					}
					sceneDiv.dataset.uuid = currentItem.uuid
					sceneDiv.dataset.line = currentItem.sceneStart
					sceneDiv.dataset.lineEnd = +currentItem.sceneStart + +currentItem.line.range.length
					sceneDiv.dataset.lengthOfScene = currentItem.numberOfPages
					sceneDiv.dataset.inAct = currentAct
					sceneDiv.draggable = true

					color = currentItem.color
					if (color.includes("]") || color.includes('[') || color.split(" ").length > 1){
						color = color.replace(/(\]|\[|\s).*/, "")
					}

					sceneDiv.style.setProperty("--localColor", "#ddd")
					if(color){
						if (color.match(/(#[A-F, 0-9]{6})/i)){
							// sceneDiv.style.backgroundColor = color
							sceneDiv.style.setProperty("--localColor", color)
						}else{
							sceneDiv.classList.add(color.toLowerCase())
							sceneDiv.style.setProperty("--localColor", `hsl(var(--${color.toLowerCase()}))`)
						}
					}

					let ii = 1
					while(outline[num-ii] && outline[num - ii].typeAsString == "Synopse"){ii++}
					if(outline[num - ii] && outline[num - ii].typeAsString == "Section"){
						let scenearrowDiv = document.createElement("div")
							scenearrowDiv.classList.add("arrowForIndexCards")
							sceneDiv.appendChild(scenearrowDiv)
					}

				let sceneheadingDiv = document.createElement("div")
					sceneheadingDiv.classList.add("sceneheading")
					if ($id(num) && $id(num).classList.contains("sluglineIsHidden")){
						sceneDiv.classList.add("sluglineIsHidden")
					}
					sceneheadingDiv.dataset.line = currentItem.sceneStart
					if(color){
						sceneheadingDiv.classList.add(color.toLowerCase())
					}
				
				let sceneNumberSpan = document.createElement("SPAN")
					sceneNumberSpan.innerHTML = lockedString + sceneNumber + "&nbsp;"
					sceneNumberSpan.classList.add("showSceneNum")
					sceneheadingDiv.appendChild(sceneNumberSpan)
					
				let pageCountSpan = document.createElement("SPAN")
				// console.log("currentItem.numberOfPages for " + currentItem.string, currentItem.numberOfPages)
					pageCountSpan.innerHTML = numberIntoEights(currentItem.numberOfPages)
					if (novelMode) pageCountSpan.innerHTML = numberOfWords(currentItem.sceneStart, currentItem.sceneEnd) + " words"
					pageCountSpan.classList.add("showSceneLength")

					sceneheadingDiv.appendChild(pageCountSpan)

				let sceneSynConDiv = document.createElement("div")
					sceneSynConDiv.id = "synopsisFor" + num
					sceneSynConDiv.classList.add("synopsiscontainer")
					sceneSynConDiv.dataset.line = currentItem.sceneStart

				sceneheadingDiv.innerHTML += "<span class='slugtext'>"
					// if(loggingIsOn){sceneheadingDiv.innerHTML += currentItem.sceneStart + ", " + currentItem.sceneEnd + " -- "}
					if(loggingIsOn){sceneheadingDiv.innerHTML += "#" + outline.indexOf(currentItem)}
				sceneheadingDiv.innerHTML += currentItem.stringForDisplay.toUpperCase().replace(/</g, "&lt;") + "</span>"
				sceneDiv.appendChild(sceneheadingDiv)
				sceneDiv.appendChild(sceneSynConDiv)

			if(currentItem.breakLines.length > 0) { addPageBreak(sceneDiv) }

				function addPageBreak(whereToAdd){

					for (breakLine of currentItem.breakLines){

					let blankDiv = document.createElement("div")
						blankDiv.id = "blankPageFor" + num + "_" + currentItem.breakLines.indexOf(breakLine)
						blankDiv.classList.add("blankPage")

					let distanceToPageBreak = 100 * (breakLine.startPageIncFraction - currentItem.startsOnPage - currentItem.positionOnPage) / (currentItem.numberOfPages)
						blankDiv.style.top = distanceToPageBreak + "%"

					let nextPageBeginsAt = (breakLine.fullpage + 1) - (currentItem.startsOnPage + currentItem.positionOnPage)
					let nextPageIsThisFarIn = 100 * nextPageBeginsAt / currentItem.numberOfPages
					let distanceToNextPageTop = nextPageIsThisFarIn - distanceToPageBreak

						blankDiv.style.height =  distanceToNextPageTop + "%"

					let nextActualScene = 1
						while(outline[num + nextActualScene] && outline[num + nextActualScene].typeAsString == "Synopse"){nextActualScene ++}
					blankDiv.dataset.line = breakLine.pageBreakIndex 
					blankDiv.dataset.length = outline[num + nextActualScene]?.sceneStart - 1

					whereToAdd.appendChild(blankDiv)

					}
				}

			if(pageDividers[num]) {insertDividersIn(sceneDiv)}

				function insertDividersIn(whereToAdd){

					for (let p = 0; p < pageDividers[num].length; p++){

						let reduceWhenFromTop = currentItem.positionOnPage == 0 ? 1 : 0 //or else scene starts one number too high
						let approxBreakPos = currentItem.sceneStart + ((currentItem.sceneEnd - currentItem.sceneStart) * pageDividers[num][p]/currentItem.numberOfPages) 

						let divider = document.createElement("div")
							divider.id = "divider" + num + "-" + p
							divider.classList.add("pageDivider")
							divider.innerHTML = Math.trunc(currentItem.startsOnPage + 1 + p - reduceWhenFromTop)
							divider.dataset.line = approxBreakPos

                        let percentage = 100 * pageDividers[num][p]/currentItem.numberOfPages
                        if (percentage < 100) divider.style.top = percentage + "%" //avoid drawing double pages when scenes end exactly on pagebreak

						whereToAdd.appendChild(divider)

					}
				}

				lastSection.appendChild(sceneDiv)

				if(currentItem.synopsis && currentItem.synopsis.length > 0){ //this will put synopsis into place (for scenes) for version 1.977 and on
					for (let synopsisItem of currentItem.synopsis){
						synopsisMaker(synopsisItem)
					}
				}

				break

			case "Synopse":

				synopsisMaker(currentItem) 
				// This switch will put synopsis in place for Beat versions pre 1.977, which may or may not be too old to run FTOutliner anyway. 
				// For later versions, the following synopsisMaker function will be called from inside scene and section makers

				function synopsisMaker(currentItem){

				let allContainers = newFlexi.querySelectorAll(".synopsiscontainer")
				let lastContainer = allContainers[allContainers.length - 1]

				let synopsisDiv = document.createElement("div")
					synopsisDiv.id = num
					let synopsisNumber = false
						if(outline[num].synopsis){ 
							synopsisNumber = outline[num].synopsis.indexOf(currentItem)
							synopsisDiv.dataset.synopsisNumber = synopsisNumber
							synopsisDiv.id = "s" + num + "_" + (('000'+synopsisNumber).slice(-3)) // synopsisNumber
						}
					synopsisDiv.dataset.uuid = currentItem.uuid
					synopsisDiv.innerText = currentItem.stringForDisplay 
					synopsisDiv.classList.add("synopsis")
					synopsisDiv.dataset.sceneNumber = currentItem.sceneNumber //necessary?
					synopsisDiv.dataset.line = (synopsisNumber !== false) ? outline[num].synopsis[synopsisNumber].position : currentItem.sceneStart
					synopsisDiv.dataset.lineEnd = (synopsisNumber !== false) ? outline[num].synopsis[synopsisNumber].position + outline[num].synopsis[synopsisNumber].range.length : currentItem.sceneEnd
					synopsisDiv.draggable = true

					//Trying to catch Beat bug with left-over synopsis:
						//thisLine = lines.filter(line => line.uuid == currentItem.uuid)[0]
						// if (!thisLine || thisLine.typeAsString != "Synopse") return 
							//next two lines are for bug tracking purposes, if the previous line is turned off:
								// if (!thisLine) synopsisDiv.style.outline = "2px solid hotpink"
								// if (thisLine && thisLine.typeAsString != "Synopse") synopsisDiv.style.outline = "2px solid cyan"
					
					color = currentItem.color
						if (color?.includes("]") || color?.includes('[') || color?.split(" ").length > 1){
							color = color.replace(/(\]|\[|\s).*/, "")
						}
						if(color){
							if (color.match(/(#[A-F, 0-9]{6})/i)){
								synopsisDiv.style.setProperty("--localSynopsisColor", color)
							}else{
								synopsisDiv.classList.add(color.toLowerCase())
								synopsisDiv.style.setProperty("--localSynopsisColor", `hsl(var(--${color.toLowerCase()}))`)
							}
						}
					if (currentItem.omitted || (synopsisNumber !== false && outline[num].synopsis[synopsisNumber].omitted)){
						synopsisDiv.classList.add("isOmitted")
					}

				lastContainer.appendChild(synopsisDiv)
				}
		} 

		if(currentItem.numberOfPages){alternatePageNumber += Number(currentItem.numberOfPages)}

	}

	//BONEYARD-check to disallow any boneyard that is not last act
		let allActs = newFlexi.querySelectorAll(".level1")
		for (i = 0; i < allActs.length - 1; i++){
				allActs[i].classList.remove("boneyard")
			}		
	
	//add a temporary copy of notes etc to avoid blinkage
		if(flexiContainer.querySelectorAll(".faux, .section, .scene, .orphanText")?.length == newFlexi.querySelectorAll(".faux, .section, .scene, .orphanText")?.length){
			$$(".noteContainer, .marker, .review, .beat, .displayNumberOf").forEach(thingToPutBack => {
					let parentId = thingToPutBack.parentNode.dataset.myId || thingToPutBack.parentNode.id
					let placeToPut = newFlexi.querySelector(`[data-my-id = "${parentId}"]`) || newFlexi
						placeToPut.appendChild(thingToPutBack.cloneNode(true))
			})
		}

	//in case of dialog filtering going on, transfer what scenes are dimmed to avoid blinkage
		if($id("dialogsearch")?.value) {
			$$(".scene").forEach(scene => {
				let myId = scene.dataset.myId
				let newScene = newFlexi.querySelector(`[data-my-id = "${myId}"]`)
			
				if(newScene){ 
					if(scene.classList.contains("dimmedScene")) newScene.classList.add("dimmedScene")
				}
			})
		}

	//transfer any selections made in the outgoing outline to the new
		let selections = $$(".isSelected")
		for (let selection of selections){
			let uuid = selection.dataset.uuid
			let newSelection = newFlexi.querySelector(`[data-uuid = "${uuid}"]`)
			if(newSelection){
				newSelection.classList.add("isSelected")
			}
		}

	// recalling cardstates by UUID: 
	// 1. If outline already drawn, use existing values, 
	// 2. if not, use saved settings,
	// 3. if not in saved settings either, then default to all expanded, 
	let newSections = newFlexi.querySelectorAll(".section")
		for (let section of newSections){
			let uuid = section.dataset.uuid
			let oldSection = flexiContainer.querySelector(`[data-uuid = "${uuid}"]`)
			if(oldSection){
				["isExpanded", "collapsedSection", "wider"].forEach(className => {
					section.classList.toggle(className, oldSection.classList.contains(className))
				})
			}else{ //this should only happen on first draw
				savedValue = cardState.find(card => card.uuid == uuid) || {isExpanded: true, collapsedSection: false, wider: false};
				["isExpanded", "collapsedSection"].forEach(className => { //removed ".wider" bc no reason to widen anything on first draw
					section.classList.toggle(className, savedValue[className])
				})				
			}
		}

	newFlexi.querySelectorAll(".scene").forEach(
		scene => colorByPercentageInstead(scene)
	)
	
	//=============================================
	//THE BIG ONE: REPLACE OLD OUTLINE WITH THE NEW
	//=============================================
	let classesBefore = JSON.stringify(Array.from(flexiContainer.classList))
	$id("flexiContainer").innerHTML = newFlexi.innerHTML
	let classesAfter = JSON.stringify(Array.from(flexiContainer.classList))

	//post-adding fixes:

	actLengths.push(Array.from($$(".pageDivider")).at(-1)?.innerText) // takes the number from the last visible divider and adds to actLengths
	actIndex.push(currentItem.sceneEnd)  // index for last page number
	
	let allActPages = $$(".showActLength")
	for (let i = 0; i < allActPages.length; i++){

		let thisactlength = Array.from(allActPages[i]?.parentElement?.querySelectorAll(".pageDivider"))?.at(-1)?.innerText
							||
							allActPages[i-1]?.dataset.pageNumber // when no new line breaks in this act
							||
							1 // when no new line breaks anywhere

		allActPages[i].innerHTML = `Pg ${thisactlength}.`
		allActPages[i].dataset.line = actIndex[i+1]
		allActPages[i].dataset.pageNumber = thisactlength	
	}

	mylog("after act lengths")

	recalculateHeights()
	reevaluateColorContrast()
	updateAllSectionPageCounts()

}

function updateAllSectionPageCounts(){

	let accumulatedPages = 0
	let accumulatedWords = 0
	let allSections = Array.from($$(".section"))

	$$(".section").forEach(section =>{

		accumulatedPages = 0
		accumulatedWords = 0

		section.querySelectorAll(".scene, .orphanText").forEach(element => {
			accumulatedPages += Number(element.dataset.lengthOfScene) || 0
		})
		let sectionEntry = outline.find(entry => entry.uuid == section.dataset.uuid)
		
		if(section.querySelector(".sectionLengths")) section.querySelector(".sectionLengths").innerHTML = `<br/> (${numberIntoEights(accumulatedPages)})`
		if(novelMode){
			accumulatedWords = numberOfWords(sectionEntry?.sceneStart, sectionEntry?.sceneEnd)
			if(section.querySelector(".sectionLengths")) section.querySelector(".sectionLengths").innerHTML = `<br/> (${accumulatedWords} words)`
		}
	})

	//after the loop, add last accumulation to last section:
	if (allSections.at(-1).querySelector(".sectionLengths")) {
		allSections.at(-1).querySelector(".sectionLengths").innerHTML = `<br/> (${numberIntoEights(accumulatedPages)})`
	}

}


function __________OUTLINE_GRAPHICS(){}

function colorByPercentageInstead(element){
	mylog()

	if(!documentSetting.colorByPercentage) return

	//let percentage = 100 * (scene.dataset.line - 1) / absoluteTextLength

	let scene = outline.find(scene => scene.uuid == element.dataset.uuid)
	let percentageNote = scene?.notes?.find(note => note.content.includes("%"))

	let color = "white"

	if (percentageNote){

		let percentage = Number(percentageNote.content.match(/(\d+)%/)?.[1]) * 1.2 //because 120° is green on the color wheel 

		color = `hsl(${percentage}, 100%, 50%)`
	}

	element.style.setProperty("--localColor", color)

}

function reevaluateColorContrast(){
	mylog()

	if(!userDefault.invertTextOnDark) {
		$$(".scene, .sceneheading, .section, .section-heading, .synopsis" ).forEach(item => item.style.color = "")	
		return
	}

	let hoveredObjects = $$(".scene:hover, .section:hover")
		hoveredObjects.forEach(obj => {obj.classList.add("noHover")})
	let selectedObjects = Array.from($$(".isSelected"))
		selectedObjects.forEach(obj => {obj.classList.remove(".isSelected")})
	let redraw = $id("flexiContainer").getBoundingClientRect() // trigger redraw to paint all elements correctly first

	allItems = $$(".sceneheading, .synopsis")
	
	for (let item of allItems){
		let styles = window.getComputedStyle(item.closest(".synopsis, .scene, .flexiContainer"))
		let $rgb = makeRGB(styles.backgroundColor)
		$rgb = $rgb.replace("rgb(", "").replace(")", "").split(",")
		let blackOrWhite = $rgb[0] * 0.299 + $rgb[1] * 0.587 + $rgb[2] * 0.114;
		item.style.color = (blackOrWhite > 128) ? "black" : "white"
		item.style.fill = (blackOrWhite > 128) ? "black" : "white"
	}
	
	allItems = $$(".section-heading:not(.level1 > .section-heading)")
		
	for (let item of allItems){
		let styles = window.getComputedStyle(item)
		let $rgb = makeRGB(styles.backgroundColor)
		$rgb = $rgb.replace("rgb(", "").replace(")", "").split(",")
		let blackOrWhite = $rgb[0] * 0.299 + $rgb[1] * 0.587 + $rgb[2] * 0.114;
		item.style.color = (blackOrWhite > 128) ? "black" : "white"
	}
	
	allItems = $$(".synopsis")
		
	for (let item of allItems){
		let styles = window.getComputedStyle(item)
		let $rgb
		if(styles.backgroundColor && styles.backgroundColor != "rgba(0, 0, 0, 0)"){
			$rgb = makeRGB(styles.backgroundColor)
		}else{
			let parentItem = item.closest(".scene")
			if (!parentItem && documentSetting.indexCardMode){parentItem = item.closest(".section")?.querySelector(".section-heading")}
			if (!parentItem && !documentSetting.indexCardMode){parentItem = item.closest(".level1")}
			if (!parentItem)return
			styles = window.getComputedStyle(parentItem)
			$rgb = makeRGB(styles.backgroundColor)
		}
			$rgb = $rgb.replace("rgb(", "").replace(")", "").split(",")
		
			let blackOrWhite = $rgb[0] * 0.299 + $rgb[1] * 0.587 + $rgb[2] * 0.114;
			item.style.color = (blackOrWhite > 128) ? "black" : "white"

	}

	hoveredObjects.forEach(obj => {obj.classList.remove("noHover")})
	selectedObjects.forEach(obj => {obj.classList.add(".isSelected")})
	mylog("exiting")

}

function blackOrWhite(rgb){

	let $rgb = rgb.replace("rgb(", "").replace(")", "").split(",")
		
	let blackOrWhite = $rgb[0] * 0.299 + $rgb[1] * 0.587 + $rgb[2] * 0.114;
	let colorOut = (blackOrWhite > 128) ? "black" : "white"


	return colorOut

}

function makeRGB(color){

	if (color == "" || color.substring(0,1) != "#") {return color}

    // This is simple because we know that every values is two 
    // hexadecimal digits.
    	rgbColors[0]=color.substring(1, 3)  // redValue
    	rgbColors[1]=color.substring(3, 5)  // greenValue
    	rgbColors[2]=color.substring(5, 7)  // blueValue

    	rgbColors[0]=parseInt(rgbColors[0], 16)
    	rgbColors[1]=parseInt(rgbColors[1], 16)
    	rgbColors[2]=parseInt(rgbColors[2], 16)
	

	color = "rgb(" + [...rgbColors] + ")"

  return color

}

function findPageDividers() {

	mylog()

	if(!outline || outline.length == 0) return

	// let scenesOnly = outline.filter(scene => {if(scene.typeAsString == "Heading") return scene})
	let scenesOnly = outline.filter(scene => {scene.typeAsString == "Heading"})
		pageDividers = []

	for (let i = 0; i < outline.length; i++) {

		const scene = outline[i]
		const previousScene = outline[i - 1] || null
		const nextScene = scenesOnly[scenesOnly.indexOf(outline[i]) + 1] || null
		// const nextScene = outline[i + 1] || null

		let absolutePos = scene.startsOnPage + scene.positionOnPage

		// Make sure omitted scenes do not get added to page count
			if (scene.omitted == true) {
				outline[i].numberOfPages = 0.0
				continue
			}
		
		// Finally add all dividers: 
			let numberOfDividers = ((nextScene?.startsOnPage - scene.startsOnPage 
									- (nextScene?.positionOnPage == 0 ? 1 : 0 ) // remove divider that should belong to next scene
									|| Math.floor(scene.positionOnPage + scene.numberOfPages)) // accounts for final scene of script which has no next
									+ (scene.positionOnPage == 0 ? 1 : 0)) 		// add divider if scene starts at top of page

			if (numberOfDividers > 0){
			
				pageDividers[i] = []

				for (let j = 0; j < numberOfDividers; j++) {

					let lengthToDivider = Math.ceil(absolutePos) - absolutePos + j
					pageDividers[i].push(lengthToDivider)

				}	
			}
	}
}

function putOntoScreen() {

	let theIndicatorIsInElement = $id("youAreHere")?.getAttribute('data-outlineElementCount')

	if (theIndicatorIsInElement && theIndicatorIsInElement > 0){
		if(isThisOffScreen($id(theIndicatorIsInElement))){
			scrollNicelyIntoView($id(theIndicatorIsInElement))
		}	
	}
}

function recalculateHeights(wherefrom){
	
	mylog()
	mylog("from: " + JSON.stringify(recalculateHeights.caller.name))
	mylog("OLD VALUE: " + getComputedStyle(document.documentElement).getPropertyValue('--heightFactor'))

	let theIndicator = $id("youAreHere")

	let allScenes = $$(".scene, .orphanText")
	let allSections = $$(".section")
	let allActs = $$(".level1:not(.boneyard)")
	
	if ((allScenes.length == 0 && allSections.length == 0) || !outline || outline.length == 0){
		mylog("returns from recalculateHeights because no scenes and no sections")
		return} 

	if (documentSetting.indexCardMode) {
		mylog("indexCardMode was discovered so fine.")
		let referenceForWidth = allSections[0]
		let referenceForHeight = 0
		theRoot.style.setProperty('--indexReferenceForHeight', "auto")
		
		//set height of cards first
		let indexHeight = "calc(22px * var(--fontSizeFactor) + " + indexCardHeight + " * 15px * var(--fontSizeFactor))" 
		theRoot.style.setProperty('--indexCardHeight', indexHeight)

		if ($(".altYouAreHere")) {$(".altYouAreHere").classList.remove("altYouAreHere")}
		putOntoScreen()
		if(theIndicator){theIndicator.style.top = "calc(16px * var(--fontSizeFactor))"}

		//then set height of act lanes
		if (!documentSetting.oneColumnOutline){
			for (act of allActs){
				referenceForHeight = Math.max(referenceForHeight, Number(act.getBoundingClientRect().bottom) - Number(act.getBoundingClientRect().top))
				}
			theRoot.style.setProperty('--indexReferenceForHeight', referenceForHeight + "px")
		}
		
		return
	}

	if(!documentSetting.scenesAreProportional){ //would be better if this were a class instead! 
				
		if(theIndicator){
			let a = getComputedStyle(theRoot).getPropertyValue('--fixedHeight')
			let theIndicatorPosition = "calc(var(--fixedHeight) * var(--fontSizeFactor) * 2 / 3)"
				if (a = "auto"){theIndicatorPosition = "calc(11px * var(--fontSizeFactor))"}
			theIndicator.style.top = theIndicatorPosition
		}

		putOntoScreen()
		return	
	}
	
	// The rest is for proportional only 
	//==================================

	console.time("recalculateHeights")

	//new section-height-collector
		let newSectionHeights = []
		let newSceneHeights = []
		for (act of allActs){

			if (act.classList.contains(".boneyard")) break

			let sectionsInAct = act.querySelectorAll(".section-heading") //this includes the act itself
			let scenesInAct = act.querySelectorAll(".scene, .orphanText")
			let sectionHeightForAct = 0
			for (sec of sectionsInAct) {

				let measures = window.getComputedStyle(sec)
				sectionHeightForAct += sec.getBoundingClientRect().height + parseInt(measures.marginBottom) + parseInt(measures.marginTop)
			}
			let sceneHeightForAct = 0
			for (scn of scenesInAct){

				sceneHeightForAct += Number(scn.dataset.lengthOfScene)
								
				scn.style.minHeight = ""
				scn.style.setProperty("--flexibleHeight", scn.dataset.lengthOfScene + "px")

			}
			newSectionHeights.push(sectionHeightForAct)
			newSceneHeights.push(sceneHeightForAct)
		}

	let theLongestAct = Math.max(...newSceneHeights)
	let theMostSections = Math.max(...newSectionHeights)
	
	let whichActHasLongestScenes = newSceneHeights.indexOf(theLongestAct)
	let whichActHasMostSections = newSectionHeights.indexOf(theMostSections)
	
	let windowHeight = $id('flexiContainer').getBoundingClientRect().height

	let spaceToBreatheAndForPageNumbers = 40 //was 80 before removing margins
	let newSpaceToDistribute = windowHeight - spaceToBreatheAndForPageNumbers

		unDistributableHeight = windowHeight - newSpaceToDistribute //only used for exporting
	
	let scenesHaveMoreSpace = (newSpaceToDistribute - newSectionHeights[whichActHasLongestScenes] - theLongestAct) / theLongestAct
	let sectionsHaveMoreSpace = (newSpaceToDistribute - (theMostSections) - newSceneHeights[whichActHasMostSections]) / newSceneHeights[whichActHasMostSections]
	
	let heightFactor =  Math.min(scenesHaveMoreSpace, sectionsHaveMoreSpace)
		paperHeightFactor = 72 * (29.7 / 2.54) * heightFactor / (windowHeight - 260) //was-160, and before that -120 
		theRoot.style.setProperty('--heightFactor', heightFactor);
		theRoot.style.setProperty('--paperHeightFactor', paperHeightFactor);
	
		mylog("HeightFactor, NEW VALUE: " + heightFactor + "")
		
		setTimeout(hideSlugFor, 150)

		if(theIndicator){positionTheIndicator(theIndicator)}

		mylog("exiting recalculateHeights()")
		putOntoScreen()

	//let outTime = new Date()
	console.timeEnd("recalculateHeights")
}

function positionTheIndicator(){
	
	mylog()

	let theIndicator = $id("youAreHere")
	if(!theIndicator)return

		let theIndicatorPercentage
	
		let theIndicatorIsInElement = theIndicator.getAttribute('data-outlineElementCount');
		theIndicatorPercentage = Number(theIndicator.getAttribute('data-percentageIntoScene'));

			// let theIndicatorParentHeight = Number(parseInt(window.getComputedStyle(theIndicator.parentNode).getPropertyValue("height")));
			let theIndicatorParentHeight = parseInt(theIndicator.parentNode.getBoundingClientRect().height) - 2.5;
			let theIndicatorPosition = theIndicatorParentHeight * theIndicatorPercentage
			if (theIndicatorPercentage == -1) {theIndicatorPosition = 11 * currentZoomLevel}
			theIndicator.style.top = theIndicatorPosition + "px"

			if (theIndicatorIsInElement){
			if(isThisOffScreen($id(theIndicatorIsInElement))){
				scrollNicelyIntoView($id(theIndicatorIsInElement))
			}	
		}

	if(currentParentScroll){
		
		let a = $id(theIndicatorIsInElement).querySelector(".synopsiscontainer")
			a.scrollTo({left: 0, top: currentParentScroll, behavior: "instant"})
	}
}

function hideSlugFor(entries){
	
	if (documentSetting.indexCardMode || $id("flexiContainer").classList.contains("nonProportionalMode")) {
		$$(".sluglineIsHidden").forEach(item => {item.classList.remove("sluglineIsHidden")})
		$$(".animateOpacity").forEach(item => {item.classList.remove("animateOpacity")})
		return
	}
	
	$$(".scene").forEach(scene => {
		
		let trueOrFalse = (Number(scene.getBoundingClientRect().height) < (11.5 * currentZoomLevel))

			scene.classList.toggle("animateOpacity", trueOrFalse)
			scene.classList.toggle("sluglineIsHidden", trueOrFalse)
		
	})
}

function youAreHere(location, length, positionChangeOnly){
	mylog("youAreHere: " + location + "...")
	mylog("...and we are editing text is: " + weAreCurrentlyEditingText)

	if(location == 0 ){location = -999} //hacky way to avoid errors when no location at all, yet process when zero
		location = Math.min(location, absoluteTextLength)

	if(fullTypeTimer || !location || !outline || outline.length < 1 || weAreCurrentlyEditingText){
		if(document.getElementById('youAreHere')){document.getElementById('youAreHere').remove()}
		mylog("CANCELING YOU ARE HERE")
		return
	}

	let whichSceneAreWeIn = 0
		while ((outline[whichSceneAreWeIn + 1]) && outline[whichSceneAreWeIn + 1].line.position - 0 <= location){ 		
			whichSceneAreWeIn ++
		}

		//This was added to keep the scroll of enclosing index card when selecting a synopsis (2022-07-02)
		currentParentScroll = $id(whichSceneAreWeIn)?.closest(".scene, .section")?.querySelector(".synopsiscontainer")?.scrollTop

		if(document.getElementById('youAreHere')){
			document.getElementById('youAreHere').remove()
		}

		if (outline[whichSceneAreWeIn].typeAsString != "Synopse"){
			currentParentScroll = false
		}
		while(outline[whichSceneAreWeIn].omitted && documentSetting.scenesAreProportional){
			whichSceneAreWeIn--
			if(whichSceneAreWeIn < 0){whichSceneAreWeIn = 0; break}
		}

		mylog("we are in... " + whichSceneAreWeIn)
		
	let whichSceneNumberAreWeIn = outline[whichSceneAreWeIn].sceneNumber
		
	let thisScenesBeginning = outline[whichSceneAreWeIn].sceneStart
		if(outline[whichSceneAreWeIn].sceneNumber?.includes("OMITTED")){
			thisScenesBeginning = outline[whichSceneAreWeIn].line.position
		} //if we need to fix the sceneNumber for later use?
		
	let thisScenesEnd = outline[whichSceneAreWeIn].sceneEnd
		if(outline[whichSceneAreWeIn].sceneNumber?.includes("OMITTED") && outline[whichSceneAreWeIn + 1]){
			thisScenesEnd = outline[whichSceneAreWeIn+1].line.position - 1
		} //if we need to fix the sceneNumber for later use?
		if(outline[whichSceneAreWeIn].typeAsString == "Section"){
			if (outline[whichSceneAreWeIn + 1]){thisScenesEnd = outline[whichSceneAreWeIn + 1].line.position - 1} //so not end of entire sequence
		}
		
	//First, setting place to put indicator, so we can change it if we need to go into orphan text
	let placeToPutIndicator = $id(whichSceneAreWeIn)
	mylog("we shall now put indicator in " + whichSceneAreWeIn)
		
	var percentageIntoScene = (location - thisScenesBeginning) / (thisScenesEnd - thisScenesBeginning); // must also fix end position in plugin before delivering JSON
	
		// killed // if (pageBreaks[whichSceneAreWeIn]){

		// 	percentageIntoScene = percentageIntoScene * pageBreaks[whichSceneAreWeIn]/outline[whichSceneAreWeIn].numberOfPages
		// }

		if(!outline[whichSceneAreWeIn].sceneNumber || outline[whichSceneAreWeIn].typeAsString == "Section"){
			
			percentageIntoScene = -1
			
			//BUT: the following is to allow traveling you-are-here in "orphan text" after section 
			if (outline[whichSceneAreWeIn].typeAsString == "Section"
			&& outline[whichSceneAreWeIn].numberOfPages > 0 
			&& location > thisScenesBeginning + outline[whichSceneAreWeIn].line.string.length
			&& documentSetting.scenesAreProportional){

				if(outline[whichSceneAreWeIn + 1]){//for all orphan texts that does not end the document

					let nextElement = 1
					while (outline[whichSceneAreWeIn + nextElement] && outline[whichSceneAreWeIn + nextElement].typeAsString == "Synopse"){nextElement++}
										
					try{
						percentageIntoScene = (location - (thisScenesBeginning + outline[whichSceneAreWeIn].line.string.length)) / (outline[whichSceneAreWeIn + nextElement].sceneStart - 1 - thisScenesBeginning + outline[whichSceneAreWeIn].line.string.length)
					}catch{
						mylog("inside catch")
						percentageIntoScene = (location - (thisScenesBeginning + outline[whichSceneAreWeIn].line.string.length)) / (absoluteTextLength - thisScenesBeginning + outline[whichSceneAreWeIn].line.string.length)
					}
					
					mylog("before put in orphan")
					placeToPutIndicator = placeToPutIndicator.querySelector(".orphanText")
				}else{ //the special case where there is no more outline elements after the section, just orphan text

					percentageIntoScene = (location - (thisScenesBeginning + outline[whichSceneAreWeIn].line.string.length)) / (outline[whichSceneAreWeIn].sceneEnd - thisScenesBeginning + outline[whichSceneAreWeIn].line.string.length)
					placeToPutIndicator = placeToPutIndicator.querySelector(".orphanText")
				}
			}
		}

		let weReOnPage = placeToPutIndicator?.querySelectorAll(".pageDivider")
		//while (!weReOnPage && whichSceneAreWeIn > -1) weReOnPage = 
		
		// let theIndicatorHTML = "<div " + 
		// "id='youAreHere' " +
		// "class='indicator' " +
		// "data-percentageIntoScene='" + percentageIntoScene + "' " +
		// "data-outlineElementCount='" + whichSceneAreWeIn + "' " +
		// "data-theSceneNumber = '" + whichSceneNumberAreWeIn + "' " + 
		// ">"+"<p>"+ location + //" (" + outline[whichSceneAreWeIn].typeAsString + ")" + 
		// "</p></div>"

		let theIndicatorDiv = document.createElement("div")
			theIndicatorDiv.id = "youAreHere"
			theIndicatorDiv.classList.add("indicator")
			theIndicatorDiv.dataset.location = location
			theIndicatorDiv.setAttribute("data-percentageIntoScene", percentageIntoScene)
			theIndicatorDiv.setAttribute("data-outlineElementCount", whichSceneAreWeIn)
			theIndicatorDiv.setAttribute("data-theSceneNumber", whichSceneNumberAreWeIn)
			theIndicatorDiv.innerHTML = "<p>"+ location + /*" (" + outline[whichSceneAreWeIn].typeAsString + ")" + */ "</p>"
		
		if(placeToPutIndicator){
			// placeToPutIndicator.innerHTML += theIndicatorHTML
			placeToPutIndicator.appendChild(theIndicatorDiv)
		}

	mylog("End of indicator placement")
	if(positionChangeOnly){
		if($id("youAreHere")) {positionTheIndicator($id("youAreHere"))}
	}else{
		recalculateHeights("from youAreHere")
	}

	updateDialogPanelSelection()

}

function numberIntoEights(theNumber) {

	let theFraction = Math.floor((theNumber - Math.floor(theNumber))*8);
	
	let theNumberInEights = theFraction + "/8";
	if(theNumberInEights == "0/8" && Math.floor(theNumber) > 0){theNumberInEights = "pgs"; if (Math.floor(theNumber)==1){theNumberInEights = "pg"}}
	
	if (Math.floor(theNumber) > 0){theNumberInEights = 	Math.floor(theNumber)+" " + theNumberInEights};
	
	return theNumberInEights;

}

function numberOfWords(startIndex, endIndex){

	return entireScreenplay.slice(startIndex, endIndex).split(/\s+/).length;

}

// MARK: - UI RELATED

function __________UI_RELATED_STUFF (){}

function getSettings(startup = false){

	mylog()

	//TODO: The problem here is that values that are note stored already will be undefined.
	// We need to check for that and set defaults instead.

	//Step 1: getting User Defaults
	Beat.callAndWait(() => {
        let ftoutlinerObject = Beat.getUserDefault("ftoutlinerObject") || {}
        	return ftoutlinerObject
    	})
    	.then(
			response => { 
				if (response.length > 0) {
					Object.assign( userDefault, JSON.parse(response) )
				}
				getDocumentSettings() //brings us to step two
			},
        	error => { console.log("Error retrieving userDefault, all values will be default") 
			getDocumentSettings() //brings us to step two anyway
		}
    )

	//Step 2: getting Document Settings
		function getDocumentSettings(){	
			Beat.callAndWait(() => {
				let ftoutlinerObject = Beat.getDocumentSetting("ftoutlinerObject") || {}
				return ftoutlinerObject
				})
				.then(
					response => { 
						if (response.length > 0) {
							Object.assign( documentSetting, JSON.parse(response))
						}
						applySettings()
						getVersionNumber()
					},
					error => { console.log("Error retrieving documentSetting, all values will be default") 
				
						applySettings()
						getVersionNumber()}
			)
		}

	//Step 3: getting the current version number!
		function getVersionNumber(){	
				Beat.callAndWait(() => {
					let ftoutlinerVersion = Beat.getUserDefault("ftoutlinerVersion") || {}
					return ftoutlinerVersion
					})
					.then(
						response => { 
							
							if(startup){ launchWelcomeDialog(response) }
						
						},
						error => { console.log("Error retrieving version number") }
				)
			}

	//no more code can go here because of synchronicity!

}


function applySettings(){

	//TODO: Check to see that all defaults are really present here!

	let knownDocumentSettingDefaults = {
		scenesAreProportional: true,

		showSynopsisInScenes: false, 
		showPageDividers: false, 
		notesAreDisplayed: false,
		markersAreDisplayed: false,
		beatsAreDisplayed: false,
		reviewsAreDisplayed: false,
		allowMarkerTextInAllViews: false,
		colorByPercentage: false,

	//tracking settings
		trackingIncludesSynopsis: true,

	//Advanced Settings
		showMultipleSceneLines: false, 
		showMultipleSectionLines: false, 
		allowLowerCaseSections: false, 
		showLengthsInSections: false, 
		showSelectionInfo: false,
		showRevisions: false,

	//indexCard Stuff
		showLengths: "none", 
		showNumbers: "inline", 
		showPages: "inline", 
		oneColumnOutline: false, 
		currentZoomLevel: 1,
		
		indexCardHeight: 5,
		cardState: [],
		
		indexCardMode: false,
		showVerticals: false, 
		autoWiden: false, 
		widenedColumnsGetAutoHeight: false, 

	//UI stuff
		greyonly: false, 
		boneyardIsClosed: true, 
		notepanel: false, 
		notepanelWidth: "200",

		outdoor: 0,
		saturation: 50,

		windowSize: {	
			x: 0, 
			y: 0, 
			width: 0, 
			height: 0
		},
	}

	let knownUserDefaults = {
		loggingIsOn: false, 
		realTimeIsOn: true, 
		colorScheme: "Beat", 
		warningsAreOn: true, 
		invertTextOnDark: true,
		excludeVoiceOvers: false,

		timeOfDayObject: knownTimesOfDayObject,
	}

	Object.keys(knownDocumentSettingDefaults)
		.filter(key => !(key in documentSetting))
  		.forEach(key => {
    		console.log("Didn't find " + key + " in documentSetting, so setting it to default value '" + knownDocumentSettingDefaults[key] + "'.");
    		documentSetting[key] = knownDocumentSettingDefaults[key];
  		});

	Object.keys(knownUserDefaults)
		.filter(key => !(key in userDefault) || userDefault[key] == undefined || userDefault[key] == null)
  		.forEach(key => {
			console.log("Didn't find " + key + " in userDefault, so setting it to default value '" + knownUserDefaults[key] + "'.");
			userDefault[key] = knownUserDefaults[key];
  		});

	Object.keys(documentSetting)
		.filter(key => !(key in knownDocumentSettingDefaults))
  		.forEach(key => {
			console.log("Found " + key + " in documentSetting, but it is not a known default. FIX THIS!")
  		});

	Object.keys(userDefault)
		.filter(key => !(key in knownUserDefaults))
  		.forEach(key => {
			console.log("Found " + key + " in userDefault, but it is not a known default. FIX THIS!")
  		});

	$id("flexiContainer").classList.toggle("dualSceneLines", documentSetting.showMultipleSceneLines)
	$id("flexiContainer").classList.toggle("dualSectionLines", documentSetting.showMultipleSectionLines)
	$id("flexiContainer").classList.toggle("allowLowerCaseSections", documentSetting.allowLowerCaseSections)
	$id("flexiContainer").classList.toggle("showLengthsInSections", documentSetting.showLengthsInSections)
	$id("flexiContainer").classList.toggle("allowMarkerTextInAllViews", documentSetting.allowMarkerTextInAllViews)
	
	$id("flexiContainer").classList.toggle("showPageDividers", documentSetting.showPageDividers)
	
	$id("flexiContainer").classList.toggle("verticals", documentSetting.showVerticals)
	$id("flexiContainer").classList.toggle("autoWiden", documentSetting.autoWiden)
	$id("flexiContainer").classList.toggle("widenedColumnsGetAutoHeight", documentSetting.widenedColumnsGetAutoHeight)
	
	//RESETTING THE NOTE PANEL
		$id("flexiContainer").classList.toggle("notepanelIsExpanded", documentSetting.notepanel)
		$id("notepanel").classList.toggle("expanded", documentSetting.notepanel)
		theRoot.style.setProperty('--note-panel-width', documentSetting.notepanelWidth + "px")
			$$("#notepanel .tab").forEach(tab => {
				// tab.classList.remove("selectedtab")
				tab.classList.toggle("selectedtab", tab.classList.contains(documentSetting.selectedPanelTab))
			})
		if(documentSetting.notepanel) cycleTabs($(`.${documentSetting.selectedPanelTab}`) || false)
	
	//HIGH CONTRAST STUFF
		document.documentElement.setAttribute('data-outdoors', documentSetting.outdoor)
		document.documentElement.style.setProperty('--saturation', documentSetting.saturation + "%")
		$id("saturationRange").value = documentSetting.saturation

	//DOCUMENT SETTINGS

		//calling toggleProportional will mess up indexCardMode, se setting proportional by hand instead
		//toggleProportional(documentSetting.scenesAreProportional)
			flexiContainer.classList.toggle("nonProportionalMode", !documentSetting.scenesAreProportional)
			document.getElementById("indexCardButton").innerHTML = documentSetting.scenesAreProportional ? outlineIcon : fixedIcon

		//One-column
			flexiContainer.style.display = documentSetting.oneColumnOutline ? "inline-block" : "flex"

		//notes and such -- will be toggled below, inside toggleIndexCards	
			notesAreDisplayed = documentSetting.notesAreDisplayed || false
			markersAreDisplayed = documentSetting.markersAreDisplayed || false
			beatsAreDisplayed = documentSetting.beatsAreDisplayed || false
			reviewsAreDisplayed = documentSetting.reviewsAreDisplayed || false
	
		// indexCardMode -- now shoitched *twice* because once will reverse setting
		// Note: The parameter is only used during applySettings to allow setting mode in spite of no elements yet.
			toggleIndexCardMode(true)
			toggleIndexCardMode(true)

			toggleShowRevisions(documentSetting.showRevisions)

		//Zoom
			zoomSizes(null, documentSetting.currentZoomLevel || 1)

		//TODO: this one is currently unclear -- aren't they set with defaults above?
			showSceneLengths = documentSetting.showSceneLengths || "inline"
			showSceneNumbers = documentSetting.showSceneNumbers || "inline"
			showPageNumbers = documentSetting.showPageNumbers || "inline"
			// currentZoomLevel = documentSetting.currentZoomLevel || 1
			indexCardHeight = documentSetting.indexCardHeight || 5
		
		
		


		$id("flexiContainer").classList.toggle("greyonly", documentSetting.greyonly)
		$id("flexiContainer").classList.toggle("showSynopsisInScenes", documentSetting.showSynopsisInScenes)
		$id("flexiContainer").classList.toggle("boneyardIsClosed", documentSetting.boneyardIsClosed)
		
		cardState = documentSetting.cardState || []

		documentName = documentSetting.documentName
		documentSubName = documentSetting.documentSubName
		documentAuthor = documentSetting.documentAuthor

//TODO: we should remove these and check boxes on menu opens instead. 
//we are currently using some checkboxes as reference to what is on and off, but they should rather reflect values in usersettings etc!

	//Apply the correct checkbox states on open:

		for ([key, value] of Object.entries(userDefault)){					
			let button = document.getElementById("buttonFor-" + key)
				if(button){ 
					if(value == true) button.setAttribute("checked", true) 
				}
		}

	//Apply the correct checkbox states on open:
		for ([key, value] of Object.entries(documentSetting)){					
			let button = document.getElementById("buttonFor-" + key)
				if(button){ 
					if(value == true) button.setAttribute("checked", true) 
				}
		}

	//NOW EXECUTING SOM STUFF BASED ON THE DEFAULTS WE GOT!

		document.documentElement.setAttribute('data-theme', userDefault.colorScheme)

		theRoot.style.setProperty('--showSceneLength', showSceneLengths);
		theRoot.style.setProperty('--showSceneNum', showSceneNumbers);
		theRoot.style.setProperty('--showPageNum', showPageNumbers);
		// theRoot.style.setProperty('--fontSizeFactor', currentZoomLevel)

		// Beat.call(
		// 	`Beat.custom.setWindowSize(${documentSetting.windowSize.x}, ${documentSetting.windowSize.y}, ${documentSetting.windowSize.width}, ${documentSetting.windowSize.height})`
		// )

		firstRun()

		setAllButtons()
		recalculateHeights("from applySettings")
		mylog("DONE getting defaults")

}

function saveCurrentState() {

	mylog()

	rememberCardState()

	Object.assign(documentSetting, {
		
		showNumbers: showSceneNumbers,
		showLengths: showSceneLengths,
		showPages: showPageNumbers,
		currentZoomLevel: currentZoomLevel,
		notepanelWidth: parseInt(getComputedStyle(theRoot).getPropertyValue('--note-panel-width')),

		noteButtonGreen: $id("noteButtonGreen")? $id("noteButtonGreen").checked : true,
		noteButtonYellow: $id("noteButtonYellow")? $id("noteButtonYellow").checked : true,
		noteButtonRed: $id("noteButtonRed")? $id("noteButtonRed").checked : true,
		noteButtonMagenta: $id("noteButtonMagenta")? $id("noteButtonMagenta").checked : true,
		noteButtonPurple: $id("noteButtonPurple")? $id("noteButtonPurple").checked : true,
		noteButtonReview: $id("noteButtonReview")? $id("noteButtonReview").checked : false,

		indexCardHeight: indexCardHeight,

		cardState: cardState,

		notesAreDisplayed: notesAreDisplayed,
		markersAreDisplayed: markersAreDisplayed,
		beatsAreDisplayed: beatsAreDisplayed,
		reviewsAreDisplayed: reviewsAreDisplayed,

		greyonly: ($id("flexiContainer").classList.contains("greyonly")),
		notepanel: ($id("notepanel").classList.contains("expanded")),
		showSynopsisInScenes: ($id("flexiContainer").classList.contains("showSynopsisInScenes")),
		showMultipleSceneLines: ($id("flexiContainer").classList.contains("dualSceneLines")),
		showMultipleSectionLines: ($id("flexiContainer").classList.contains("dualSectionLines")),
		allowLowerCaseSections: ($id("flexiContainer").classList.contains("allowLowerCaseSections")),
		showMultiplewLowerCaseSections: ($id("flexiContainer").classList.contains("verticals")),
		showPageDividers: ($id("flexiContainer").classList.contains("showPageDividers")),

		// documentName: (documentName || false),
		// documentSubName: (documentSubName || false),
		// documentAuthor: (documentAuthor || false),

		boneyardIsClosed: ($id("flexiContainer").classList.contains("boneyardIsClosed")),

		// Values below this point are self-referencing and thus not needed to be explicitly included
		// ideally, we should move other values down to this category, by referencing the documentSetting object in the code instead of the variables themselves
		// such as from above: scenesAreProportinal, showSceneNumbers etc etc.
			//trackingIncludesSynopsis: documentSetting.trackingIncludesSynopsis,
			//showRevisions: documentSetting.showRevisions

	})

	Object.assign(userDefault, {

		realTimeUpdates: realTimeIsOn,		
		loggingIsOn: loggingIsOn,
		
		//AGAIN, these are self-referencing and thus not needed to be saved:
			//colorScheme: colorScheme,
			// ftoutlinerVersion: userDefault.ftoutlinerVersion,
			// excludeVoiceOvers: userDefault.excludeVoiceOvers

	})

	// ACTUALLY WRITING THE SETTINGS TO THE DOCUMENT

		userDefaultString = JSON.stringify(userDefault)
		Beat.call((userDefaultString) => {Beat.setUserDefault("ftoutlinerObject", userDefaultString)}, userDefaultString)
		documentSettingString = JSON.stringify(documentSetting)
		Beat.call((documentSettingString) => {Beat.setDocumentSetting("ftoutlinerObject", documentSettingString)}, documentSettingString)

		// if($id("dumpDiv")) $id("dumpDiv").innerHTML = JSON.stringify(documentSetting, null, 2)
	
	if(!isFullScreen)Beat.call("Beat.custom.saveWindowSize()")
	
	// Logging current classlist of FlexiContainer to dumpDiv
		if($id("dumpDiv")) $id("dumpDiv").innerHTML = [...flexiContainer.classList].toString().replaceAll(",", "<br>")

		console.log("end of save")

}

function toggleDocumentSetting(settingKey){

	let settingValue = documentSetting[settingKey]
		if (typeof settingValue === "boolean") documentSetting[settingKey] = !settingValue
		else return

	applySettings()
	recalculateHeights()
	saveCurrentState()

}

function forceRestart(){

		saveCurrentState()
		Beat.call("Beat.custom.reloadCode()")
		return
	
}

//===============================
function __________LISTENING (){}

function openSettingsWindow(){

	Beat.call(() => Beat.custom.displaySecondWindow("Advanced Settings", "settingswindow.html", 700, 800))

}

function openPrintWindow(){

  let allCSS = '';
  
  // Loop through all stylesheets
  for (let i = 0; i < document.styleSheets.length; i++) {
    const styleSheet = document.styleSheets[i];
    
    // // Handle CORS issues by skipping external stylesheets
    // if (styleSheet.href && styleSheet.href.indexOf(window.location.origin) === -1) {
    //   continue;
    // }
    
    // Loop through all CSS rules
    try {
      const cssRules = styleSheet.cssRules || styleSheet.rules; // cssRules for modern browsers, rules for older versions
      for (let j = 0; j < cssRules.length; j++) {
        allCSS += cssRules[j].cssText + '\n';
      }
    } catch (e) {
      console.warn('Could not read stylesheet:', e);
    }
  }

  	allCSS = "<style>" + allCSS + "</style>"

	let html = JSON.stringify(allCSS + flexiContainer.outerHTML)

	Beat.call((html) => Beat.custom.displaySecondWindow("Print Preview", "printWindow.html", 1200, 800, false, html), html)

}

function escapeWasPressed(){

	if(errorHasFired){return}

		if ($id("snapshotPopup")) {$id("snapshotPopup").remove(); return}
		if ($id("advancedSettings".open)) {$id("advancedSettings").close(); return}
		if ($id("menu")){closeNewMenu(); return false}
		// if ($id("dialogpanelcontent") && $id("notepanel").classList.contains("expanded")) {unShowCharacterBubbles(); toggleNotepanel(); return}
		if (helpContainerVisibility == 1) {toggleHelpContainer(); return false}
		if (settingsContainerVisibility == 1) {toggleSettingsContainer(); return false}
		if (trackingContainerVisibility == 1) {toggleTrackingContainer(); return false}
		if ($id('aboutBox')){toggleTrackingContainer(true); return false}
		if ($id('textContainer')){toggleTrackingContainer(true); return false}
		if ($(".contextMenu")) { closeContextMenu() ; return false }
		if ($(".wider")) {$(".wider").classList.remove("wider"); return false}
		if ($('.expandedReview')) {collapseReviews(); return false}
		if ($id('expandedNote')) {collapseNote(); return false}
		if (aBeatIsHovered) {unhoverAllBeats(); return false}
		if (beatsAreDisplayed) {toggleDisplayBeats(); return false}
		if ($id("notepanel").classList.contains("expanded")){toggleNotepanel(); return false}
		if ($id("flexiContainer").classList.contains("uncolorAllScenesBut")){muteColors(); return false}
		if (characterMenuList?.selectedIndex != -1) {deselectAllCharacters(); return false}
		if (notesAreDisplayed) {toggleDisplayNotes(); return false}
	
}
	
function checkWhatKeyWasReleased(someoneJustReleased){
	mylog()
	if (someoneJustReleased.key == "Alt") releaseALT()	
}

function releaseALT(){

	altIsBeingPressed = false
	previouslyHovered = false
	document.getElementById("printButton").innerHTML = printerIcon
	closeSnapShotPopup()

}

function somethingWasClicked() {
	mylog("--------------------")

	let theButton = event.button
	let rightClick = (event.ctrlKey && !event.metaKey && !event.altKey) || theButton == 2
		if(rightClick || event.target.closest(".contextMenu")){
			return
		}

	mylog("flexiContainer classList at time of click: \n" + $id("flexiContainer").classList)

	if(!event?.target?.closest("#snapshotPopup")){
		closeSnapShotPopup()
	}

	if(event.target.closest(".bottomButton") 
		|| event.target.classList.contains("displayNumberOf")
		|| event.target.classList.contains("trashNote")
		){mylog("return out of clicked"); return}
	if($id("synEditBox")) return

	let theClickedThing = event.target
	let length

	let a = [...theClickedThing.classList]

	if (a.includes("arrowForIndexCards") || a.includes("sectionArrow")){
		anArrowWasClicked(theClickedThing); 
		return	
	}

	if (a.includes("generalButtonStyle")){
		mylog("returns because .generalButtonStyle")
		return
	}

	if (a.includes("synopsiscontainer")){
		theClickedThing = theClickedThing.parentNode
		a = [...theClickedThing.classList]
	}

	if (a.includes("boneyard") || (a.includes("section-heading") && theClickedThing.closest(".section").classList.contains("boneyard"))){

		$id("flexiContainer").classList.toggle("boneyardIsClosed")
		return

	}

	if (a.includes("widerButton") || a.includes("widerButtonOn")) {makeWider(theClickedThing)}

	mylog("before if(event.altKey)")

	if(event.altKey && !event.metaKey && !event.target.closest("#snapshotPopup")){

		muteColors(theClickedThing, event.shiftKey) 
		//NOTE: sending literal clicked thing here, so can be either scene or sceneheading!
		return
		
	}

	let gotoIndex = Math.max(parseInt(theClickedThing.getAttribute("data-line")), 0.1) //why?

	//All note-clicking scenarios
		if (["expandedNote", "notepanelNote", "note"].some(className => theClickedThing.classList.contains(className))) {

			if(theClickedThing.classList.contains("note") && userDefault.oldNoteBehavior != true) return

			let length = theClickedThing.closest(".expandedNote, .notepanelNote, .note").dataset.length
			let color = window.getComputedStyle(theClickedThing.closest(".expandedNote, .notepanelNote, .note")).backgroundColor || "#888"
			gotoIndex = parseInt(theClickedThing.getAttribute("data-line"))		
			goto(gotoIndex, theClickedThing, length, rgbToHex(color))
			return
		}
	
	switch(theClickedThing.id){
		case "expandedNote":
		case "notepanelNote":
			// length = theClickedThing.closest(".expandedNote, .notepanelNote, .note").dataset.length
			// gotoIndex = parseInt(theClickedThing.getAttribute("data-line"))		
			// goto(gotoIndex, theClickedThing, length)
			return
		case "cover": 
			if (settingsContainerVisibility==1){
				toggleSettingsContainer()
			}
		case "buttonRow":
			if ($id("menu")){
				$id("menu").remove()
			}
			$id("printbox")?.remove()
			// if (trackingContainerVisibility==1){
				toggleTrackingContainer(true)
			// }
			return
		// case "flexiContainer":
		// 	if($(".wider"))makeWider($(".wider"))
	}

	//ADDED TO FIX WHAT CONSIDERS CLICKED when in Index Card Mode
	//this is redundant now, right?
		if (documentSetting.indexCardMode && [...theClickedThing.classList].includes("synopsiscontainer")){
			while(theClickedThing.parentNode 
				&& 
				(![...theClickedThing.classList].includes("scene") && ![...theClickedThing.classList].includes("section")))
				{
				theClickedThing = theClickedThing.parentNode
			}
		}

		//Yes: This is needed
		if (documentSetting.indexCardMode && [...theClickedThing.classList].includes("section")){
			while(theClickedThing.firstChild && ![...theClickedThing.classList].includes("section-heading")){
				theClickedThing = theClickedThing.firstChild
			}
		}
	
	 if(theClickedThing.id != "cycleNoteForwardMenuItem" && theClickedThing.id != "cycleNoteBackwardMenuItem"){
		collapseNote()
	}
	
	if (rightClick || contextMenuIsOpen) {
			x = event.clientX
			y = event.clientY

		contextMenu(theClickedThing, x, y, rightClick)
		mylog("back from contexMenu() into SomethingWasClicked()")
		mylog("whereto?")
		return false
	}

	// LOGIC TO SELECT AND DESELECT CLICKED ELEMENT(S)

	if (a.includes("section-heading")) {theClickedThing = theClickedThing.parentNode; a = [...theClickedThing.classList]}
	if (a.includes("sceneheading")) {theClickedThing = theClickedThing.parentNode; a = [...theClickedThing.classList]}

	if (event.metaKey && !event.altKey){
		if (a.includes("isSelected")) {
			theClickedThing.classList.remove('isSelected')
			updateSelectionInfo()
			return
		}

		if (a.includes("scene") || a.includes("section") || a.includes("synopsis")) {
			theClickedThing.classList.add('isSelected')
		}
		updateSelectionInfo()
		if(!documentSetting.clickingFocusesEditor) return
	}

	if (event.shiftKey){
		let alreadySelectedElements = $$(".isSelected")
		if (alreadySelectedElements.length == 0){
				if ($id("youAreHere")) {
					let setCurrentElementToStartElement = $id("youAreHere").parentNode.id
					$id(setCurrentElementToStartElement).classList.add("isSelected")
				}else{
					theClickedThing.classList.add('isSelected')
					updateSelectionInfo()
					return
				}
			//updateSelectionInfo()
		}

		if (a.includes("synopsis")){

			let allSynopsis = Array.from($$(".synopsis"))
			let justSelectedSynopsis = allSynopsis.indexOf(theClickedThing)
			let firstSynopsis = allSynopsis.indexOf(alreadySelectedElements[0])
			let lastSynopsis = allSynopsis.indexOf(alreadySelectedElements[alreadySelectedElements.length - 1])
			
			if (justSelectedSynopsis < firstSynopsis){
				for (let selectThis = justSelectedSynopsis; selectThis < firstSynopsis; selectThis++ ){
					allSynopsis[selectThis]?.classList.add("isSelected")
				}
			}
			if (justSelectedSynopsis > lastSynopsis){
				for (let selectThis = lastSynopsis; selectThis < justSelectedSynopsis + 1; selectThis++ ){
					allSynopsis[selectThis]?.classList.add("isSelected")
				}
			}
			if (firstSynopsis < justSelectedSynopsis && justSelectedSynopsis < lastSynopsis){
				let selectThis = justSelectedSynopsis
				do {
					allSynopsis[selectThis]?.classList.add("isSelected")
					selectThis --
				} while(!allSynopsis[selectThis]?.classList.contains("isSelected"))
			}
			return
		}

		let closestPredecessor = -1
		let closestSuccessor = -1
		let thisOne = Number(theClickedThing.id)

		for (element of alreadySelectedElements){
			a = Number(element.id)

			if (a < thisOne){closestPredecessor = a;}
			if (a > thisOne){closestSuccessor = a; break}
		}

		if (closestPredecessor < 0) {

			for (i = thisOne; i <= closestSuccessor; i++){
				let selectThis = $id(i)
				if (selectThis){
					if (![...selectThis.classList].includes("dimmedScene") && ![...selectThis.classList].includes("dimmedSection") && ![...selectThis.classList].includes("synopsis")){
						if (!(documentSetting.scenesAreProportional && [...selectThis.classList].includes("isOmitted"))){
							selectThis.classList.add('isSelected')
						}
					}
				}
			}
		}else{
			for (i = closestPredecessor; i <= thisOne; i++){				
				let selectThis = $id(i)
				if (selectThis){
					if (![...selectThis.classList].includes("dimmedScene") && ![...selectThis.classList].includes("dimmedSection") && ![...selectThis.classList].includes("synopsis")){
						if (!(documentSetting.scenesAreProportional && [...selectThis.classList].includes("isOmitted"))){
							selectThis.classList.add('isSelected')
						}
					}
				}
			}
		}
		updateSelectionInfo()
		return
	}

	if(documentSetting.clickingFocusesEditor){
		if(!theClickedThing.closest(".scene, .section, .synopsis")) deselectAllElements()
	}else{
		deselectAllElements()
	}

	//Finally: if the clicked thing was an outline element, let's go there!

	// if([...theClickedThing.classList].includes('note')){	
	// 	length = theClickedThing.innerHTML.replace(/\<br\>/g, "\n").length + 5
	// }
	if (theClickedThing.classList.contains("review")){
		expandReview(theClickedThing)
		length = parseInt(theClickedThing.getAttribute("data-length")) + 1
	}else{
		expandReview()
	}


	if (a.includes("revision")){

		length = theClickedThing.dataset.length + 1
		
	}

	if(theClickedThing.classList.contains('scene') || theClickedThing.classList.contains('sceneheading') || theClickedThing.classList.contains('synopsis') ){
		theClickedThing.classList.add('isSelected')
	} //because every click also counts as a first selection
	if(theClickedThing.classList.contains("section-heading") || theClickedThing.classList.contains("section")){
		theClickedThing.closest(".section").classList.add("isSelected")
	}

	updateSelectionInfo()

	// setTimeout(makeWider(theClickedThing),210)

	mylog("end of sthWasClicked -- " + theClickedThing.classList)

		//Behavior depending on settings:

		//Clicking a scene immediately focuses Editor
		if(documentSetting.clickingFocusesEditor && !event.metaKey){
			if (theClickedThing.closest(".scene, .section, .synopsis")){
				Beat.call("Beat.focusEditor()") 
			}
		}

	if (gotoIndex) {goto(gotoIndex, theClickedThing, length)}
	mylog("now returning")
}

var selectionInfo = {}

function updateSelectionInfo(){

	if(!documentSetting.showSelectionInfo) return
	if(!$$(".isSelected, .dimmedScene, .dimmedSection, .uncolorAllScenesBut")) return

	let selectionInfo = {}
		selectionInfo.length = 0
		selectionInfo.numberOfScenes = $$(".scene.isSelected").length
		selectionInfo.numberOfSections = $$(".section.isSelected").length

		$id("infoField").style.backgroundColor = "" //resets color if set previously
		$id("infoField").style.opacity = "" //resets opacity if set previously

	let measurableStuff = $$(".scene.isSelected, .orphan.isSelected, .section.isSelected")
	let actionWord = "selected scene" + (measurableStuff.length > 1 ? "s" : "")

	if (measurableStuff.length == 0 && $(".dimmedScene, .dimmedSection")) {
		measurableStuff = $$(".scene:not(.dimmedScene), .section:not(.dimmedSection)")
		actionWord = "scene" + (measurableStuff.length > 1 ? "s" : "") + " with " + $id("characterMenuList")?.selectedOptions[0]?.value
	}else if (measurableStuff.length == 0 && flexiContainer.classList.contains("uncolorAllScenesBut")) {
		let color = colorsArray.find(color => flexiContainer.classList.contains(color.toLowerCase()))?.toLowerCase()
		measurableStuff = $$(".scene." + color)
		actionWord = color + " scene" + (measurableStuff.length > 1 ? "s" : "")
		$id("infoField").style.backgroundColor = "color-mix(in oklab, hsl(var(--" + color + ")), white 20%)"
		$id("infoField").style.opacity = "0.8"
	}

	measurableStuff.forEach(element => {
		
		selectionInfo.length += Number(element.dataset.lengthOfScene)

	})

	$id("infoField").innerHTML = measurableStuff.length > 0 ?
		`${selectionInfo.numberOfScenes || measurableStuff.length} ${actionWord}<br/>
		${numberIntoEights(selectionInfo.length).replace(/pg(s*)/, "")} pages total`
		: ""


}

function makeWider(theClickedThing, cycledWithKey, shift){

		theRoot.style.setProperty('--wider-width', $$(".level1").length/2);


		if (theClickedThing && theClickedThing.closest(".level1").classList.contains("wider")){
			let allWidened = $$(".wider")
			allWidened.forEach(element => {
				element.classList.remove("wider")
			})
			return
		}

		if (theClickedThing) {
			$(".wider")?.classList.remove("wider")
			theClickedThing.closest(".level1").classList.add("wider")
			return
		}

		if (!cycledWithKey) return

		let allActs = $$(".level1")
		let currentlyWidened = $(".wider") || null
			if(allActs.length = 0)return

		if(currentlyWidened && $(".isSelected")){
			$(".wider").classList.remove("wider")
			return
		}
	
		let value = [].indexOf.call(allActs, currentlyWidened)

		value += (shift ? -1 : 1) 
			if(value < -1)value = allActs.length - 1
			if(value > allActs.length - 1)value =  - 1
			// if(!currentlyWidened && $(".isSelected")){
			if($(".isSelected")){
				value = [].indexOf.call(allActs, $(".isSelected").closest(".level1"))
			}

		currentlyWidened?.classList.remove("wider")
		if(value > -1) allActs[value].classList.add("wider")

			
			// for (let i = 0; i < allActs.length; i++){
			// 	if (allActs[i].classList.contains("wider")) break
			// }
		
			// allActs[i].classList.remove("wider")

			// i++
			// if (i > allActs.length) i = 0
			// allActs[i].classList.add("wider")

		// }
	}

function walkTheOutline(e){

	mylog()

	let direction = (e.key == "ArrowDown") ? 1 : -1

	let selectedElements = $$(".isSelected")
	let startingElement

		if (selectedElements.length > 0) {
			if (direction == 1) {
				startingElement = selectedElements[selectedElements.length - 1].closest(".scene, .section");
				} else {
				startingElement = selectedElements[0].closest(".scene, .section");
			}
		} else {
			if (!$id("youAreHere")) return;
			startingElement = $id("youAreHere").closest(".scene, .section");
		}

	let gotoElement = Number(startingElement.id) + direction
		if (gotoElement < 0 || gotoElement > outline.length - 1) return

		if(!e.shiftKey)deselectAllElements()

		$id(gotoElement).classList.add("isSelected")
		updateSelectionInfo()

	let gotoIndex = $id(gotoElement).getAttribute("data-line")
	let theClickedThing = $id(gotoElement)
	let length = outline[gotoElement].line.string.length + 1
	let blinkColor = theClickedThing.style.backgroundColor

	goto(gotoIndex, theClickedThing, length, blinkColor)

}

function walkTheOutlineSideWays(e){

	if(documentSetting.oneColumnOutline || $$(".level1").length < 2) return

	let element = $$(".isSelected").length == 1 ? $(".isSelected") : ($id("youAreHere").closest(".scene, .section"))
	let direction = (e.key == "ArrowRight") ? 1 : -1

	let allColumns = $$(".level1")
	let thisColumn = element.closest(".level1")
	let thisColumnNumber = Array.from(allColumns).indexOf(thisColumn)

	let gotoColumn = thisColumnNumber + direction
		if(gotoColumn < 0 || gotoColumn > allColumns.length - 1) return

	let currentBoundings = element.getBoundingClientRect()

	// let gotoElement = Array.from(($$(".level1"))[gotoColumn].querySelectorAll(".scene, .section")).filter(element => element.getBoundingClientRect().top >= heightOnPage)[0]
	
	
	let gotoElement = Array.from($$(".level1")[gotoColumn].querySelectorAll(".scene, .section-heading")).filter(element => {
		gotoBoundings = element.getBoundingClientRect()
    	return 	gotoBoundings.top >= currentBoundings.top && gotoBoundings.top + gotoBoundings.height <= currentBoundings.top + currentBoundings.height //means gotoelement is inside current's boundaries
				||
				gotoBoundings.top <= currentBoundings.top && gotoBoundings.top + gotoBoundings.height >= currentBoundings.top + currentBoundings.height //means current element is inside gotoelement's boundaries
				||
				gotoBoundings.top >= currentBoundings.top //finally, means gotoelement is below current element
  	})[0]?.closest(".scene, .section");
	
	if(!gotoElement) gotoElement = Array.from($$(".level1")[gotoColumn].querySelectorAll(".scene, .section")).at(-1)
		if(!gotoElement) return

	if(!e.shiftKey)deselectAllElements()
	gotoElement.classList.add("isSelected")

	let gotoIndex = gotoElement.getAttribute("data-line")
	let length = outline[gotoElement.id].line.range.length
	// let blinkColor = gotoElement.style.backgroundColor	
	updateSelectionInfo()
	goto(gotoIndex, gotoElement, length)


}

let waitStateCounter = 0

function toggleWaitState(trueOrFalse){

	mylog("toggleWaitState: " + trueOrFalse)

	if (trueOrFalse) {
		waitStateCounter++
		console.log("waitStateCounter: " + waitStateCounter)
	}else{
		waitStateCounter = 0
		console.log("waitStateCounter was RESET.")
	}

	document.getElementById('outOfSyncDiv').style.display = trueOrFalse ? 'block' : "none"
	document.getElementById('outOfSyncDiv').classList.toggle('animate', trueOrFalse)
	document.getElementById('flexiContainer').classList.toggle('wait', trueOrFalse)



}

function __________TOGGLERS(){}

function advancedTogglers(classToToggle, buttonId, absolute){
	mylog()

	flexiContainer.classList.toggle(classToToggle)
	$id(buttonId).checked = flexiContainer.classList.contains(classToToggle)

	if(classToToggle=="dualSectionLines")recalculateHeights()

	saveCurrentState()

}

function setSharedScreen(){
	mylog()

	let availHeight = window.screen.availHeight
	let availWidth = window.screen.availWidth

	Beat.call(`Beat.custom.makeWindowsShareScreen(${availHeight}, ${availWidth})`)

}

function toggleFullScreen(){
	mylog()

	isFullScreen = !isFullScreen
	Beat.call(`Beat.custom.toggleFull()`)

}

function switchFocus(){
	mylog()

	if (flexiContainer.classList.contains("focused")){
		Beat.call(() => Beat.focusEditor())
	}else{
		Beat.call(() => Beat.custom.switchToHTML())
	}

}

function toggleExcludeVoiceOvers(){
	mylog()

	userDefault.excludeVoiceOvers = !userDefault.excludeVoiceOvers

	saveCurrentState()
	
	updateFilter()
	
	setAllButtons()
	firstRun()

}

function toggleIncludeSynopsis(){
	mylog()

	documentSetting.trackingIncludesSynopsis = !documentSetting.trackingIncludesSynopsis

	saveCurrentState()

	collectCharacters()

	setAllButtons()
	firstRun()

}

function toggleMultipleSceneLines(){
	mylog()

	documentSetting.showMultipleSceneLines = !documentSetting.showMultipleSceneLines
	flexiContainer.classList.toggle("dualSceneLines", documentSetting.showMultipleSceneLines)

	setAllButtons()
	saveCurrentState()

}

function toggleInvertText(){
	mylog()

	userDefault.invertTextOnDark = !userDefault.invertTextOnDark

	reevaluateColorContrast()
	setAllButtons()
	saveCurrentState()

}

function toggleOneColumnOutline() { 
	mylog()

	documentSetting.oneColumnOutline = !documentSetting.oneColumnOutline

	flexiContainer.style.display = documentSetting.oneColumnOutline ? "inline-block" : "flex"
	$id("flexiContainer").classList.toggle("oneColumnOutline", documentSetting.oneColumnOutline)
	
	setAllButtons()
	saveCurrentState()
	recalculateHeights("from ToggleOneColumnOutline") // or else, in index card mode, cards get the wildest sizes.

	if(notesAreDisplayed){toggleDisplayNotes(); toggleDisplayNotes()}
	if(markersAreDisplayed){toggleDisplayMarkers(); toggleDisplayMarkers()}
	if(beatsAreDisplayed){toggleDisplayBeats(); toggleDisplayBeats()}
	if(reviewsAreDisplayed){toggleDisplayReviews(); toggleDisplayReviews()}
}

function toggleIndexCardMode(firstrun){
	mylog()

	documentSetting.indexCardMode = !documentSetting.indexCardMode
	
	if(!firstrun){ // will allow changing in spite of empty flexicontainer when opening doc and restoring mode!
		if($$(".scene").length == 0 && $$(".section").length == 0){documentSetting.indexCardMode = false}
	}

	if (documentSetting.indexCardMode) {

			mylog("indexCards ON")

			if(!firstrun){ // or else sluglines will blink when changing values in settings dialog.
				$$(".sluglineIsHidden").forEach(element => {
					element.classList.remove("sluglineIsHidden")
				})
			}

			scenesWereProportionalBeforeIndexMode = (documentSetting.scenesAreProportional)
			documentSetting.scenesAreProportional = false
			flexiContainer.classList.remove("nonProportionalMode")
				
			flexiContainer.classList.add("indexcards")
			document.getElementById("indexCardButton").innerHTML = newIndexCardIcon
			
	}else{

			mylog("indexCards OFF")
			
			flexiContainer.classList.remove("indexcards")
			document.getElementById("indexCardButton").classList.remove("buttonIsActive")

			//turn back proportional to where it was before indexCards, and have icon redraw. 
				toggleProportional(scenesWereProportionalBeforeIndexMode)

	}

	if(firstrun) return

	setAllButtons()
	youAreHere()
	recalculateHeights("from toggleIndexCardMode")
	saveCurrentState()
	reevaluateColorContrast()

	if(notesAreDisplayed){toggleDisplayNotes(); toggleDisplayNotes()}
	if(markersAreDisplayed){toggleDisplayMarkers(); toggleDisplayMarkers()}
	if(beatsAreDisplayed){toggleDisplayBeats(); toggleDisplayBeats()}
	if(reviewsAreDisplayed){toggleDisplayReviews(); toggleDisplayReviews()}

	mylog("end cycling index card mode")
}
	
function toggleShowSceneNumbers() {
	mylog()
	
	if (showSceneNumbers == "inline") {
		theRoot.style.setProperty('--showSceneNum', 'none');	
		}else{
		theRoot.style.setProperty('--showSceneNum', 'inline');	
		}
		
	showSceneNumbers = theRoot.style.getPropertyValue('--showSceneNum');
	documentSetting.showSceneNumbers = showSceneNumbers

	setAllButtons()
	saveCurrentState()
}

function toggleShowPageNumbers() {
	mylog("toggleShowPageNumbers")
	if (showPageNumbers == "inline") {
		theRoot.style.setProperty('--showPageNum', 'none');	
		}else{
		theRoot.style.setProperty('--showPageNum', 'inline');	
		saveCurrentState()
	}
		
	showPageNumbers = theRoot.style.getPropertyValue('--showPageNum');
	documentSetting.showPageNumbers = showPageNumbers

	recalculateHeights()
	setAllButtons()
}

function toggleShowSceneLength() {
	mylog()
	
	if (showSceneLengths == "inline") {
		theRoot.style.setProperty('--showSceneLength', 'none');	
		}else{
		theRoot.style.setProperty('--showSceneLength', 'inline');	
	}
		
	showSceneLengths = theRoot.style.getPropertyValue('--showSceneLength'); //double-check: Do I still use this?
	documentSetting.showSceneLengths = showSceneLengths

	setAllButtons()
	saveCurrentState()
}

function toggleWarnings() {
	mylog()

	userDefault.warningsAreOn = !userDefault.warningsAreOn
		
	setAllButtons()
	saveCurrentState()
}

function toggleShowRevisions(absolute) {
	mylog()

  	documentSetting.showRevisions = typeof absolute === 'undefined' ? !documentSetting.showRevisions : absolute;

	if(documentSetting.showRevisions){
		collectRevisionIndices()
	}else{
		$$(".revision").forEach(revision => { revision.remove() })
	}
	
	setAllButtons()
}

function toggleDisplayNotes() {
	mylog()

	documentSetting.notesAreDisplayed = !documentSetting.notesAreDisplayed
	notesAreDisplayed = documentSetting.notesAreDisplayed
		
	if(notesAreDisplayed){
		collectNotes("toggleDisplayNotes")
	}else{
		collapseNote()
		let noteElements = $$(".noteContainer")
			noteElements.forEach(element => {element.remove()})
	}
	setAllButtons()
	//saveCurrentState()
}

function toggleDisplayMarkers() {
	mylog()

	console.log("%cTOGGLE DISPLAY MARKERS", "color: red")

	documentSetting.markersAreDisplayed = !documentSetting.markersAreDisplayed
	markersAreDisplayed = documentSetting.markersAreDisplayed
	
	if(markersAreDisplayed){
		document.getElementById("flexiContainer").classList.add("markersAreDisplayed")
		collectNotes("toggleDisplayMarkers")
	}else{
		document.getElementById("flexiContainer").classList.remove("markersAreDisplayed")
		let currentMarkers = document.querySelectorAll(".marker")
        for (currentMarker of currentMarkers){currentMarker.remove()}
	}
	setAllButtons()
	//saveCurrentState()
}

function toggleDisplayReviews() {
	mylog()

	documentSetting.reviewsAreDisplayed = !documentSetting.reviewsAreDisplayed
	reviewsAreDisplayed = documentSetting.reviewsAreDisplayed

	if(reviewsAreDisplayed){
		flexiContainer.classList.add("reviewsAreDisplayed")
		collectReviews()
	}else{
		flexiContainer.classList.remove("reviewsAreDisplayed")
		let existingReviews = $$(".review")
		for (existingReview of existingReviews){existingReview.remove()}
	}

	setAllButtons()

}

function toggleDisplayBeats() {
	mylog()

	documentSetting.beatsAreDisplayed = !documentSetting.beatsAreDisplayed
	beatsAreDisplayed = documentSetting.beatsAreDisplayed
	
	if(documentSetting.beatsAreDisplayed){
		$("#flexiContainer").classList.add("beatsAreDisplayed")
		collectNotes("toggleDisplayBeats")
	}else{
		$("#flexiContainer").classList.remove("beatsAreDisplayed")
		let currentBeats = $$(".beat")
        for (currentBeat of currentBeats){currentBeat.remove()}
		let currentPaths = $$(".svgForBeats")
		for (currentPath of currentPaths){currentPath.remove()}
	}
	setAllButtons()
	//saveCurrentState()
	mylog("end of toggling Beats")
}

function toggleDisplaySynopsis() {
	mylog()

	if ($id("flexiContainer").classList.contains("indexcards")){return}

	document.getElementById("flexiContainer").classList.toggle("showSynopsisInScenes")
	documentSetting.showSynopsisInScenes = document.getElementById("flexiContainer").classList.contains("showSynopsisInScenes")

	setAllButtons()
}
	
function toggleSettingsContainer() { 
	mylog()

	if (trackingContainerVisibility == 1){toggleTrackingContainer()}
	if (helpContainerVisibility == 1){toggleHelpContainer()}

	settingsContainerVisibility = 1 - settingsContainerVisibility;
	settingsContainer.style.display = blockOrNone[1-settingsContainerVisibility];
	coverContainer.style.display = blockOrNone[1-settingsContainerVisibility];
}

function toggleHelpContainer() {
	mylog()

	closeNewMenu()

	if (trackingContainerVisibility == 1){toggleTrackingContainer()}
	if (settingsContainerVisibility == 1){toggleSettingsContainer()}

	helpContainerVisibility = 1 - helpContainerVisibility;
	helpContainer.style.display = blockOrNone[1-helpContainerVisibility];
	coverContainer.style.display = blockOrNone[1-helpContainerVisibility];
}

function toggleTrackingContainer(close) { 
	mylog()

	if (settingsContainerVisibility == 1){toggleSettingsContainer()}
	if (helpContainerVisibility == 1){toggleHelpContainer()}
	$id("aboutBox")?.remove()
	$("#textContainer")?.remove()

	if($id("menu")){$id("menu").remove()}

	trackingContainerVisibility = 1 - trackingContainerVisibility;
		if(close){trackingContainerVisibility = 0}

	if (trackingContainerVisibility == 1) {collectCharacters()}
	trackingContainer.style.display = blockOrNone[1-trackingContainerVisibility];
	coverContainer.style.display = blockOrNone[1-trackingContainerVisibility];
}

function toggleColorScheme() { 
	mylog()

	userDefault.colorScheme = 'FTOutlinerBeat'.replace(userDefault.colorScheme, "")
	document.documentElement.setAttribute('data-theme', userDefault.colorScheme)
	
	setAllButtons()
	saveCurrentState()
	reevaluateColorContrast()
	updateDialogPanel()
}

function outdoorMode(){
	mylog()

	documentSetting.outdoor = 1 - documentSetting.outdoor
	document.documentElement.setAttribute('data-outdoors', documentSetting.outdoor)

	setAllButtons()
	updateDialogPanel()
	reevaluateColorContrast()

}
	
function toggleProportional(absolute) { 
	mylog()

	if(documentSetting.indexCardMode){
		toggleIndexCardMode(); 
		if(typeof absolute === 'undefined'){
			return
		}
	}

	documentSetting.scenesAreProportional = typeof absolute === 'undefined' ? !documentSetting.scenesAreProportional : absolute;
	
	flexiContainer.classList.toggle("nonProportionalMode", !documentSetting.scenesAreProportional)
	document.getElementById("indexCardButton").innerHTML = documentSetting.scenesAreProportional ? outlineIcon : fixedIcon

	if(!documentSetting.scenesAreProportional){
		$$(".sluglineIsHidden").forEach(element => {
			element.classList.remove("sluglineIsHidden")
		})
	}

	if (documentSetting.notesAreDisplayed){
		toggleDisplayNotes()
		toggleDisplayNotes()
	}

	if (documentSetting.markersAreDisplayed){
		toggleDisplayMarkers()
		toggleDisplayMarkers()
	}

	if (documentSetting.beatsAreDisplayed){
		toggleDisplayBeats()
		toggleDisplayBeats()
	}

	if (documentSetting.reviewsAreDisplayed){
		toggleDisplayReviews()
		toggleDisplayReviews()
	}

	recalculateHeights("from ToggleProportional")

	setAllButtons()
	saveCurrentState()
	reevaluateColorContrast()
}

function toggleRealTime() {
	mylog()

	realTimeIsOn = 1 - realTimeIsOn;
	documentSetting.realTimeIsOn = realTimeIsOn

	setAllButtons()
}

function addShowHideBoneyard(){
	mylog()

	if(!$(".boneyard")){

		let doThis = `Beat.addString(\"\\n#BONEYARD\\n\\n===\\n\\n\", Beat.getText().length)`
		Beat.call(doThis)
		flexiContainer.classList.remove("boneyardIsClosed")
		return
	}

	flexiContainer.classList.toggle("boneyardIsClosed")
	setAllButtons()

}

var dialogTimeOut

function changeSaturation(){
	mylog()

	documentSetting.saturation = Number($id("saturationRange").value)
	document.documentElement.style.setProperty('--saturation', documentSetting.saturation + "%")

	if (dialogTimeOut) clearTimeout(dialogTimeOut)
		dialogTimeOut = setTimeout(() => {
			updateDialogPanel()
		}, 200);
	saveCurrentState()

}

function __________ACTIONS(){}

function goto(gotoIndex, theClickedThing, length = theClickedThing?.dataset.length, blinkColor = theClickedThing?.dataset.color){

	mylog("goto " + gotoIndex)

	let classes = [...theClickedThing.classList]
	if (classes.includes("sceneheading") || classes.includes("scene") || classes.includes("section") || classes.includes("synopsis")){
		Beat.call("Beat.scrollToScene(Beat.currentParser.sceneAtIndex(" + gotoIndex + "))")
	}
		
	//if (classes.includes("showActLength")){gotoIndex ++}
	gotoIndex = Math.min(gotoIndex, absoluteTextLength - 1)
	
	Beat.call("Beat.scrollTo(" + gotoIndex + ")") 

	if (classes.includes("pageDivider")) return
	if (classes.includes("location")) {
		gotoIndex = theClickedThing.dataset.startIndex
		length = theClickedThing.dataset.endIndex - theClickedThing.dataset.startIndex
	}

	let elementColor = window.getComputedStyle(theClickedThing).backgroundColor
	let textColor
	if ((classes.includes("scene") || classes.includes("revision")) && elementColor){
		let values = elementColor.replace(/rgb(a)*\(/, "").replace(")", "").split(",")
		let rgbAsHex = ""
		for (value of values){
			if (rgbAsHex.length == 6){break}
			let thisvalue = Number(value).toString(16).toUpperCase()
			thisvalue = thisvalue.length > 1 ? thisvalue : "0" + thisvalue
			rgbAsHex += thisvalue
		}
		blinkColor = "#" + rgbAsHex
		textColor = "#222222"
	}

	if (classes.includes("note") || classes.includes("expandedNote") || classes.includes("notepanelNote")){
		//blinkColor = rgbToHex(theClickedThing.dataset.color) || "#cccc55"
		//2023 commented out: length = Number(theClickedThing.dataset.length) + (Number(theClickedThing.dataset.inline)? 1 : 0)
		//alertThis(rgbToHex(theClickedThing.dataset.color))
	}

	blinkColor = blinkColor || "#888888"
	textColor = textColor || false

	let blinkLength = length || "Beat.currentParser.lineAtIndex(" + gotoIndex + ")?.string?.length + 1"
		Beat.call("Beat.custom.blinkTheLine(" + gotoIndex + "," + blinkLength + ", '" + blinkColor + "' , '" + textColor + "');")

	//Select the clicked thing in the editor
		if(documentSetting.clickingSelectsInEditor || (event.metaKey && event.ctrlKey && event.altKey)){		
			if (theClickedThing.closest(".scene, .section")){
				let lineOfScene = outline[theClickedThing.closest(".scene, .section, .synopsis").dataset.myId]
				Beat.call("Beat.setSelectedRange(" + lineOfScene.sceneStart + "," + (lineOfScene.sceneEnd - lineOfScene.sceneStart) + ")")
			}
		}

}

function rgbToHex(rgbString){

	let values = rgbString.replace(/rgb(a)*\(/, "").replace(")", "").split(",")
	let rgbAsHex = "#"
	for (value of values){
			if (rgbAsHex.length == 7){ break }
			let thisvalue = Number(value).toString(16).toUpperCase()
				thisvalue = thisvalue.length > 1 ? thisvalue : "0" + thisvalue
				rgbAsHex += thisvalue
		}
	return rgbAsHex
}

function selectAllElements(altWasPressed) {
	mylog("selectAllElements")
	let allElements = $$(".scene, .section")
	for (element of allElements){

		let docontinue = false

		if (![...element.classList].includes("dimmedScene") && ![...element.classList].includes("dimmedSection")){
			if(altWasPressed && [...element.classList].includes("section")){docontinue = true}

			
			if([...document.getElementById("flexiContainer").classList].includes("uncolorAllScenesBut")){
				docontinue = true
				for (let color of colorsArray){
					if([...document.getElementById("flexiContainer").classList].includes(color.toLowerCase()) && [...element.classList].includes(color.toLowerCase())){
						docontinue = false
					}
				}
			}

		if (docontinue){continue}
		element.classList.add("isSelected")
		}
	}
	updateSelectionInfo()
}

// Below is a function stolen from https://davidwalsh.name/javascript-debounce-function

// Returns a function, that, as long as it continues to be invoked, will not be triggered. 
// The function will be called after it stops being called for N milliseconds. 
// If `immediate` is passed, trigger the function on the leading edge, instead of the trailing.

function debounce(func, wait, immediate) { 
	//currently only used from somoneResizedTheWindow()
	
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
}

function changeIndexCardHeight(key){

	switch (key){
		case "=":
		case "+":
			//indexCardHeight = Math.min(4.5, Number(indexCardHeight) + 0.25) 
			indexCardHeight = Math.min(20, Number(indexCardHeight) + 1) 
		break;
		case "-":
			//indexCardHeight = Math.max(0.5, Number(indexCardHeight) - 0.25) 
			indexCardHeight = Math.max(0, Number(indexCardHeight) - 1) 
		break;
		case "0":
			indexCardHeight = 5
	}

	recalculateHeights("from changeIndexCardHeight")
	saveCurrentState()

	if (notesAreDisplayed){displayNotes()}
}

function zoomSizes(key, explicitLevel){

	currentZoomLevel = getComputedStyle(theRoot).getPropertyValue('--fontSizeFactor')

	switch (key){
		case "=":
		case "+":
			newZoomLevel = Math.min(2, Number(currentZoomLevel) + 0.2) 
		break;
		case "-":
			newZoomLevel = Math.max(0.4, Number(currentZoomLevel) - 0.2) 
		break;
		case "0":
			newZoomLevel = 1
		break;
		default:
			newZoomLevel = explicitLevel || 1
	}

	// if(!newZoomLevel) return //this can happen if we press a legal shortcut but with an extra modifier key. 

	theRoot.style.setProperty('--fontSizeFactor', newZoomLevel)
	currentZoomLevel = newZoomLevel

	setTimeout(() => {
		
		recalculateHeights("from zoomSizes")
	}, 300);
	saveCurrentState()

	if (notesAreDisplayed){displayNotes()}

}

function isThisOffScreen(element){

	mylog("======== determining off/onscreen for..." + element?.classList)

	if(!element) return

	let rect = element.getBoundingClientRect()

	// mylog("this is the element's measurements:")
	// mylog("rightmost point: " + (rect.x + rect.width))
	// mylog("topmost point: " + (rect.y))
	// mylog("window width: " + window.innerWidth)
	// mylog("window height: " + window.innerHeight)
	

	let result = (
		(rect.x + rect.width) < 0 
            || 
		(rect.y) < 20
            || 
		(rect.x > window.innerWidth 
			|| 
		rect.y + rect.height > (window.innerHeight - 70))
	)

	return result
}

function scrollNicelyIntoView(element, whichContainer){

	mylog("scrollNicely")

	if(weAreCurrentlyEditingText) return
	if(!element) return

	//Webkit 15.4
		// element.scrollIntoView("smooth", "center")
		// return

	if(!whichContainer) whichContainer = flexiContainer

		let elementRect = element.getBoundingClientRect()
		// let frameRect = document.getElementById("flexiContainer").getBoundingClientRect()
		let frameRect = whichContainer.getBoundingClientRect()
		// let currentScroll = document.getElementById("flexiContainer").scrollTop
		let currentScroll = whichContainer.scrollTop
		let currentBottom = frameRect.height + currentScroll

		
		let oldPos = elementRect.top
		let targetPos = currentScroll + oldPos - frameRect.bottom/2


		let diff = (targetPos - currentScroll) / 10
		let newPos = currentScroll

		if (targetPos > currentScroll){
			function stepUp() {
				newPos = newPos + diff
				// document.getElementById("flexiContainer").scrollTo(0, newPos)
				whichContainer.scrollTo(0, newPos)
				if (whichContainer == $id("dialogpanelcontent")) updateDialogPanelOnScroll()

				if (newPos < targetPos) {
					mylog("animating UP")
					window.requestAnimationFrame(stepUp)
				}
			}
			window.requestAnimationFrame(stepUp)
		}

		if (targetPos < currentScroll){
			function stepDown() {
				newPos = newPos + diff
				// document.getElementById("flexiContainer").scrollTo(0, newPos)
				whichContainer.scrollTo(0, newPos)
				if (whichContainer == $id("dialogpanelcontent")) updateDialogPanelOnScroll()

				if (newPos > targetPos) {
					mylog("animating DOWN")
					window.requestAnimationFrame(stepDown)
				}
			}
			window.requestAnimationFrame(stepDown)
		}
	
	if (whichContainer == $id("dialogpanelcontent")) setTimeout(function(){updateDialogPanelOnScroll()},0)
	mylog("scrollNicely is now done")
}

function __________ALERTS_AND_LOGS(){}

function alertThis(first, second){
	Beat.call("Beat.alert(`" + first + "`, `" + second + "`)")
}

function toggleConsole(){

	loggingIsOn = !loggingIsOn
	if($id("buttonForLogging")){$id("buttonForLogging").checked = loggingIsOn}

	flexiContainer.classList.toggle("loggingIsOn", loggingIsOn)

	if(loggingIsOn){Beat.call("Beat.openConsole()")}
	if(!loggingIsOn){firstRun()}

}

var anErrorHasOccured = false

// function mylog(text, noError, important, sameline){
function mylog(abstext, isError){

	if (anErrorHasOccured) return //don't log any more entries after the offending one

	text = JSON.parse(JSON.stringify(mylog.caller.name))
	text += abstext ? (":     " + abstext) : ""

	//this is a real time suck, so keep this off at all times if possible!
	if(loggingIsOn){
		// let log = "Beat.log(`" + text + "`)"
		// 	Beat.call(log)
			console.log(text)
	}

	//saving to the crashlog
		logArray.push(new Date().toLocaleString('sv-SE', { timeZone: 'Europe/Stockholm' }) + "." + new Date().getMilliseconds().toString().padStart(3, '0') + " -- " + text)
		while (logArray.length > 100){logArray.shift()}

		if(!isError){return}

	//The rest is when an error has indeed happened!

		anErrorHasOccured = true

		logArray = logArray.reverse() //so as to get offending command at the top, thankyouverymuch
		
		logArray.push(" ")
		logArray.push("____________________________________________________________")
		logArray.push(" ")
		logArray.push("flexiContainerclassList:")
		logArray.push(" ")
		logArray.push(Array.from(flexiContainer.classList).join("\n"))
		logArray.push(" ")
		logArray.push("____________________________________________________________")
		logArray.push(" ")
		logArray.push("Document Settings:")
		logArray.push(" ")
		for (var property in documentSetting) {
			if(["documentName", "documentSubName", "documentAuthor"].includes(property)){continue} //don't send user-related info
			logArray.push(property + ": " + documentSetting[property])
		}
		logArray.push("____________________________________________________________")
		logArray.push(" ")
		logArray.push("User Defaults:")
		logArray.push(" ")
		for (var property in userDefault) {
  			logArray.push(property + ": " + userDefault[property])
		}

		displayErrorMessage(logArray)


		console.log("🔴🔴🔴 FTOutliner had an error. Below is the stack trace:")
			(JSON.parse(JSON.stringify(logArray)))
		Beat.log("🔴🔴🔴 FTOutliner had an error. Below is the stack trace:")
		Beat.log(logArray.join("\n"))


}

</script>