{if $block->configuration.images|@count == 1}
    <div  id="headerImagesWrapper">
		{if $block->configuration.images[0].image_link}<a href="{$block->configuration.images[0].image_link}">{/if}
		<img src="{$SHOP_DIR}images/site/{$block->configuration.images[0].image_name}" alt="{$block->configuration.images[0].image_name}" />
		{if $block->configuration.images[0].image_link}</a>{/if}
	</div>
{else}
	<!-- Header images -->
	<div  id="headerImagesWrapper">
		<div id="headerImages"></div>
		<div id="headerTrigger"></div>
	</div>
	<div  id="headerImagesWrapperFooter">
		<a href="#" title="back" id="headerImagesBackward"></a>
		<a href="#" title="forward" id="headerImagesForward"></a>
	</div>

	<div id="tmp_holder_headerimage"></div>

	<script type="text/javascript" src="{$PARENT_THEME_DIR}/media/js/rs.animator.js"></script>
	<script type="text/javascript">
		var homeAnimationImages = [];
		var nObj;
		
		{foreach $block->configuration.images as $image}
			nObj = {
				"imagefile": "{$SHOP_DIR}images\/site\/{$image.image_name}",
				"animation": "SCROLL",
				"direction": null,
				"speed": "0",
				"pause": "0",
				"description": ""
			};
			homeAnimationImages.push(nObj);
		{/foreach}
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			// Header animation
			if (typeof homeAnimationImages != 'undefined' && homeAnimationImages) {
				if (homeAnimationImages.length > 1) {
					var tmp_img = $('<img />').attr({
						'src': homeAnimationImages[0].imagefile,
						'id': 'tmp_img'
					}).load(function() {
						$('#tmp_holder_headerimage').append(tmp_img);
						var image_height = $('#tmp_img').height();

						$('#headerImagesWrapper').css({
							'height': image_height + 'px'
						});
						
						$('#headerImages').rsanimator({
							'images': homeAnimationImages,
							'width': {$system_configuration.site_content_banner_width|default:722},
							'height': image_height,
							'indicator': {
								'container': $('#headerTrigger'),
								'elementClass': 'item',
								'elementClassActive': 'current'
							}
						});

					});

				} else if (homeAnimationImages.length > 0) {
					$('#headerImages').css({
						'backgroundImage': 'url(' + homeAnimationImages[0].imagefile + ')'
					});
				}

				$('#headerImagesForward').click(function(e) {
					e.preventDefault();
					$('#headerImages').rsanimator('skip', 'forward');
				});

				$('#headerImagesBackward').click(function(e) {
					e.preventDefault();
					$('#headerImages').rsanimator('skip', 'backward');
				});
			}
		});
	</script>
{/if}