<!DOCTYPE html>
<html>
<head>
<title>DIY Radiation</title>
<style>
body {
    background-image: url("static/chalk.jpg");
}
h2 {
    font: 24px arial, sans-serif;
    font-weight: bold;
}
h4 {
    font: 16px arial, sans-serif;
    font-weight: bold;
}
.mainContainer {
    width: 800px;
    text-align: center;
    margin: auto;
}
.datetime {
    font: 19px arial, sans-serif;
    font-weight: bold;
    color: black;
    padding: 10px;
}
.rowContainer {
    display: table;
    border-spacing: 1px;
}
.currentDataCell {
    height: 175px;
    width: 396px;
    font: 19px arial, sans-serif;
    font-weight: bold;
    color: black;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.dataItems {
    padding: 2px;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}
.chartContainer {
    margin: 1px;
    padding: 2px;
}
img.chart {
    width:100%;
}
.footer {
    font: 17px times new roman, sans-serif;
    color: black;
    text-align: left;
    margin: 1px;
    padding: 10px;
}
</style>
</head>

<body onload="main()">

<div class="mainContainer">
<h2>DIY Radiation Monitor</h2>
<h4>Located in Albany, Oregon</h4>

<div class="datetime">
<text id="date"></text>
&nbsp;&nbsp;
<text id="time"></text>
</div>

<hr>

<div class="rowContainer">
<div class="currentDataCell">
<ins>Current Reading</ins><br><br>
<div class="dataItems">
Counts per minute:<br>
Counts per second:<br>
uSv per hour:
</div>
<div class="dataItems">
<text id="cpm"></text><br>
<text id="cps"></text><br>
<text id="uSvPerHr"></text>
</div>
</div>

<div class="currentDataCell">
<ins>Radiation Monitor</ins><br><br>
<div class="dataItems">
Device:<br>
Mode:
</div>
<div class="dataItems">
<text id="status"></text><br>
<text id="mode"></text>
</div>
</div>
</div>

<hr>

<div class="chartContainer">
<img class="chart" id="1-day-cpm">
</div>

<div class="chartContainer">
<img class="chart" id="1-day-uSv">
</div>

<div class="chartContainer">
<img class="chart" id="4-week-cpm">
</div>

<div class="chartContainer">
<img class="chart" id="4-week-uSv">
</div>

<div class="chartContainer">
<img class="chart" id="1-year-cpm">
</div>

<div class="chartContainer">
<img class="chart" id="1-year-uSv">
</div>

<div class="footer">
<b>NOTES:</b>
<ul>
<li>DIY Radiation Monitor project plans and software available at
<a href="https://github.com/fractalxaos/radmon" target="_new"><i>Github.com</i></a>.</li>
<li>Project sponsored by <a href="http://www.eugenemakerspace.com" TARGET="_NEW">
<i>Eugene Maker Space</i></a>, Eugene, Oregon.</li>
</ul>
</div>
</div>
<br>

<script>

/* Globals */
var radmonDataUrl = "dynamic/radmonData.js";
var httpRequest = new XMLHttpRequest();

function main() {
    getRadmonData();
    getRadmonGraphs();
    setInterval(getRadmonData, 10000);
    setInterval(getRadmonGraphs, 60000);
}

function getRadmonData() {
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var dataArray = JSON.parse(httpRequest.responseText);
            displayData(dataArray[0]);
        }
    };
    httpRequest.open("GET", radmonDataUrl, true);
    httpRequest.send();
}

function getRadmonGraphs() {
    var d = new Date;
    document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png?ver=" + d.getTime();
    document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png?ver=" + d.getTime();
    document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png?ver=" + d.getTime();
    document.getElementById("4-week-uSv").src = "dynamic/radGraph4.png?ver=" + d.getTime();
    document.getElementById("1-year-cpm").src = "dynamic/radGraph5.png?ver=" + d.getTime();
    document.getElementById("1-year-uSv").src = "dynamic/radGraph6.png?ver=" + d.getTime();
}

function displayData(dataItem) {
    var timeStamp, date, time, hourminute;

    timeStamp = dataItem.date;
    date = timeStamp.split(" ")[0];
    time = timeStamp.split(" ")[1];
    hourminute = time.split(":")[0] + ":" + time.split(":")[1];
    
    document.getElementById("date").innerHTML = date;    
    document.getElementById("time").innerHTML = hourminute + " (PDT)";    
    document.getElementById("cpm").innerHTML =  dataItem.CPM;    
    document.getElementById("cps").innerHTML =  dataItem.CPS;    
    document.getElementById("uSvPerHr").innerHTML =  dataItem.uSvPerHr;    
    document.getElementById("mode").innerHTML =  dataItem.Mode;    

    document.getElementById("status").innerHTML =  dataItem.status;    
    if (dataItem.status == "online") {
        document.getElementById("status").style.color = "green";
    }
    else {
        document.getElementById("status").style.color = "red";
    }
}

</script>

</body>
</html>