$(function(){
    let box_n = 1

	const objTwo = {
		0: {
			items: 2
		},
		480: {
			items: 3
		},
		660: {
			items: 2
		},
		992: {
			items: 3
		},
	}

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

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

	function owlOption(resObj) {
		const optionReturn  = {
			dots: false,
			nav: true,
			navText: ['', ''],
			onRefresh : callback,
			responsive: resObj
		}
		return optionReturn
	}
	
    function callback(event){
      setTimeout(function(){
        $('.hidebox').animate({'opacity':1}).removeClass('hidebox');
      }, 300);
    }

    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');
		var img = $(this).parents('.productBox'),
			img_src = img.find('.productImg').find('img').attr('src'),
			img_title = img.find('.productTitle').find('.title').html(),
			img_price = img.find('.productTitle').find('.insert-price').html(),
			img_amount= img.find('.num-select').val(),
			add_array = new Array();
		add_array[0] = 0;
		const matchRegex = /\b(red|blue|green|orange)Box/g

		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){
			if($('.redBox .pic-bg').length == 1){
	       		$('.redBox').find('.orderSlideRGP').trigger('remove.owl.carousel',$('.redBox .pic-bg').parents('.owl-item').index())
            		.trigger('refresh.owl.carousel');
			}
	    	var smailBox = $('.user-orderBox .redBox .owl-stage-outer'),
	        	smailBox_top = smailBox.offset().top,
	        	smailBox_left = smailBox.offset().left+20,
	        	smailBox_width = smailBox.width()/box_n,
            smailBox_height = smailBox.height();
			for($i=0;$i<img_amount;$i++){
				var html = '<div class="orderProduct hidebox"><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-danger">'+img_price+'</span></div><a class="delete" del_id="'+(img_index+1+$i)+'" pair="'+_pair+'">'+_jsLang.刪除+'</a></div></div>';
				$('.redBox').find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
    			.trigger('add.owl.carousel',[$(html),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();
	      	$('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($(this).parents('.greenBox').length != 0){
			if($('.greenBox .pic-bg').length == 1){
	       		$('.greenBox').find('.orderSlideRGP').trigger('remove.owl.carousel',$('.greenBox .pic-bg').parents('.owl-item').index())
            		.trigger('refresh.owl.carousel');
			}
	    	var smailBox = $('.user-orderBox .greenBox .owl-stage-outer'),
	        	smailBox_top = smailBox.offset().top,
	        	smailBox_left = smailBox.offset().left+20,
	        	smailBox_width = smailBox.width()/box_n,
            smailBox_height = smailBox.height();

			for($i=0;$i<img_amount;$i++){
				var html = '<div class="orderProduct hidebox"><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-danger">'+img_price+'</span></div><a class="delete" del_id="'+(img_index+1+$i)+'" pair="'+_pair+'">'+_jsLang.刪除+'</a></div></div>';
	      		$('.greenBox').find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
	      			.trigger('add.owl.carousel',[$(html),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();
	      	$('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($(this).parents('.orangeBox').length != 0){
			if($('.orangeBox .pic-bg').length == 1){
	       		$('.orangeBox').find('.orderSlideRGP').trigger('remove.owl.carousel',$('.orangeBox .pic-bg').parents('.owl-item').index())
            		.trigger('refresh.owl.carousel');
			}
	    	var smailBox = $('.user-orderBox .orangeBox .owl-stage-outer'),
	        	smailBox_top = smailBox.offset().top,
	        	smailBox_left = smailBox.offset().left+20,
	        	smailBox_width = smailBox.width()/box_n,
            smailBox_height = smailBox.height();
			for($i=0;$i<img_amount;$i++){
				var html = '<div class="orderProduct hidebox"><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-danger">'+img_price+'</span></div><a class="delete" del_id="'+(img_index+1+$i)+'" pair="'+_pair+'">'+_jsLang.刪除+'</a></div></div>';
	      		$('.orangeBox').find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
	      			.trigger('add.owl.carousel',[$(html),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();
	      	$('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($(this).parents('.blueBox').length != 0){
			//標籤3
			if($('.blueBox .pic-bg').length == 1){
	       		$('.blueBox').find('.orderSlideRGP').trigger('remove.owl.carousel',$('.blueBox .pic-bg').parents('.owl-item').index())
            		.trigger('refresh.owl.carousel');
			}
	    	var smailBox = $('.user-orderBox .blueBox .owl-stage-outer'),
	        	smailBox_top = smailBox.offset().top,
	        	smailBox_left = smailBox.offset().left+20,
	        	smailBox_width = smailBox.width()/box_n,
            smailBox_height = smailBox.height();

			for($i=0;$i<img_amount;$i++){
				var html = '<div class="orderProduct hidebox"><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-danger">'+img_price+'</span></div><a class="delete" del_id="'+(img_index+1+$i)+'" pair="'+_pair+'">'+_jsLang.刪除+'</a></div></div>';
	      		$('.blueBox').find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
	      			.trigger('add.owl.carousel',[$(html),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();
	      	$('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();
	        });
		};
		callback();
    });
});