$(function(){
    let box_n = 1

	const objTwo = {
		0: {
			items: 2
		},
		480: {
			items: 3
		},
		576: {
			items: 1
		},
		768: {
			items: 2
		},
		992: {
			items: 3
		},
		1200: {
			items: 4
		},
	}

	const objThree = {
		0: {
			items: 2
		},
		480: {
			items: 3
		},
		576: {
			items: 4
		},
		768: {
			items: 1
		},
		992: {
			items: 2
		},
	}

	const objFour = {
		0: {
			items: 2
		},
		480: {
			items: 3
		},
		576: {
			items: 1
		},
		768: {
			items: 2
		},
		992: {
			items: 1
		},
		1200: {
			items: 2
		},
	}

	function owlOption(resObj) {
		const optionReturn  = {
			margin: 10,
			dots: false,
			nav: true,
			navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
			responsive: resObj
		}
		return optionReturn
	}

    if($('.twobox').length){
    	box_n=4;
    	$('.twobox .orderSlideRGP').each(function(i, ele) {
    		$(ele).owlCarousel(owlOption(objTwo))
    	})
    }

    if($('.fourbox').length) {
        box_n=3;
    	$('.fourbox .orderSlideRGP').each(function(i, ele) {
    		$(ele).owlCarousel(owlOption(objFour))
    	})
    }

	if($('.threebox').length) {
    	box_n=3;
    	$('.threebox .orderSlideRGP').each(function(i, ele) {
    		$(ele).owlCarousel(owlOption(objThree))
    	})
    };

    $('.user-orderBox').on('click', '.delete', function(e){
    	e.preventDefault()

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

    $('article').on('click','.button5',function(){
    	$('.user-orderBox').removeClass('none');
		const img			= $(this).parents('.productBox')
		const img_src		= img.find('.productImg').find('img').eq(0).attr('src')
		const img_title		= img.find('.productTitle').find('.title').text()
		const img_spec		= img.find('.color-select').find('option:selected').text()
		const img_price		= _jsLang.Language_Currency + img.find('.productTitle').find('.font-big').text()
		const img_amount	= img.find('.num-select').val()
		const add_array 	= new Array()
		add_array[0] = 0;
		const matchRegex = /\b(red|blue|green|orange)Box/g
		function SelectPair(clickThis, selector, boxAmount, imgAmount) {
			const clickTarget = `#${$(clickThis).parents('.productBox').attr('class').match(matchRegex)[0]}`
			const picBg = $(selector).find('.pic-bg')
			const slideWrap = $(selector).find('.orderSlideRGP')

			if(picBg.length === 1) {
				slideWrap.trigger('remove.owl.carousel', picBg.parents('.owl-item').index())
						 .trigger('refresh.owl.carousel');
			}
			$(`.orderBox-tag[href="${clickTarget}"]`).trigger('click')

			const smailBox			= $(`.user-orderBox ${selector} .owl-stage-outer`)
			const smailBox_top		= smailBox.offset().top
			const smailBox_left		= smailBox.offset().left + 20
			const smailBox_width	= smailBox.width() / boxAmount
			const smailBox_height	= smailBox.height()

			for($i = 0; $i < imgAmount; $i++){
				const html = `
					<div class="orderProduct">
						<img src="${img_src}">
						<div class="title">
							<div class="name">${img_title}</div>
							<div class="pricebox">
								<span class="font-red">${img_price}</span>
							</div>
							<a class="delete" del_id="${img_index + 1 + $i}" pair="${_pair}">${_jsLang.刪除}</a>
						</div>
					</div>
				`
				slideWrap.trigger('to.owl.carousel', [0, 0, true])
						 .trigger('add.owl.carousel', [$(html), 0])
						 .trigger('refresh.owl.carousel');
			}

			const choseImg			=  $(clickThis).parents('.productBox').find('.productImg img').eq(0)
			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()

			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();
			});
		}
		switch($(this).parents('.productBox').attr('class').match(matchRegex)[0]){
			case "redBox":
				var _pair = 1;
				break;
			case "greenBox":
				var _pair = 2;
				break;
			case "blueBox":
				var _pair = 3;
				break;
			case "orangeBox":
				var _pair = 4;
				break;
		}
		$(".delete[pair="+_pair+"]").each(function(){
		   add_array.push(parseInt($(this).attr("del_id")));
		});
		var img_index = Math.max.apply(null,add_array);

		if($(this).parents('.redBox').length != 0){
			SelectPair(this, '.redBox', box_n, img_amount)
		} else if($(this).parents('.greenBox').length != 0){
			SelectPair(this, '.greenBox', box_n, img_amount)
		}else if($(this).parents('.orangeBox').length != 0){
			SelectPair(this, '.orangeBox', box_n, img_amount)
		}else if($(this).parents('.blueBox').length != 0){
			SelectPair(this, '.blueBox', box_n, img_amount)
		};
    });
});