{{:media}}
	{{~exec(function() {
		helpers.var.rank = data.rank;
		helpers.var.itemsToShow;

		<!-- helpers.var.productType = data.productType; -->


		if (helpers.var.rank === 1) {
			itemsToShow = 5;
		}
		else if (helpers.var.rank === 2) {
			itemsToShow = 5;
		}
		else if (helpers.var.rank === 3) {
			if (helpers.var.productType === 1 || helpers.var.productType === 3 || helpers.var.productType === 11) {
				itemsToShow = 10;
			}
			else {
				itemsToShow = 5;
			}
			
		}
		else if (helpers.var.rank === 4) {
			if (helpers.var.productType === 1 || helpers.var.productType === 3 || helpers.var.productType === 11) {
				itemsToShow = 20;
			}
			else {
				itemsToShow = 10;
			}
		}



		helpers.var.media = [];

		function generateVideo() {
			data.social.forEach(function(val) {
				if (val.service === "youtube" && val.url !== undefined) {
					var videoInfo = helpers.plugins.videoLib.parseVideoUrl(val.url);

					if (videoInfo.success === false) { return; }

					var resource = helpers.plugins.cloudinary.createResource({ imageUrl : "https://img.youtube.com/vi/" + videoInfo.id + "/hqdefault.jpg" });
					helpers.var.media.push({ type : "video", resource : resource, mediadesc : val.url, videoid : videoInfo.id});
				}
			
			});
		}


			if (helpers.var.rank === 2 || helpers.var.rank === 3 || helpers.var.rank === 4) { 
				generateVideo();
			}
		


		data.media.forEach(function(val) {
			if (val.mediatype === "Image" && val.mediaurl !== undefined) {
				var resource = helpers.plugins.cloudinary.createResource({ imageUrl : val.mediaurl });
				if (val.mediadesc !== undefined) {
					var mediaDescription = val.mediadesc;

				}
				else {
					
					var mediaDescription = data.productTitle;
				}
				
				helpers.var.media.push({ type : "image", resource : resource, mediadesc : mediaDescription });
			}

		});


	})}}
	
{{/media}}

{{:~var.media}}

	<div class="detail-gallery">
		<div class="gallery-expand">
			{{#~var.media.slice(0, itemsToShow)}}
				{{:~equal(data.type, "image")}}
					<picture>
						<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 1220, height: 822, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
						<img src="{{resource.getThumbnailUrl({ width : 1220, height : 822, crop : 'fill', fetch_format: 'jpg' })}}" alt="{{mediadesc}}" title="{{mediadesc}}"/>
					</picture>
				{{/}}
			{{/}}

			{{#~var.media.slice(0, itemsToShow)}}
				{{:~equal(data.type, "video")}}
					<picture class="product-video">
						<iframe class="mfp-iframe" src="https://www.youtube.com/embed/{{videoid}}?enablejsapi=1" frameborder="0" allowfullscreen data-sv-play></iframe>
						<!--<button class="shared-play-button" aria-label="play video"><i class="fa fa-play" aria-hidden="true"></i></button>-->
						<div class="mouseoverlay"></div>
					</picture>
				{{/}}
			{{/}}

		</div>
		<div class="gallery-additional-thumbnails">
			{{#~var.media.slice(0, itemsToShow)}}
				{{:~equal(data.type, "image")}}
					<picture>
						<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 100, height: 67, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
						<img src="{{resource.getThumbnailUrl({ width : 100, height : 67, crop : 'fill', fetch_format: 'jpg'  })}}" alt="{{mediadesc}}" title="{{mediadesc}}" />
					</picture>
				{{/}}
			{{/}}
				
			{{#~var.media.slice(0, itemsToShow)}}
				{{:~equal(data.type, "video")}}
					<picture>
						<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 100, height: 67, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
						<img src="{{resource.getThumbnailUrl({ width : 100, height : 67, crop : 'fill' })}}" alt="{{mediadesc}}" title="{{mediadesc}}" />
						<button class="shared-play-button" aria-label="play video"><i class="fa fa-play" aria-hidden="true"></i></button>
					</picture>
				{{/}}
			{{/}}

		</div>
		<div class="slick-arrows">
			<div class="arrow prev"><i class="fas fa-arrow-left" aria-hidden="true"></i></div>
			<div class="arrow next"><i class="fas fa-arrow-right" aria-hidden="true"></i></div>
		</div>
	</div>
	
	<script>
		require(["jquery", "sv_siteSlick"], function() {
				var root = $(".detail-gallery");
				var slide = root.find(".gallery-expand");

				var slideAdditional = root.find(".gallery-additional-thumbnails");
			
				slide.slick({
					prevArrow : root.find(".arrow.prev"),
					nextArrow : root.find(".arrow.next"),
					draggable : true,
					infinite: true
			
				});


				 $(slide).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
 					var mySlideNumber = nextSlide;
 					$('.gallery-additional-thumbnails picture').removeClass('selected');
 					$('.gallery-additional-thumbnails picture').eq(mySlideNumber).addClass('selected');
					$(this).find('.mouseoverlay').show();

					$('.shared-detail  .detail-gallery .gallery-expand.slick-slider .slick-list .slick-track .slick-slide.product-video iframe').each(function(){
					  this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
					});
				});


				$(".gallery-additional-thumbnails picture:first-of-type").addClass("selected");
		
				$(".gallery-additional-thumbnails picture").on("click", (function(e){ 
					e.preventDefault(); 
					$(".gallery-additional-thumbnails picture").removeClass('selected');
					$(this).addClass('selected');
					var slideIndex = $(this).index(); 
					$(slide).slick('slickGoTo', slideIndex, false);
				}));

				$(".shared-detail  .detail-gallery .gallery-expand.slick-slider .slick-list .slick-track .slick-slide.product-video").on("click", (function(e){ 
					$(this).find('.mouseoverlay').hide();
				}));

				if($('div.detail-gallery div.slick-track picture').length <= 1) {
					$('div.detail-gallery div.slick-arrows').hide();
				}


		});
	</script>

{{/}}