twirl.stdui = {
	PlayButton: function(options) {
		var self = this;
		var txtPlay = "\u25b6";
		var txtStop = "\u23f9";
		
		this.state = false;
		
		this.element = $("<p />").text(txtPlay).css("cursor", "pointer");
		
		if (options.hasOwnProperty("fontsize")) {
			this.element.css("font-size", options.fontsize);
		}
		
		this.show = function() {
			self.element.css("visibility", "visible");
		};
		
		this.hide = function() {
			self.element.css("visibility", "hidden");
		};
		
		this.element.click(function() {
			if (!self.state) {
				self.element.text(txtStop);
				self.state = true;
			} else {
				self.element.text(txtPlay);
				self.state = false;
			}
			if (options.stateAlter) {
				options.stateAlter(self.state, self);
			}
			if (options.hasOwnProperty("change")) {
				options.change(self.state, self);
			}
		});
		
		this.setValue = function(v, runChange) {
			if (v) {
				self.element.text(txtStop);
				self.state = true;
			} else {
				self.element.text(txtPlay);
				self.state = false;
			}
			
			if (runChange && options.hasOwnProperty("change")) {
				options.change(self.state, self);
			}
		};
		
		if (options.tooltip) {
			this.element.on("mouseover", function(e){
				twirl.tooltip.show(e, options.tooltip);
			}).on("mouseout", function(){
				twirl.tooltip.hide();
			});
		}
		
		if (options.target) {
			$("#" + options.target).append(this.element);
		}
	},
	StandardButton: function(options) {
		var self = this;
		this.element = $("<button />").addClass("smbut").text(options.label);
		
		this.show = function() {
			self.element.css("visibility", "visible");
		};
		
		this.hide = function() {
			self.element.css("visibility", "hidden");
		};
		
		this.element.click(function(e) {
			options.change(e);
		});
		
		if (options.tooltip) {
			this.element.on("mouseover", function(e){
				twirl.tooltip.show(e, options.tooltip);
			}).on("mouseout", function(){
				twirl.tooltip.hide();
			});
		}
		
		if (options.target) {
			$("#" + options.target).append(this.element);
		}
	},
	StandardToggle: function(options) {
		var self = this;
		var doChange = true;
		this.element = $("<button />").addClass("smbut").attr(
			"value",
			options.hasOwnProperty("value") && options.value == 1 ? 1 : 0
		).text(options.label);
		
		function setAppearance() {
			var col;
			if (self.element.attr("value") == 0) {
				col = "#b5b01d";
			} else {
				col = "#f2e30c";
			}
			self.element.css("background-color", col);
		};
		
		setAppearance();
		
		this.show = function() {
			self.element.css("visibility", "visible");
		};
		
		this.hide = function() {
			self.element.css("visibility", "hidden");
		};
		
		this.element.click(function() {
			var val = (self.element.attr("value") == 0) ? 1 : 0;
			self.element.attr("value", val);
			setAppearance();
			if (options.stateAlter) {
				options.stateAlter(val, self);
			}
			if (doChange && options.hasOwnProperty("change")) {
				options.change(val, self);
			}
		});
		
		this.setValue = function(v, runChange) {
			if (!runChange) {
				doChange = false;
			}
			if (options.stateAlter) {
				options.stateAlter(v, self);
			}
			self.element.attr("value", v);
			setAppearance();
			if (runChange && options.hasOwnProperty("change")) {
				options.change(v, self);
			}
			doChange = true;
		};
		
		if (options.tooltip) {
			this.element.on("mouseover", function(e){
				twirl.tooltip.show(e, options.tooltip);
			}).on("mouseout", function(){
				twirl.tooltip.hide();
			});
		}

		if (options.target) {
			$("#" + options.target).append(this.element);
		}
	},
	ComboBox: function(options) {
		var self = this;
		var doChange = true;
		var tr = $("<tr />");
		this.element = $("<select />");
		
		for (var v in options.options) {
			var val = (options.asValue) ? options.options[v] : v;
			$("<option />").attr("value", val).text(options.options[v]).appendTo(self.element);
		}
		
		this.element.change(function() {
			var val;
			val = (options.asValue) ? self.element.find(":selected").text() : self.element.val();
			if (options.stateAlter) {
				options.stateAlter(val, self);
			}
			if (doChange && options.hasOwnProperty("change")) {			
				options.change(val, self);
			}
		});
		
		this.show = function() {
			self.element.css("visibility", "visible");
			tr.show();
		};
		
		this.hide = function() {
			self.element.css("visibility", "hidden");
			tr.hide();
		};
		
		this.setValue = function(v, runChange) {
			if (!runChange) {
				doChange = false;
			}
			if (options.stateAlter) {
				options.stateAlter(v, self);
			}
			self.element.val(v);
			doChange = true;
		};
		
		if (options.tooltip) {
			this.element.on("mouseover", function(e){
				twirl.tooltip.show(e, options.tooltip);
			}).on("mouseout", function(){
				twirl.tooltip.hide();
			});
		}
		
		if (options.target) {
			if (options.asRow) {
				tr.appendTo($("#" + options.target));
				var tdl = $("<td />").appendTo(tr);
				if (options.label) tdl.addClass("transparentinput").text(options.label);
				$("<td />").append(self.element).appendTo(tr);
				$("<td />").appendTo(tr);
			} else {
				$("#" + options.target).append(self.element);
			}
		}
	},
	TextArea: function(options) {
		var self = this;
		this.element = $("<textarea />").css({
			"background-color": "var(--codeBgColor)",
			"color": "var(--codeFgColor)",
			"font-size": "var(--codeFontSize)",
			"font-family": "var(--codeFontFace)"
		});
		
		if (options.width) {
			self.element.css("width", options.width);
		}
		if (options.height) {
			self.element.css("height", options.height);
		}
		this.show = function() {
			self.element.css("visibility", "visible");
		};
		
		this.hide = function() {
			self.element.css("visibility", "hidden");
		};
		
		this.setValue = function(v) {
			self.element.val(v);
		};
		if (options.target) {
			$("#" + options.target).append(self.element);
		}
	},
	TextInput: function(options) {
		var self = this;
		var doChange = true;
		this.element = $("<input />").css({
			"background-color": "var(--bgColor1)",
			"color": "var(--fgColor1)"
		});
		
		if (options.css) {
			self.element.css(options.css);
		}
		
		this.element.change(function() {
			var val = self.element.val();
			if (options.stateAlter) {
				options.stateAlter(val, self);
			}
			if (doChange && options.hasOwnProperty("change")) {
				options.change(val, self);
			}
		});
		
		this.show = function() {
			self.element.css("visibility", "visible");
		};
		
		this.hide = function() {
			self.element.css("visibility", "hidden");
		};
			
		this.setValue = function(v, runChange) {
			if (!runChange) {
				doChange = false;
			}
			if (options.stateAlter) {
				options.stateAlter(v, self);
			}
			self.element.val(v);
			if (runChange && options.hasOwnProperty("change")) {
				options.change(v, self);
			}
			doChange = true;
		};
		
		if (options.tooltip) {
			this.element.on("mouseover", function(e){
				twirl.tooltip.show(e, options.tooltip);
			}).on("mouseout", function(){
				twirl.tooltip.hide();
			});
		}
		
		if (options.target) {
			$("#" + options.target).append(this.element);
		}
	},
	ColourInput: function(options) {
		var self = this;
		var doChange = true;
		this.element = $("<input />").attr("type", "color");
		
		if (options.css) {
			self.element.css(options.css);
		}
		
		this.element.change(function() {
			var val = self.element.val();
			if (options.stateAlter) {
				options.stateAlter(val, self);
			}
			if (doChange && options.hasOwnProperty("change")) {
				options.change(val, self);
			}
		});
		
		this.show = function() {
			self.element.css("visibility", "visible");
		};
		
		this.hide = function() {
			self.element.css("visibility", "hidden");
		};
			
		this.setValue = function(v, runChange) {
			if (!runChange) {
				doChange = false;
			}
			if (options.stateAlter) {
				options.stateAlter(v, self);
			}
			self.element.val(v);
			if (runChange && options.hasOwnProperty("change")) {
				options.change(v, self);
			}
			doChange = true;
		};
		
		if (options.tooltip) {
			this.element.on("mouseover", function(e){
				twirl.tooltip.show(e, options.tooltip);
			}).on("mouseout", function(){
				twirl.tooltip.hide();
			});
		}
		
		if (options.target) {
			$("#" + options.target).append(this.element);
		}
	},
	Slider: function(options) {
		var self = this;
		var doChange = true;
		var label;
		var tr = $("<tr />");
		
		if (!options.hasOwnProperty("min")) {
			options.min = 0;
		}
		
		if (!options.hasOwnProperty("max")) {
			options.max = 1;
		}
		
		if (!options.hasOwnProperty("step")) {
			options.step = 0.000001;
		}
		
		if (!options.hasOwnProperty("value")) {
			options.value = 0;
		}
		
		if (!options.hasOwnProperty("size")) {
			options.size = 64;
		}
			
		this.element = $("<input />")
			.attr("type", "range")
			.attr("min", options.min)
			.attr("max", options.max)
			.attr("step", options.step)
			.attr("value", options.value)
			.addClass("slider")
			.addClass("transparentinput");
		
		this.valueLabel = null;
		
		this.show = function() {
			tr.show();
		};
		
		this.hide = function() {
			tr.hide();
		};
			
		var valueLabelUpdate = true;
		if (options.hasOwnProperty("valueLabel") && options.valueLabel) {
			self.valueLabel = $("<input />")
				.attr("type", "number")
				.attr("min", options.min)
				.attr("max", options.max)
				.attr("step", options.step)
				.attr("value", options.value)
				.addClass("transparentinput")
				.val(options.value).change(function(){
					valueLabelUpdate = false;
					self.setValue($(this).val());
					valueLabelUpdate = true;
				});
		}
			
		function applyChange() {
			var val = self.element.val();
			if (options.stateAlter) {
				options.stateAlter(val, self);
			}
			if (doChange && options.hasOwnProperty("change")) {
				options.change(val, self);
			}
			if (self.valueLabel) {
				self.valueLabel.val(val);
			}
		}
			
		this.element.change(function() {
			applyChange();
		});
		
		this.element.on("input", function() {
			if (options.changeOnInput) {
				return applyChange();
			}
			if (options.input) {
				options.input(self.element.val(), self);
			}
			if (self.valueLabel) {
				self.valueLabel.val(self.element.val());
			}
		});
			
		this.setValue = function(v, runChange) {
			if (!runChange) {
				doChange = false;
			}
			if (options.stateAlter) {
				options.stateAlter(v, self);
			}
			self.element.val(v);
			if (runChange && options.hasOwnProperty("change")) {
				options.change(v, self);
			}
			if (self.valueLabel && valueLabelUpdate) {
				self.valueLabel.val(v);
			};
			doChange = true;
		};
		
		
		if (options.hasOwnProperty("label")) {
			label = $("<p />").addClass("knoblabel").text(options.label);
		}
			
		var tdl = $("<td />").appendTo(tr);
		if (label) tdl.append(label);
		
		self.element.appendTo($("<td />").appendTo(tr));
		
		var tdv = $("<td />").appendTo(tr);
		if (self.valueLabel) tdv.append(self.valueLabel);
		
		if (options.tooltip) {
			this.element.on("mouseover", function(e){
				twirl.tooltip.show(e, options.tooltip);
			}).on("mouseout", function(){
				twirl.tooltip.hide();
			});
		}
		
		if (options.target) {
			$("#" + options.target).append(tr);
		}
	}
}