$(function(){
	$('.user-orderBox').on('click','.delete',function(){
		const del = $(this).parents('.orderProduct')
		const n = del.attr('data-group');
		const na = del.attr('data-groupn');
		const bg = `
			<p>${na+_jsLang.組}</p>
			<p>${_jsLang.商品尚未選購}</p>
		`
		const classStr = `pic-bg num_${n}`

		del.find('.title').remove();
		del.find('img').animate(
			{
				opacity:0
			},
			300,
			function(){
				del.html(bg).removeAttr('class style').addClass(classStr)
			}
		);
	});

	// $('.combosOuter .combosBox').each(function(i, ele) {
	// 	$(ele).owlCarousel({
	// 		dots: false,
	// 		margin: 20,
	// 		responsive: {
	// 				0:{
	// 					items : 2
	// 				},
	// 				450:{
	// 					items : 3
	// 				},
	// 				675:{
	// 					items : 4
	// 				},
	// 			},
	// 		nav: true,
	// 		navText: ['', ''],
	// 	});
	// })
});


// ==========================================================
//  商品展示區塊輪播、商品圖預覽功能、手機版放大功能、購物跳窗
// ==========================================================
;(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')
				}
			})
		}
	})
})($)







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





function smallPicBox(){
	/* 小圖hover效果及切換功能 */
	if($(".moreview .picitem ").length > 5){
		$(".productView .moreview").owlCarousel({
			dots: false,
			loop:false,
			items : 5,
			nav : true,
			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');
		});
	}

}

 /*影片效果*/
videoBox()