/* -------------------------- */		
/*       buttonsPlugin   			*/		
/* -------------------------- */	

var buttonsPlugin = function buttonsPlugin() {


	
		d3.select("#controls")
		.append("div")
			.attr("class", "buttons")
			.selectAll(".button")
			.data(d3.entries(__mapper().config.form.types))
		.enter().append("button")
			.attr("class", "button")
			.text(function(d) { return d.key; })
					.style("font", "5px century-gothic")	
					.style("width", "28px")	
					.style("padding", "0px")	
					.style("margin", "0px")	
			.on("click", function(d) {
				let formparams = {}
				for (var param in d.value) {					// m in { ... }
					let k = param, v = d.value[param]		// k:m, v:12
					formparams[k] = v;
				}
				
				__mapper({'fuel': fuelPlugin()}).fuel.clear()		// clear fuel
				for (let i in __mapper('traces').traces) __mapper('traces').traces[i].clear()	// clear traces
				
				__mapper('xsf').clear()				// clear xsf
				if (__mapper("tim").timer) __mapper("tim").timer.stop()	// stop timer
				
				__mapper({'dots': dotsPlugin()}).dots.clearAll()
				if (__mapper("scales")) __mapper("scales").render(formparams)
				if (__mapper("consol")) __mapper("consol").render(formparams)
				__mapper("xsf")(formparams).render()		
				// __mapper("dots")(__mapper("xsf").formparams()).render()	// update dots
				
			})
	
	
	var buttonsPlugin = function buttonsPlugin() { }		
	buttonsPlugin.render = function(formparams) { }
	return buttonsPlugin	
}