{if $_vars.view == 'categories'}

    {if $_config.categories_view=="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.width_categories, $_config.height_categories)} /></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.width_categories, $_config.height_categories)} /></a>
            {elseif $_Global.config.image_alt}{assign var="bar" value='images/'|cat:$_Global.config.image_alt}<a href="{linkToParams vars0=$categorie.id}"><img src="images/{$_Global.config.image_alt}" alt="" {$_Extra->media->image->showResized($bar, $_config.width_categories, $_config.height_categories)} /></a>{/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.js_categories != ''}{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.js_categories != ''}myEffect.start('opacity', 1);{/if}{literal}
				});
				category.addEvent('mouseout', function(e) {
					e.stop();
					category.removeClass('hover');
					{/literal}{if $_config.js_categories != ''}myEffect.start('opacity', 0.5);{/if}{literal}
				});
			});
			
        </script>
        {/literal}
    
    {elseif $_config.categories_view=="2"}
        <div class="cat_2">
        {foreach from=$_vars.categories key=i item=categorie}
        <div class="category">
        <div class="title"><a href="{linkToParams vars0=$categorie.id}">{$categorie.name}</a></div>
        <div class="description">{$categorie.description}</div>
		</div>
        {/foreach}
        {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}
        </div>
    
    {elseif $_config.categories_view=="3"}
        <div class="cat_3">
        {foreach from=$_vars.categories key=i item=categorie}
            <div class="category">
        		<table width="100%"><tr>
                <td valign="top" width="{$_config.width_categories}">
                    <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.width_categories, $_config.height_categories)} /></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.width_categories, $_config.height_categories)} /></a>
                    {elseif $_Global.config.image_alt}{assign var="bar" value='images/'|cat:$_Global.config.image_alt}<a href="{linkToParams vars0=$categorie.id}"><img src="images/{$_Global.config.image_alt}" alt="" {$_Extra->media->image->showResized($bar, $_config.width_categories, $_config.height_categories)} /></a>{/if}
                	</div>
                </td>
                <td valign="top">
                    {if $_config.show_category_title=='true'}<div class="title">{$categorie.name}</div>{/if}
                    <div class="description">{$categorie.description}</div>
                </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}
        
    {elseif $_config.categories_view=="4"}
        <div class="cat_4">
        {foreach from=$_vars.categories key=i item=categorie}
            <div class="category">
        		<table width="100%"><tr>
                <td width="{$_config.width_categories}">
                    <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.width_categories, $_config.height_categories)} /></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.width_categories, $_config.height_categories)} /></a>
                    {elseif $_Global.config.image_alt}{assign var="bar" value='images/'|cat:$_Global.config.image_alt}<a href="{linkToParams vars0=$categorie.id}"><img src="images/{$_Global.config.image_alt}" alt="" {$_Extra->media->image->showResized($bar, $_config.width_categories, $_config.height_categories)} /></a>{/if}
                	</div>
                </td>
                </tr><tr>
                <td valign="top">
                    {if $_config.show_category_title=='true'}<div class="title">{$categorie.name}</div>{/if}
                    <div class="description">{$categorie.description}</div>
                </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.link_page_before!=''}<a href="{linkToParams vars0='page' vars1=$_vars.cp-1}">{$_config.link_page_before}</a>{/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.link_page_separator}{/if}{/section}
    {if $_vars.cp<$smarty.section.pages.total && $_config.link_page_after!=''}<a href="{linkToParams vars0='page' vars1=$_vars.cp+1}">{$_config.link_page_after}</a>{/if}    
	</div>
    {/if}

{elseif $_vars.view == 'items'}

 	{if $_config.link_back_categories}
    	{if $_config.categories_view!="1"}
		    <div class="link_back_categories"><a href="{linkToParams vars0='page' vars1=$_vars.page_cat}">{$_config.link_back_categories}</a></div>
		{else}
            <div class="link_back_categories"><a href="{linkToParams}">{$_config.link_back_categories}</a></div>
        {/if}
    {/if}

   {if $_config.items_view=="1"}
        <div class="its_1">
        {foreach from=$_vars.items key=i item=item}
 		{if $item.image}{assign var="bar" value=$_module.ressources|cat:'items/'|cat:$item.image}
        {elseif $_config.image_item_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_item_alt}
        {elseif $_Global.config.image_alt}{assign var="bar" value='images/'|cat:$_Global.config.image_alt}
        {else}{assign var="bar" value=''}{/if}
        <div class="item">
        	<table width="100%"><tr>
            <td width="{$_config.width_items}" valign="top" align="center">
                {if $_config.seemore == 'true'}<a href="{linkToParams vars0='detail' vars1=$item.id vars2=$item.urlw}">{/if}
                    <div class="image"><img src="{$bar}" alt="" {$_Extra->media->image->showResized($bar, $_config.width_items, $_config.height_items)} /></div>
                {if $_config.seemore == 'true'}</a>{/if}
            </td><td valign="top">
            	<div class="title">{if $_config.seemore == 'true'}<a href="{linkToParams vars0='detail' vars1=$item.id vars2=$item.urlw}">{$item.title}</a>{else}{$item.title}{/if}</div>
            	<div class="description">{$item.description}</div>
                {if $item.images.1 && $_config.activate_highslide}
                    <div class="images">
                        {foreach from=$item.images item=image key=j}
                            {assign var="bar" value=$_module.ressources|cat:'items/'|cat:$image}
                            <a id="thumb{$item.id}{$j}" onclick="return hs.expand(this, foo{$item.id})" class="highslide" href="{$bar}">
                            <img src="{$bar}" alt="" {$_Extra->media->image->showResized($bar, $_config.width_hs_items, $_config.height_hs_items)} />
                            </a>
                        {assign var="bar" value=''}
                        {/foreach}
                    </div>
                
                    {literal}
                    <script type="text/javascript">
                        hs.registerOverlay({
                            slideshowGroup:'group{/literal}{$_module.idlinker}{$item.id}{literal}',
                            overlayId: 'controlbar{/literal}{$_module.unique}{literal}',
                            position: 'top right',
                            hideOnMouseOut: true
                        });
                        var foo{/literal}{$item.id}{literal} = {
                            slideshowGroup: 'group{/literal}{$_module.idlinker}{$item.id}{literal}',
                            outlineType: 'rounded-white'
                        }
                    </script>
                    {/literal}
                {/if}
                
            </td>
            </tr></table>
        </div>
        {foreachelse}
        <p align="center">{$_config.no_object}</p>
        {/foreach}
        <div style="clear:both;">&nbsp;</div>
        </div>
        {if $_config.activate_highslide}
        {assign var="foo" value="controlbar"|cat:$_module.unique}
        {$_Extra->scripts->highslide->controlbar($foo)}
        {/if}
    
    {elseif $_config.items_view=="2"}
        <div class="its_2">
        {foreach from=$_vars.items key=i item=item}
 		{if $item.image}{assign var="bar" value=$_module.ressources|cat:'items/'|cat:$item.image}
        {elseif $_config.image_item_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_item_alt}
        {elseif $_Global.config.image_alt}{assign var="bar" value='images/'|cat:$_Global.config.image_alt}
        {else}{assign var="bar" value=''}{/if}
		<div class="item">
        	<table width="100%"><tr>
            <td valign="top">
            	<div class="title">{if $_config.seemore == 'true'}<a href="{linkToParams vars0='detail' vars1=$item.id vars2=$item.urlw}">{$item.title}</a>{else}{$item.title}{/if}</div>
            	<div class="description">{$item.description}</div>
                {if $item.images.1 && $_config.activate_highslide}
                    <div class="images">
                        {foreach from=$item.images item=image key=j}
                            {assign var="bar2" value=$_module.ressources|cat:'items/'|cat:$image}
                            <a id="thumb{$item.id}{$j}" onclick="return hs.expand(this, foo{$item.id})" class="highslide" href="{$bar2}">
                            <img src="{$bar2}" alt="" {$_Extra->media->image->showResized($bar2, $_config.width_hs_items, $_config.height_hs_items)} />
                            </a>
                        {/foreach}
                        {assign var="bar2" value=''}
                    </div>
                
                    {literal}
                    <script type="text/javascript">
                        hs.registerOverlay({
                            slideshowGroup:'group{/literal}{$_module.idlinker}{$item.id}{literal}',
                            overlayId: 'controlbar{/literal}{$_module.unique}{literal}',
                            position: 'top right',
                            hideOnMouseOut: true
                        });
                        var foo{/literal}{$item.id}{literal} = {
                            slideshowGroup: 'group{/literal}{$_module.idlinker}{$item.id}{literal}',
                            outlineType: 'rounded-white'
                        }
                    </script>
                    {/literal}
                {/if}
            </td>
            <td width="{$_config.width_items}" valign="top" align="center">
                {if $_config.seemore == 'true'}<a href="{linkToParams vars0='detail' vars1=$item.id vars2=$item.urlw}">{/if}
                    <div class="image"><img src="{$bar}" alt="" {$_Extra->media->image->showResized($bar, $_config.width_items, $_config.height_items)} /></div>
                {if $_config.seemore == 'true'}</a>{/if}
            </td>
            </tr>
            </table>
        </div>
        {foreachelse}
        <p align="center">{$_config.no_object}</p>
        {/foreach}
        <div style="clear:both;">&nbsp;</div>
        </div>
        {if $_config.activate_highslide}
        {assign var="foo" value="controlbar"|cat:$_module.unique}
        {$_Extra->scripts->highslide->controlbar($foo)}
        {/if}
    
    {elseif $_config.items_view=="3"}
        <div class="its_3">
        {foreach from=$_vars.items key=i item=item}
 		{if $item.image}{assign var="bar" value=$_module.ressources|cat:'items/'|cat:$item.image}
        {elseif $_config.image_item_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_item_alt}
        {elseif $_Global.config.image_alt}{assign var="bar" value='images/'|cat:$_Global.config.image_alt}
        {else}{assign var="bar" value=''}{/if}
        <div class="item">
                {if $_config.seemore == 'true'}<a href="{linkToParams vars0='detail' vars1=$item.id vars2=$item.urlw}">{/if}
                	<div class="image"><img src="{$bar}" alt="" {$_Extra->media->image->showResized($bar, $_config.width_items, $_config.height_items)} /></div>
                {if $_config.seemore == 'true'}</a>{/if}
        </div>
        {foreachelse}
        <p align="center">{$_config.no_object}</p>
        {/foreach}
        
        <div style="clear:both;">&nbsp;</div>
        </div>
        {literal}
        <script language="javascript" type="text/javascript">
            $each($$('.item'), function(it){
				{/literal}{if $_config.js_items == 'true'}{literal}var myEffect = new Fx.Tween(it, {link:'cancel', duration:500}{/literal}).set('opacity', 0.6);{/if}{literal}
				it.addEvent('mouseover', function(e) {
					e.stop();
					it.addClass('hover');
					{/literal}{if $_config.js_items == 'true'}myEffect.start('opacity', 1);{/if}{literal}
				});
				it.addEvent('mouseout', function(e) {
					e.stop();
					it.removeClass('hover');
					{/literal}{if $_config.js_items == 'true'}myEffect.start('opacity', 0.5);{/if}{literal}
				});
			});
        </script>
        {/literal}

    {/if}
    
    {if $_vars.nbpages>1}
    <div class="items_pagination">
    {if $_vars.cp!=1 && $_config.link_page_before!=''}<a href="{linkToParams vars0=$_vars.categorie.id vars1='page' vars2=$_vars.cp-1}">{$_config.link_page_before}</a>{/if}
    {section name=pages loop=$_vars.nbpages}<a href="{linkToParams vars0=$_vars.categorie.id vars1='page' vars2=$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.link_page_separator}{/if}{/section}
    {if $_vars.cp<$smarty.section.pages.total && $_config.link_page_after!=''}<a href="{linkToParams vars0=$_vars.categorie.id vars1='page' vars2=$_vars.cp+1}">{$_config.link_page_after}</a>{/if}    
	</div>
    {/if}

{elseif $_vars.view == 'item'}

  	{if $_config.link_back_categorie}
    <div class="link_back_categorie"><a href="{linkToParams vars0=$_vars.categorie.id vars1='page' vars2=$_vars.page_items}">{$_config.link_back_categorie}</a></div>
    {/if}

    {literal}
    <script type="text/javascript">
    hs.registerOverlay({
        slideshowGroup:'group{/literal}{$_module.idlinker}{literal}',
        overlayId: 'controlbar{/literal}{$_module.unique}{literal}',
        position: 'top right',
        hideOnMouseOut: true
    });
    var foo = {
        slideshowGroup: 'group{/literal}{$_module.idlinker}{literal}',
        outlineType: 'rounded-white'
    }
    </script>
    {/literal}
    
    {if $_config.item_view=="1"}
		{if $_vars.item.image.url}{assign var="bar" value=$_module.ressources|cat:'items/'|cat:$_vars.item.image.url}
        {elseif $_config.image_item_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_item_alt}
        {elseif $_Global.config.image_alt}{assign var="bar" value='images/'|cat:$_Global.config.image_alt}{/if}
        <div class="it_1">
        <table width="100%">
        <tr><td valign="middle" width="{$_vars.item.maxw}">
        <div style="text-align:center; vertical-align:middle; height:{$_vars.item.maxh}px;" class="fullimage">
 		{if $_vars.item.image.url}<img src="{$bar}" id="imageover" alt="" width="{$_vars.item.image.width}" height="{$_vars.item.image.height}" />
        {elseif $_config.image_item_alt}<img src="{$bar}" id="imageover" alt="" {$_Extra->media->image->showResized($bar, $_config.width_large_item, $_config.height_large_item)}" />
        {elseif $_Global.config.image_alt}<img src="{$bar}" id="imageover" alt="" {$_Extra->media->image->showResized($bar, $_config.width_large_item, $_config.height_large_item)}" />{/if}  
        </div>
        <div class="images">
        {foreach from=$_vars.item.images item=image key=k}
        {assign var="bar" value=$_module.ressources|cat:'items/'|cat:$image.url}
        <a id="thumb{$k}" onclick="return hs.expand(this, foo)" class="highslide" href="{$bar}"><img src="{$bar}" alt="" class="highslide" onmouseover="changeImage_{$_module.idlinker}(this, {$image.width}, {$image.height})" {$_Extra->media->image->showResized($bar, $_config.width_small_item, $_config.height_small_item)} /></a>
        {/foreach}
        </div>
        {assign var="foo" value="controlbar"|cat:$_module.unique}
        {$_Extra->scripts->highslide->controlbar($foo)}
        </td><td valign="top">
        	<div class="title">{$_vars.item.title}</div>
            <div class="description">{$_vars.item.description}</div>
        </td></tr>
        </table>
        </div>
    
    {elseif $_config.item_view=="2"}
		{if $_vars.item.image.url}{assign var="bar" value=$_module.ressources|cat:'items/'|cat:$_vars.item.image.url}
        {elseif $_config.image_item_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_item_alt}
        {elseif $_Global.config.image_alt}{assign var="bar" value='images/'|cat:$_Global.config.image_alt}{/if}
        <div class="it_2">
        <table width="100%">
        <tr><td valign="top">
        	<div class="title">{$_vars.item.title}</div>
            <div class="description">{$_vars.item.description}</div>
        </td><td valign="middle" width="{$_vars.item.maxw}">
        <div style="text-align:center; vertical-align:middle; height:{$_vars.item.maxh}px;" class="fullimage">
 		{if $_vars.item.image.url}<img src="{$bar}" id="imageover" alt="" width="{$_vars.item.image.width}" height="{$_vars.item.image.height}" />
        {elseif $_config.image_item_alt}<img src="{$bar}" id="imageover" alt="" {$_Extra->media->image->showResized($bar, $_config.width_large_item, $_config.height_large_item)}" />
        {elseif $_Global.config.image_alt}<img src="{$bar}" id="imageover" alt="" {$_Extra->media->image->showResized($bar, $_config.width_large_item, $_config.height_large_item)}" />{/if}  
        </div>
        <div class="images">
        {foreach from=$_vars.item.images item=image key=k}
        {assign var="bar" value=$_module.ressources|cat:'items/'|cat:$image.url}
        <a id="thumb{$k}" onclick="return hs.expand(this, foo)" class="highslide" href="{$bar}"><img src="{$bar}" alt="" class="highslide" onmouseover="changeImage_{$_module.idlinker}(this, {$image.width}, {$image.height})" {$_Extra->media->image->showResized($bar, $_config.width_small_item, $_config.height_small_item)} /></a>
        {/foreach}
        </div>
        {assign var="foo" value="controlbar"|cat:$_module.unique}
        {$_Extra->scripts->highslide->controlbar($foo)}
        </td></tr>
        </table>
        </div>
    
    {elseif $_config.item_view=="3"}
		{if $_vars.item.image.url}{assign var="bar" value=$_module.ressources|cat:'items/'|cat:$_vars.item.image.url}
        {elseif $_config.image_item_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_item_alt}
        {elseif $_Global.config.image_alt}{assign var="bar" value='images/'|cat:$_Global.config.image_alt}{/if}
        <div class="it_3">
        <table width="100%">
        <tr><td valign="top"><div class="title">{$_vars.item.title}</div></td></tr>
        <tr><td height="{$_vars.item.maxh}" valign="middle" align="center"><div class="fullimage">
 		{if $_vars.item.image.url}<img src="{$bar}" id="imageover" alt="" width="{$_vars.item.image.width}" height="{$_vars.item.image.height}" />
        {elseif $_config.image_item_alt}<img src="{$bar}" id="imageover" alt="" {$_Extra->media->image->showResized($bar, $_config.width_large_item, $_config.height_large_item)}" />
        {elseif $_Global.config.image_alt}<img src="{$bar}" id="imageover" alt="" {$_Extra->media->image->showResized($bar, $_config.width_large_item, $_config.height_large_item)}" />{/if}  
        </div></td></tr>
        <tr><td valign="middle">
        <div class="images">
        {foreach from=$_vars.item.images item=image key=k}
        {assign var="bar" value=$_module.ressources|cat:'items/'|cat:$image.url}
        <a id="thumb{$k}" onclick="return hs.expand(this, foo)" class="highslide" href="{$bar}"><img src="{$bar}" alt="" class="highslide" onmouseover="changeImage_{$_module.idlinker}(this, {$image.width}, {$image.height})" {$_Extra->media->image->showResized($bar, $_config.width_small_item, $_config.height_small_item)} /></a>
        {/foreach}
        </div>
        {assign var="foo" value="controlbar"|cat:$_module.unique}
        {$_Extra->scripts->highslide->controlbar($foo)}
        </td></tr>
        <tr><td valign="top"><div class="description">{$_vars.item.description}</div></td></tr>
        </table>
        </div>
    {/if}
    
    {literal}
    <script language="javascript" type="text/javascript">
    function changeImage_{/literal}{$_module.idlinker}{literal}(elm, w, h) {
		$('imageover').src = elm.src;
		if(w) {
            $('imageover').setProperty('width', w);
        }
        if(h) {
            $('imageover').setProperty('height', h);
        }
    }
    </script>
    {/literal}
    
{/if}