var Control = function(definition) {
	var self = this;
	var state = false;
	var type;
	var element;
	var elTextInput;
	
	
	
	if (!definition.hasOwnProperty("channel")) {
		definition.channel = definition.name.toLowerCase();
	}
	
	if (!definition.hasOwnProperty("min")) {
		definition.min = 0;
	}
	
	if (!definition.hasOwnProperty("max")) {
		definition.max = 1;
	}
	
	if (!definition.hasOwnProperty("step")) {
		definition.step = 0.000001;
	}
	
	if (!definition.hasOwnProperty("dfault")) {
		definition.dfault = 0;
	}
	
	Object.defineProperty(this, "element", {
		get: function() {return element;},
		set: function(v) {}
	});
	
	Object.defineProperty(this, "textInputElement", {
		get: function() {return elTextInput;},
		set: function(v) {}
	});
	
	Object.defineProperty(this, "elementRow", {
		get: function() {
			var tr = $("<tr />");
			$("<td />").text(definition.name).appendTo(tr);
			$("<td />").append(element).appendTo(tr);
			var tinput = $("<td />").appendTo(tr);
			if (elTextInput) {
				tinput.append(elTextInput);
			}
			return tr;
		},
		set: function(v) {}
	});
	
	Object.defineProperty(this, "value", {
		get: function() {
			var val;
			if (type == "select") {
				val = element.val();
				if (definition.asValue) {
					val = definition.options[val];
				}
			} else if (type == "range") {
				val = element.val();
			} else if (type == "checkbox") {
				val = (element.is(":checked")) ? definition.max : definition.min;
			} else if (type == "button") {
				val = 0;
			} else if (type == "toggle") {
				val = (state) ? definition.max : definition.min;
			}
			
			return val;
		},
		set: function(v) {
			if (type == "checkbox") {
				element.prop("checked", v);
			} else {
				element.val(v);
			}
		}
	});
	
	async function createControl() {
		if (definition.options) {
			type = "select";
			element = $("<select />");
			for (var o in definition.options) {
				$("<option />").val(o).text(definition.options[o]).appendTo(element);
			}
		} else if (definition.image) {
			type = "range";
			var baseurl = "https://apps.csound.1bpm.net/controls/";
			var response = await fetch(baseurl + definition.image + ".json");
			var json = await response.json();
			var width;
			var height;
			if (definition.width) {
				width = definition.width;
			} else {
				if (!json.cellw) json.cellw = 32;
				width = json.cellw;
			}
			if (definition.height) {
				height = definition.height;
			} else {
				height = json.cellh;
			}
			
			if (json.ctltype == 0) {
				element = $("<input />").attr("type", "range").addClass("input-knob").attr("data-diameter", json.cellh).attr("data-src", baseurl + json.fn).attr("data-sprites", json.frames - 1).attr("data-height", height).attr("data-width", width);
				type = "range";
			} else if (json.ctltype == 1 || json.ctltype == 3) {
				element = $("<input />").attr("type", "range").addClass("input-slider").attr("data-height", height).attr("data-src", baseurl + json.fn).attr("data-width", width).attr("data-sprites", json.frames - 1); //.css({width: width, height: height});
				type = "range";
			} else if (json.ctltype == 2) {
				element = $("<input />").attr("type", "checkbox").addClass("input-switch").attr("data-height", height).attr("data-width", width).attr("data-src", baseurl + json.fn);
				type = "checkbox";
			}
		} else {
			if (!definition.type || definition.type == "range") {
				type = "range";
				element = $("<input />").attr("type", "range");
			} else if (definition.type == "toggle") {
				type = "toggle";
				element = $("<button />").text(definition.labelOff);
			} else if (definition.type == "button") {
				type = "button";
				element = $("<button />").text(definition.label);
			}
		}
		
		if (type == "range") {
			element.attr("min", definition.min).attr("max", definition.max).attr("step", definition.step);
			if (!definition.noTextInput) {
				elTextInput = $("<input />").attr("type", "number").attr("min", definition.min).attr("max", definition.max).attr("step", definition.step).change(function() {
					change($(this).val());
				});
			}
		}
		
		if (definition.onContextMenu) {
			element.on("contextmenu", definition.onContextMenu);
		}
		
		element.change(function() {
			if (definition.onChange) {
				definition.onChange(self.value, self);
			}
			if (definition.channel) {
				sendHost();
			}
		});
		
		element.on("input", function() {
			if (type == "range") {
				if (!definition.noSendOnInput) {
					sendHost();
				}
				if (elTextInput) {
					elTextInput.text(Math.round(self.value * 100) / 100);
				}
			}
		});
		
		function sendHost() {
			if (window.app) {
				app.setControlChannel(definition.channel, self.value);
			}
		}
		
		function change(val) {
			if (type == "select" || type == "range") {
				element.val(val);
			} else if (type == "checkbox") {
				if (val == 1 || val == true) {
					element.prop("checked", true);
				} else {
					element.prop("checked", false);
				}
			} else if (type == "toggle") {
				if (val == 1 || val == true) {
					state = true;
					if (definition.labelOn) {
						element.text(definition.labelOn);
					}
					if (definition.cssOn) {
						element.css(definition.cssOn);
					}
				} else {
					state = false;
					if (definition.labelOff) {
						element.text(definition.labelOff);
					}
					if (definition.cssOff) {
						element.css(definition.cssOff);
					}
				}
			}
		}
		change(definition.dfault);
		if (!definition.noTriggerInit) {
			element.trigger("change");
		}
		
		if (definition.target) {
			definition.target.append(element);
		}
		
		if (definition.onReady) {
			definition.onReady(self);
		}
	}
	createControl();
};