$(function(){
	function callback(event){
		setTimeout(function(){
		$('.hidebox').animate({'opacity':1}).removeClass('hidebox');
		}, 300);
	}

	function owlOption(num) {
		const obj = {
			responsive:{
				0:{
					items : 2
				},
				769:{
					items : 3
				},
				1000:{
					items : 4
				},
				1151:{
					items : (5 - num)
				}
			},
			nav : true,
      navText:["",""],
			onRefresh : callback,
		}
		return obj
	}

	function itemDelete(jqElement) {
		if(jqElement.length) {
			jqElement.on('click','.orderSlideRGP .delete',function(){
				const delitem = $(this).parents('.owl-item');
				delitem.find('.title').remove();
				delitem.animate({
					opacity: 0,
					width: 0,
				},300)

				setTimeout(function(){
					jqElement.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index())
						.trigger('refresh.owl.carousel');
					if(jqElement.find('.owl-item').length === 0){
						const html = '<div class="pic-bg"></div>';
						jqElement.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
							.trigger('add.owl.carousel',[$(html),0])
							.trigger('refresh.owl.carousel');
					}
				}, 700);
			});
		}
	}


	let box_n = 0
	let owl_red
	let owl_green
	let owl_blue
	let owl_orange
	if($('.fourbox').length > 0){
		box_n = 4;

		owl_red = $(".fourbox .redBox");
		owl_green = $(".fourbox .greenBox");
		owl_blue = $(".fourbox .blueBox");
		owl_orange = $(".fourbox .orangeBox");
		
		owl_red.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(4));
		owl_green.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(4));
		owl_blue.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(4));
		owl_orange.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(4));
	}else if($('.twobox').length > 0){
		box_n = 4;

		owl_red = $(".twobox .redBox");
		owl_green = $(".twobox .greenBox");
		owl_blue = $(".twobox .blueBox");

		owl_red.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(2));
		owl_green.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(2));
		owl_blue.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(2));
	}else{
		box_n=3;

		owl_red = $(".threebox .redBox");
		owl_green = $(".threebox .greenBox");
		owl_blue = $(".threebox .blueBox");
		owl_orange = $(".threebox .orangeBox");

		owl_red.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(3));
		owl_green.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(3));
		owl_orange.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(3));
		owl_blue.find('.orderSlideRGP').addClass('owl-carousel').owlCarousel(owlOption(3));
	};
	if(owl_red){
		itemDelete(owl_red)
	}
	if(owl_green){
		itemDelete(owl_green)
	}
	if(owl_orange){
		itemDelete(owl_orange)
	}
	if(owl_blue){
		itemDelete(owl_blue)
	}

	$('article').on('click','.button5',function(){
		$('.user-orderBox').removeClass('none');
		const img = $(this).parents('.productBox')
		const img_src = img.find('.productImg').find('img').attr('src')
		const img_title = img.find('.productTitle').find('.title').html()
		const img_price = img.find('.productTitle').find('.font-big').html()
		const img_amount= img.find('.num-select').val()
		const add_array = [0]
		let _pair

		function itemAdd(owlTarget, owlClass, clickTarget) {
			if($('.' + owlClass + ' .pic-bg').length == 1){
				owlTarget.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.' + owlClass + ' .pic-bg').parents('.owl-item').index())
					.trigger('refresh.owl.carousel');
			}
			const smailBox = $('.user-orderBox .' + owlClass + ' .owl-stage-outer')
			const smailBox_top = smailBox.offset().top
			const smailBox_left = smailBox.offset().left + 20
			const smailBox_width = smailBox.width() / box_n
			const smailBox_height = smailBox.height()

			for($i = 0; $i < img_amount; $i++){
				const html = `
				<div class="orderProduct hidebox">
					<img src="${img_src}">
					<div class="title">
						${img_title}
						<div class="pricebox">
							<span class="font-red">
								${_jsLang.Language_Currency + img_price}
							</span>
						</div>
						<a class="delete" del_id="${img_index + 1 + $i}" pair="${_pair}">
							${_jsLang.刪除}
						</a>
					</div>
				</div>`
				owlTarget.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
				.trigger('add.owl.carousel',[$(html),0])
				.trigger('refresh.owl.carousel');
			}
			const choseImg =  $(clickTarget).parents('.productBox').find('.productImg')
			const Img_html = choseImg.clone().addClass('moveImg')
			const choseImg_top = choseImg.offset().top
			const choseImg_left = choseImg.offset().left
			const choseImg_width = choseImg.width()
			const choseImg_height = choseImg.height()

			$('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();
			});
		}


		switch($(this).parents('.productBox').attr('class').substring(11)){
			case "redBox":
				_pair = 1;
				break;
			case "greenBox":
				_pair = 2;
				break;
			case "blueBox":
				_pair = 3;
				break;
			case "orangeBox":
				_pair = 4;
				break;
		}
		$(".delete[pair="+_pair+"]").each(function(){
			 add_array.push(parseInt($(this).attr("del_id")));
		});
		const img_index = Math.max.apply(null,add_array);

		if($(this).parents('.redBox').length != 0){
			itemAdd(owl_red, 'redBox', this)
		}else if($(this).parents('.greenBox').length != 0){
			itemAdd(owl_green, 'greenBox', this)
		}else if($(this).parents('.orangeBox').length != 0){
			itemAdd(owl_orange, 'orangeBox', this)
		}else if($(this).parents('.blueBox').length != 0){
			itemAdd(owl_blue, 'blueBox', this)
		};
		callback();
	});
});