(function($){
  	/* 回到購買處 */
  	$('.gobuy').on('click',function(){
  		var tol = $(window).height();
  		console.log(tol);
  		var buy = $('.button-line').offset().top-tol+50 ;
  	    $("html,body").scrollTop(buy);
  	});
	/*為JQ添加naturalWidth()和naturalHeight()方法，抓取圖片原始尺寸*/
    var
    props = ['Width', 'Height'],
    prop;


    while (prop = props.pop()) {
    (function (natural, prop) {
      $.fn[natural] = (natural in new Image()) ?
      function () {
      return this[0][natural];
      } :
      function () {
      var
      node = this[0],
      img,
      value;

      if (node.tagName.toLowerCase() === 'img') {
        img = new Image();
        img.src = node.src,
        value = img[prop];
      }
      return value;
      };
    }('natural' + prop, prop.toLowerCase()));
    }
}(jQuery));






// ==========================================================
// 	商品展示區塊輪播、商品圖預覽功能、手機版放大功能、購物跳窗
// ==========================================================
;(function($) {
	let previewStep = ''
	$(window).on('resize', function(e) {
		if($(this).width() >= 660 && previewStep !== 'desktop') {
			previewStep = 'desktop'

			// 輪播
			if($('.productImg').data('owl.carousel')) {
				$('.productImg').data('owl.carousel').destroy()
			}

			if($('.moreview').children('.picitem').length > 5) {
				$('.moreview').owlCarousel({
					items: 5,
					margin: 10,
					dots: false,
					nav: true,
					navText: ['', ''],
				})
			}

			// 預覽圖 hover 事件
			$('.moreview').on('mouseenter', '.picitem', function(e) {
				e.preventDefault()
				let targetIndex = null

				if($(this).parent().hasClass('moreview')) {
					targetIndex = $(this).index()
				} else {
					targetIndex = $(this).parent('.owl-item').index()
				}
				
				$('.productImg').find('.item-box').eq(targetIndex).addClass('in-hover')
								.siblings('.item-box').removeClass('in-hover')
			}).on('mouseleave', function(e) {
				e.preventDefault()

				$('.productImg').find('.item-box').removeClass('in-hover')
			})

			// 預覽圖 click 事件
			$('.moreview').on('click', '.picitem', function(e) {
				e.preventDefault()
				let targetIndex = null

				if($(this).parent().hasClass('moreview')) {
					targetIndex = $(this).index()
				} else {
					targetIndex = $(this).parent('.owl-item').index()
				}
				$(this).parents('.moreview').find('.picitem').removeClass('now')
					   .end().end().addClass('now')
				$('.productImg').find('.item-box').eq(targetIndex).addClass('now')
								.siblings('.item-box').removeClass('now')
			})

			// 手機版放大圖
			$('.productImg').off('click', '.item-box > a')
			$('body').off('click', '.zoomIn-wrapper')
			$('.zoomIn-wrapper').remove()
			$('body').removeClass('overflow-hidden')

			//購買跳窗
	        $(".selectPopupBox").removeClass('is-show');
			$('body').off('click', '.selectbox-button');
		} else if($(this).width() < 660 && previewStep !== 'mobile') {
			previewStep = 'mobile'

			// 輪播
			if($('.productImg').children().length > 1) {
				$('.productImg').owlCarousel({
					items: 1,
					dots: false,
					nav: true,
					navText: ['', ''],
					loop: true,
					autoplay: 5000,
				})
			}

			if($('.moreview').data('owl.carousel')) {
				$('.moreview').data('owl.carousel').destroy()
			}

			// 預覽圖 hover 事件
			$('.moreview').off('mouseenter', '.picitem')
						  .off('mouseleave')

			// 預覽圖 click 事件
			$('.moreview').off('click', '.picitem')

			// 手機版放大圖
			$('.productImg').on('click', '.item-box > a', function(e) {
				e.preventDefault()
				const zoomTarget = $(this).attr('href')
				const zoomInDom = `
					<div class="zoomIn-wrapper">
						<button class="zoomIn-closer" type="button">close</button>
						<div class="zoomIn-content">
							<img src="${zoomTarget}">
						</div>
					</div>`
				$('body').append(zoomInDom).addClass('overflow-hidden')
			})

			$('body').on('click', '.zoomIn-wrapper', function(e) {
				if(e.target === e.currentTarget || $(e.target).hasClass('zoomIn-closer')) {
					e.preventDefault()
					$('.zoomIn-wrapper').fadeOut('400').remove()
					$('body').removeClass('overflow-hidden')
				}
			})

			//開啟購買跳窗
			$('body').on('click', '.selectbox-button', function(e){
				e.preventDefault();
				$('body').addClass('overflow-hidden')
				$('.selectPopupBox').addClass('is-show');
			});
		}
	})
})($)




// ==========================================================
// 	瀏覽紀錄等區塊輪播(手機版)
// ==========================================================
;(function($, jQuery, window, document) {
	let owlStep = ''
	$(window).on('resize', function(e) {
		e.preventDefault()
		if($(this).width() >= 992 && owlStep !== 'desktop') {
			owlStep = 'desktop'
			$('.product-panel .panel-content').each(function(i, ele) {
				if($(ele).data('owl.carousel')){
					$(ele).data('owl.carousel').destroy()
				}
			})
		} else if($(this).width() < 992 && owlStep !== 'mobile') {
			owlStep = 'mobile'
			$('.product-panel .panel-content').each(function(i, ele) {
				$(ele).owlCarousel({
					nav: true,
					dots: false,
					navText: ['', ''],
					autoplay: 5000,
					margin: 20,
					responsive: {
						0: {
							items: 2
						},
						576: {
							items: 3
						},
						768: {
							items: 4
						},
					},
				})
			})
		}
	})
    // $()
})($, jQuery, window, document)






// ==========================================================
// 	trigger function
// ==========================================================
;(function($, jQuery, window, document) {
    $(window).trigger('resize')
})($, jQuery, window, document)





function smallPicBox(){
	/* 小圖hover效果及切換功能 */
	if($(".moreview .picitem ").length > 5){
        $(".productView .moreview").owlCarousel({
 			loop:false,
			items : 5,
			nav : true,
			dots: false,
			navText: ['', ''],
		}).on('mouseleave','.owl-stage-outer', function() {
			$(".productView .zoonbox").removeAttr('style');
		})
		.on('click','.owl-item', function() {
			var now = $(this).index();
			$(".productView .owl-item").not(this).find('.picitem').removeClass('now');
			$(this).find('.picitem').addClass('now');
			$(".productView .zoonbox").removeClass('now').eq(now).addClass('now');
			})
		.on('mouseenter','.owl-item', function() {
			var now = $(this).index();
			//var nowbox = $('.productImg .now').index();
			//console.log(nowbox );
			$(".productView .zoonbox").css('display','none').eq(now).css('display','block');
			 	//$('.productImg .now').css('display','none');
		})
		.on('mouseleave','.owl-item', function() {
			var now = $(this).index();
			$(".productView .zoonbox").eq(now).css('display','none');
		});
	}else{
		$(".productView .moreview")
		.on('mouseleave', function() {
			$(".productView .zoonbox").removeAttr('style');
		})
		.on('click','.picitem', function() {
			var now = $(this).index();
			$(".productView .picitem").removeClass('now');
			$(this).addClass('now');
			$(".productView .zoonbox").removeClass('now').eq(now).addClass('now');
			})
		.on('mouseenter','.picitem', function() {
			var now = $(this).index();
			//var nowbox = $('.productImg .now').index();
			//console.log(nowbox );
			$(".productView .zoonbox").css('display','none').eq(now).css('display','block');
			 	//$('.productImg .now').css('display','none');
		})
		.on('mouseleave','.picitem', function() {
			var now = $(this).index();
			$(".productView .zoonbox").eq(now).css('display','none');
		});
	}

}

 /*影片效果*/
function videoBox(){
	//影片控制
	$(".moreview").on('click','.video_control',function(){
	  var video = document.getElementById("Video");
	  if(video.paused){
		  $(this).addClass('fa-pause').removeClass('fa-play');
		  video.play();
	  }else{
		  $(this).addClass('fa-play').removeClass('fa-pause');
		  video.pause();
	  }
	});

	//影片預覽圖
	if(document.getElementById("Video")){
		document.getElementById("Video").oncanplay=function(){
			var video = $("#Video").get(0);
			var canvas = document.getElementById("video_review");
				canvas.getContext('2d').drawImage(video, 0, 0, 66, 92);
		};
	}
}