<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Earlham College Electrical Energy Consumptionis</title>
	<link type="image/x-icon" href="images/favicon.png" rel="shortcut icon">
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<!--Scripts at bottom -->
</head>
<body>
	<div id="header">
		<div class="flex-parent">
			<img src="images/logo.png" title="Logo" border="none"/></img>
			<a id="page-title" href=".">Electrical Energy Consumption</a>
		<button id = "howToButton" class="aboutBtn" onclick="changeDashboard('howToUse')">How to Use</button>
			<button id="aboutButton" class="aboutBtn" onclick="changeDashboard('about')">About</button>
		</div>
	</div> <!-- end header -->
	<div id="dashboard">
		<div id="lineChart"></div>
		<div id="control"></div>
		<div id="aboutText" class="displayNone">
			<p class="about">
				The energy eDisplay is a project between Earlham College's Green Science Hardware Interface Project (or GRIP), and the Maintenance Department.
				Magnets around each buildings&#39 main power line collect and store
				values in a database which we harvest and visualize here using
				Google&#39s Chart and Visualization API.
                	</p>
                	<p class="about">
        			For questions, comments, or display issues please send an email to <nobr>green-science@cs.earlham.edu</nobr>.
                	</p>
		</div>
		<div id="howToUse" class="displayNone">
                        <p class="about">
				You can click the building buttons below the graph to choose which buildings are displayed in the graph. Move the slider below the graph to view the energy consumption during a period of time. The Download CSV button will download a .csv file of the data currently being shown on the graph. The Get Permalink button will generate a link that will link to the site with the data being currently shown.
			</p>
                </div>
	</div> <!-- end dashboard and chart. -->

	<div id="site-options" class="flex-parent">
		<a id="csvDownload" href="#"><button class="csvBtn" type="button">Download CSV</button></a>

		<form id="plink-form">
			<input id="plink" type="text" value=""></input>
			<input class="getPlink"type="button" value="Get Permalink"
						onclick="
						document.getElementById('plink').value = genPermalink();
						document.getElementById('plink').select();
						"></input>
		</form>
	</div>

	<div id="site-details">
        <!-- Add any site details below. Please leave credit in my name (Leif?)-->
                <p>This is a project of Green Science and the Maintenance Department at Earlham College. <br />
                Gaps in the graph signify where power went out.
                Click the About button to find out more about this project.</p>
        </div> <!-- end site details  -->

	<!-- scripts -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/loader.js"></script>
    <script type="text/javascript">
	  google.charts.load('45.2', {packages:['corechart', 'controls']});
	  google.charts.setOnLoadCallback(initializeLineChart);
    </script>

</body>
</html>