<!DOCTYPE html>
<html>
<head>
<title>DIY Radiation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-image: url("static/chalk.jpg");
}
h2 {
    font: bold 24px arial, sans-serif;
}
h4 {
    font: bold 16px arial, sans-serif;
}
.mainContainer {
    width: 750px;
    text-align: center;
    margin: auto;
}
.datetime {
    font: bold 22px arial, sans-serif;
    padding: 20px;
}
.rowContainer {
    display: table;
    width: 100%;
}
.currentDataCell {
    width: 50%;
    padding: 10px;
    font: bold 20px arial, sans-serif;
    text-align: middle;
    display: table-cell;
    vertical-align: middle;
}
.dataItems {
    padding: 2px;
    text-align: left;
    line-height: 130%;
    display: inline-block;
    vertical-align: middle;
}
.chartContainer {
    padding: 2px;
}
img.chart {
    width:100%;
}
.notes {
    font: 17px arial, sans-serif;
    text-align: left;
    padding: 10px;
}
span.chartNav {
    margin: auto;
}
ul.chartNav {
    list-style-type: none;
    margin: 10px;
    padding: 0;
    overflow: hidden;
    background-color: #bbb;
    text-align: center;
}
li.chartNav {
    display: inline-block;
    font: bold 18px arial, sans-serif;
    color: black;
}
text.chartNav:hover {
    background-color: #333;
    cursor: pointer;
    color: white;
}
text.chartNav {
    display: inline-block;
    padding: 8px 12px;
}
</style>
</head>

<body onload="main()">

<div class="mainContainer">

<h2><a href="https://github.com/fractalxaos/radmon" 
style="text-decoration:none" target="_new">
DIY Radiation Monitor</a></h2>
<h4>Albany, Oregon</h4>

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

<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">
Status:<br>
Mode:
</div>
<div class="dataItems">
<text id="status"></text><br>
<text id="mode"></text>
</div>
</div>
</div>

<span class="chartNav">
<ul class="chartNav">
<li class="chartNav">Select charts:</li>
<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(1)">
24 hours</text></li>
<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(2)">
4 weeks</text></li>
<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(3)">
12 months</text></li>
</ul>
</span>
<br>

<div class="chartContainer">
<img class="chart" id="cpmChart">
</div>

<div class="chartContainer">
<img class="chart" id="uSvChart">
</div>

<div class="notes">
<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>
<li>For more information about the effects of radiation on the human body
see <a href="https://xkcd.com/radiation/" target="_blank">
Radiation Dose Chart</a> by Randall Monroe.</li>
</ul>
</div>
</div>
<br>

<script>

/* Global constants */

var radmonDataUrl = "dynamic/radmonOutputData.js";

/* Global DOM objects */

// Chart elements
var cpmChart_g = document.getElementById("cpmChart");
var uSvChart_g = document.getElementById("uSvChart");

// Text elements
var date_e = document.getElementById("date");    
var time_e = document.getElementById("time"); 
var cpm_e = document.getElementById("cpm");    
var cps_e = document.getElementById("cps");    
var uSvPerHr_e = document.getElementById("uSvPerHr");    
var mode_e = document.getElementById("mode");    
var status_e = document.getElementById("status");    

/* Global objects */

var httpRequest = new XMLHttpRequest();

/* Global variables */

var graphPeriod;


function main() {
    /* Register call back function to process http requests */
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var dataArray = JSON.parse(httpRequest.responseText);
            displayData(dataArray[0]);
        } else if (httpRequest.readyState == 4 && httpRequest.status == 404) {
            displayOfflineStatus();
        }
    };
    httpRequest.ontimeout = function(e) {
        displayOfflineStatus();
    };

    getRadmonData();
    graphPeriod = 1;
    getRadmonGraphs();
    setInterval(getRadmonData, 5000);
    setInterval(getRadmonGraphs, 300000);
}

function getRadmonData() {
    httpRequest.open("GET", radmonDataUrl, true);
    httpRequest.timeout = 3000;
    httpRequest.send();
}

function setChartPeriod(n) {
    graphPeriod = n;
    getRadmonGraphs();   
}

function getRadmonGraphs() {
    var d = new Date;
    var pfx;

    switch(graphPeriod) {
        case 1:
            pfx = "24hr_";
            break;
        case 2:
            pfx = "4wk_";
            break;
       case 3:
            pfx = "12m_";
            break;
    }
    cpmChart_g.src = "dynamic/" + pfx + "cpm.png?ver=" + d.getTime();
    uSvChart_g.src = "dynamic/" + pfx + "svperhr.png?ver=" + d.getTime();
}

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

    timeStamp = dataItem.date;
    date = timeStamp.split(" ")[0];
    time = timeStamp.split(" ")[1];
    hourminute = time.split(":")[0] + ":" + time.split(":")[1];
    localDateObj = new Date();
    localTimeZone = localDateObj.getTimezoneOffset() / 60;
    
    date_e.innerHTML = date;    
    time_e.innerHTML = hourminute +
        "  <small>(GMT+" + localTimeZone + ")</small>";    
    cpm_e.innerHTML = dataItem.CPM;    
    cps_e.innerHTML = dataItem.CPS;    
    uSvPerHr_e.innerHTML = dataItem.uSvPerHr;    
    mode_e.innerHTML = dataItem.Mode;    

    status_e.innerHTML = dataItem.status;    
    if (dataItem.status == "online") {
       status_e.style.color = "green";
    } else {
       displayOffLineStatus();
    }
}

function displayOfflineStatus() {
    var d = new Date();
    localTimeZone = d.getTimezoneOffset() / 60;
    date_e.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();    
    time_e.innerHTML = d.getHours() + ":" + d.getMinutes() + "  <small>(GMT+" + 
                       localTimeZone + ")</small>";
    cpm_e.innerHTML = "";    
    cps_e.innerHTML = "";    
    uSvPerHr_e.innerHTML = "";    
    mode_e.innerHTML = "&nbsp";    
    status_e.innerHTML = "offline";    
    status_e.style.color = "red";
}

</script>

</body>
</html>