<html>
<head>
<title>
Calculate Mileage
</title>
<STYLE TYPE="text/css">
   INPUT{font-size:20px;}
   BODY{font-size:20px;}

</STYLE>
</head>
<body>
 <script>       
    function getLocation(type) {
      document.getElementById("type").value = "submit"
      
      var myTime = new Date()
           
      document.getElementById("puttime").value = getSIDate(myTime)
           
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);      
      } else {
        //gd.value = "Lost!"
        document.getElementById("alocation").value = "Lost!"
      }     
    }
    function showPosition(pos) {
      document.getElementById("alocation").value = pos.coords.latitude + "," + pos.coords.longitude
      setTimeout(function() {document.getElementById("theform").submit();}, 500);
    }   
    
    function submitIt() {
      document.getElementById("type").value = "display"
      document.getElementById("theform").submit()
    }  
    function getSIDate(t) {
    	var year = t.getFullYear()
    	var month = t.getMonth() + 1
    	if (month < 10) {month = "0" + month}
    	var day = t.getDate()
    	if (day < 10) {day = "0" + day}
    	var hour = t.getHours()
    	if (hour < 10) {hour = "0" + hour}
    	var min = t.getMinutes()
    	if (min < 10) {min = "0" + min}
    	
    	utcDiff = t.getTimezoneOffset() / 60 * -1
    	return year + "-" + month + "-" + day + " " + hour + ":" + min + " UTC" + utcDiff
}
    
</script>

<h1>Calculate Gas Mileage</h1>
<!--<span style="font-size:2em;"> -->
  <form id="theform" action="mileage1.php" method="post">
  Vehicle:  <select name="cars" id="cars" style="font-size:1.2em;">
  <option value="pathfinder">Pathfinder</option>
  <option value="prius">Prius</option>
 </select><br>
  Litres:   <input type="number" name="litres"> prefix with - if US Gallons.<br><br>
  Odometer: <input type="number" name="odo"><br><br>
  Cost/L:   <input type="number" name="cost"> or gallon if Litres is negative.

  <input type="hidden" id="alocation" name="location">
  <input type="hidden" id="type" name="type">
  <input type="hidden" id="puttime" name="time">
  <br><br>
  <input type="button" value="submit"  onclick="getLocation()" style="font-size:1.2em;">
  <input type="button" value="display" onclick="submitIt()" style="font-size:1.2em;" >
  </form>
<!-- </span> -->
</body>
</html>