<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     rwd_default
 * @copyright   Copyright (c) 2006-2014 X.commerce, Inc. (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */

/* @var $this Mage_Catalog_Block_Product_View_Media */
?>
<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>

<div class="product-image product-image-zoom">
    <div class="product-image-gallery">
        <img id="image-main"
             class="gallery-image visible"
             src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
             alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
             title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />

        <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
            <?php if ($this->isGalleryImageVisible($_image)): ?>
            <img id="image-<?php echo $i; ?>"
                 class="gallery-image"
                 src="<?php echo $this->getGalleryImageUrl($_image); ?>"
                 data-zoom-image="<?php echo  $this->getGalleryImageUrl($_image); ?>" />
            <?php endif; ?>
        <?php $i++; endforeach; ?>
    </div>
</div>

<?php  if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
 <div class="slider-items-products jcarousel-container">
   <div class="jcarousel-clip jcarousel-clip-horizontal product-image-thumbs">
<ul id="more">
     <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
       <?php if ($this->isGalleryImageVisible($_image)): ?>
        <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal"  style="float: left; list-style: none outside none;">
          <a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
            <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>"
                     alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
          </a>
        </li>
      <?php endif; ?>
    <?php $i++; endforeach; ?>
</ul>
  </div> <!--product-flexslider hidden-buttons-->
    <div style="display: block;" class="jcarousel-prev jcarousel-prev-horizontal"></div>
    <div style="display: block;" class="jcarousel-next jcarousel-next-horizontal"></div>
 </div> <!--slider-items-products-->
</div> <!--more-views-->
<?php endif; ?>

<?php echo $this->getChildHtml('after'); ?>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#more').jcarousel({
                scroll:1
    });
});
</script>



