;(function($) {
	if($("#picSlides .picItem").length>1){
		$("#picSlides").owlCarousel({
				loop : true,
				items : 1,
				nav : true,
				autoplay:true,
				autoplayTimeout:5000,
				dots: false,
				navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
		});
	 }
})($)

;(function($) {
	const slideWrapper = $(".user-orderBox")
	$('body').on('click', '.orderBox-toggle', function(e) {
		e.preventDefault();

		if($(window).width() < 768) {
			slideWrapper.toggleClass('in-active');
		}
	});

	setTimeout(function() {
		slideWrapper.removeClass('in-active')
	}, 1000)
})($)


$(function(){
	const owl6 = $(".user-list6 .orderSlide");

	owl6.owlCarousel({
		nav : true,
		dots: false,
		navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
		margin: 10,
		responsive: {
			0: {
				autoWidth: true,
			},
			768: {
				items: 4,
			},
			992: {
				items: 5,
			},
			1200:{
				items : 6
			},
		},

	});
	
	var owl5 = $(".user-list5 .orderSlide");
	owl5.owlCarousel({
		nav : true,
		dots: false,
		navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
		margin: 10,
		responsive: {
			0: {
				autoWidth: true,
			},
			768: {
				items: 3,
			},
			992:{
				items: 4,
			},
			1200: {
				items: 5,
			},
		},
	});
	var addowl = $(".userBox .addBox");
	addowl.owlCarousel({
		nav : true,
		dots: false,
		navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
		margin: 10,
		responsive: {
			0: {
				autoWidth: true,
			},
			768: {
				items: 1,
			},
		},
	});

	$('article > .combosBox ').on('click','.button1',function(e){
		if($(this).attr("class").indexOf('add_to_cart') !=-1){
			return false;
		}
		const add_array = new Array()
		const addBoxRegex = /\b[a-z]+?02\b/gi
		let img = $(this).parents('.productBox')
		let img_src = img.find('img').attr('src')
		let img_title = img.find('.title').text()
		let img_price = _jsLang.Language_Currency + img.find('.price-digit').text()
		let img_spec = img.find('.color-select').find('option:selected').text();
		let img_amount= img.find('.num-select').val()
		let img_act= img.find('.btn').attr('act')
		let img_index = 0
		let add_type = null
		let addHtml = ''
		function makeHtml(i, add_type){
			const returnString =  `
				<div class="orderProduct">
					<img src="${img_src}">
					<div class="title">
						<div class="name">${img_title}</div>
						<div class="spec">${img_spec ? img_spec: _jsLang.單一規格}</div>
						<div class="pricebox font-danger">${img_price}</div>
					</div>
					<button class="delete" del_id="${img_index + 1 + i}" add_type="${add_type}"><i class="fa fa-times"></i></button>
				</div>
				`
			return returnString
		}
		add_array[0] = 0;

		if($(this).parents('.combosBox').attr('class').match(addBoxRegex)) {
			add_type = 2
		} else {
			add_type = 1
		}
		$(".delete[add_type="+add_type+"]").each(function(){
			add_array.push(parseInt($(this).attr("del_id")));
		})
		img_index = Math.max.apply(null,add_array);

		//避免A7點選加購時顯示兩次的BUG
		if(img_act == 'activities7-detail') {
			return false;
		}

		if($(this).parents('.combosBox').attr('class').match(addBoxRegex)){
			if($('.addBox .pic-bg').length == 1){
						addowl.trigger('remove.owl.carousel',$('.addBox .pic-bg').parents('.owl-item').index())
								.trigger('refresh.owl.carousel');
			}

		 var smailBox = $('.user-orderBox .addBox'),
					smailBox_top = smailBox.offset().top,
					smailBox_left = smailBox.offset().left,
					smailBox_width = smailBox.width()/6,
					smailBox_height = smailBox.height()-20;
			for($i=0;$i<img_amount;$i++){
				addHtml = makeHtml($i, add_type)
				addowl.trigger('to.owl.carousel',[0,0,true])
							.trigger('add.owl.carousel',[$(addHtml),0])
							.trigger('refresh.owl.carousel');
			}
			var choseImg =  $(this).parents('.productBox').find('.productImg'),
					Img_html = choseImg.clone().addClass('moveImg'),
					choseImg_top = choseImg.offset().top,
					choseImg_left = choseImg.offset().left,
					choseImg_width = choseImg.width(),
					choseImg_height = choseImg.height();

			const slideWrapper = $('.user-orderBox')
			slideWrapper.addClass('in-active')
			setTimeout(function() {
				slideWrapper.removeClass('in-active')
			}, 1000)
			$('body').append(Img_html);
			$('.moveImg').css({'top':choseImg_top,'left':choseImg_left,'width':choseImg_width,'height':choseImg_height})
				.animate({
					'top': smailBox_top,
					'left': smailBox_left,
					'width': smailBox_width,
					'height': smailBox_height
					},350, function() {
						$(this).remove();
				});
		}else{
			if($('.user-list5 > .orderSlide .pic-bg').length == 1){
						owl5.trigger('remove.owl.carousel',$('.user-list5 > .orderSlide .pic-bg').parents('.owl-item').index())
								.trigger('refresh.owl.carousel');
			}
			var smailBox = $('.user-orderBox'),
					smailBox_top = smailBox.offset().top,
					smailBox_left = smailBox.offset().left,
					smailBox_width = smailBox.width()/6,
					smailBox_height = smailBox.height()-20;
			for($i=0;$i<img_amount;$i++){
				addHtml = makeHtml($i, add_type)
				owl6.trigger('to.owl.carousel',[0,0,true])
						.trigger('add.owl.carousel',[$(addHtml),0])
						.trigger('refresh.owl.carousel');
				owl5.trigger('to.owl.carousel',[0,0,true])
						.trigger('add.owl.carousel',[$(addHtml),0])
						.trigger('refresh.owl.carousel');
			}
			var choseImg =  $(this).parents('.productBox').find('.productImg'),
					Img_html = choseImg.clone().addClass('moveImg'),
					choseImg_top = choseImg.offset().top,
					choseImg_left = choseImg.offset().left,
					choseImg_width = choseImg.width(),
					choseImg_height = choseImg.height();

			const slideWrapper = $('.user-orderBox')
			slideWrapper.addClass('in-active')
			setTimeout(function() {
				slideWrapper.removeClass('in-active')
			}, 1000)
			$('body').append(Img_html);
			$('.moveImg').css({'top':choseImg_top,'left':choseImg_left,'width':choseImg_width,'height':choseImg_height})
				.animate({
					'top': smailBox_top,
					'left': smailBox_left,
					'width': smailBox_width,
					'height': smailBox_height
					},350, function() {
						$(this).remove();
				});
		}

	});

	owl6.on('click','.delete',function(e){
		e.preventDefault()

		if(!$(this).attr('group')) {
			var delitem = $(this).parents('.owl-item');
			delitem.find('.title').remove();
			delitem.animate({'opacity':0},300).animate({'width':0},300);
			setTimeout(function(){
				owl6.trigger('remove.owl.carousel',delitem.index())
						.trigger('refresh.owl.carousel');
			}, 700);
		}
	});
	owl5.on('click','.delete',function(){
		var delitem = $(this).parents('.owl-item');
		delitem.find('.title').remove();
		delitem.animate({'opacity':0},300).animate({'width':0},300);
		setTimeout(function(){
			owl5.trigger('remove.owl.carousel',delitem.index())
					.trigger('refresh.owl.carousel');
				if(owl5.find('.owl-item').length==0){
						var html = '<div class="pic-bg"></div>';
					owl5.trigger('to.owl.carousel',[0,0,true])
						.trigger('add.owl.carousel',[$(html),0])
						.trigger('refresh.owl.carousel');
				}
		}, 700);
	});
	addowl.on('click','.delete',function(){
		var delitem = $(this).parents('.owl-item');
		delitem.find('.title').remove();
		delitem.animate({'opacity':0},300).animate({'width':0},300);
		setTimeout(function(){
			addowl.trigger('remove.owl.carousel',delitem.index())
					.trigger('refresh.owl.carousel');
				if(addowl.find('.owl-item').length==0){
						var html = '<div class="pic-bg"></div>';
					addowl.trigger('to.owl.carousel',[0,0,true])
						.trigger('add.owl.carousel',[$(html),0])
						.trigger('refresh.owl.carousel');
				}
		}, 700);
	});
});