let cv, c;

document.addEventListener("DOMContentLoaded", () => {
	cv = document.getElementById("canvas");
	c = cv.getContext("2d");

	window.requestAnimationFrame(draw);
});

function draw() {

	cv.width = window.innerWidth;
	cv.height = window.innerHeight;


	// draw connections
	c.strokeStyle = "white";
	c.lineWidth = 3 * Camera.zoom;

	for (let box of Box.instances) {
		for (let input of box.inputs) {
			if (!input.connection) continue;
			let output = input.connection;

			let i = input.circle.getBoundingClientRect();
			let ix = i.x + i.width / 2;
			let iy = i.y + i.height / 2;

			let o = output.circle.getBoundingClientRect();
			let ox = o.x + o.width / 2;
			let oy = o.y + o.height / 2;

			drawConnection(ox, oy, ix, iy);
		}
	}

	// draw currently connecting connection

	if (ConnectionController.currentlySelectedConnector) {
		let i = ConnectionController.currentlySelectedConnector.circle.getBoundingClientRect();
		let ix = i.x + i.width / 2;
		let iy = i.y + i.height / 2;

		let ox = Mouse.position.x;
		let oy = Mouse.position.y;
		if (ConnectionController.currentlySelectedConnector.direction == Connector.OUTPUT) {
			ox = ix;
			oy = iy;
			ix = Mouse.position.x;
			iy = Mouse.position.y;
		}
		drawConnection(ox, oy, ix, iy);
	}

	window.requestAnimationFrame(draw);
}

function drawConnection(x1, y1, x2, y2) {
	let cpDistance = Math.min(Math.max((x1 - x2), 50), 100);
	c.beginPath();
	c.moveTo(x1, y1);
	c.lineTo(x1 + 10, y1);
	c.bezierCurveTo(x1 + cpDistance, y1, x2 - cpDistance, y2, x2 - 10, y2);
	c.lineTo(x2, y2);
	c.stroke();
}