<!-- Handle search request -->
<script type="text/javascript">
    $(function() {
		$(".search_button").click(function() {
			var search_word = $("#search_box").val();
			var type = $("input[type='radio'][name='type']:checked").val();
			var dataString = 'lidvid='+ search_word + "&type=" + type;
			
			if(search_word != '') {
				$.ajax({
					type: "GET",
					url: "find",
					data: dataString,
					cache: false,
					beforeSend: function(html) 
					{
						$("#matchCount").html(""); 
						$("#results").html(""); 
						$("#flash").show();
						$("#search").show();
						$("#searchword").html(search_word);
						$("#flash").html('<img width="200" src="/images/loading-animation-2.gif" /><br/> Loading Results...');
					},
						
					success: function(data){
						$("#matchCount").show();
						$("#results").show();
						
						var matches = JSON.parse(data);
						var template = document.getElementById('item-template').innerHTML;
						var render = Handlebars.compile(template);
						$("#matchCount").html('Matches: ' + matches.length);
						if(matches.length == 0) { 
							$("#results").html("No results"); 
						} else {
							$("#results").html( render({item: matches}) );
						}
												
						$("#flash").hide();
					}
				
				});
				
			}
			return false;
		});
		
    });
	
	// Attach "click" handler to all drill links.
	// We use "on" because links appear after an AJAX call.
	$(document).on('click', "a.drill", function () {
			var lidvid = $(this).attr('data-val');
			// Remove version and set search box
			lidvid = lidvid.split("::")[0];
			$("#search_box").val(lidvid);
			
			// Change product type based on current selection
			var type = $("input[type='radio'][name='type']:checked").val();
			if(type == "Bundle") $("#collection").prop( "checked", true );
			if(type == "Collection") $("#observational").prop( "checked", true );
			
			// Simulate a click to do search
			$(".search_button").click();
			return false;
	});         
</script>

<!-- Client side template -->
<!-- back slash before Handlebar tag prevents server-side processing -->
<template id="item-template">
  \{{#each item}}
     <div>
		<div class="item"><a target="_blank" href="label?lidvid=\{{key}}">\{{value.title}}</a> (<a class="drill" href="" data-val="\{{key}}">\{{value.product}}</a>) <a href="product?lidvid=\{{key}}&format=zip">Zip</a> <a href="product?lidvid=\{{key}}&format=tar">Tar</a></div>
		<div class="indent">\{{value.description}}</div>
		<div class="indent">\{{key}}</div>
	</div>
  \{{/each}}
</template>

<h1 style="text-align:center;">Lookup</h1>

<div style="text-align: center; background:#FFFFFF;">
	<form method="get" action="">
	   <input type="text" name="search" id="search_box" class='search_box' placeholder="LIDVID (i.e. urn:nasa:pds:...)" style="width: 90%"/>
	   <div style="padding: 10px">
		<input type="radio" name="type" id="any" value="any"><label for="any">Any</label>
		<input type="radio" name="type" id="context" value="Context"><label for="context">Context</label>
		<input type="radio" name="type" id="bundle" value="Bundle" checked><label for="bundle">Bundle</label>
		<input type="radio" name="type" id="collection" value="Collection"><label for="collection">Collection</label>
		<input type="radio" name="type" id="observational" value="Observational"><label for="observational">Observational</label>
		<input type="radio" name="type" id="browse" value="Browse"><label for="browse">Browse</label>
		<input type="radio" name="type" id="thumbnail" value="Thumbnail"><label for="thumbnail">Thumbnail</label>
		<input type="radio" name="type" id="update" value="Update"><label for="update">Update</label>
		</div>
		<input type="submit" value="Search" class="search_button" />
	</form>
	<br/>
	<div id="search">Search results for <b><span id="searchword" class="searchword"></span></b></div>
	<div id="flash"></div>
</div>
<div id="matchCount"></div>
<div id="results"></div>
