{if $listing.pictures.0}
	<table border="0" cellspacing="0" cellpadding="0">
	<tr>
	<td width="350" height="350" style="border:1px solid #d2d2d2;" valign="middle" align="center">
	{foreach from=$listing.pictures key=key item=picture name=picimages }
		<div  id="pic{$smarty.foreach.picimages.iteration}" style="display:none;">
			<img src="{$picture.picture_url}" border="0" title="{$picture.caption}" alt="{$picture.caption}" />
		</div>
	{/foreach}
	</td>
	</tr>
	</table>
	
	<div style="width:350px; margin-top:3px;">
		{foreach from=$listing.pictures key=key item=picture  name=thumimages }
			<img id="thu{$smarty.foreach.thumimages.iteration}" onclick="SetVisible_144({$smarty.foreach.thumimages.iteration})" style="cursor: pointer;" src="{$picture.thumbnail_url}" border="0" title="{$picture.caption}" alt="{$picture.caption}" />
		{/foreach}
	</div>
	
	<script language="JavaScript" type="text/javascript">
		var ids ={$smarty.foreach.picimages.iteration};
		function SetVisible_144 (id) 
		{ldelim}
			var i, invisible, noborder;
			for (i = 1; i <= ids; i++)
			{ldelim}
				invisible = document.getElementById("pic"+i);
				invisible.style.display = "none";
				noborder = document.getElementById("thu"+i);
				noborder.style.border = "1px solid #bbbbbb";
			{rdelim} 
			if (typeof(id)== 'undefined')
			{ldelim}
				id=1;
			{rdelim}
			var picture = document.getElementById ("pic"+id);
				picture.style.display = "inline";
			var thumb = document.getElementById ("thu"+id);
				thumb.style.border = "1px solid #db0309";
		{rdelim} 
</script>

<script language="JavaScript" type="text/javascript">
	SetVisible_144 ();
</script>
{/if}