#set( $action = $context.getRequestParameter("action") ) 
#set( $targetdiv = $context.getRequestParameter("targetdiv") )
#set( $detailid = $context.getRequestParameter("detailid") )
#if(!$detailid)
#set( $detailid = "category") 
#end

#set( $pickone = $context.getRequestParameter("pickone") )
#set( $categories = $context.getRequestParameter("${detailid}.value") )
#if(!$categories)
	#set( $categories = $context.getRequestParameter("category-exact.values") )
#end	
#if(!$categories)
	#set( $categories = $context.getRequestParameter("category.values") )
#end
#if(!$categories)
	#set( $categories = $context.getRequestParameter("category-exact.values") )
#end	

<div id="search-catgories">
<table width="100%">
<tr><td style="width:30%;padding-right:6px;">
	<div class="emsearchfield" style="background-color: #eee; padding:6px"> 
			[[Parent]] 
		</div>
	<div class="assetdropcategory assetdropcategorymove" style="padding:0px;overflow-x:auto;width:300px">  
		$pages.include("$apphome/components/emtree/tree.html?tree-name=categoryPickerTree&editabletree=true&clearselection=true",$context)
	</div>
</td>
<td>
	<div class="emsearchfield" style="background-color: #eee; padding:6px; margin-bottom:4px"> 
			[[Category Search]] 
		</div>
	<div id="searchareacontent" >
	$pages.include("$apphome/components/categories/search/searchcategoryfilter.html?nodeID=index&existingcategories=$!categories",$context)
	</div>

</td></tr>	
</table>	

<script>

var paintselected = function()
{
#foreach($categoryid in $categories.split("\s*\|\s*"))
$('[data-id="${categoryid}"]').addClass("emrowselected");
#end
};

$(document).on("emtreeselect",function(event) 
{
	var selectednode = event.nodeid;
	$("#parentfilter").val(selectednode);
	//trigger("submit");
	//$("#autosubmitfilter").trigger("submit");
	//$("#autosubmitfilter").submit();
	$("#autosubmitfilter").ajaxSubmit({
		target:"#categoryresults",
		success: paintselected 
	});
	return false;
});


$(".pickedcategoryform").submit(function(event)
{
	//append to a list of categories from the calling area?
	#if( $action )
		event.preventDefault();
		console.log("submit action $action to $targetdiv");
		var params = {};
		params["${detailid}.value"] =  $("#selectedcategories").val();
		params["detailid"] = "$detailid";
		#if( $pickone )
			params["id"] =  $("#selectedcategories").val();
			$("#$targetdiv").load("$action", params);
			$(this).closest(".modal").modal("hide"); 			//close dialog
		#else
			params["oemaxlevel"] = "1";
			$("#$targetdiv").load("$action", params);
		#end
		return false;
	#else
		console.log("submit stop");
		return true;  //Load category as usual
	#end
});

paintselected();

</script>
</div>