var Mixer = function(twine) {
	var mixer = this;
	mixer.masterAmpChannel = "twine_masteramp";
	var masterVu = null;
	this.soloChannel = "twine_csolo";
	this.ampChannel = "twine_masteramp";
	target = $("#twine_mixer");
	
	this.visible = false;
	
	this.hide = function() {
		masterVu = null;
		mixer.visible = false;
		target.empty().hide();
	};
	
	this.setVu = function(v) {
		if (!masterVu) return;
		masterVu.value = v;
	};
	
	this.bootAudio = function() {
		app.setControlChannel(mixer.ampChannel, 0.8);
		app.setControlChannel(mixer.soloChannel, -1);
	};
	
	var height = 150;
	var width = 30;	
	this.show = async function () {
		masterVu = null;
		mixer.visible = true;
		target.empty().show();
		var soloChannels = [];
		var tb = $("<tbody />").appendTo($("<table />").appendTo(target));
		var trMuteSolo = $("<tr />").appendTo(tb);
		var trPan = $("<tr />").appendTo(tb);
		var trAmp = $("<tr />").appendTo(tb);
		var trName = $("<tr />").appendTo(tb);
		for (let c of twine.timeline.channels) {
			trName.append($("<td />").css({"text-align": "center"}).text(c.name));
			var tdMuteSolo = $("<td />").css({"border-left": "1px solid black", "text-align": "center"}).appendTo(trMuteSolo);
			var tdPan = $("<td />").css({"border-left": "1px solid black", "text-align": "center"}).appendTo(trPan);
			var tdAmp = $("<td />").css({"border-left": "1px solid black"}).appendTo(trAmp);
			var elMuteSolo = $("<div />").appendTo(tdMuteSolo);
			var elPan = $("<div />").appendTo(tdPan);
			var elAmp = $("<div />").appendTo(tdAmp);
			
			var coMute = new Control({
				name: "Mute",
				image: "SC_BTNDef5-MUTE_16",
				target: elMuteSolo,
				channel: c.defaultChannels.mute,
				width: width * 0.5,
				height: width * 0.5,
				noTriggerInit: true,
				
			});
			
			var coSolo = new Control({
				image: "SC_BTNDef5-SOLO_16",
				target: elMuteSolo,
				channel: c.defaultChannels.solo,
				min: -1,
				max: c.index,
				width: width * 0.5,
				height: width * 0.5,
				noTriggerInit: true,
				onChange: function(v, co) {
					for (let s of soloChannels) {
						s.value = false;
						s.element.trigger("change");
					}
					if (v == c.index) {
						co.value = true;
						co.element.trigger("change");
					}
				}
			});
			soloChannels.push(coSolo);
			
			var coPan = new Control({
				name: "Pan",
				image: "Timb&HY_Seq16x3v2_KNOB1FX3",
				target: elPan,
				channel: c.defaultChannels.pan,
				width: width,
				height: width,
				noTriggerInit: true,
				onReady: async function(coPan){
					coPan.value = await app.getControlChannel(c.defaultChannels.pan);
				},
				onContextMenu: function(e) {
					return twirl.contextMenu.show(e, [
						{name: "Show automation", click: function(){
							c.expand();
							c.showAutomation(0, 1);
						}}
					]);
				}
			});
			var coAmp = new Control({
				name: "Amp",
				image: "Sexan_Timb-Slider_29334-128fr",
				target: elAmp,
				channel: c.defaultChannels.amp,
				width: width,
				height: height,
				noTriggerInit: true,
				onReady: async function(coAmp){
					coAmp.value = await app.getControlChannel(c.defaultChannels.amp);
				},
				onContextMenu: function(e) {
					return twirl.contextMenu.show(e, [
						{name: "Show automation", click: function(){
							c.expand();
							c.showAutomation(0, 0);
						}}
					]);
				}
			});
		} 
		trName.append($("<td />"));
		trName.append($("<td />"));
		var tdm = $("<td />").css({"border-left": "2px solid black"}).appendTo(trAmp);
		var tdvu = $("<td />").appendTo(trAmp);
		var elm = $("<div />").appendTo(tdm);
		var elmvu = $("<div />").appendTo(tdvu);
		var mc = new Control({
			name: "Master",
			image: "Sexan_Timb-Slider_29334-128fr",
			target: elm,
			channel: mixer.masterAmpChannel,
			width: width,
			height: height,
			noTriggerInit: true,
			onReady: async function(mc) {
				mc.value = await app.getControlChannel(mixer.masterAmpChannel);
			}
		});

		masterVu = new Control({
			name: "VU",
			image: "Timb_MeterXRAYMANALOGDEF_8320-128",
			target: elmvu,
			width: 15,
			height: height
		});
	}
};