<html>
<head>
	<title>Rørkalkulator</title>
	<style>
main {
	width: 85%;
	margin: auto;
}

.flex-container {
	display: flex;
}

#grafikk {
	background: rgb(247, 247, 255);
	width: 100%;
}

#dataform {
	flex-direction: column;
}
	
.datafelt {
	width: 100%;
	margin: 4px 0px;
}

.datafelt label {
	flex-basis: 180px;
	text-align: right;
	padding-right: 8px;
}
		
.datafelt input, .datafelt select {
	width: 100px;
}
		
.datafelt span {
	width: 20px;
	margin-left: 8px;
}
		
#regn-ut {
	padding: 8px;
	margin: 8px 0px;
	background: rgb(70, 119, 199);
	color: white;
	width: 380px;
}
		
	</style>
</head>
<body>
	<main>
		<h1>Rørkalkulator for gulvvarme</h1>
		<div class="flex-container" id="dataform">
			<div class="datafelt flex-container">
				<label for="bredde">Rommets bredde:</label>
				<input id="bredde" />
				<span>m</span>
			</div>
			<div class="datafelt flex-container">
				<label for="lengde">Rommets lengde:</label>
				<input id="lengde" />
				<span>m</span>
			</div>
			<div class="datafelt flex-container">
				<label for="senteravstand">Senteravstand mellom rør:</label>
				<input id="senteravstand" />
				<span>cm</span>
			</div>
			<div class="datafelt flex-container">
				<label for="maxlengde">Maksimal sløyfelengde:</label>
				<input id="maxlengde" value="120" />
				<span>m</span>
			</div>
			<div class="datafelt flex-container">
				<label for="radius">PEX-rørdimensjon:</label>
				<select id="radius">
					<option value="3.85">9,9</option>
					<option value="3.95">10,5</option>
					<option value="6">16</option>
					<option value="6.5">17</option>
					<option value="8" selected>20</option>
				</select>
				<span>mm</span>
			</div>
			<input type="submit" value="Regn ut" id="regn-ut"/>
		</div>
		<h2 id="kretser"></h2>
		<h2 id="resultat"></h2>
		<h2 id="volum"></h2>
		<canvas id="grafikk" width=820 height=820></canvas>
	</main>
	<script>
function to_nbNO(string) {
	return string.toLocaleString("nb-NO");
}

function avstand(x1, y1, x2, y2) {
	return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
}

function is_valid(n) {
	return (n > 0 && !isNaN(n));
}
		
class Ror_diagram {
	constructor(canvas_id, bredde, lengde, senteravstand, max_lengde, radius, margin) {
		this.canvas = document.querySelector("#" + canvas_id);
		this.ctx = this.canvas.getContext("2d");

		this.bredde = bredde;
		this.lengde = lengde;
		this.senteravstand = senteravstand;
		this.MAX_LENGDE = max_lengde;
		this.radius = radius;
		this.MARGIN = margin;

		if (senteravstand > (bredde / 4) || senteravstand > (lengde / 4)) {
			alert("For stor senteravstand!");
		}
		
		if (max_lengde < bredde * 4) {
			alert("Maksimal sløyfelengde er for kort!");
		}

		this.total_lengde = 0;
		this.volum = 0;
		this.antall_kretser = 0;
		this.kretslengde = 0;
		this.kretsvolum = 0;
	}

	tegn_og_regn() {
		// rydder canvas og setter det til opprinnelig størrelse
		this.clear_canvas();

		// regner ut bredde og høyde i piksler
		let max = Math.max(this.lengde, this.bredde);
		let b = (this.bredde / max) * (this.canvas.width - 2 * this.MARGIN);
		let l = (this.lengde / max) * (this.canvas.height - 2 * this.MARGIN);
		let s = this.senteravstand / this.bredde * b;

		// skala som brukes for å beregne lengde på rør
		let skala = this.bredde / b;
		
		let ferdig = false;
		let n = 1;
		while (!ferdig) {
			this.clear_canvas();
			this.total_lengde = 0;
			
			for (let i = 0; i < n; i++) {
				let krets = new Krets(b, (l - s)/n, s, this.radius, skala, this.canvas);
				krets.tegn(this.MARGIN, this.MARGIN + s + i * ((l - s)/n));
				this.total_lengde += krets.ror_lengde;
				
				if (krets.ror_lengde < this.MAX_LENGDE) {
					ferdig = true;
					this.kretslengde = krets.ror_lengde;
					this.kretsvolum = krets.volum;
					this.antall_kretser = n;
				}
			}
			n++;
		}
		
		this.tegn_rom(b, l);

		this.volum = Math.PI * (this.radius * this.radius * 100) * this.total_lengde * 10;
	}

	tegn_rom(b, l) {
		// tegner vegger
		this.ctx.strokeStyle = "rgba(0, 0, 0, 0.66)";
		this.ctx.lineWidth = 2.5;
		this.ctx.strokeRect(this.MARGIN, this.MARGIN, b, l);

		// tegner størrelse på vegger
		this.ctx.font = "18px monospace";
		this.ctx.fillStyle = "black";
		this.ctx.textAlign = "center";

		let b_txt = to_nbNO(this.bredde) + " m";
		let l_txt = to_nbNO(this.lengde) + " m";

		// bredde-tekst
		this.ctx.fillText(b_txt, this.MARGIN + b / 2, this.MARGIN / 1.5);

		// lengde-tekst
		this.ctx.save();
		this.ctx.translate(this.MARGIN / 1.5, this.MARGIN + l / 2);
		this.ctx.rotate(-Math.PI / 2);
		this.ctx.fillText(l_txt, 0, 0);
		this.ctx.restore();
	}
	
	clear_canvas() {
		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
	}
}

class Krets {
	constructor(bredde, lengde, senteravstand, radius, skala, canvas) {
		this.bredde = bredde;
		this.lengde = lengde;
		this.senteravstand = senteravstand;
		this.radius = radius;
		this.skala = skala; // lengden til 1 piksel i virkeligheten
		
		this.ctx = canvas.getContext("2d");
		this.ror_lengde = 0;
		
		this.prev_x = 0;
		this.prev_y = 0;
	}
	
	tegn(start_x, start_y) {
		this.ctx.strokeStyle = "red";
		this.ctx.lineWidth = 2;
		
		this.ctx.beginPath();
		
		this.ctx.save();
		this.ctx.translate(start_x, start_y);
		
		let antall_boyer = Math.floor((this.lengde) / (2 * this.senteravstand));
		
		let s = this.senteravstand;
		
		this.flytt_til(0, 0);
		this.tegn_linje(2 * s, 0);
		
		for (let i = 0; i < antall_boyer; i++) {
			let x = this.bredde - 1.5 * s;
			let y = i * 2 * s;
			
			this.tegn_linje(x, y);
			this.tegn_bue(x, y + s/2, s/2, -Math.PI/2, Math.PI/2, false);
			this.tegn_linje(2.5 * s, y + s);
			
			if (i === (antall_boyer - 1)) {
				this.tegn_linje(1.5 * s, y + s);
				this.tegn_bue(1.5 * s, y + s/2, s/2, Math.PI/2, Math.PI, false);
				this.tegn_linje(s, 1.5 * s);
				this.tegn_bue(s/2, 1.5 * s, s/2, 0, -Math.PI/2, true);
				this.tegn_linje(0, s);
			} else {
				this.tegn_bue(2.5 * s, y + 1.5 * s, s/2, -Math.PI/2, Math.PI/2, true);
			}
		}
		this.ctx.stroke();
		this.ctx.restore();
		
		this.volum = Math.PI * (this.radius * this.radius * 100) * this.ror_lengde * 10;
	}
	
	flytt_til(x, y) {
		this.ctx.moveTo(x, y);
		
		this.prev_x = x;
		this.prev_y = y;
	}
	
	tegn_linje(x, y) {
		this.ctx.lineTo(x, y);
		
		this.ror_lengde += avstand(this.prev_x, this.prev_y, x, y) * this.skala;
		
		this.prev_x = x;
		this.prev_y = y;
	}
	
	tegn_bue(x, y, r, start, slutt, mot_klokka) {
		this.ctx.arc(x, y, r, start, slutt, mot_klokka);
		
		this.ror_lengde += Math.abs(slutt - start) * r * this.skala;
		
		this.prev_x = x + Math.cos(slutt) * r;
		this.prev_y = y + Math.sin(slutt) * r;
	}
}

document.querySelector("#regn-ut").addEventListener("click", () => {
	let bredde = Number(document.querySelector("#bredde").value.replace(",", "."));
	let lengde = Number(document.querySelector("#lengde").value.replace(",", "."));
	let senteravstand = Number(document.querySelector("#senteravstand").value.replace(",", "."));
	let max_lengde = Number(document.querySelector("#maxlengde").value.replace(",", "."));
	let radius = Number(document.querySelector("#radius").value);
	
	if (is_valid(bredde) && is_valid(lengde) && is_valid(senteravstand) && is_valid(max_lengde) && is_valid(radius)) {
		// alle mål oppgis i meter
		let diagram = new Ror_diagram("grafikk", bredde, lengde, senteravstand * 0.01, max_lengde, radius * 0.001, 25);
		diagram.tegn_og_regn();

		let n = to_nbNO(Number(diagram.total_lengde.toFixed(2)));
		let v = to_nbNO(Number(diagram.volum.toFixed(2)));
		document.querySelector("#resultat").innerHTML = "Total rørlengde: " + n + " m";
		document.querySelector("#volum").innerHTML = "Totalt volum: " + v + " L";

		let nk = diagram.antall_kretser;
		let kl = to_nbNO(Number(diagram.kretslengde.toFixed(2)));
		let kv = to_nbNO(Number(diagram.kretsvolum.toFixed(2)));

		let kr_string = "";
		if (nk === 1) {
			kr_string = nk + " sløyfe med " + kl + " m lengde og " + kv + " L volum";
		} else {
			kr_string = nk + " sløyfer med " + kl + " m lengde og " + kv + " L volum hver";
		}
		
		document.querySelector("#kretser").innerHTML = kr_string;
	} else {
		alert("Ugyldig inndata!");
	}
});
	</script>
</body>
</html>