{% load i18n mathfilters %}
{% load humanize %}

{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE }}" dir="{{ LANGUAGE_BIDI | yesno:'rtl,ltr' }}">
<head>

<link href="{{ STATIC_URL }}geonode/css/ext-compatibility.css" rel="stylesheet" />
<link href="{{ STATIC_URL }}lib/css/custom.css" rel="stylesheet" />
<style>
table#info {
	width:90%;
	border-top:1px solid #e5eff8;
	/*border-right:1px solid #e5eff8;*/
	margin:1em auto;
	border-collapse:collapse;
}

table#info td{
	color:#0D63AD;
	border-bottom:1px solid #e5eff8;
	/*border-left:1px solid #e5eff8;*/
	padding:.3em 1em;
}

table#info tr.odd td {
	background:#f7fbff
}

#pie_chart1{
	width: 250 !important;
	height:250 !important;
}

#pie_chart2{
	width: 250 !important;
	height:250 !important;
}



.select-style select {
  /*margin: 50px;*/
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px 35px 5px 5px;
  /*font-size: 16px;*/
  color: #0D63AD;
  border: 1px solid #ccc;
  height: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}

/* CAUTION: IE hackery ahead */
.select-style select::-ms-expand { 
    display: none; /* remove default arrow on ie10 and ie11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
        padding: 5px\9;
    } 
}

.select-style select:focus {
    outline: none;
}

</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
</script>
<script src="{{STATIC_URL}}lib/js/usng.js" type="text/javascript"></script>
</head>
<body>

<table id='info'>
	<tr>
		<td>{% trans "Settlement" %}</td>
		<td><strong>{{name_en}}</strong></td>
	</tr>
	<tr>
		<td>{% trans "Language" %}</td>
		<td><strong>{{language_field}}</strong></td>
	</tr>
	<tr>
		<td>{% trans "District" %}</td>
		<td><strong>{{dist_na_en}}</strong></td>
	</tr>
	<tr>
		<td>{% trans "Province" %}</td>
		<td><strong>{{prov_na_en}}</strong></td>
	</tr>
	<tr>
		<td>
			<div class="select-style">
				<select id="coordinate_selection" onchange='proj_select();'>
				  <option selected value="WGS84">WGS84 Coordinate</option>
				  <option value="UTM">UTM Coordinate</option>
				  <option value="MGRS">MGRS Coordinate</option>
				</select>
			</div>
			<!-- <span id="WGS84_link">WGS84</span> - <span id="UTM_link">UTM</span> - <span id="MGRS_link">MGRS</span></td> -->
		<td>
			<strong>
				<span id="WGS84"></span>
				<span id="UTM"></span>
				<span id="MGRS"></span>
			</strong>
		</td>
	</tr>
	<tr>
		<td>{% trans "Elevation"  %}</td>
		<td><strong>{{elevation|floatformat:"0" }}{% blocktrans %} m above sea level{% endblocktrans %}</strong></td>
	</tr>
	<tr>
		<td>{% trans "Area" %}</td>
		<td><strong>{{area_sqm|div:1000000|floatformat|intcomma}} {% blocktrans %}km<sup>2</sup>{% endblocktrans %}</strong></td>
	</tr>
	<tr>
		<td>{% trans "Total Population" %}</td>
		<td><strong>{{vuid_population|floatformat:"0"|intcomma }}</strong></td>
	</tr>
	<!-- <tr>
		<td>{% trans "Area Buildings" %}</td>
		<td><strong>{{vuid_buildings|floatformat:"0" }}</strong></td>
	</tr> -->
	<tr>
		<td>{% trans "Average Household Size" %}</td>
		<td><strong>{{vuid_pop_per_building|floatformat:"2" }}</strong></td>
	</tr>
	<tr>
		<td>{% trans "Number of Buildings" %}</td>
		<td><strong>{{vuid_buildings|floatformat:"0"|intcomma }}</strong></td>
	</tr>
	<tr>
		<td>{% trans "Local Name" %}</td>
		<td><strong>{{name_local}}</strong></td>
	</tr>
	<tr>
		<td>{% trans "Local Name Confidence Level" %}</td>
		<td><strong>{{name_local_confidence}}</strong></td>
	</tr>
	<tr>
		<td>{% trans "Alternative English Name" %}</td>
		<td><strong>{{name_alternative_en}}</strong></td>
	</tr>
	<tr>
		<td>{% trans "Type of Settlement" %}</td>
		<td><strong>{{type_settlement}}</strong></td>
	</tr>
</table>
<div class="" style='width:90%;margin:1em auto;'>
	<div style='float:left;'>{{ landcover_pop_chart.as_html }}</div>
	<div style='float:left;'>{{ landcover_area_chart.as_html }}</div>
</div>
<script type="text/javascript">
function proj_select(){
	var selectBox = document.getElementById('coordinate_selection');
	var selectedValue = selectBox.options[selectBox.selectedIndex].value;
	if (selectedValue == 'WGS84'){
		document.getElementById("WGS84").style.display = '';
	    document.getElementById("UTM").style.display = 'none';
	    document.getElementById("MGRS").style.display = 'none';
	} else if (selectedValue == 'UTM'){
		document.getElementById("WGS84").style.display = 'none';
	    document.getElementById("UTM").style.display = '';
	    document.getElementById("MGRS").style.display = 'none';
	} else if (selectedValue == 'MGRS'){
		document.getElementById("WGS84").style.display = 'none';
	    document.getElementById("UTM").style.display = 'none';
	    document.getElementById("MGRS").style.display = '';
	}
}

document.addEventListener('DOMContentLoaded', function(){ 


	

	function getFormattedLonLat(coordinate, axis, dmsOption) {
	    if (!dmsOption) {
	        dmsOption = 'dms';    //default to show degree, minutes, seconds
	    }

	    coordinate = (coordinate+540)%360 - 180; // normalize for sphere being round

	    var abscoordinate = Math.abs(coordinate);
	    var coordinatedegrees = Math.floor(abscoordinate);

	    var coordinateminutes = (abscoordinate - coordinatedegrees)/(1/60);
	    var tempcoordinateminutes = coordinateminutes;
	    coordinateminutes = Math.floor(coordinateminutes);
	    var coordinateseconds = (tempcoordinateminutes - coordinateminutes)/(1/60);
	    coordinateseconds =  Math.round(coordinateseconds*10);
	    coordinateseconds /= 10;

	    if( coordinateseconds >= 60) {
	        coordinateseconds -= 60;
	        coordinateminutes += 1;
	        if( coordinateminutes >= 60) {
	            coordinateminutes -= 60;
	            coordinatedegrees += 1;
	        }
	    }

	    if( coordinatedegrees < 10 ) {
	        coordinatedegrees = "0" + coordinatedegrees;
	    }
	    var str = coordinatedegrees + "\u00B0";

	    if (dmsOption.indexOf('dm') >= 0) {
	        if( coordinateminutes < 10 ) {
	            coordinateminutes = "0" + coordinateminutes;
	        }
	        str += coordinateminutes + "'";

	        if (dmsOption.indexOf('dms') >= 0) {
	            if( coordinateseconds < 10 ) {
	                coordinateseconds = "0" + coordinateseconds;
	            }
	            str += coordinateseconds + '"';
	        }
	    }

	    if (axis == "lon") {
	        str += coordinate < 0 ? "W" : "E";
	    } else {
	        str += coordinate < 0 ? "S" : "N";
	    }
	    return str;
	}

	var converter = new usngs.Converter();
	var lat = parseFloat({{ latitude }});
    var lon = parseFloat({{ longitude }});

    
    var UTMCoord = {};
    converter.LLtoUTM(lat,lon,UTMCoord);

    document.getElementById("WGS84").innerHTML =getFormattedLonLat(lat, 'lat') +'<br/>'+ getFormattedLonLat(lon, 'lon');
    document.getElementById("UTM").innerHTML =UTMCoord[2]+'N'+'<br/>'+'Northing '+UTMCoord[1].toFixed(1) +'<br/>'+ 'Easting '+UTMCoord[0].toFixed(1);
    document.getElementById("MGRS").innerHTML =converter.LLtoMGRS(lat,lon,5);

    document.getElementById("WGS84").style.display = '';
    document.getElementById("UTM").style.display = 'none';
    document.getElementById("MGRS").style.display = 'none';

}, false);
	



</script>
</body>
</html>
