<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>GeoDashboard | Wijmo</title>

	<!-- ensure IE uses the latest version of IE (yes, yes...) -->
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- jQuery/Angular/Bootstrap -->
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

	<!-- Google's geocoder -->
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

	<!-- Esri's Map API: https://developers.arcgis.com/javascript/3/ -->
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.16/"></script>

	<!-- Wijmo -->
	<link href="styles/vendor/wijmo.min.css" rel="stylesheet" />
	<script src="scripts/vendor/wijmo.min.js"></script>
	<script src="scripts/vendor/wijmo.input.min.js"></script>
	<script src="scripts/vendor/wijmo.chart.min.js"></script>
	<script src="scripts/vendor/wijmo.gauge.min.js"></script>
	<script src="scripts/vendor/wijmo.angular.min.js"></script>

	<!-- app scripts and styles -->
	<link href="styles/app.css" rel="stylesheet" />
	<script src="scripts/app.js"></script>
	<script src="scripts/filters/gdashFilter.js"></script>
	<script src="scripts/directives/esriDirective.js"></script>
	<script src="scripts/directives/gdashDirective.js"></script>
	<script src="scripts/services/infoSourceModel.js"></script>
	<script src="scripts/services/gdashService.js"></script>
	<script src="scripts/controllers/gdashController.js"></script>
    <script src="https://cdn.grapecity.com/wijmo/wijmo.sample.toolbar.js" type="text/javascript"></script>
</head>
<body ng-app="gdash" ng-controller="gdashController">
	<div class="header">
		<div class="container">
			<div class="pull-left"
				style="white-space: nowrap"
				title="Drag the map to select a location and update the tiles. Click the tiles to update the map.">
				<img src="https://grapecitycontentcdn.azureedge.net/gcbrand/samples/wijmo/wijmo-logo.png" style="float:left;margin:12px;" />
				<h3>
					Wijmo GeoDashboard
				</h3>
				<p>
					Built with Wijmo, Esri maps, and AngularJS.
				</p>
			</div>
			<div class="pull-right" style="margin-top:6px">
				<div class="row pull-right">
					<div class="col-md-12 form-inline">
						<input class="form-control" type="text" 
							ng-model="ctx.search" />
						<button class="btn btn-default" type="button" 
							title="Search for a location" ng-click="geoCode()" ng-disabled="ctx.search.length == 0" >
							<i class="glyphicon glyphicon-search"></i>
						</button>
						<button class="btn btn-default" type="button" 
							title="Go to current location" ng-click="gotoCurrentLocation()">
							<i class="glyphicon glyphicon-home"></i>
						</button>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h4 class="text-right">
							{{ctx.location.name}} 
							<span style="font-size:10pt">
								({{ctx.location.lat | latitude:0}}, {{ctx.location.lon | longitude:0}})
							</span>
						</h4>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<!-- map with cross-hairs -->
		<esri-map 
			extent="ctx.extent" 
			tile-source="ctx.selectedSource"
			style="height:400px;margin:0px 12px 12px 12px;border:1px solid black;box-shadow:0 3px 25px black;"> 
			<esri-crosshair color="#8f5ca6"></esri-crosshair>
		</esri-map>

		<!-- legend info for the selected source of the map -->
		<esri-legend source="ctx.selectedSource"></esri-legend>

		<!-- no info? -->
		<div class="row text-center" ng-show="!ctx.location.isValid" >
			<div class="alert">
				No data is available for this location.<br />
				Please drag the map to select a mainland location within the USA.
			</div>
		</div>

		 <!-- info tiles -->
		<div class="row">
			<div class="col-md-11 col-md-offset-1" ng-show="ctx.location.isValid" >
				<gdash-tile header="{{ctx.location.name}}" click="selectSource(ctx.sources.tapestry)">
					The dominant tapestry<br />
					is <b>{{ctx.sources.tapestry.values.TAPSEGNAM.value}}</b>.
					<p class="muted" style="max-width:200px;margin-left:6px;">
						{{ctx.domTapDescription}}
					</p>
				</gdash-tile>

				<gdash-tile header="Population by Sex" click="selectSource(ctx.sources.populationBySex)" >
					<p>Total Population: <b>{{ctx.sources.populationBySex.values.TOTPOP_CY.value | number:0}}</b></p>
					<table>
						<tr>
							<td class="symbol" style="background-image:url(resources/male.png);background-position:left center">
								<b>{{ctx.sources.populationBySex.values.PMALE_CY.value | number:1}}%<br />male</b>
							</td>
							<td class="symbol" style="background-image:url(resources/female.png);background-position:right center">
								<b>{{ctx.sources.populationBySex.values.PFEMALE_CY.value | number:1}}%<br />female</b>
							</td>
						</tr>
					</table>
				</gdash-tile>

				<gdash-tile header="Median Age" click="selectSource(ctx.sources.age)">
					The median age is <b>{{ctx.sources.age.values.MEDAGE_CY.value | number:1}} years</b><br />
					<wj-flex-chart 
						class="barChart"
						control ="ctx.medianAgeChart"
						items-source="ctx.sources.age.shortList" 
						chart-type="Bar"
						binding-x="name">
						<wj-flex-chart-axis 
							wj-property="axisX"
							major-tick-marks="None"
							major-grid="true"
							axis-line="false"
							labels="false">
						</wj-flex-chart-axis>
						<wj-flex-chart-axis 
							wj-property="axisY"
							major-grid="false">
						</wj-flex-chart-axis>
					</wj-flex-chart>
				</gdash-tile>

				<gdash-tile header="Household Income" click="selectSource(ctx.sources.householdIncome)">
					The average income is <b>${{ctx.sources.householdIncome.values.MEDHINC_CY.value | number:0}}</b><br />
					<wj-flex-chart 
						class="barChart"
						control ="ctx.householdIncomeChart"
						items-source="ctx.sources.householdIncome.shortList" 
						chart-type="Bar"
						binding-x="name">
						<wj-flex-chart-axis 
							wj-property="axisX"
							major-tick-marks="None"
							major-grid="true"
							axis-line="false"
							labels="false">
						</wj-flex-chart-axis>
						<wj-flex-chart-axis 
							wj-property="axisY"
							major-grid="false">
						</wj-flex-chart-axis>
					</wj-flex-chart>
				</gdash-tile>

				<gdash-tile header="Median Household Net Worth" click="selectSource(ctx.sources.netWorth)">
					<p>
						The median net worth is
						<b>${{ctx.sources.netWorth.values.MEDNW_CY.value | number:0}}</b>
					</p>
					<wj-radial-gauge 
						class="radialgauge"
						value="ctx.sources.netWorth.values.MEDNW_CY.value || 0" 
						show-text="Value"
						max="550000"
						start-angle="0"
						sweep-angle="90"
						show-ranges="false">
						<wj-range wj-property="pointer" thickness="0.5" color="#8f5ca6"></wj-range>
					</wj-radial-gauge>
				</gdash-tile>

				<gdash-tile header="Home Values" click="selectSource(ctx.sources.homeValue)">
					<b>{{ctx.sources.homeValue.values.NAME.value}}'s</b> median home value is<br />
					<b>${{ctx.sources.homeValue.values.MEDVAL_CY.value | number:0}}</b>
					({{getIndexDescription(ctx.sources.homeValue.values.MEDVAL_I.value)}}).<br />
					<table>
						<tr>
							<td>Home Value Index</td>
							<td>
								<gdash-slider 
									value="{{ctx.sources.homeValue.values.MEDVAL_I.value}}" 
									color="#8f5ca6">
								</gdash-slider>
							</td>
						</tr>
						<tr>
							<td>Household Income Index</td>
							<td>
								<gdash-slider 
									value="{{ctx.sources.homeValue.values.MEDHINC_I.value}}" 
									color="#8f5ca6">
								</gdash-slider>
							</td>
						</tr>
						<tr>
							<td>Net Worth Index</td>
							<td>
								<gdash-slider 
									value="{{ctx.sources.homeValue.values.MEDNW_I.value}}"
									color="#8f5ca6">
								</gdash-slider>
							</td>
						</tr>
					</table>
					<wj-flex-chart 
						class="barChart homeValueChart"
						control ="ctx.homeValueChart"
						items-source="ctx.sources.homeValue.shortList" 
						chart-type="Bar"
						binding-x="name">
						<wj-flex-chart-axis 
							wj-property="axisX"
							major-tick-marks="None"
							major-grid="true"
							axis-line="false"
							labels="false">
						</wj-flex-chart-axis>
						<wj-flex-chart-axis 
							wj-property="axisY"
							major-grid="false">
						</wj-flex-chart-axis>
					</wj-flex-chart>
				</gdash-tile>

				<gdash-tile header="Home Value Distribution" click="selectSource(ctx.sources.homeValue)">
					<wj-flex-chart 
						class="barChart homeValueDistributionChart"
						control ="ctx.homeValueDistributionChart"
						items-source="ctx.sources.homeValue.list" 
						chart-type="Column">
						<wj-flex-chart-axis 
							wj-property="axisX"
							major-tick-marks="None"
							major-grid="true"
							axis-line="false"
							labels="false">
						</wj-flex-chart-axis>
						<wj-flex-chart-axis 
							wj-property="axisY"
							major-grid="false">
						</wj-flex-chart-axis>
					</wj-flex-chart>
				</gdash-tile>

				 <gdash-tile header="About this app" click="selectSource()">
					This application was created using<br />
					ComponentOne's <a href="http://wijmo.com/5">Wijmo</a>,<br />
					Esri's <a href="http://developers.arcgis.com/en/javascript/jshelp/">map widget</a>
					and <a href="http://www.esri.com/data/free-data">data services</a>,<br />
					and Google's <a href="http://angularjs.org/">AngularJS</a> framework.
				</gdash-tile>
			</div>
		</div>
	</div>
</body>
</html>