{known_script id="jquery" src=$ROOT_URL|@cat:"template-common/lib/jquery.packed.js"}
{known_script id="jquery.animated.innerfade" src=$AI_JQUERY_PATH|@cat:"jquery.animated.innerfade/js/jquery.animated.innerfade.js"}
{html_head}
<script type="text/javascript">
$(document).ready( function(){ldelim}
  $('ul#animated-panorama').animatedinnerfade({ldelim}
    speed: '{$speed}', 
    timeout: {$timeout}, 
    type: 'sequence', 
    containerheight: '{$height}px', 
    containerwidth: '{$containerwidth}px', 
    animationSpeed: {$animationSpeed},
    animationtype: 'fade',
    bgFrame: '{$AI_JQUERY_PATH|@cat:"jquery.animated.innerfade/img/frame.png"}',
    controlBox: 'auto',
    controlButtonsPath: '{$AI_JQUERY_PATH|@cat:"jquery.animated.innerfade/img"}',
    displayTitle: '{$displayTitle}'
   }); 
}); 
</script>  
<link rel="stylesheet" type="text/css" href="{$AI_JQUERY_PATH|@cat:'AI_jQuery.css'}">  
<style type="text/css">  
.innerfade-title {ldelim}
  background: transparent url({$AI_JQUERY_PATH|@cat:'jquery.animated.innerfade/img/title-bg.png'}); }
ul#animated-panorama {ldelim} width: {$containerwidth}px; }
.bg-frame img {ldelim} behavior: url({$AI_JQUERY_PATH|@cat:'jquery.animated.innerfade/win_png.htc'}); }
</style>
{/html_head}

<ul id="animated-panorama"> 
  <li><a href="{$U_HIGH}" title="" target="{$U_TRGT}">    
	<img src="{$SRC_IMG}" alt="{$ALT_IMG}" title="{$COMMENT_IMG}" width="{$WIDTH_IMG}" height="{$HEIGHT_IMG}" />
  </a></li>
  <li><a href="{$U_HIGH}" title="" target="{$U_TRGT}">    
	<img src="{$SRC_IMG}" alt="{$ALT_IMG}" title="{$COMMENT_IMG}" width="{$WIDTH_IMG}" height="{$HEIGHT_IMG}" />
  </a></li>
</ul>

{if isset($high)}
  <p><a href="javascript:phpWGOpenWindow('{$high.U_HIGH}','{$high.UUID}','scrollbars=yes,toolbar=no,status=no,resizable=yes')">{'picture_high'|@translate}</a></p>
{/if}