{*$product|@var_dump*}
{counter name="productPageSecondaryImagesCounter" assign="productPageSecondaryImagesCounter"}
{if 1 || !empty($product.secondary_images) && $productPageSecondaryImagesCounter == 1}
<div style="margin-left: 10px;" 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()
{  
$("div span").removeClass("active");
$(this).addClass("active")
$("div#gallery").css("display", "block")
$("div#video").css("display", "none")
}
  )
   $("span.video").click(
  function()
{  
$("div span").removeClass("active");
$(this).addClass("active")
$("div#video").css("display", "block")
$("div#gallery").css("display", "none")
}
  )
  }
  )
  </script>
  <style type="text/css">
  #video {
    padding: 10px 30px;
    background: #333333;
color: #fff;
border: 1px solid #fff000;/*#7b797b*/
  }
  #gallery {
    padding: 10px;
    /*background: grey;*/
color: #fff;
border: 1px solid #fff000;/*#7b797b*/
  }
  #video{ width:  340px; /*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{ 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; }
  </style>
  {/literal}
<fieldset>
 <div style="border-bottom: #E6E6E6 solid 1px;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: 400px; height: 400px;">
<div id="gallery" class="ad-gallery " style="display: block;width: 380px">
{if $product.out_of_stock}
<div id="sold">
</div>
{/if}
      <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>
{*$secondary_image|@print_r*}
{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}
{assign var="imageId" value="image-no-image-small"}
{assign var="bigimageId" value="image-no-image-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 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', '340',
'height', '350',
'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="350" 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="350" 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}