{*
//////////////////////
VIGNETTE
//////////////////////
*}
{if $_config.mode_cats=="1"}
    <div class="cat_1">
    {foreach from=$_vars.categories key=i item=categorie}
    <div class="category">
    <div class="image">
        {if $categorie.image}{assign var="bar" value=$_module.ressources|cat:'categories/'|cat:$categorie.image}<a href="{linkToParams vars0=$categorie.id}"><img src="{$_module.ressources}categories/{$categorie.image}" alt="" {$_Extra->media->image->showResized($bar, $_config.cat_width, $_config.cat_height)} /></a>
        {elseif $_config.image_categorie_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_categorie_alt}<a href="{linkToParams vars0=$categorie.id}"><img src="{$_module.custompath}{$_config.image_categorie_alt}" alt="" {$_Extra->media->image->showResized($bar, $_config.cat_width, $_config.cat_height)} />{/if}
    </div>
    </div>
    {/foreach}
    <div style="clear:both;">&nbsp;</div>
    </div>
    {literal}
    <script language="javascript" type="text/javascript">
        $each($$('.category'), function(category, i){
            {/literal}{if $_config.cat_opacity == 'true'}{literal}var myEffect = new Fx.Tween(category, {link:'cancel', duration:500}).set('opacity', 0.5);{/literal}{/if}{literal}
            category.addEvent('mouseover', function(e) {
                e.stop();
                category.addClass('hover');
                {/literal}{if $_config.cat_opacity == 'true'}myEffect.start('opacity', 1);{/if}{literal}
            });
            category.addEvent('mouseout', function(e) {
                e.stop();
                category.removeClass('hover');
                {/literal}{if $_config.cat_opacity == 'true'}myEffect.start('opacity', 0.5);{/if}{literal}
            });
        });
    </script>
    {/literal}

{*
//////////////////////
IMAGE + TITRE + DESCRIPTION
//////////////////////
*}
{elseif $_config.mode_cats=="2"}
    <div class="cat_2">
    {foreach from=$_vars.categories key=i item=categorie name="fe_cats"}
    <div class="category">
        <table width="100%">
            <tr>
            	{if $_config.cat_show_img == 'true'}
                <td valign="top" width="{$_config.cat_width}">
                    <div class="image">
                    {if $categorie.image}{assign var="bar" value=$_module.ressources|cat:'categories/'|cat:$categorie.image}<a href="{linkToParams vars0=$categorie.id}"><img src="{$_module.ressources}categories/{$categorie.image}" alt="" {$_Extra->media->image->showResized($bar, $_config.cat_width, $_config.cat_height)} /></a>
                    {elseif $_config.image_categorie_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_categorie_alt}<a href="{linkToParams vars0=$categorie.id}"><img src="{$_module.custompath}{$_config.image_categorie_alt}" alt="" {$_Extra->media->image->showResized($bar, $_config.cat_width, $_config.cat_height)} /></a>{/if}
                    </div>
                </td>
                {/if}
                <td valign="top">
                    {if $_config.cat_show_title=='true'}
                        <div class="title">
                    	{if $_config.cat_link_title=='true'}<a href="{linkToParams vars0=$categorie.id}">{$categorie.name}</a>
                        {else}{$categorie.name}{/if}
                        </div>
                    {/if}
                    {if $_config.cat_show_desc=='true'}<div class="description">{$categorie.description}</div>{/if}
                    {if !empty($_config.cat_link_seeitems)}<div class="link_seeitems"><a href="{linkToParams vars0=$categorie.id}">{$_config.cat_link_seeitems}</a></div>{/if}
                </td>
            </tr>
        </table>
    </div>
    {/foreach}
    </div>
    {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 $_vars.nbpages > 1}
<div class="cats_pagination">
{if $_vars.cp != 1 && $_config.cat_pag_prev!=''}<a href="{linkToParams vars0='page' vars1=$_vars.cp-1}">{$_config.cat_pag_prev}</a>{$_config.cat_pag_sep}{/if}
{section name=pages loop=$_vars.nbpages}<a href="{linkToParams vars0='page' vars1=$smarty.section.pages.iteration}" {if $smarty.section.pages.iteration == $_vars.cp}class="current"{/if}>{$smarty.section.pages.iteration}</a>{if !$smarty.section.pages.last}{$_config.cat_pag_sep}{/if}{/section}
{if $_vars.cp<$smarty.section.pages.total && $_config.cat_pag_next!=''}{$_config.cat_pag_sep}<a href="{linkToParams vars0='page' vars1=$_vars.cp+1}">{$_config.cat_pag_next}</a>{/if}    
</div>
{/if}