/* -------------------------- */		
/*        scalesplugin        8*/		
/* -------------------------- */		

var scalesplugin = function scalesplugin() {
 
	var xsfdomain = {m: [0,20,1000], n1: [0,20,1000], n2: [0,20,1000], n3: [-10,20,1000], a: [1,20,1000], b: [,20,1000], tx: [-600,0,600], 'ty': [-400,0, 400] , rot: [0, 2*Math.PI, 200*Math.PI], 'rad': [24, 128, 512], 'segs': [12,500,1000] , 'pta': [0,20,512], 'ptb': [0,20,512], 'c': [1, 50, 100]}
		
	var xsfrange = {m: [0,800,1000], n1: [0,800,1000], n2: [0,800,1000], n3: [0,800,1000], a: [0,800,1000], b: [0,800,1000], tx: [0,500,1000], 'ty': [0,500,1000] , rot: [0,200,1000], 'rad': [0,500,1000], 'segs': [0,750,1000] , 'pta': [0,800,1000], 'ptb': [0,800,1000], 'c': ["brown", "orange", "steelblue"]}

	var params = {}
	var scales = {}
	var format = d3.format(".4n");

	for (let k in xsfdomain) 	{ 		//set scales
		if (k === 'c') {	
					scales[k] = d3.scaleLinear()
					.domain([xsfdomain[k][0], xsfdomain[k][1], xsfdomain[k][2]])
					.range([xsfrange[k][0], xsfrange[k][1], xsfrange[k][2]])
					.interpolate(d3.interpolateCubehelix.gamma(3))
		} else {
				scales[k] = d3.scaleLinear()
					.domain([xsfdomain[k][0], xsfdomain[k][1], xsfdomain[k][2]])
					.range([xsfrange[k][0], xsfrange[k][1], xsfrange[k][2]])
		}
	}
	

			var scaleElems = d3.select("#controls")
				.append("div")
					.attr("class", "scales")
					.style("height", 10)

			var scaleElem = scaleElems
				.selectAll("div")
					.data(d3.entries(xsfdomain))
					.style("height", 10)
					.enter().append("div")
						.attr("id", d => d.key )
						.style("font", "5px century-gothic")	
						
			scaleElem.append("label")								
						.text( d => d.key )
						.style("font", "5px century-gothic")	
						.style("height", "5px")	
						.style("padding", "2px")	
						
			scaleElem.append("input")
					.attr("type", "range")
					.attr("min", d => xsfdomain[d.key][0])
					.attr("max", d => xsfdomain[d.key][2])
					.style("height", 10)
					.property("value", d =>  xsfdomain[d.key][0])
					.style("font", "5px century-gothic")	
					.on("change", onChangedScale)
					.on("input", onChangedScale);

			scaleElem.append("span")
					.text(function(d) { 
							return format(xsfdomain[d.key][1]); })
						.style("font", "5px century-gothic")		
	
	
	
	__map.state({'scales': scales})	// update scales
		
	function onChangedScale(d) {		// onchange
		let k = d.key, v, formattedv
			if (k === 'c') {	
					v = this.value // scales[d.key](this.value)
					formattedv = v
			} else {
					v = scales[d.key].invert(this.value)
					formattedv = format(v)
			}
		let params = {}
		params[k] = v
	
		let p = __map.state().xsf.formparams()
		__map.state().consol.redraw(p)
		__map.state().xsf.redraw(params)
		
		d3.select(this.nextSibling).text(formattedv);
	}

	
	
	var scalesplugin = function scalesplugin() {}		

	scalesplugin.redraw = function(params) {
			// let formparams = __map.state().xsf.formparams()
					for (var p in params) {					// m in { ... }
						let k = p, v = params[p]		// k:m, v:12
						if ((k !== null) && (scales[k] !== undefined))  {
							let control = d3.select("#" + k)
							control.select("input").property("value", scales[k](v));
							control.select("span").text(format(v));
						}
					}

	}
	

	
	scalesplugin.scales = function() {
		return scales
	}
	
	return scalesplugin	
}
;