{if sizeof($_vars.categories)>0}
{assign var=level value=$_vars.scategories.level}
<div class="cat_{$level}">

{if $_config.cat.$level.mode=="3"}
    <table width="100%"><tbody>
{/if}

{foreach from=$_vars.categories key=i item=category}
	
    {capture name="name"}
    <div class="name">
        {if $_config.cat.$level.name_link=='true'}<a href="{linkToParams vars0=$category.id vars1=$category.urlw}">{$category.name}</a>
        {else}{$category.name}{/if}
    </div>
    {/capture}
    
    {capture name="image"}
    <div class="image">
        {if $category.image}
        	{assign var="bar" value=$_module.ressources|cat:'categories/'|cat:$category.image}
            <a href="{linkToParams vars0=$category.id vars1=$category.urlw}">
            {if $_config.cat.$level.img_crop=='true'}<img src="images/{$_config.cat.$level.img_width}x{$_config.cat.$level.img_height}/{$_module.ressources}categories/{$category.image}" alt="" />
            {else}<img src="{$_module.ressources}categories/{$category.image}" alt="" {$_Extra->media->image->showResized($bar, $_config.cat.$level.img_width, $_config.cat.$level.img_height)} />{/if}
            </a>
        {elseif $_config.cat.$level.img_alt}{assign var="bar" value=$_module.custompath|cat:$_config.cat.$level.img_alt}<a href="{linkToParams vars0=$category.id}"><img src="{$_module.custompath}{$_config.cat.$level.img_alt}" alt="" {$_Extra->media->image->showResized($bar, $_config.cat.$level.img_width, $_config.cat.$level.img_height)} />{/if}
    </div>
    {/capture}
    
    {capture name="description"}
    <div class="description">
        {$category.description}
    </div>
    {/capture}
    
    {capture name="its_textlink"}
    <div class="its_link_text">
        <a href="{linkToParams vars0=$category.id vars1=$category.urlw}">{$_config.cat.$level.its_textlink}</a>
    </div>
    {/capture}
    
    {if $_config.cat.$level.mode=="1"}
        <div class="category">
            {if $_config.cat.$level.img_show == 'true'}{$smarty.capture.image}{/if}
            {if $_config.cat.$level.name_show=='true'}{$smarty.capture.name}{/if}
            {if $_config.cat.$level.description_show=='true'}{$smarty.capture.description}{/if}
		</div>
    {elseif $_config.cat.$level.mode=="2"}
        <div class="category">
            <table width="100%">
                <tr>
                    {if $_config.cat.$level.img_show == 'true'}
                    <td valign="top" width="{$_config.cat.$level.img_width}">
                        {$smarty.capture.image}
                    </td>
                    {/if}
                    <td valign="top">
                        {if $_config.cat.$level.name_show=='true'}{$smarty.capture.name}{/if}
                        {if $_config.cat.$level.description_show=='true'}{$smarty.capture.description}{/if}
                        {if !empty($_config.cat.$level.its_textlink)}{$smarty.capture.its_textlink}{/if}
                    </td>
                </tr>
            </table>
        </div>
    {elseif $_config.cat.$level.mode=="3"}
        <tr class="category">
            {if $_config.cat.$level.img_show == 'true'}
            <td valign="middle" height="{$_config.cat.$level.img_height}" width="{$_config.cat.$level.img_width}">
                {$smarty.capture.image}
            </td>
            {/if}
            {if $_config.cat.$level.name_show=='true'}
            <td valign="middle">
                {$smarty.capture.name}
            </td>
            {/if}
            {if $_config.cat.$level.description_show=='true'}
            <td valign="middle">
                {$smarty.capture.description}
            </td>
            {/if}
        </tr>
    {/if}
    
{/foreach}
{if $_config.cat.$level.mode=="3"}
	</tbody></table>
{else}
    <div style="clear:both; height:0;">&nbsp;</div>
{/if}
</div>

{if $_config.cat.$level.mode=="1"}
    {literal}
    <script language="javascript" type="text/javascript">
    $jQuery('.category').each(function(){
 {/literal}{if $_config.cat_opacity == 'true'}{literal}var myEffect = new Fx.Tween(category, {link:'cancel', duration:500}).set('opacity', 0.5);{/literal}{/if}{literal}
        $jQuery(this).mouseenter(function() {
            $jQuery(this).addClass('hover');
       {/literal}{if $_config.cat_opacity == 'true'}myEffect.start('opacity', 1);{/if}{literal}
        }).mouseleave(function() {
            $jQuery(this).removeClass('hover');
                {/literal}{if $_config.cat_opacity == 'true'}myEffect.start('opacity', 0.5);{/if}{literal}
        });
    });
    </script>
    {/literal}
{elseif $_config.cat.$level.mode=="2" || $_config.cat.$level.mode=="3"}
    {literal}
    <script language="javascript" type="text/javascript">
        $each($$('.category'), function(category, i){
            category.addEvent('mouseover', function(e) {
                e.stop();
                category.addClass('hover');
            });
            category.addEvent('mouseout', function(e) {
                e.stop();
                category.removeClass('hover');
            });
        });
    </script>
    {/literal}
{/if}
{/if}