var twistTopMenuData = [
	{name: "File", contents: [
		{name: "New", disableOnPlay: true, shortcut: {name: "Ctrl N", ctrlKey: true, key: "n"}, click: function(twist) {
			twist.createNewInstance();
		}, condition: function(twist) {
			return (!twist.twine);
		}},
		{name: "Save", disableOnPlay: true, shortcut: {name: "Ctrl S", ctrlKey: true, key: "s"}, click: function(twist) {
				twist.saveFile();
		}},
		{name: "Close", disableOnPlay: true, shortcut: {name: "Ctrl W", ctrlKey: true, key: "w"}, click: function(twist) {
			twist.closeInstance();
		}, condition: function(twist) {
			return (!twist.twine && twist.waveforms.length != 1);
		}},
		{name: "Edit in twigs", click: function(twist) {
			twist.editInTwigs();
		}, condition: function(twist) {
			return window.hasOwnProperty("Twigs");
		}}
	]},
	{name: "Edit", contents: [
		{name: "Undo", disableOnPlay: true, shortcut: {name: "Ctrl Z", ctrlKey: true, key: "z"}, click: function(twist) {
			twist.undo();
		}, condition: function(twist) {
			return (twist.storage.maxundo > 0 && twist.undoLevel > 0);
		}},
		{preset: "divider"},
		{name: "Copy", disableOnPlay: true, shortcut: {name: "Ctrl C", ctrlKey: true, key: "c"}, click: function(twist) {
			twist.copy();
		}},
		{name: "Cut", disableOnPlay: true, shortcut: {name: "Ctrl X", ctrlKey: true, key: "x"}, click: function(twist) {
			twist.cut();
		}},
		{name: "Paste", disableOnPlay: true, shortcut: {name: "Ctrl V", ctrlKey: true, key: "v"}, click: function(twist) {
			twist.paste();
		}, condition: function(twist) {
			return twist.hasClipboard;
		}},
		{name: "Paste special", disableOnPlay: true, shortcut: {name: "Ctrl shift V", ctrlKey: true, shiftKey: true, key: "v"}, click: function() {
			twist.pasteSpecial();
		}, condition: function(twist) {
			return twist.hasClipboard;
		}},
		{name: "Trim", disableOnPlay: true, shortcut: {name: "T", key: "t"}, click: function() {
			twist.trim();
		}},
		{name: "Delete", disableOnPlay: true, shortcut: {name: "Del", key: "delete"}, keyCondition: function(twist) {
			return !twist.ui.deleteSupressed;
		}, click: function(twist) {
			twist.delete();
		}},
		{preset: "divider"},
		{name: "Select all", shortcut: {name: "Ctrl A", ctrlKey: true, key: "a"}, click: function(twist) {
			twist.selectAll();
		}},
		{name: "Select to end", shortcut: {name: "W", key: "w"}, click: function(twist) {
			twist.selectToEnd();
		}},
		{name: "Select from start", shortcut: {name: "Q", key: "q"}, click: function(twist) {
			twist.selectFromStart();
		}},
		{name: "Select none", shortcut: {name: "Ctrl M", ctrlKey: true, key: "m"}, click: function(twist) {
			twist.selectNone();
		}},
		{name: "Move to next transient", shortcut: {name: "[",key: "["}, click: function(twist) {
			twist.moveToNextTransient();
		}},
		{name: "Select to next transient", shortcut: {name: "]",key: "]"}, click: function(twist) {
			twist.selectToNextTransient();
		}}
	]},
	{name: "View", contents: [
		{name: "Zoom selection", shortcut: {name: "Z", key: "z"}, click: function(twist) {
			twist.waveform.zoomSelection();
		}},
		{name: "Zoom in", shortcut: {name: "+", key: "+"}, click: function(twist) {
			twist.waveform.zoomIn();
		}},
		{name: "Zoom out", shortcut: {name: "-", key: "-"}, click: function(twist) {
			twist.waveform.zoomOut();
		}},
		{name: "Show all", shortcut: {name: "0", key: "0"}, click: function(twist) {
			twist.waveform.setRegion(0, 1);
		}},
		{preset: "divider"},
		{name: "Toggle analysis", click: function(twist){
			twist.ui.toggleScope();
		}},
		{name: "Toggle layout", shortcut: {name: "L", key: "l"}, click: function(twist){
			twist.ui.toggleLayout();
		}},
	]},
	{name: "Action", contents: [
		{name: "Play/stop", shortcut: {name: "Space", key: " "}, click: function(twist) {
			if (twist.isPlaying()) {
				twist.stop();
			} else {
				twist.play();
			}
		}},
		{name: "Audition", disableOnPlay: true, shortcut: {name: "Enter", key: "enter"}, click: function(twist) {
			twist.audition();
		}},
		{name: "Commit", disableOnPlay: true, shortcut: {name: "Alt enter", altKey: true, key: "enter"}, click: function(twist) {
			twist.commit();
		}},
		{name: "Record", disableOnPlay: true, shortcut: {name: "R", key: "r"}, click: function(twist) {
			twist.record();
		}},
		{preset: "divider"},
		{name: "Scripting", shortcut: {name: "Ctrl K", ctrlKey: true, key: "k"}, click: function(twist) {
			twist.ui.scriptEdit(); 
		}},
		{name: "Developer", shortcut: {name: "Ctrl L", ctrlKey: true, key: "l"}, click: function(twist) {
			twist.ui.developerConsole();
		}},
	
	]},
	{name: "Transform", contents: [
		{name: "Randomise", shortcut: {name: "Z", key: "z"}, click: function(twist) {
			twist.currentTransform.randomise();
		}, condition: function(twist) {
			return (twist.currentTransform) ? true : false;
		}},
			{name: "Reset", shortcut: {name: "R", key: "r"}, click: function(twist) {
			twist.currentTransform.reset();
		}, condition: function(twist) {
			return (twist.currentTransform) ? true : false;
		}},
		{name: "Hide automation", shortcut: {name: "H", key: "h"}, click: function(twist) {
			twist.currentTransform.hideAllAutomation();
		}, condition: function(twist) {
			return (twist.currentTransform) ? true : false;
		}}
	]},
	{name: "Options", contents: [
		{name: "Settings", click: function(twist) {
			twist.ui.showSettings();
		}}
	]},
	{name: "Help", contents: [
		{name: "Help", click: function(twist){
			$("#twist_documentation")[0].click();
		}},
		{name: "Developer reference", click: function(twist){
			$("#twist_developer_documentation")[0].click();
		}},
		{name: "Report bug", click: function(twist){
			$("#twist_reportbug")[0].click();
		}},
		{name: "Contact owner", click: function(twist){
			$("#twist_contact")[0].click();
		}},
		{name: "Submit transform code", click: function(twist){
			$("#twist_developer_submit")[0].click();
		}},
		{name: "About", click: function(twist) {
			twist.ui.showAbout();
		}},
	]},
];


var TwistUI = function(twist) {
	var self = this;
	var scope;
	var elCrossfades = [];
	var topMenu = new twirl.TopMenu(twist, twistTopMenuData, $("#twist_menubar"));
	this.deleteSupressed = false;
	
	this.setPlaying = function(state) {
		if (scope) {
			scope.setPlaying(state);
		}
		if (state) {
			$(".twist_scriptbutton").hide();
			$("#twist_scriptstop").show();
		} else {
			$(".twist_scriptbutton").show();
			$("#twist_scriptstop").hide();
		}
	};
	
	this.getCrossFadeValues = function() {
		return [elCrossfades[0].val(), elCrossfades[1].val()];
	};
	
	
	var contractedWaveform = false;
	function setLayout() {
		var elViews = $("#twist_views");
		var elWave = $("#twist_waveforms");
		var elSpline = $("#twist_splines");
		var elScope = $("#twist_analyser");
		var elControls = $("#twist_controls");
				
		if (contractedWaveform) {
			elViews.css({height: "20%"});
			elControls.css({top: "20%"});		
		} else {
			elViews.css({height: "50%"});
			elControls.css({top: "50%"});
		}
		
		if (scope) {
			elScope.css({height: "40%", top: "0px"});
			elWave.css({top: "40%"});
			elSpline.css({top: elWave.css("top")});
		} else {
			elWave.css({top: "0px"});
			elSpline.css({top: "0px"});
		}
		
		twist.redraw();
	}
	
	this.toggleLayout = function() {
		contractedWaveform = !contractedWaveform;
		setLayout();
	};
	
	this.toggleScope = function(noSaveState) {
		var state;
		if (!scope) {
			state = true;
			var elScope = $("<div />").addClass("twist_scope").appendTo($("#twist_analyser"));
			var type = (twist.storage.scopeType) ? twist.storage.scopeType : 0;
			scope = new Analyser(
				type, twist, elScope, app
			);
			$("#twist_analyser").show();
		} else {
			$("#twist_analyser").hide();
			state = false;
			scope.remove();
			delete scope;
			scope = null;
		}
		
		if (!noSaveState) {
			twist.storage.showScope = state;
			twist.saveStorage();
		}
		setLayout();
	};
	
	
	this.tooltip = twirl.tooltip;
		
	this.boot = function() {
		if (twist.storage.hasOwnProperty("showShortcuts")) {
			if (twist.storage.showShortcuts) {
				$("#twist_wavecontrols_inner").show();
			} else {
				$("#twist_wavecontrols_inner").hide();
			}
		}
		
		if (twist.storage.develop) {
			if (twist.storage.develop.csound) {
				$("#twist_devcsound").val(twist.storage.develop.csound);
			}
			if (twist.storage.develop.json) {
				$("#twist_devjson").val(twist.storage.develop.json);
			}
		}
		$("#loading_background").css("opacity", 1).animate({opacity: 0.2}, 1000);
	};
	
	this.postBoot = function() {
		self.setLoadingStatus(false);
		
		if (!twist.storage.hasOwnProperty("firstLoadDone")) {
			twist.storage.firstLoadDone = true;
			twist.saveStorage();
			self.showPrompt($("#twist_welcome").detach().show(), twist.createNewInstance);						
		} else {
			twist.createNewInstance();
		}
		
		if (twist.storage.showScope) {
			self.toggleScope(true);
		}
	};
	
	this.hidePrompt = function() {
		twirl.prompt.hide();
	};
	
	this.showPrompt = function(text, oncomplete, noButton) {
		twirl.prompt.show(text, oncomplete, noButton);
		if (twist.playheadInterval) {
			twist.waveform.movePlayhead(0);
			clearInterval(twist.playheadInterval);
		}
		if (self.waveform) {
			self.waveform.cover(false);
		}
	};
	
	
	this.showLoadNewPrompt = function() {
		var elNewFile = $("<div />").css({"font-size": "var(--fontSizeDefault)"});
		if (twist.hasClipboard) {
			$("<button />").text("Create from clipboard").appendTo(elNewFile).click(function(){
				twist.loadFileFromClipboard();
				twirl.prompt.hide();
			});
		}
		
		elNewFile.append($("<h3 />").text("Drag an audio file here to load")).append($("<p />").text("or"));
		
		var elEmpty = $("<div />").appendTo(elNewFile);
		$("<h4 />").text("Create an empty file").css("cursor", "pointer").appendTo(elEmpty);
							
		var tpDuration = new twirl.transform.Parameter({
			definition: {name: "Duration", min: 0.1, max: 60, dfault: 10, automatable: false, fireChanges: false}, 
			host: twist
		});
		
		var tpChannels = new twirl.transform.Parameter({
			definition: {name: "Channels", min: 1, max: 2, dfault: 2, step: 1, automatable: false, fireChanges: false}, 
			host: twist
		});
		
		var tpName = new twirl.transform.Parameter({
			definition: {name: "Name", type: "string", dfault: "New file", fireChanges: false},
			host: twist
		});
		
		var tb = $("<tbody />");
		$("<table />").append(tb).css("margin", "0 auto").appendTo(elEmpty);
		tb.append(tpDuration.getElementRow(true)).append(tpChannels.getElementRow(true)).append(tpName.getElementRow(true));
		
		$("<button />").text("Create").appendTo(elEmpty).click(function() {
			twist.createEmpty(tpName.getValue(), tpDuration.getValue(), tpChannels.getValue());
		});
				
		
		self.showPrompt(elNewFile, null, true);
	}
	

	this.setTheme = function(name, nosave) {
		twirl.setTheme(name, nosave);
	};
	
	this.showSettings = function() {
		var settings = [
			{
				name: "Commit history limit",
				description: "Number of transform states to store (can be accessed via the script editor). 0 = infinite",
				min: 0, max: 32, step: 1, dfault: 16, storageKey: "commitHistoryLevel"
			},
			{
				name: "Undo levels",
				description: "Number of undo levels stored. Large numbers may affect memory usage",
				min: 0, max: 32, step: 1, dfault: 2, storageKey: "maxundo",
				onChange: function(val) {
					app.setControlChannel("twst_maxundo", val);
				}
			},
			{
				name: "Analysis type",
				description: "Type of analysis to be shown",
				options: ["Frequency", "Oscilloscope"],
				dfault: 0,
				storageKey: "scopeType",
				onChange: function(val) {
					if (scope) scope.setType(val);
				}
			},
			{
				name: "Show shortcuts",
				description: "Show shortcuts toolbar below waveform",
				bool: true,
				storageKey: "showShortcuts",
				dfault: 1,
				onChange: function(val) {
					if (val) {
						$("#twist_wavecontrols_inner").show();
					} else {
						$("#twist_wavecontrols_inner").hide();
					}
				}
			},
			{
				name: "DC block processing",
				description: "Apply DC blocking to all processing",
				bool: true,
				storageKey: "dcblockoutputs",
				dfault: 0,
				onChange: function(val) {
					app.setControlChannel("twst_dcblockoutputs", val);
				}
			},
			{
				name: "Tanh limit all processing",
				description: "Apply tanh to all processing",
				bool: true,
				storageKey: "tanhoutputs",
				dfault: 0,
				onChange: function(val) {
					app.setControlChannel("twst_tanhtanhoutputs", val);
				}
			},
			{
				name: "Autosave before each commit",
				description: "Automatically save file locally before each new commit",
				bool: true,
				storageKey: "autosave",
				dfault: 0
			}
		];
		twirl.showSettings(twist, settings);
	};
	
	
	this.setPercent = function(percent) {
		twist.watchdog.setActive(percent);
		twirl.loading.setPercent(percent);
	};
	
	this.setLoadingStatus = function(state, showpercent, text) {
		if (state) {
			twirl.loading.show(text, showpercent);
		} else {
			twirl.loading.hide();
		}
	};
	
	this.scriptEdit = function() {
		var el = $("#twist_script").show();
		var te = $("#twist_scriptsource");
		
		
		function runScript(audition) {
			try {
				var script = JSON.parse(te.val());
			} catch (e) {
				twist.errorHandler("Cannot parse script: " + e);
				return false;
			}
			twist.applyScript(script, audition);
			return true;
		};
		
		
		$("#twist_scriptaudition").unbind().click(function(){
			runScript(true);
		});
		
		$("#twist_scriptstop").unbind().click(function(){
			twist.stop();
		});
		
		$("#twist_scriptcommit").unbind().click(function(){
			if (runScript(false)) {
				el.hide();
			}
		});
		
		$("#twist_scriptloadlast").unbind().click(function(){
			te.val(JSON.stringify(twist.lastOperation(), null, 2));
		});
		
		$("#twist_scriptloadall").unbind().click(function(){
			te.val(JSON.stringify(twist.operationLog, null, 2));
		});
		
		$("#twist_scriptcancel").unbind().click(function(){
			el.hide();
		});
	};
	
	this.developerConsole = function() {
		$("#twist_developer").show();
		$("#twist_inject_devcsound").click(async function() {
			var code = $("#twist_devcsound").val();
			var result = await app.compileOrc(code);
			if (result == 0) {
				if (!twist.storage.develop) {
					twist.storage.develop = {};
				}
				twist.storage.develop.csound = code;
				twist.saveStorage();
				self.showPrompt("Successfully injected Csound code");
			}
		});
		$("#twist_inject_devjson").click(async function() {
			var code = $("#twist_devjson").val();
			try {
				var json = JSON.parse(code);
			} catch (e) {
				return twist.errorHandler("Cannot parse JSON: " + e);
			}
			try {
				twist.loadTransforms(json);
			} catch (e) {
				return twist.errorHandler("Cannot load transform: " + e);
			}
			if (!twist.storage.develop) {
				twist.storage.develop = {};
			}
			twist.storage.develop.json = code;
			twist.saveStorage();
			self.showPrompt("Successfully injected transform definition");
		});
		$("#twist_exit_devcode").click(async function() {
			$("#twist_developer").hide();
		});
	};
	
	function buildWavecontrols() {
		var el = $("#twist_wavecontrols_inner");
		var onPlayDisables = [];
		
		var play = twirl.createIcon({label: "Play", icon: "play", label2: "Stop", icon2: "stop", click: function(obj){
			if (twist.isPlaying()) {
				twist.stop();
			} else {
				twist.play();
			}
		}});
		var audition = twirl.createIcon({label: "Audition", icon: "audition", label2: "Stop", icon2: "stop", click: function(obj){
			if (twist.isPlaying()) {
				twist.stop();
			} else {
				twist.audition();
			}
		}});

		
		var record = twirl.createIcon({label: "Record", icon: "record", label2: "Stop", icon2: "stop", click: function() {
			if (twist.isPlaying()) {
				twist.stop();
			} else {
				twist.record();
			}
		}});
		
		var items = [
			{label: "Rewind", icon: "rewind", disableOnPlay: true, click: function() { twist.moveToStart() }},
			play,
			audition,
			{label: "Commit", icon: "commit", disableOnPlay: true, click: function() { twist.commit() }},
			record,
			{preset: "spacer"},
			{label: "Cut", icon: "cut", disableOnPlay: true, click: function() { twist.cut() }},
			{label: "Copy", icon: "copy", disableOnPlay: true, click: function() { twist.copy() }},
			{label: "Paste", icon: "paste", disableOnPlay: true, click: function() { twist.paste() }},
			{label: "Paste special", icon: "pasteSpecial", disableOnPlay: true, click: function() { twist.pasteSpecial() }},
			{label: "Trim", icon: "trim", disableOnPlay: true, click: function() { twist.trim() }},
			{preset: "spacer"}
		];
							
		for (let i of items) {
			var icon;
			var td = $("<td />");
			if (i.preset && i.preset == "spacer") {
				td.css("width", "20px");
			} else {
				if (i.icon) {
					icon = twirl.createIcon(i);
					if (i.disableOnPlay) {
						onPlayDisables.push(icon);
					}
				} else {
					icon = i;
				}
				td.append(icon.el);
			}
			td.appendTo(el);
		}
		
		twist.onPlays.push(async function(playing, auditioning, recording) {
			if (playing) {
				if (auditioning) {
					play.setActive(false);
					audition.setState(false);
					record.setActive(false);
				} else if (recording) {
					audition.setActive(false);
					play.setActive(false);
					record.setState(false);
				} else {
					audition.setActive(false);
					play.setState(false);
					record.setActive(false);
				}
			} else {
				audition.setActive(true);
				play.setActive(true);
				play.setState(true);
				audition.setState(true);
				record.setActive(true);
				record.setState(true);
			}
			for (let o of onPlayDisables) {
				o.setActive(!playing);
			}
		});
		
		for (let e of ["In", "Out"]) {
			let elRange = $("<input />").addClass("twirl_slider").attr("type", "range").attr("min", 0).attr("max", 0.45).attr("step", 0.00001).val(0).on("input", function() {
				if (e == "In") {
					twist.waveform.crossFadeInRatio = $(this).val();
				} else {
					twist.waveform.crossFadeOutRatio = $(this).val();
				}
			});
			elCrossfades.push(elRange);
			$("<td />").addClass("crossfade").append($("<div />").css("font-size", "var(--fontSizeSmall)").text("Crossfade " + e)).append(elRange).appendTo(el);
		}
				
		$("<td />").css("font-size", "var(--fontSizeSmall").append("Loop playback<br />").append(
			$("<input />").addClass("tp_checkbox").attr("type", "checkbox").change(function(){
				twist.playbackLoop = $(this).is(":checked");
			})
		).appendTo(el);
		
	};
	
	function formatVersion(ver) {
		ver = ver.toString();
		var major = ver.substr(0, 1);
		var remainder = ver.substr(1);
		if (remainder.length == 2) {
			return major + "." + remainder;
		} else {
			var mid = remainder.substr(1, 2);
			var minor = remainder.substr(2);
			return major + "." + mid + "." + minor;
		}
	}
	
	this.showAbout = async function() {
		var csVer = await app.getCsound().getVersion();
		var apiVer = await app.getCsound().getAPIVersion();
		var el = $("<div />"); 
		var x = $("<h3 />").text("twist").appendTo(el);
		$("<p />").css("font-size", "12px").text("By Richard Knight 2024").appendTo(el);
		$("<p />").text("Version " + twist.version.toFixed(1)).appendTo(el);
		$("<p />").text("Csound " + formatVersion(csVer) + "; API " + formatVersion(apiVer)).appendTo(el);
		
		var skewMax = 30;
		var skew = 0;
		var skewDirection = true;
		var twistInterval = setInterval(function(){
			if (skewDirection) {
				if (skew < skewMax) {
					skew ++;
				} else {
					skewDirection = false;
				}
			} else {
				if (skew > -skewMax) {
					skew --;
				} else {
					skewDirection = true;
				}
			}
			x.css("transform", "skewX(" + skew + "deg)");
		}, 10);
		
		self.showPrompt(el, function(){
			clearInterval(twistInterval);
		});
	};
	
	
	buildWavecontrols();
};