{counter name="productPageSecondaryImagesCounter" assign="productPageSecondaryImagesCounter"}
{if 1 || !empty($product.secondary_images) && $productPageSecondaryImagesCounter == 1}
<div class="product-secondary-images clearfix product-page-block {class file=$smarty.template editable=true}">
{literal}
<link rel="stylesheet" type="text/css" href="content/vendors/jquery/ad_gallery/jquery.ad-gallery.css">
<script type="text/javascript" src="content/vendors/jquery/ad_gallery/jquery.ad-gallery.js"></script>
  <script type="text/javascript">
  $(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()
{  
$("legend span").removeClass("active");
$(this).addClass("active")
$("div#gallery").css("display", "block")
$("div#video").css("display", "none")
}
  )
   $("span.video").click(
  function()
{  
$("legend span").removeClass("active");
$(this).addClass("active")
$("div#video").css("display", "block")
$("div#gallery").css("display", "none")
}
  )
  }
  )
  </script>
  <style type="text/css">
  #gallery, #video {
    padding: 30px;
    background: #000;
color: #fff;
  }
  #video{ width:  540px; height: 450px; }
  .ad-gallery .ad-thumbs li a img{ width: 75px; }
  #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{  border-top: #fab403 solid 1px; border-right: none; border-left: none; border-bottom: none; float: left; }
fieldset legend{  margin-left: 10px; }
fieldset legend span{ padding: 5px; display: inline; border: 1px solid #fab403; font-weight: bold; font-size: 16px; 
cursor: pointer;
}
fieldset legend span.active{ background: #ccc; 
}
fieldset legend a:hover span{ background: #ccc; color: #0e4369;
}
.prod-media{ position: absolute; visibility: hidden; }
  </style>
  {/literal}
<fieldset>
 <legend>
<a href="javascript:void(0)"><span class="active gallery">Gallery</span></a>
{if $product.videos }
&nbsp;&nbsp;
<a href="javascript:void(0)"><span class="video">Videos</span></a>
{/if}
</legend> 
<p>&nbsp;</p>
<h3 class="product-page-block-header">{$msg.product.secondary_images}</h3>
<div style="position: relative; clear: both;">
<div id="gallery" class="ad-gallery " style="display: block;">
      <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=$product.secondary_images item="secondary_image"}
<li>
{if !$is_print_version}
           {if $zoom_option_secondary == "magicthumb"}
               <a href="{$secondary_image.img_src}" class="MagicThumb">
<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}"/>
<span>{$product.title|htmlspecialchars}</span>
</a>
{elseif $zoom_option_secondary == "imagelayover"}
<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}
<!--<a href="javascript:showImage('{$url_base}{$secondary_image.img_src}','{$secondary_image.width}','{$secondary_image.height}');">-->
<a href="{$secondary_image.img_src}">
<img  src="{if $secondary_image.thumb_src}{$secondary_image.thumb_src}{else}{$secondary_image.img_src}{/if}" height=50  alt="{$secondary_image.alt_text}"/>
</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 id="video" class="product-demos "  style="display: none;">
{if $product.videos }
{literal}
<script type="text/javascript" src="content/vendors/swfobject/AC_RunActiveContent.js"></script>
<script language="javascript">
var req_url = '{/literal}{$smarty.request.url}{literal}';
req_url = req_url.replace("url=", "");
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '550',
'height', '480',
'src', 'flash/viru.swf',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'transparent',
'devicefont', 'false',
'FlashVars','xmlfile='+ site_base_url + req_url +'?ajax_request=1&xmlfiletype=Default',// Dynamic Path to Xml File
'id', 'viru',
'bgcolor', '#ffffff',
'name', 'viru',
'menu', 'true',
'allowFullScreen', 'true',
'allowScriptAccess','sameDomain',
'movie', 'flash/viru',
'salign', ''
); //end AC code
}
</script>
{/literal}
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="480" id="viru" align="middle">
<param name="FlashVars" value="xmlfile='+ site_base_url + req_url +'?ajax_request=1&xmlfiletype=Default" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="movie" value="flash/viru.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed FlashVars="xmlfile='+ site_base_url + req_url +'?ajax_request=1&xmlfiletype=Default" src="viru.swf" wmode="transparent" quality="high" bgcolor="#ffffff" width="550" height="480" name="viru" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>
{/if}{* 0 condition closed *}
</div>
</div>
</fieldset>
</div>
{/if}