<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * Product media data template
 *
 * @var $block \Magento\Catalog\Block\Product\View\Gallery
 */

$_config       = $this->helper('Sm\Themecore\Helper\Data');
$zoom_enable   = $_config->getProductDetail('image_box_group/use_zoom_image');
$zoom_width    = $_config->getProductDetail('image_box_group/zoom_width');
$thumbstyle    = $_config->getProductDetail('image_box_group/thumbs_style');
$loop          = $_config->getProductDetail('image_box_group/image_loop');
$keyboard      = $_config->getProductDetail('image_box_group/image_keyboard');
$bigNav        = $_config->getProductDetail('image_box_group/image_navigation');
$fullscreen    = $_config->getProductDetail('image_box_group/image_fullscreen');
$thumbs_width  = $_config->getProductDetail('image_box_group/thumbs_width');
$thumbs_height = $_config->getProductDetail('image_box_group/thumbs_height');
$thumbs_nav    = $_config->getProductDetail('image_box_group/thumbs_navigation');
$breakpoints   = $_config->getProductDetail('image_box_group/breakpoints_width');
?>
<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask">
        <div class="loader">
            <img src="<?php /* @escapeNotVerified */
            echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */
                 echo __('Loading...') ?>">
        </div>
    </div>
</div>
<!--Fix for jumping content. Loader must be the same size as gallery.-->
<script>
    var config = {
            "width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
            "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
            "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
            "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height'); ?>
        },
        thumbBarHeight = 0,
        loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];

    if (config.navtype === 'horizontal') {
        thumbBarHeight = config.thumbheight;
    }

    loader.style.paddingBottom = (config.height / config.width * 100) + "%";
</script>
<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": {
					<?php if ($zoom_enable) { ?>
						"enabled": true,
					<?php } else { ?>
						"enabled": false,
					<?php } ?>
					
					"fullscreenzoom":"20",
					"top":"",
					"left":"",
					"height":"",
					
					"eventType":"hover",
					"width": <?php echo $zoom_width; ?>,
					"mode": "outside"
				},
                "data": <?php /* @escapeNotVerified */
    echo $block->getGalleryImagesJson(); ?>,
                "options": {
					<?php if ($thumbstyle == 'horizontal' || $thumbstyle == 'vertical') { ?>
						"nav": "thumbs",
						"navdir": "<?php echo $thumbstyle; ?>",
					<?php } else { ?>
						"nav": "dots",
					<?php } ?>
					
					<?php if ($loop) { ?>
						"loop": true,
					<?php } else { ?>
						"loop": false,
					<?php } ?>
					
					<?php if ($keyboard) { ?>
						"keyboard": true,
					<?php } else { ?>
						"keyboard": false,
					<?php } ?>
					
					<?php if ($bigNav) { ?>
						"arrows": true,
					<?php } else { ?>
						"arrows": false,
					<?php } ?>
					
					<?php if ($fullscreen) { ?>
						"allowfullscreen": true,
					<?php } else { ?>
						"allowfullscreen": false,
					<?php } ?>

                    <?php if (($block->getVar("gallery/caption"))): ?>
                        "showCaption": <?php /* @escapeNotVerified */
        echo $block->getVar("gallery/caption"); ?>,
                    <?php endif; ?>
					
                    "width": "<?php /* @escapeNotVerified */
    echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>",
					
					<?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
                        "height": <?php /* @escapeNotVerified */
        echo $block->getImageAttribute('product_page_image_medium', 'height')
            ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
                    <?php endif; ?>
					
                    "thumbwidth": "<?php echo $thumbs_width; ?>",
                    "thumbheight": "<?php echo $thumbs_height; ?>",

                    <?php if ($block->getVar("gallery/transition/duration")): ?>
                        "transitionduration": <?php /* @escapeNotVerified */
        echo $block->getVar("gallery/transition/duration"); ?>,
                    <?php endif; ?>
                    "transition": "<?php /* @escapeNotVerified */
    echo $block->getVar("gallery/transition/effect"); ?>",
					
					<?php if ($thumbs_nav) { ?>
						"navarrows": true,
					<?php } else { ?>
						"navarrows": false,
					<?php } ?>

                    "navtype": "<?php /* @escapeNotVerified */
    echo $block->getVar("gallery/navtype"); ?>",

					"thumbmargin": <?php echo $_config->getProductDetail('image_box_group/thumbs_margin'); ?>,
					"thumbborderwidth": <?php echo $_config->getProductDetail('image_box_group/thumbs_borderwidth'); ?>
                },
				
                "fullscreen": {
                    "nav": "thumbs",
                    <?php if ($block->getVar("gallery/fullscreen/loop")): ?>
                        "loop": <?php /* @escapeNotVerified */
        echo $block->getVar("gallery/fullscreen/loop"); ?>,
                    <?php endif; ?>
                    "navdir": "<?php /* @escapeNotVerified */
    echo $block->getVar("gallery/fullscreen/navdir"); ?>",
                    <?php if ($block->getVar("gallery/transition/navarrows")): ?>
                        "navarrows": <?php /* @escapeNotVerified */
        echo $block->getVar("gallery/fullscreen/navarrows"); ?>,
                    <?php endif; ?>
                    "navtype": "<?php /* @escapeNotVerified */
    echo $block->getVar("gallery/fullscreen/navtype"); ?>",
                    <?php if ($block->getVar("gallery/fullscreen/arrows")): ?>
                        "arrows": <?php /* @escapeNotVerified */
        echo $block->getVar("gallery/fullscreen/arrows"); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/fullscreen/caption")): ?>
                        "showCaption": <?php /* @escapeNotVerified */
        echo $block->getVar("gallery/fullscreen/caption"); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
                        "transitionduration": <?php /* @escapeNotVerified */
        echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
                    <?php endif; ?>
                    "transition": "<?php /* @escapeNotVerified */
    echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
                },
				
                "breakpoints":{
					"mobile":{
						"conditions":{
							"max-width":"<?php echo $breakpoints . 'px' ?>"
						},
						
						"options":{
							"options":{
								"nav":"dots"
							},
							
							"magnifierOpts": {
								"enabled": false
							}
						}
					}
				
				}
            }
        }
    }
</script>
