#set($idcount = $context.getRequestParameter("idcount"))
#if(!$idcount)
	#set($idcount = "")
#end

<div class="render-type-thumbnail" id="${detail.id}-preview">
	#if($val && $val != "")
		#set( $foundrow = $mediaarchive.getAsset($val)  )
		#if($foundrow)
			$pages.include("$apphome/components/xml/types/assetpicker/preview.html?assetid=$val", $context)
		#end
	#end
</div>
<input type="hidden" name="${detail.id}.value" id="${detail.id}-value" value="$!foundrow.id"/>

	#if($detail.sourcepath)
		<input type="hidden" name="${detail.id}.sourcepath" id="${detail.id}-sourcepath" value="$detail.sourcepath"/>
	#end
	<input type="text" class="bigdrop" id="assetselector" style="width: 500px" />
	<input type="hidden" class="$detail.getId()-field" id="${detail.getId()}.value" name="${detail.getId()}.sourcepath" value="$!sourcepath" />
	<input class="render-choose-file" type="file" name="file.${detail.getId()}" />
	#if($val && $val!="" && $foundrow)
		<label for="${detail.id}-checkbox" style="font-style:italic;">Disable? </label>
		<input id="${detail.id}-checkbox" name="${detail.id}-checkbox" type="checkbox" />
	#end

<script>
	#if($val && $val!="" && $foundrow)
    $("#${detail.id}-checkbox").change(function(){
    	console.info("$!val");
    	var ischecked = $("#${detail.id}-checkbox").is(":checked");
    	if (ischecked){
    		$("#${detail.id}-preview").hide();
    		$("#${detail.id}-value").val("");
    		$("#${detail.id}-sourcepath").val("");
    	} else {
    		$("#${detail.id}-preview").show();
    		$("#${detail.id}-value").val("$!{foundrow.id}");
    		$("#${detail.id}-sourcepath").val("$!{sourcepath}");
    	}
    });
    #end
	$("#assetselector").select2({
		placeholder : "Search for an asset",
		minimumInputLength : 1,
		ajax : { // instead of writing the function to execute the request we use Select2's convenient helper
			url : "$apphome/components/xml/types/assetpicker/datasearch.txt?field=description&operation=contains&searchtype=asset",
			dataType : 'jsonp',
			data : function(term, page) {
				return {
					"description.value" : term, //search term
					page_limit : 10

				};
			},
			results : function(data, page) { // parse the results into the format expected by Select2.
			
				// since we are using custom formatting functions we do not need to alter remote JSON data
				return {
					results : data.assets
				};
			}
		},
		formatResult : movieFormatResult, // omitted for brevity, see the source of this page
		formatSelection : movieFormatSelection, // omitted for brevity, see the source of this page
		dropdownCssClass : "bigdrop" // apply css that makes the dropdown taller
	});
	$("#assetselector2").select2({
		placeholder : "Search for an asset",
		minimumInputLength : 3,
		ajax : {
			url : "$apphome/components/xml/types/assetpicker/datasearch.txt?field=description&operation=contains&searchtype=asset",
			dataType : 'jsonp',
			quietMillis : 100,
			data : function(term, page) { // page is the one-based page number tracked by Select2
				return {
					"description.value" : term, //search term
					page : page // page number
				};
			},
			results : function(data, page) {
				var more = (page * 10) < data.total; // whether or not there are more results available

				// notice we return the value of more so Select2 knows if more results can be loaded
				return {
					results : data.assets,
					more : more
				};
			}
		},
		formatResult : movieFormatResult, // omitted for brevity, see the source of this page
		formatSelection : movieFormatSelection, // omitted for brevity, see the source of this page
		dropdownCssClass : "bigdrop" // apply css that makes the dropdown taller
	});
	function movieFormatResult(asset) {
		var markup = "<table class='movie-result'><tr>";
		if (asset.sourcepath !== undefined) {
			markup += "<td class='movie-image'><img src='$apphome/views/modules/asset/downloads/preview/crop/" + asset.sourcepath + "/thumb.jpg'/></td>";
		}
		markup += "<td class='movie-info'><div class='movie-title'>"+ asset.name + "</div>";
		#set($details = $mediaarchive.getAssetSearcher().getDetailsForView("asset/typeaheaddetails"))
		#foreach($detail in $details)
			if(asset.${detail.id} != undefined && asset.${detail.id} != ""){
				markup += "<tr><td class='movie-info'><div class='movie-title'> $detail.getText():"
					+ asset.${detail.id} + "</div></tr>";
			}
		#end	
		markup += "</td></tr></table>"
		return markup;
		//return "<p>Ian was  here</p>";
	}
	function movieFormatSelection(asset) {
		//var imgsrc= "$apphome/views/modules/asset/downloads/preview/crop/" + asset.sourcepath + "/thumb.jpg";
		jQuery("#${detail.id}-preview").load("$apphome/components/xml/types/assetpicker/preview.html?oemaxlevel=1&val=" + asset.id );
		jQuery("#${detail.id}-value").val(asset.id);
		return asset.name;
	}
</script>