locator.pheeble.net


<!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>locator</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1;" />
<style type="text/css">
body {min-height:1200px; height: 100%; font-family: sans-serif;background-image:url('blue-bg.jpg');background-repeat:repeat;}
#container {width:500px;margin:0 auto;}
#w{margin:0 auto;margin-top:300px;width:146px;}
div.compass{float:left;width:162px;min-height:162px;text-align:center;color:white;vertical-align:middle;}
div.first{width:162px;margin:0 auto;clear:both;}
div.posholder{margin-top:48%;font-size:130%;font-weight:bold}
div.error p{text-align:center;color:white;margin:2em;}
</style>
<script type="text/javascript" src="json-minified.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.addEventListener("load", detectPos, false);

function detectPos() {
  navigator.geolocation.getCurrentPosition(usePos);
}

function usePos(position) {
  var c = position.coords;
  var lat = c.latitude;
  var lon = c.longitude;
  var params = new Array;
  params.push([ "latitude", lat ],[ "longitude", lon ]);
  sendRequest("http://locator.pheeble.net/locate", params, returnSub);
}

function returnSub(response) {
  document.getElementById("results").innerHTML = '';
  var obj = jsonParse(response);
  var html;
  if (obj.status == "failed") html = '<div class="error"><p>Could not reliably determine location.</p></div>';
  else if (obj.status == "success") {
    var lat   = obj.latitude;
    var lon   = obj.longitude;
    html = '<div id="container">\n';
   var b = obj.bearings;
    html += '<div class="compass"><div class="posholder">lat:<br/>'+ lat + "</div></div>\n";
    html += '<div class="compass"><img src="http://locator.pheeble.net/compasses/' + b[0].bearing + '.png" alt="' + b[0].bearing + '" width="162" height="162"></div>\n';
    html += '<div class="compass"><div class="posholder">lon:<br/>'+ lon + "</div></div>\n";

    for (var i = 1; i < b.length; i++) {
      html += '<div class="compass"><img src="http://locator.pheeble.net/compasses/' + b[i].bearing + '.png" alt="' + b[i].bearing + '" width="162" height="162"></div>\n';
    }
    html += '</div>\n';
  }
  document.getElementById("results").innerHTML = html;
}
</script>
</head>
<body>
<noscript><div class="error"><p>You will have to enable JavaScript for this to work.</p></div></noscript>
<div id="results"><div id="w"><img src="skipper.gif"/></div></div>
</body>
</html>