<ul  class="brand-cat-list clearfix">
	{* define the function *} 
	{function name=brandcategories level=0}
		{foreach from=$data item="productCategory"} 
			<li  data-level="{$level}" rel="{$level}"  class="level-{$level}">
				{if $level==1}
					{html->anchor href="brand/{$brandKey}/{$productCategory.productCategoryID|sef_path:'catalog'}" class="Fsbold" content="{$productCategory.productCategoryName}"}
				{else}
					{html->anchor href="brand/{$brandKey}/{$productCategory.productCategoryID|sef_path:'catalog'}"  content="{$productCategory.productCategoryName}"}
				{/if}
			{if isset($productCategory['children']) && is_array($productCategory['children']) && !empty($productCategory['children'])}
				{assign var="elementCount" value=$productCategory['children']|count/3}
				{assign var="elementCount" value=$elementCount|ceil}
				{if $elementCount>0}
					{if $level<1}<span class="expand collaps"></span>
					<div class="brand-cat-group clearfix" > 
					{/if}
						{assign var="productCategoryChildren" value=array_chunk($productCategory['children'], 3)}
						{for $counter=0; $counter<$elementCount ; $counter++}
						<ul class="categoryUL_{$productCategory.productCategoryKey}"> 
						{call name=brandcategories data=$productCategoryChildren[$counter] level=$level+1} 
						</ul>
						{/for}
					{if $level<1}
					</div>
						
					{/if}
					
				{else}
					<ul > 
					{call name=brandcategories data=$productCategory['children'] level=$level+1} 
					</ul>
				{/if}
			{else}
				{if (is_array($productCategory)) && (isset($productCategory['menuItemID'])) && (is_numeric($productCategory['menuItemID']))}
				</li>	
				{/if}
			{/if}
		{/foreach}  
	{/function}
	{call brandcategories data=$CategoryMenus} 
</ul>
<script type="text/javascript">
$(document).ready(function(e) {
   $(".collaps").click(function() {
		$(this).toggleClass("expand");
		$(this).next(".brand-cat-group").slideToggle();
	});
});	
</script>


		
