<html>

<head>
<title>Explorer example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />

<!-- Dev -->
<!-- <script type="text/javascript" data-main="../js/explorer-main" src="../js/require.min.js"></script> -->
<!-- <link rel="stylesheet" href="../css/style.css" /> -->

<!-- Prod -->
<!--<link rel="stylesheet" href="../css/style.min.css" />-->
<!--<script type="text/javascript" charset="UTF-8" src="../MizarWidget.min.js"></script>-->
<link rel="stylesheet" href="../src/mizar/css/style.min.css" />
<script type="text/javascript" charset="UTF-8" src="../src/mizar/MizarWidget.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>

<style>
div#options
{
	display: inline-block;
	vertical-align: top;
	text-align: center;
	width: 580px;
	margin: 20px;
}
#poiMenu
{
	padding: 0px 0px;
}
li.poi
{
	text-align: center;
	border: 1px solid grey;
	border-radius: 5px;
	margin: 2px;
	padding: 2px;
	background: white;
	list-style: none;
}
li.poi:hover
{
	background: grey;
	cursor: pointer;
}
.stylizedTable
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 20px 45px;
	width: 100px;
	border-collapse: collapse;
	text-align: left;
	cursor: pointer;
}
#featureResults
{
	width: 600px;
}
.stylizedTable th, .toolbar
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
.stylizedTable td
{
	color: #669;
	padding: 9px 8px 0px 8px;
}
.stylizedTable tbody tr:hover td
{
	color: #009;
	cursor: pointer;
}
.toolbar
{
	width: 100px;
	margin-left: 50px;
	text-align: left;
}
#mizarWidget-div
{
	margin: 20px;
	margin-left: 40px;
	margin-top: 300px;
	display: inline-block;
}
</style>

<script type="text/javascript">
	
	window.onload = function() {
		var options = {
			"nameResolver": {
				zoomFov: 1
			},
			"positionTracker": {
				position: "top"
			}
		};
		var mizar = new MizarWidget("#mizarWidget-div", options);
		mizar.setImageViewerGui(true);
		var hstLayer = mizar.getLayer("HST");
		// Need to set min order to 6 since we want to display only the features
		// which are not far of final camera destination fov
		hstLayer.minOrder = 6;
		var table = $('#featureResults').DataTable( {
			"dom": '<"toolbar">frtip',
			"scrollY": "600px",
			"scrollCollapse": true,
			paging: false
		} );
		$("div.toolbar").html('Observations');
		
		// Highlight feature on hover
		$('#featureResults tbody')
	        .on( 'mouseover', 'tr', function () {
				var featureData = $(this).data("featureData");
				if ( featureData )
				{
					mizar.highlightObservation(featureData, {
						isExclusive: true,
						color: 'red'
					});
				}
	        } )
	        .on ( 'click', 'tr', function() {
	        	// Add/remove fits
	        	var featureData = $(this).data("featureData");
	        	if ( featureData )
	        	{
		        	if ( $(this).hasClass("selected") )
		        	{
		        		mizar.removeFits(featureData);
		        	}
		        	else
		        	{
		        		mizar.goTo( featureData.feature.properties.Ra +" "+ featureData.feature.properties.Dec );
		        		mizar.requestFits(featureData);
		        	}
	        		$(this).toggleClass('selected');
				}
	        });
		
		// For debug:	
		// var grid = mizar.addLayer(	{
		// 	"category": "Other",
		// 	"type": "healpixGrid",
		// 	"name": "Healpix grid",
		// 	"outline": true
		// });
		// grid.visible(true);
		// Update data table when features has been added on hstLayer
		hstLayer.subscribe("features:added", function(featureData){
			// HST layer loading ended
			// Show received features
			console.log(featureData.features);
			var $tbody = $('#featureResults').find("tbody");
			for ( var i=0; i<featureData.features.length; i++ )
			{
				var feature = featureData.features[i];
				var row = table.row.add( [ feature.properties.identifier, feature.properties.Ra, feature.properties.Dec ] );
				$(row.node()).data("featureData",{feature: feature, layer: featureData.layer});
			}
			table.draw();
		});
			
		// Move to point of interest handler
		$('#poiTable tr').click(function(event){
			// Clear observation results and hide hstLayer before move to animation
			hstLayer.visible(false);
			table.clear().draw();
			// Retrive POI name and go for it
			var poiName = $(event.target).text();
			
			// Make hstLayer visible once go-to animation finished to launch the search
			mizar.goTo(poiName, function() {
				hstLayer.visible(true);
			});
		});
	};
</script>

</head>


<body style="background-color:white;">
	<div id="options">
		<table id="poiTable" class="stylizedTable" summary="POI">
		<thead>
			<tr>
				<th scope="col">POIs</th>
			</tr>
		</thead>
		<tbody>
		<tr>
			<td>Mizar</td>
		</tr>
		<tr>
			<td>Atlas</td>
		</tr>
		<tr>
			<td>m31</td>
		</tr>
		<tr>
			<td>m42</td>
		</tr>
		<tr>
			<td>Polaris</td>
		</tr>
		</tbody>
		</table>

			<table class="display" id="featureResults">
			<thead>
				<tr>
					<th scope="col"><span class="header">ID</span></th>
					<th scope="col"><span class="header">Ra</span></th>
					<th scope="col"><span class="header">Dec</span></th>
				</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
	</div>
    <div id="mizarWidget-div" style="border: none;" width="500" height="500"></div> 
  	<br/>
</body>

</html>
