let pos = [];
let t = 0;

let indu;

function canvas_01() {
	count = countField(db, "industries");

	for (var i = count.length - 1; i >= 0; i--) {
		pos[i] = [randomInterval(-500, 500), randomInterval(-300, 300)];
	}

	canvas1 = d3.select("#canvas1").append("svg")
	.attr("class", "graph")
	.attr("id", "industries");

	indu = canvas1.append("g");

	g = indu.selectAll("g")
	.data(count)
	.enter()
	.append("g")
	.on("mouseover", function() {
		d3.select(this.children[0])
		.style("opacity", 0)
		.style("cursor", "pointer");

		d3.select(this.children[1])
		.style("opacity", 1)
		.style("cursor", "pointer");
	})
	.on("mouseleave", function() {
		d3.select(this.children[0])
		.style("opacity", 0.5);

		d3.select(this.children[1])
		.style("opacity", 0)
		.style("cursor", "pointer");
	});

	g.append("text")
	.attr("class", "btn")
	.attr("y", function(d, i) {
		return pos[i][1] + noise.simplex2(t, 0);
	})
	.style("font-size", function(d, i) {
		return 8 + count[Object.keys(count)[i]] / 70;
	})
	.text(function (d, i) {
		if (Object.keys(count)[i] == "Digital products + services (web design, app design, software design)") {
			return "Digital products + services"
		} else {
			return Object.keys(count)[i];
		}
	})
	.attr("x", function(d, i) {
		return pos[i][0] - (this.getClientRects()[0].width / 2);
	});


	g.append("text")
	.attr("class", "desc")
	.style("fill", "#DA4036")
	.attr("y", function(d, i) {
		return pos[i][1];
	})
	.style("opacity", 0)
	.style("font-size", function(d, i) {
		return 8 + count[Object.keys(count)[i]] / 70;
	})
	.text(function(d, i) {
		return count[Object.keys(count)[i]];
	})
	.attr("x", function(d, i) {
		
		return pos[i][0] - (this.getClientRects()[0].width / 2);
	});
}

function canvas_01_onmousemove(ev) {
	//d3.pointer(event);
	ind = document.getElementById("industries");
	let mouseX = map(ev.clientX - ind.getBoundingClientRect().x, 0, ind.clientWidth, -100, 100);
	let mouseY = map(ev.clientY - ind.getBoundingClientRect().y, 0, 800, -100, 100);

	for (var i = count.length - 1; i >= 0; i--) {
		size = count[Object.keys(count)[i]];
		pos[i] = [(ind.clientWidth/2) + (mouseX / 50) * size/50, 400+(mouseY / 50) * size/80];
		ind.children[0].children[i].children[0].style.transform = "translate("+ pos[i][0] +"px , "+ pos[i][1] +"px)";
		ind.children[0].children[i].children[1].style.transform = "translate("+ pos[i][0] +"px , "+ pos[i][1] +"px)";
	}	
}

function canvas_01_onscroll(ev) {
}

setInterval(function () {
	g = indu.selectAll("g")
	g.style("transform", function (d, i) {
		return "translate("+noise.simplex2(t, i) * 30+"px, "+noise.simplex2(i, t) * 30+"px)";
	});

	t += 0.01;
}, 90);