(function($){
	/*為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($) {
	if($('.moreview').children('.picitem').length > 3) {
		$('.moreview').owlCarousel({
			margin: 5,
			dots: false,
			nav: true,
			navText: ['', ''],
			responsive: {
				0: {
					items: 4
				},
				576: {
					items: 5
				},
				675: {
					items: 3
				},
				768: {
					items: 4
				},
				992: {
					items: 5
				},
			}
		})
	}

	$(document).on('click', '.moreview .picitem', function(e) {
		e.preventDefault()
		let _this = $(this),
			moreview = _this.parents('.moreview'),
			idx = 0
		
		if(moreview.hasClass('owl-carousel')){
			idx = _this.parent('.owl-item').index()
		}else{
			idx = _this.index()
		}
		//const thisTarget = _this.attr('data-target')
		moreview.find('.now').removeClass('now')
		_this.addClass('now')
		_this.parents('.product-detail').find('.item-box').eq(idx).addClass('now')
										.siblings('.item-box').removeClass('now')
	})

	let previewStep = ''
	$(window).on('resize', function(e) {
		if($(this).width() >= 992 && previewStep !== 'desktop') {
			previewStep = 'desktop'

			// 預覽圖 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')
			})

			// 手機版放大圖
			$('.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() < 992 && previewStep !== 'mobile') {
			previewStep = 'mobile'

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

			// 手機版放大圖
			$('.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')
				}
			})
		}
	})
})($)




// ==========================================================
// 	瀏覽紀錄等區塊輪播
// ==========================================================
;(function($, jQuery, window, document) {
	$('.info-panel .panel-products').each(function(i, ele) {
		$(ele).owlCarousel({
			nav: true,
			dots: false,
			navText: ['', ''],
			margin: 15,
			responsive: {
				0: {
					items: 2
				},
				576: {
					items: 3
				},
				768: {
					items: 4
				},
				992: {
					items: 5
				},
				1380: {
					items: 6
				},
			},
		})
	})

})($, jQuery, window, document)






// ==========================================================
// 	區塊panel開關
// ==========================================================
;(function($) {
    $('body').on('click', '.info-panel .panel-head', function(e) {
    	$(this).parents('.info-panel').toggleClass('in-hidden');	
    })
})($)





// ==========================================================
// 	手機版快速購物按鈕
// ==========================================================
;(function($) {
    const limitTarget = $('.tag-box') 
    const limitStart = limitTarget.offset().top + 200
    //const limitEnd = limitStart + limitTarget.height()

    $(window).on('scroll', function() {
        if($(this).scrollTop() <= limitStart && $(this).width() < 675) {
            $('.selectbox-button').addClass('hide')
            $('.popup-buttonbox').removeClass('hide-to-smd')
        } else {
            $('.selectbox-button').removeClass('hide')
            $('.popup-buttonbox').addClass('hide-to-smd')
        }
    })
    //點規格後跳窗
    let commonShopcartStep = false
    $(document).on('eventChangeSpec', function(e, btn){
        if(!commonShopcartStep && $('.quickShop-box').length <= 0 && $(window).width() < 675) {
            commonShopcartStep = true
            jQuery.ajax({
                url:  Project_Country + 'ajax/ajax_popup_shopbox.php',
                type: 'POST',
                dataType: 'html',
                data: {
                    SID: btn.attr('SID'),
                    serial: btn.attr('serial'),
                    Amount: btn.parent().find('.amountBox').val(),
                },
            }).done(function(res) {
                if($('.quickShop-box'))
                $('body').addClass('overflow-hidden').append(res)
            }).fail(function(x, y, z) {
                console.log(x)
            }).always(function() {
                commonShopcartStep = false
            })
        }
    })
})($)





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





function smallPicBox(){
	/* 小圖hover效果及切換功能 */
	if($(".moreview").hasClass('owl-carousel')){
        $(".productView .moreview").owlCarousel({
			margin: 5,
			dots: false,
			nav: true,
			navText: ['', ''],
			responsive: {
				0: {
					items: 4
				},
				576: {
					items: 5
				},
				675: {
					items: 3
				},
				768: {
					items: 4
				},
				992: {
					items: 5
				},
			}
		}).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');
			if($(window).width() < 992){
				$(".productImg").trigger("to.owl.carousel", [now, 250, true])
			}
		})
		.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');
			if($(window).width() < 992){
				$(".productImg").trigger("to.owl.carousel", [now, 250, true])
			}
		})
		.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');
		});
	}

}

videoBox()