#set( $rootpath = "/${store.catalogId}/admin/products/productcategories")

#set ( $product = $storeeditor.getCurrentProduct() )
#set ( $categorylist = $product.getCatalogs() )


<div id="categorypicker" >

<p>[[A product can be in multiple categories. To add a category, select it from the tree on the right then click the add button.]]</p>

<script type="text/javascript" src="$home/openedit/javascript/validateandedit.js"> </script>
<script type="text/javascript">
//Need to define this before the tree html code

productCatalogTree = new Object();
productCatalogTree.lastselected = "$productCatalogTree.getTreeRenderer().getSelectedId()";
productCatalogTree.name = "productCatalogTree";
productCatalogTree.jumpToNode = function(inUrl, inNodeId)
{
	this.selectRow( inNodeId );
	new Ajax.Updater(this.name + "treerow"+inNodeId, '$home$rootpath/select.html', { parameters: {nodeID: inNodeId, path: inUrl, origURL: "$content.path" } });	
	//new Ajax.Updater("hidden-category-id", '$home$rootpath/updatecategoryid.html', { parameters: {nodeID: inNodeId, path: inUrl, origURL: "$content.path" } });
	//document.location = "$home$rootpath/productcategories.html?cache=false&categoryid=" + inNodeId;
	return false;
}
productCatalogTree.toggleNode = function(inUrl,inTreeId, inNodeId)
{
	new Ajax.Updater(this.name + "treerow"+inNodeId, '$home$rootpath/toggle.html', { parameters: {nodeID: inNodeId, treeid: inTreeId, origURL: "$content.path", categoryid: inNodeId } });
	return false;
}
productCatalogTree.jumpAndOpenNode = function(inUrl,inTreeId, inNodeId)
{
	this.jumpToNode( inUrl, inNodeId );
	this.toggleNode( inUrl, inTreeId, inNodeId );
	return false;
}
productCatalogTree.selectRow = function( inNodeId )
{
	if( this.lastselected.length > 0 )
	{
		var thediv = document.getElementById(this.name + "treeitem" + this.lastselected);
		if( thediv )
		{
			thediv.style.backgroundColor = "#ffffff";
		}
		thediv = document.getElementById(this.name + "treeitem" + inNodeId);
		if( thediv )
		{
			thediv.style.backgroundColor = "#c0d2ec";
		}
	}
	this.lastselected = inNodeId;
}
postCategoryToProduct = function(inFormID)
{
	form = document.getElementById(inFormID);
	form.categoryid.value = productCatalogTree.lastselected;
	return postForm('categorypicker',inFormID);
}
removeCategoryToProduct = function(inCat)
{
	document.removecategoryform.categoryid.value = inCat;
	return postForm('categorypicker','removecategoryform');
}

</script>
<br>
<table  cellspacing="0" cellpadding="0" border="0" >
	<tr>
<td valign="top"  align="right" nowrap >
	<h4>[[Categories]]</h4>
		<table width="100%" >
		#foreach( $category in $categorylist)
			<tr><td style="white-space:nowrap;" width="100%">
				#set( $parents = $category.listAncestorsAndSelf(0))
#foreach( $category in $parents) 
<a class="node" href="$home$testbenchhome/admin/categories/editor/${category.id}.html"><img align="top" src="$home/openedit/images/tree/folder.gif" border="0" >$category.name</a>#if( ${foreach.count} < $parents.size())&nbsp;/&nbsp;#end
#end
			</td>	
			<td><a href="#" onclick="removeCategoryToProduct('$category.id');return false;">[[[remove]]]</a></td>
			</tr>
		#end
		</table>
</td>
<td valign="top" width="300" style="padding: 10px;">
	
<br/>	
<form name="addcategoryform" id="addcategoryform" method="post" action="$home$rootpath/addCategory.html?oemaxlevel=2" onsubmit="return postCategoryToProduct('addcategoryform'); return false;">
      	    <p><INPUT TYPE="submit" VALUE="<-[[Add]]" ></INPUT></p>
	  		<input type="hidden" name="productid" id="productid" value="$product.id" />
	  		<input type="hidden" name="categoryid" id="categoryid"  />
	  		<input type="hidden" name="origURL" value="$content.path" />
</form>	  		

<form name="removecategoryform" id="removecategoryform" method="post" action="$home$rootpath/removeCategory.html?oemaxlevel=2">
	
	  		<input type="hidden" name="productid" id="productid" value="$product.id" />
	  		<input type="hidden" name="categoryid" id="categoryid"  />
	  		<input type="hidden" name="origURL" value="$content.path" />
</form>	  		


		</td>
      	<td valign="top" width="400px">
			<div  style="padding: 0px; border:0px solid #000;">
			<link rel="stylesheet" type="text/css" href="$home/openedit/styles/dtree.css">
<h4>[[Additional Categories]]</h4>

			$pages.include("$rootpath/tree.html" )
			</div>
	</td>
	</tr>
</table>


</div>