<!DOCTYPE html>
<html lang='en'>
<head>
        <title>Aurora</title>
        <META HTTP-EQUIV="Refresh" CONTENT="60">
        <meta charset="UTF-8">
        <meta name="author" content="Arnau Busom i Vidal">
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
	    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
<style>
.dark {
	background-color: black;
	color: white;
}
.button-dark {
	position: absolute;
	top: 3px;
	right: 3px;
}
</style>
</head>
<body class="dark">
    <div style="text-align: center;">
	    <h1><span style='color: purple;'>D</span><span style='color: #FF47EB;'>a</span><span style='color: red;'>t</span><span style='color: #FF6600;'>a</span> <span style='color: orange;'>f</span><span style='color: #FFE200;'>r</span><span style='color: lightgreen;'>o</span><span style='color: darkgreen;'>m</span> <span style='color: turquoise;'>I</span><span style='color: #1ac6ff;'>R</span><span style='color: blue;'>F</span> <span style='color: grey;'>K</span><span style='color: #914724;'>i</span>r<span style='color: #9933ff;'>u</span><span style='color: #ff99cc;'>n</span><span style='color: #811a36;'>a</span></h1>
        <div style="display: inline-block; padding: 10px;">
		<button id="modeBtn" onclick="darkMode()" class="button-dark">Dark Mode: On</button>
            <h3>Latest image from the All Sky camera</h3>
            <img style='width: 90%;' src='https://www.irf.se/alis/allsky/krn/latest_small.jpeg'>
        </div>
        <div style="display: inline-block; padding: 10px;">
            <h3>Latest movie from the All Sky camera</h3>
            <video style='width: 90%;' autoplay loop src='https://www.irf.se/alis/allsky/krn/latest_movie.mp4'></video>
        </div>
    </div>
    <div style="text-align: center;">
        <h1 id='clouds'>Cloud Coverage Forcast for the next hour</h1>
        <div id="mapid", style="height: 400px; width: 70%; margin: auto;"></div>
    </div>
    <div style="text-align: center;">
        <h1>Aurora Forecast</h1>
        <div style="display: inline-block; padding: 10px;">
            <h3>Kp index now</h3>
            <span id="kp_now"></span>
        </div>
        <div style="display: inline-block; padding: 10px;">
            <h3>Kp index in 3 hours</h3>
            <span id="kp_3"></span>
        </div>
        <h2>Advanced data</h2>
        <img style='width: 70%;' src='https://www.spaceweather.se/content/irf-kp.png'>
    </div>
    <footer style="text-align: center;">
        All data has been obtained from <a href="https://www.irf.se/">IRF</a>, any use or distribution of the data has to comply with <a href="https://www.irf.se/wp-content/uploads/2020/02/License-agreement.pdf">this</a> license.
        <br>
        This site has been created by Arnau Busom Vidal. The source code and the license for the site can be found <a href="https://git.xaloc.space/xaloc/aurora">here</a>.
    </footer>
</body>

<script>
	function darkMode() {
		var ele = document.body;
		ele.classList.toggle("dark");
		var x = document.getElementById("modeBtn");
		if (x.innerHTML === "Dark Mode: Off") {
			x.innerHTML = "Dark Mode: On";
		} else {
			x.innerHTML = "Dark Mode: Off";
  		}
	}

    async function api(){
        const res = await fetch('https://www.spaceweather.se/forecast/kp/latest.json');
        const data = await res.json();
        var kp_now = data.kp[6];
        var kp_3 = data.kp[7];
        document.getElementById('kp_now').textContent = Number(kp_now.toFixed(2));
        document.getElementById('kp_3').textContent = Number(kp_3.toFixed(2));
    }

    window.onload = api;

    var mymap = L.map('mapid').setView([67.8488, 20.3027], 6);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(mymap);
    var kiruna = L.marker([67.8488, 20.3027]).addTo(mymap);
    kiruna.bindPopup("Kiruna");
    var abisko = L.marker([68.35, 18.8166]).addTo(mymap);
    abisko.bindPopup("Abisko");
	
    async function clouds(){
        const valTime = await fetch('https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/validtime.json');
        const times = await valTime.json();
        var time = times.validTime[1].replace(/-/g, "").replace(/:/g, "");
        var textTime = new Date(times.validTime[1]).toLocaleString("en-GB", {dateStyle: "short", timeStyle: "short"});
        var textTimeUTC = new Date(times.validTime[1]).toLocaleTimeString("en-GB", {timeZone: "UTC", timeStyle: "short"});
        document.getElementById('clouds').textContent = "Cloud Coverage Forcast for " + textTime + " (" + textTimeUTC+" UTC)";
        const res = await fetch(`https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/geotype/multipoint/validtime/${time}/parameter/tcc_mean/leveltype/hl/level/0/data.json`);
        const data = await res.json();

        for(i=0; i<data.timeSeries[0].parameters[0].values.length; i+=10){
            addClouds(data.geometry.coordinates[i][1],data.geometry.coordinates[i][0],data.timeSeries[0].parameters[0].values[i])
        }
    }
    window.onload = clouds;

    function addClouds(lat,lon,opa){
        var circle = L.circle([lat, lon], {
        stroke: false,
        color: 'grey',
        opacity: 0.05*opa,
        fillOpacity: 0.1*opa,
        radius: 4300
        }).addTo(mymap);
    }
</script>
</html>