{if $_config.it_link_backitems}
<div class="link_backitems"><a href="{linkToParams vars0=$_vars.categorie.id vars1='page' vars2=$_vars.it_pag}">{$_config.it_link_backitems}</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}

{*
//////////////////////
HIGHSLIDE + DESCRIPTION GAUCHE OU DROITE
//////////////////////
*}
{if $_config.mode_it=="1"}
    {if $_vars.item.images.0.url}{assign var="bar" value=$_module.ressources|cat:'items/'|cat:$_vars.item.images.0.url}
    {elseif $_config.image_item_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_item_alt}{/if}
    <div class="it_1">
    <table width="100%">
        <tr>
            <td valign="middle" width="{$_config.it_iwidth}">
                <div style="text-align:center; vertical-align:middle; height:{$_config.it_iheight}px;" class="fullimage">
                {if $_vars.item.images.0.url}<img src="{$bar}" id="imageover" alt="" {$_Extra->media->image->showResized($bar, $_config.it_iwidth, $_config.it_iheight)} />
                {elseif $_config.image_item_alt}<img src="{$bar}" id="imageover" alt="" {$_Extra->media->image->showResized($bar, $_config.it_iwidth, $_config.it_iheight)}" />{/if}  
                </div>
            </td>
            <td valign="top" rowspan="2">
                <div class="title">{$_vars.item.title}{if $_config.it_ref_pos == 'right' && $_vars.item.reference!=''}<span class="reference">{$_config.it_ref_bef}{$_vars.item.reference}{$_config.it_ref_aft}</span>{/if}</div>
                {if $_config.it_ref_pos == 'bottom' && $_vars.item.reference!=''}<div class="reference">{$_config.it_ref_bef}{$_vars.item.reference}{$_config.it_ref_aft}</div>{/if}
                {if $_config.it_price_pos == 'bottom' && $_vars.item.prix!=''}<div class="price">{$_config.it_price_bef}{$_vars.item.prix}{$_config.it_price_aft}</div>{/if}
                <div class="description">{$_vars.item.description}</div>
            </td>
            {if $_config.it_price_pos == 'right' && $_vars.item.prix!=''}
            <td class="price" rowspan="2">
            <div class="price">{$_config.it_price_bef}{$_vars.item.prix}{$_config.it_price_aft}</div>
            </td>
            {/if}
        </tr>
        <tr>
            <td>
                <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.it_hs_iwidth, $_config.it_hs_iheight)} /></a>
                {/foreach}
                </div>
                {assign var="foo" value="controlbar"|cat:$_module.unique}
                {$_Extra->scripts->highslide->controlbar($foo)}
            </td>
        </tr>
    </table>
    </div>

{*
//////////////////////
HIGHSLIDE + DESCRIPTION BAS
//////////////////////
*}
{elseif $_config.mode_it=="2"}
    {if $_vars.item.images.0.url}{assign var="bar" value=$_module.ressources|cat:'items/'|cat:$_vars.item.images.0.url}
    {elseif $_config.image_item_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_item_alt}{/if}
    <div class="it_2">
    <table width="100%">
        <tr>
            <td valign="middle" width="{$_config.it_iwidth}">
            <table style="height:{$_config.it_iheight}px; vertical-align:middle; text-align:center">
            <tr><td>
                <div style="text-align:center; vertical-align:middle; height:{$_config.it_iheight}px;" class="fullimage">
                {if $_vars.item.image.url}<img src="{$bar}" id="imageover" alt="" width="{$__config.it_iwidth}" height="{$_config.it_iheight}" />
                {elseif $_config.image_item_alt}<img src="{$bar}" id="imageover" alt="" {$_Extra->media->image->showResized($bar, $_config.it_iwidth, $_config.it_iheight)}" />{/if}  
                </div>
            </td></tr></table>
            </td>
        </tr>
        <tr>
        	<td>
                <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.it_hs_iwidth, $_config.it_hs_iheight)} /></a>
                {/foreach}
                </div>
                
                {assign var="foo" value="controlbar"|cat:$_module.unique}
                {$_Extra->scripts->highslide->controlbar($foo)}
            </td>
        </tr>
        <tr>
            <td valign="top">
                <div class="title">{$_vars.item.title}</div>
                <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}