<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
    $store = Mage::app()->getStore();
    $code  = $store->getCode();
?>
<?php
    $product_page_type = $_helper->productAttribute($_product, $_product->getData('product_page_type'), 'product_page_type');
    if(!$product_page_type)
        $product_page_type = Mage::getStoreConfig("porto_settings/product_view/type",$code);
    $aspect_ratio = Mage::getStoreConfig("porto_settings/product_view/aspect_ratio", $code);
    $ratio_width = 600;
    $ratio_height = 600;
    if(Mage::getStoreConfig("porto_settings/product_view/ratio_width", $code))
        $ratio_width = Mage::getStoreConfig("porto_settings/product_view/ratio_width", $code);
    if(!$aspect_ratio){
        if(Mage::getStoreConfig("porto_settings/product_view/ratio_height", $code))
            $ratio_height = Mage::getStoreConfig("porto_settings/product_view/ratio_height", $code);
    }
    $ratio = $ratio_height / $ratio_width;
    $rnd_str = rtrim(base64_encode(md5(microtime())),"=");
    $hide_smallthumb_single = Mage::getStoreConfig("porto_settings/product_view/hide_single_smallthumb", $code);
    if(!$hide_smallthumb_single)
        $hide_smallthumb_single = "false";
    else
        $hide_smallthumb_single = "true";
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
    <?php if($product_page_type == 'carousel'): ?>
    <div class="product-image-carousel owl-carousel owl-middle-narrow">
<?php foreach ($this->getGalleryImages() as $_image): ?>
    <?php if(substr($_image->getLabel(), -7) != "-swatch"): ?>
        <div class="item">
        <?php
            if(!$aspect_ratio)
                $image_src = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize($ratio_width, $ratio_height);
            else
                $image_src = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($ratio_width);
        ?>
            <img src="<?php echo $image_src; ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
        </div>
    <?php endif; ?>
<?php endforeach; ?>
    </div>
    <?php elseif($product_page_type == 'grid'): ?>
<div class="row">
<?php foreach ($this->getGalleryImages() as $_image): ?>
    <?php if(substr($_image->getLabel(), -7) != "-swatch"): ?>
        <div class="col-sm-6">
            <div class="product-image-grid">
        <?php
            if(!$aspect_ratio)
                $image_src = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize($ratio_width, $ratio_height);
            else
                $image_src = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($ratio_width);
        ?>
                <img src="<?php echo $image_src; ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
            </div>
        </div>
    <?php endif; ?>
<?php endforeach; ?>
</div>
    <?php elseif($product_page_type == 'sticky_left_right' || $product_page_type == 'sticky_right'): ?>
<?php foreach ($this->getGalleryImages() as $_image): ?>
    <?php if(substr($_image->getLabel(), -7) != "-swatch"): ?>
        <?php
            if(!$aspect_ratio)
                $image_src = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize($ratio_width, $ratio_height);
            else
                $image_src = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($ratio_width);
        ?>
            <div class="product-image-list">
                <img src="<?php echo $image_src; ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
            </div>
    <?php endif; ?>
<?php endforeach; ?>
    <?php else: ?>
<ul id="etalage_<?php echo $rnd_str; ?>">
<?php foreach ($this->getGalleryImages() as $_image): ?>
    <?php if(substr($_image->getLabel(), -7) != "-swatch"): ?>
    <li>
        <?php
            if(!$aspect_ratio)
                $image_src = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize($ratio_width, $ratio_height);
            else
                $image_src = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($ratio_width);
        ?>
        <a rel="gallery" class="fancy-images fancy-images_<?php echo $rnd_str; ?>" href="<?php echo $image_src; ?>"><span class="glyphicon glyphicon-search"></span></a>
        <img class="etalage_thumb_image" src="<?php echo $image_src; ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
        <img class="etalage_source_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(100, 100*$ratio)?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
    </li>
    <?php endif; ?>
<?php endforeach; ?>
</ul>
    <?php endif; ?>
<?php else: ?>
    <?php if($product_page_type == 'carousel'): ?>
    <div class="product-image-carousel owl-carousel">
        <div class="item">
        <?php
            if(!$aspect_ratio)
                $image_src = $this->helper('catalog/image')->init($_product, 'image')->resize($ratio_width, $ratio_height);
            else
                $image_src = $this->helper('catalog/image')->init($_product, 'image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($ratio_width);
        ?>
            <img src="<?php echo $image_src; ?>"/>
        </div>
    </div>
    <?php elseif($product_page_type == 'grid'): ?>
<div class="row">
    <div class="col-sm-6">
        <div class="product-image-grid">
    <?php
        if(!$aspect_ratio)
            $image_src = $this->helper('catalog/image')->init($_product, 'image')->resize($ratio_width, $ratio_height);
        else
            $image_src = $this->helper('catalog/image')->init($_product, 'image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($ratio_width);
    ?>
            <img src="<?php echo $image_src; ?>"/>
        </div>
    </div>
</div>
    <?php elseif($product_page_type == 'sticky_left_right' || $product_page_type == 'sticky_right'): ?>
    <?php
        if(!$aspect_ratio)
            $image_src = $this->helper('catalog/image')->init($_product, 'image')->resize($ratio_width, $ratio_height);
        else
            $image_src = $this->helper('catalog/image')->init($_product, 'image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($ratio_width);
    ?>
        <div class="product-image-list">
            <img src="<?php echo $image_src; ?>"/>
        </div>
<?php else: ?>
<ul id="etalage_<?php echo $rnd_str; ?>" class="<?php echo $thumb_type; ?>">
    <li>
        <?php
            if(!$aspect_ratio)
                $image_src = $this->helper('catalog/image')->init($_product, 'image')->resize($ratio_width, $ratio_height);
            else
                $image_src = $this->helper('catalog/image')->init($_product, 'image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($ratio_width);
        ?>
        <a class="fancy-images fancy-images_<?php echo $rnd_str; ?>" href="<?php echo $image_src; ?>"><span class="glyphicon glyphicon-search"></span></a>
        <img class="etalage_thumb_image" src="<?php echo $image_src; ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>"/>
        <img class="etalage_source_image" src="<?php echo (!$aspect_ratio)?$this->helper('catalog/image')->init($_product, 'image')->resize(100, $ratio_height/$ratio_width*100):$this->helper('catalog/image')->init($_product, 'image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(100);?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>" />
    </li>
</ul>
<?php endif; ?>
<?php endif; ?>

<?php if($product_page_type == 'carousel'): ?>
<script type="text/javascript">
    jQuery(function($){
        $(".product-image-carousel.owl-carousel").owlCarousel({
            itemsCustom: [ [0, 2], [320, 1], [480, 2], [768, 2], [992, 3], [1280, 3] ],
            responsiveRefreshRate: 50,
            slideSpeed: 200,
            paginationSpeed: 500,
            scrollPerPage: false,
            stopOnHover: true,
            rewindNav: true,
            rewindSpeed: 600,
            pagination: false,
            navigation: true,
            autoPlay: false,
            navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
        });
    });
</script>
<?php elseif($product_page_type == 'grid'): ?>
<script type="text/javascript">
</script>
<?php elseif($product_page_type == 'sticky_right' || $product_page_type == 'sticky_left_right'): ?>
<script type="text/javascript">
</script>
<?php else: ?>
<div class="etalage-control">
<?php if (!Mage::getStoreConfig("porto_settings/general/rtl",$code)) : ?>
    <a href="javascript:void(0)" class="etalage-prev"><i class="icon-angle-left"></i></a>
    <a href="javascript:void(0)" class="etalage-next"><i class="icon-angle-right"></i></a>
<?php else: ?>
    <a href="javascript:void(0)" class="etalage-prev"><i class="icon-angle-right"></i></a>
    <a href="javascript:void(0)" class="etalage-next"><i class="icon-angle-left"></i></a>
<?php endif; ?>
</div>
<?php
    $zoom_disabled = Mage::getStoreConfig("porto_settings/product_view/disable_product_zoom", $code);
    $zoom_type = Mage::getStoreConfig("porto_settings/product_view/zoom_type", $code);
    $thumb_type = Mage::getStoreConfig("porto_settings/product_view/thumbnail_image_type", $code);
?>
<div class="product-view-zoom-area">
</div>
<script type="text/javascript">
    var zoom_enabled = false;
    var zoom_type = 0;
    jQuery(document).ready(function(){
        reloadEtalage();
        <?php if(!$zoom_disabled && $product_page_type != "fullwidth"): ?>
        jQuery(".product-img-box .etalage li.etalage_thumb").zoom({
        <?php if($zoom_type == 1): ?>
            target: jQuery(".product-view-zoom-area"),
        <?php endif; ?>
            touch:false
        });
        <?php if($product_page_type != "fullwidth"): ?>
        zoom_enabled = true;
        <?php endif; ?>
        <?php if($zoom_type == 1): ?>
        zoom_type = 1;
        <?php endif; ?>
        <?php endif; ?>
        setTimeout(function(){reloadEtalage();}, 500);
        jQuery(window).resize(function(e){
            reloadEtalage();
            var width = jQuery(this).width();
        });
        jQuery('.etalage-prev').on('click', function(){ etalage_<?php echo $rnd_str; ?>_previous(); });
        jQuery('.etalage-next').on('click', function(){ etalage_<?php echo $rnd_str; ?>_next(); });
        jQuery("a.fancy-images_<?php echo $rnd_str; ?>").fancybox();
        function reloadEtalage(){
            var src_img_width = <?php echo $ratio_width; ?>;
            var src_img_height = "auto";
            var ratio_width = <?php echo $ratio_width; ?>;
            var ratio_height = <?php echo $ratio_height; ?>;
            var width, height, thumb_position, small_thumb_count;
            small_thumb_count = 4;
            <?php if(($thumb_type == "vertical" && $product_page_type != "fullwidth") || $product_page_type == "wide_grid"): ?>
            width = (jQuery(".product-view .product-img-box").width()-15)*small_thumb_count/(small_thumb_count+1);
            height = width*ratio_height/ratio_width;
            <?php if(!Mage::getStoreConfig("porto_settings/general/rtl", $code)): ?>
            thumb_position = "left";
            <?php else: ?>
            thumb_position = "right";
            <?php endif; ?>
            if(jQuery(window).width()<768){
                width = jQuery(".product-view .product-img-box").width()-8;
                height = "auto";
                thumb_position = "bottom";
            }
            <?php else: ?>
            width = jQuery(".product-view .product-img-box").width()-8;
            height = "auto";
            thumb_position = "bottom";
            <?php endif; ?>

            jQuery('#etalage_<?php echo $rnd_str; ?>').etalage({
                thumb_image_width: width,
                thumb_image_height: height,
                source_image_width: src_img_width,
                source_image_height: src_img_height,
                zoom_area_width: width,
                zoom_area_height: height,
                zoom_enable: false,
                small_thumbs:small_thumb_count,
                smallthumb_hide_single: <?php echo $hide_smallthumb_single; ?>,
                smallthumbs_position: thumb_position,
                smallthumb_inactive_opacity: 1,
                small_thumbs_width_offset: 0,
                show_icon: false,
                autoplay: false
            });
            if(jQuery(window).width()<768){
				var first_img = jQuery("#etalage_<?php echo $rnd_str; ?> img.etalage_thumb_image").first();
				var tmp_img = jQuery('<img src="" alt=""/>');
				tmp_img.attr("src",first_img.attr("src"));
				tmp_img.unbind("load");
				tmp_img.bind("load",function(){
					jQuery("#etalage_<?php echo $rnd_str; ?>").height(Math.round(width*this.naturalHeight/this.naturalWidth+8)+"px");
				});
				jQuery('#etalage_<?php echo $rnd_str; ?>').removeClass("vertical");
				jQuery(".product-view .product-img-box li.etalage_thumb").css({left:0});
			}
            <?php if(($thumb_type != "vertical" || $product_page_type == "fullwidth") && $product_page_type != "wide_grid"): ?>
            var first_img = jQuery("#etalage_<?php echo $rnd_str; ?> img.etalage_thumb_image").first();
            var tmp_img = jQuery('<img src="" alt=""/>');
            tmp_img.attr("src",first_img.attr("src"));
            tmp_img.unbind("load");
            tmp_img.bind("load",function(){
                jQuery("#etalage_<?php echo $rnd_str; ?>").height(Math.round(width*this.naturalHeight/this.naturalWidth+8)+"px");
            });
            <?php else: ?>
            jQuery('#etalage_<?php echo $rnd_str; ?>').addClass("vertical");
            <?php endif; ?>
        }
    });
</script>
<?php endif; ?>
<?php echo $this->getChildHtml("after"); ?>