<div id="menu">
		
		<span id="menuCharts">
			<details>
				<summary>Settings</summary>
				<div>
					
					
					<div id="chart-line-options" class="chart-options">
						Choose the seas. Enter All for all coasts. When multiple seas/oceans are selected for one line, the shortest distance is chosen.
						<table>
							<thead><tr><th>Seas</th><th>Label</th><th>Color</th></tr></thead>
							<tbody>
								<tr id="seas-0"><td><input data-multiple style="width: 20rem;"/></td><td><input type="text"/></td><td><input type="color"/></td></tr>
								<tr id="seas-1"><td><input data-multiple style="width: 20rem;"/></td><td><input type="text"/></td><td><input type="color"/></td></tr>
								<tr id="seas-2"><td><input data-multiple style="width: 20rem;"/></td><td><input type="text"/></td><td><input type="color"/></td></tr>
								<tr id="seas-3"><td><input data-multiple style="width: 20rem;"/></td><td><input type="text"/></td><td><input type="color"/></td></tr>
								<tr id="seas-4"><td><input data-multiple style="width: 20rem;"/></td><td><input type="text"/></td><td><input type="color"/></td></tr>
							
							</tbody>
						</table>

						
					</div>
					
					<button onclick="updateChart()">Update</button>
				</div>
			</details>
		</span>
		<span>
		</span>
	</div>

	<div id="charts"><canvas id="myChart"></canvas></div>
  <script src="https://triplelog.b-cdn.net/blog/coastal-data.js"></script>
  <script src="https://triplelog.b-cdn.net/blog/awesomplete.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

#menuCharts {
	display: inline-block;
}

#menu {
	z-index: 2;
	position: relative;
	height: 1.5rem;
	overflow: visible;
}
details {
	max-width: 60ch;
	display: inline-block;
	vertical-align: top;
	border: 1px solid black;
	background: #EEE;
	
}
summary {
	background: white;
	padding: 2px 0.5rem 2px 0;
}
details > div {
	padding: 0.5rem 0.5rem;
}
details ul {
	list-style-type: none;
	padding: 0;
}

.lat, .lng {
	width: 6rem;
}


html {
	padding: 0;
	margin: 0;
  overflow-y: hidden;
}

#myChart {
	max-width: min(80rem,90vw);
	max-height: min(80rem,90vh);
}

const ctx = document.getElementById("myChart");
let myChart = !1;

function makeChart() {
    for (var a = 0; a < 5; a++) {
        var e = document.querySelector("#seas-" + a + " input[data-multiple]");
        new Awesomplete(e, {
            filter: function(a, e) {
                return Awesomplete.FILTER_CONTAINS(a, e.match(/[^,]*$/)[0])
            },
            autoFirst: !0,
            list: seas,
            minChars: 1,
            item: function(a, e) {
                return Awesomplete.ITEM(a, e.match(/[^,]*$/)[0])
            },
            replace: function(a) {
                var e = this.input.value.match(/^.+,\s*|/)[0];
                this.input.value = e + a + ", "
            }
        })
    }
    var t = [];
    let l = new Set;
    l.add("Atlantic Ocean"), l.add("Gulf of Mexico"), l.add("Caribbean Sea"), l.add("North Sea"), l.add("Baltic Sea");
    var r = {
        set: l,
        label: "Atlantic+",
        color: "#0000FF"
    };
    t.push(r), (l = new Set).add("Pacific Ocean"), l.add("Java Sea"), l.add("Sea of Japan"), r = {
        set: l,
        label: "Pacific+",
        color: "#00FF00"
    }, t.push(r), (l = new Set).add("Indian Ocean"), l.add("Red Sea + Persian Gulf"), r = {
        set: l,
        label: "Indian+",
        color: "#FF0000"
    }, t.push(r), (l = new Set).add("All"), r = {
        set: l,
        label: "All",
        color: "#888888"
    }, t.push(r), makeLine(t)
}

function makeLine(t) {
    for (var l = {}, a = [], r = 0; r < t.length; r++) {
        l[t[r].label] = [];
        for (var n, o = 0; o < 24; o++) l[t[r].label].push(0);
        let e = !1;
        for (n in t[r].set.has("All") && (e = !0), data)
            for (var o in data[n]) {
                let a = 240;
                if (e)
                    for (var i = 0; i < seas.length; i++) {
                        var s = seas[i];
                        data[n][o][s] && data[n][o][s] < a && (a = data[n][o][s])
                    } else
                        for (var d of t[r].set) data[n][o][d] && data[n][o][d] < a && (a = data[n][o][d]);
                if (a < 240 && !(data[n][o].pop < 10))
                    for (var c = Math.floor(a / 10); c < 24; c++) l[t[r].label][c] += data[n][o].pop
            }
        a.push({
            data: l[t[r].label],
            label: t[r].label,
            fill: !1,
            borderColor: t[r].color,
            tension: .1
        })
    }
    for (var e = [], o = 0; o < 24; o++) e.push(10 * o + 10);
    var u = {
            labels: e,
            datasets: a
        },
        u = {
            type: "line",
            data: u,
            options: {
                scales: {
                    x: {
                        title: {
                            display: !0,
                            text: "Distance from coast in km"
                        }
                    },
                    y: {
                        title: {
                            display: !0,
                            text: "Total Population"
                        }
                    }
                }
            }
        };
    myChart && myChart.destroy(), myChart = new Chart(ctx, u)
}

function updateChart() {
    for (var t = [], a = 0; a < 5; a++) {
        var l = document.querySelector("#seas-" + a);
        let e = l.querySelector("td:nth-of-type(1) input").value.trim();
        var r = new Set;
        if (0 < e.length) {
            e = e.split(",");
            for (var n = 0; n < e.length; n++) e[n] = e[n].trim().replace(/\,/g, ""), 0 < e[n].length && r.add(e[n]);
            let a = l.querySelector("td:nth-of-type(2) input").value.trim();
            a.length < 1 && (a = e.join(" + "));
            l = l.querySelector("td:nth-of-type(3) input").value, l = {
                set: r,
                label: a,
                color: l
            };
            t.push(l)
        }
    }
    makeLine(t)
}
seas.push("All"), makeChart();