{if !empty($category.secondary_images)}
<div style="margin-left: 5px;" class="catalog-secondary-images clearfix catalog-page-block {class file=$smarty.template editable=true}">
	{literal}
	<link href="content/vendors/jquery/lightbox/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="content/vendors/jquery/ad_gallery/jquery.ad-gallery.css">
	<script type="text/javascript" src="content/vendors/jquery/lightbox/jquery.lightbox-0.5.js"></script>	
	<script type="text/javascript" src="content/vendors/jquery/ad_gallery/jquery.ad-gallery.js"></script>
	<script type="text/javascript">
		$(function() {
		$('a.imglite').live('click',function(){
		var number = $(this).attr('data-num');
		
		$('#gallery_pop li').eq(number).find('a').trigger('click');
		});
		$('#gallery_pop a').lightBox();
		});
		$(function() {
		$('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
		$('img.image1').data('ad-title', 'Title through $.data');
		$('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
		$('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
		var galleries = $('.ad-gallery').adGallery(  {slideshow: {
		enable: true,
		autostart: true,
		speed: 5000 
		}
		}
		);// end adgallery parameter list
		$('#toggle-slideshow').click(
		 function() {
		   galleries[0].slideshow.toggle();
		   return false;
		 }
		);
		$('#toggle-description').click(
		 function() {
		   if(!galleries[0].settings.description_wrapper) {
		     galleries[0].settings.description_wrapper = $('#descriptions');
		   } else {
		     galleries[0].settings.description_wrapper = false;
		   }
		   return false;
		 }
		);
		});
		$(document).ready(
		function()
		{
		$("span.gallery").click(
		function()
		{  
		$("div span").removeClass("active");
		$(this).addClass("active")
		$("div#gallery").css("display", "block")
		$("div#video").css("display", "none")
		}
		)
		
		  $("span.videoclick").click(
		function()
		{  
		$("div span").removeClass("active");
		$(this).addClass("active")
		$("div#video").css("display", "block")
		$("div#gallery").css("display", "block")
		}
		)
		}
		)
	</script>
	<style type="text/css">
		#gallery {
		padding: 10px;
		background-color: #383838;
		color: #fff;
		border: 1px solid #1a1a1a;/*#7b797b*/
		}
		#video{  /*width:  340px;height: 450px; */}
		.ad-gallery .ad-thumbs li a img{ width: 120px;height:90px; }
		#descriptions {
		position: relative;
		height: 50px;
		background: #EEE;
		margin-top: 10px;
		padding: 10px;
		overflow: hidden;
		}
		#descriptions .ad-image-description {
		position: absolute;
		}
		#descriptions .ad-image-description .ad-description-title {
		display: block;
		}
		fieldset{ margin:0px 0 0 0; border-top: #fab403 solid 0px; border-right: none; border-left: none; border-bottom: none; float: left; }
		fieldset div{  margin-left: 0px; border-bottom: #fab403 solid 0px;}
		fieldset div a{  display: inline;cursor: pointer; /*border: 1px solid #fab403; */ color:#ffffff; font-weight: bold; font-size: 16px; /*padding: 5px 5px 5px 5px;
		background-image:url("images/right.png");*/
		}
		fieldset div a span.active {background:none;padding: 5px ;border: 1px solid #D3D3D3;color: #555555;font-weight: normal;}
		fieldset div span{ padding: 5px ;background-color:#E6E6E6;
		border: 1px solid #D3D3D3;
		color: #555555;
		font-weight: normal;
		}
		fieldset div a:hover span{ padding: 5px ;background-color:#DADADA;
		}
		fieldset div a:hover span.active{ padding: 5px ;background:none;
		}
		.prod-media{ position: absolute; visibility: hidden; }
		.videoclick{ float:right; padding:0;}
		.videoclick:hover{ float:right; padding:0;}
	</style>
	{/literal}
	<fieldset>
		<div style="padding:0px 0px 2px 5px;">
			<!--<a href="javascript:void(0)"><span class="active gallery">Gallery</span></a>-->
			<!--{if $product.videos }
				<a href="javascript:void(0)"><span class="video">Videos</span></a>
				{/if}-->
		</div>
		<p></p>
		<!--<h3 class="product-page-block-header">{$msg.product.secondary_images}</h3>-->
		<div style="position: relative; clear: both;width: 625px; height: 465px;">
			<div id="gallery" class="ad-gallery " style="display: block;width: 550px;">								
				<div class="ad-image-wrapper">
				</div>
				<div class="ad-controls">
				</div>
				<div class="ad-nav">
					<div class="ad-thumbs">
						<ul class="ad-thumb-list">															
							{foreach from=$category.secondary_images item="secondary_image"}
							<li>								
								{if !$is_print_version}
								{if $zoom_option_secondary == "magicthumb"}
								<a href="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" class="MagicThumb">
								<img {if !$secondary_image.thumb_src}width="{$secondary_image.thumb_size}" height="{$secondary_image.thumb_size}"{/if} src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" alt="{$secondary_image.alt_text}"/>
								<span>{$product.title|htmlspecialchars}</span>
								</a>
								{elseif $zoom_option_secondary == "imagelayover"}
								{if $secondary_image.img_src}
								<a href="{$secondary_image.img_src}" rel="lightbox">
								<img {if !$secondary_image.thumb_src}width="{$secondary_image.thumb_size}"{/if} src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" alt="{$secondary_image.alt_text}" />
								</a>
								{else}
								{assign var="imageId" value="image-no-image-small"}
								{assign var="bigimageId" value="image-no-image-big"}
								{assign var="imageId2" value="coming-soon"}
								{assign var="bigimageId2" value="coming-soon-big"}
								<a href="{if $secondary_image.img_src!=''} {$secondary_image.img_src} {else} {$designImages.$bigimageId.content}   {/if}">
									<!--  images/products/noimage.jpg -->
									<img  src="{if $secondary_image.thumb_src!=''}{$secondary_image.thumb_src}{elseif $secondary_image.img_src!=''}{$secondary_image.img_src} {else} {$designImages.$imageId.content} {/if}"  alt="{$secondary_image.alt_text}"/>
								</a>
								{/if}
								{else}
								{assign var="imageId" value="image-no-image-small"}
								{assign var="bigimageId" value="image-no-image-big"}
								{assign var="imageId2" value="coming-soon"}
								{assign var="bigimageId2" value="coming-soon-big"}
								<a href="{if $secondary_image.img_src!=''} {$secondary_image.img_src} {else} {$designImages.$bigimageId.content}    {/if}">
									<!--  images/products/noimage.jpg -->
									<img  src="{if $secondary_image.thumb_src!=''}{$secondary_image.thumb_src}{elseif $secondary_image.img_src!=''}{$secondary_image.img_src} {else} {$designImages.$imageId.content} {/if}"  alt="{$secondary_image.alt_text}"/>
								</a>
								<!--<a href="{$designImages.$bigimageId.content}">
									<img class="image-no-image-small {class file=$smarty.template editable=true}" src="{$designImages.$imageId.content}"/>
									</a> -->
								{/if}
								{else}
								<img {if !$secondary_image.thumb_src}{$secondary_image.thumb_size}{/if} src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" alt="{$secondary_image.alt_text}"/>
								{/if}
							</li>
							{/foreach}							
						</ul>
					</div>
				</div>
			</div>			
		</div>
	</fieldset>
</div>
{/if}
<div style="display:none;">
	<div id="gallery_pop">
		<ul>			
			{foreach from=$category.secondary_images item="secondary_image"}
			<li>
				<a href="{$secondary_image.img_src}" rel="lightbox">
				<img {if !$secondary_image.thumb_src}width="{$secondary_image.thumb_size}"{/if} src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" alt="{$secondary_image.alt_text}" />
				</a>
			</li>
			{/foreach}			
		</ul>
	</div>
</div>