#set( $rootpath = "${apphome}/components/categorize")
#set ($detailid = $context.getRequestParameter("detailid") )
#if( $detail )
#set( $detailid = $detail.id)
#end

<div id="addcategory" >
	#set ($existing = $context.getRequestParameter("${detailid}.value") )
	#if(!$existing)
		#set ($existing = $val)
	#end
	#if(!$existing)
		#set ($existing = $values)
	#end
	#if(!$existing)
		#set ($existing = $context.getRequestParameter("${detailid}.values") )
	#end
	
	#if( $existing && !$existing.trim().isEmpty() )
	 	#set ($existing = $existing.replace("||","|"))
	    <ul id="cat-list" >
		#foreach($categoryid in $existing.split("\s*\|\s*"))
			#set($category  = $mediaarchive.getCategory($categoryid))
			#if($category)
			<li class="row categorydraggable ui-draggable ui-draggable-handle collectionBox" data-nodeid="$categoryid" data-categoryname="$category.getName()" style="padding:4px;background-color: #FFF">
					<div class="category "  style="padding-left:20px;">					
#foreach( $parent in $category.getParentCategoriesFrom(1))
#if( ${foreach.count} > 1) \ #end
<a  href="$home$apphome/views/modules/category/categorysearch.html?selectedcategory=${category.id}&nodeID=${category.id}">$parent</a>
#end
				<div class="collectionIcons">
						<a href="#" title="[[Remove]]">
							<span class="closecategory ui-icon ui-icon-closethick " data-categoryid="$categoryid"></span>
						</a>
				</div>
			</div>
			</li>
			#end
		#end
		</ul>
	#end

   <input type="hidden" name="operation" value="orsgroup" />
   <a class="emdialog btn small" href="$home$apphome/components/categories/search/searchcategory.html?targetdiv=addcategory&clearselection=$!clear&action=$page.path&detailid=$detailid" data-cancelsubmit="true" data-parameterdata="categoryvalues">[[Pick Categories]]</a>

   	##Bug Ajax forms dont validate hidden fields ever. So make it 1px wide
   	<input style="visibility: hidden;width:1px" id="categoryvalues" name="${detailid}.value" value="$!existing" class="#if($detail.isRequired() && !$multiedit) required #end"  />
	
<script>

	$("#cat-list .closecategory").on("click",function() 
			{
				var link = $(this);
				link.closest("li").hide();
				
				var id = link.data("categoryid");
				var existing = $("#categoryvalues").val();
				existing = existing.replace(id,"");
				existing = existing.replace("||","|");
				$("#categoryvalues").val(existing);
				
				
			}
	);

</script>
</div>