$(function(){
	var owl_options = {
		responsive:{
			0:{
				items : 2
			},
			481:{
				items : 3
			},
			660:{
				items : 4
			},
			960:{
				items : 1
			}
		},
        nav : true,
        onRefresh : callback,
    }, owl_options2 = {
		responsive:{
			0:{
				items : 2
			},
			481:{
				items : 3
			},
			768:{
				items : 4
			},
			960:{
				items : 3
			},
			1210:{
				items : 1
			}
		},
        nav : true,
        onRefresh : callback,
    }, owl_options3 = {
        responsive:{
            0:{
                items : 1
            },
            481:{
                items : 1
            },
            768:{
                items : 1
            },
            960:{
                items : 1
            },
            1210:{
                items : 1
            }

        },
        dots:false,
        nav : true,
        onRefresh : callback
    };
    function callback(event){
      setTimeout(function(){
        $('.hidebox').animate({'opacity':1}).removeClass('hidebox');
      }, 300);
    }
    
    let checkWidth = 768
    var owl_red = $("#redBox");
    var owl_green = $("#greenBox");
    var owl_orange = $("#orangeBox");
    var owl_blue = $("#blueBox");
    var box_n=0;
    if($('.twobox').length!=0){
        box_n=4;
        RGboxCarousel(owl_options2)
    } else if($('.fourbox').length!=0) {
        box_n=3;
        RGboxCarousel(owl_options3)
    }else{
        box_n=3;
        RGboxCarousel(owl_options)
    };
    $(window).on("resize", function(){
        if($('.twobox').length!=0){
            box_n=4;
            RGboxCarousel(owl_options2)
        } else if($('.fourbox').length!=0) {
            box_n=3;
            RGboxCarousel(owl_options3)
        }else{
            box_n=3;
            RGboxCarousel(owl_options)
        };
    })
    
    function RGboxCarousel(option){
        if($(window).width() > checkWidth){
            if(owl_red.length > 0){
                owl_red.find('.orderSlideRGP').owlCarousel(option)
            }
            if(owl_green.length > 0){
                owl_green.find('.orderSlideRGP').owlCarousel(option)
            }
            if(owl_orange.length > 0){
                owl_orange.find('.orderSlideRGP').owlCarousel(option)
            }
            if(owl_blue.length > 0){
                owl_blue.find('.orderSlideRGP').owlCarousel(option)
            }
        }else{
            owl_red.find('.orderSlideRGP').trigger("destroy.owl.carousel")
            owl_green.find('.orderSlideRGP').trigger("destroy.owl.carousel")
            owl_orange.find('.orderSlideRGP').trigger("destroy.owl.carousel")
            owl_blue.find('.orderSlideRGP').trigger("destroy.owl.carousel")
        }
    }
    
    function RGdelete(owl){
        owl.on('click','.orderSlideRGP .delete',function(){
            if($(window).width() > checkWidth){
                var delitem = $(this).parents('.owl-item');
                delitem.find('.title').remove();
                delitem.animate({'opacity':0},300).animate({'width':0},300);
                setTimeout(function(){
                    owl.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index())
                        .trigger('refresh.owl.carousel');
                    if(owl.find('.owl-item').length==0){
                        var html = '<div class="pic-bg"></div>';
                        owl.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
                            .trigger('add.owl.carousel',[$(html),0])
                            .trigger('refresh.owl.carousel');
                    }
                }, 700);
            }else{
                $(this).parents(".orderProduct").remove()
                if(!(owl.find('.orderSlideRGP .orderProduct').length > 0)){
                    var html = '<div class="pic-bg"></div>';
                    owl.find('.orderSlideRGP').prepend(html)
                }
            }
        });
    }
    RGdelete(owl_red)
    RGdelete(owl_green)
    RGdelete(owl_blue)
    RGdelete(owl_orange)
    
    $('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('.font-big').html(),
			img_amount= img.find('.num-select').val(),
			add_array = new Array();
		add_array[0] = 0;

		switch($(this).parents('.productBox').attr('class').substring(11)){
			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){
                if($(window).width() > checkWidth){
                    owl_red.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.redBox .pic-bg').parents('.owl-item').index())
                        .trigger('refresh.owl.carousel');
                }else{
                    owl_red.find('.pic-bg').remove()
                }
			}
	    	var smailBox = $('.user-orderBox .redBox'),
	        	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-red">'+_jsLang.Language_Currency+img_price+'</span></div></div><a class="delete" del_id="'+(img_index+1+$i)+'" pair="'+_pair+'"><i class="fa fa-times"></i></a></div>';
				
                if($(window).width() > checkWidth){
                    owl_red.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
                        .trigger('add.owl.carousel',[$(html),0])
                        .trigger('refresh.owl.carousel');
                }else{
                    owl_red.find('.orderSlideRGP').prepend(html)
                }
			}
	      	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){
                if($(window).width() > checkWidth){
                    owl_green.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.redBox .pic-bg').parents('.owl-item').index())
                        .trigger('refresh.owl.carousel');
                }else{
                    owl_green.find('.pic-bg').remove()
                }
			}
	    	var smailBox = $('.user-orderBox .greenBox'),
	        	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-red">'+_jsLang.Language_Currency+img_price+'</span></div></div><a class="delete" del_id="'+(img_index+1+$i)+'" pair="'+_pair+'"><i class="fa fa-times"></i></a></div>';
	      		
                if($(window).width() > checkWidth){
                    owl_green.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
                        .trigger('add.owl.carousel',[$(html),0])
                        .trigger('refresh.owl.carousel');
                }else{
                    owl_green.find('.orderSlideRGP').prepend(html)
                }
			}
	      	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){
                if($(window).width() > checkWidth){
                    owl_orange.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.redBox .pic-bg').parents('.owl-item').index())
                        .trigger('refresh.owl.carousel');
                }else{
                    owl_orange.find('.pic-bg').remove()
                }
			}
	    	var smailBox = $('.user-orderBox .orangeBox'),
	        	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-red">'+_jsLang.Language_Currency+img_price+'</span></div></div><a class="delete" del_id="'+(img_index+1+$i)+'" pair="'+_pair+'"><i class="fa fa-times"></i></a></div>';
	      		
                if($(window).width() > checkWidth){
                    owl_orange.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
                        .trigger('add.owl.carousel',[$(html),0])
                        .trigger('refresh.owl.carousel');
                }else{
                    owl_orange.find('.orderSlideRGP').prepend(html)
                }
			}
	      	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){
                if($(window).width() > checkWidth){
                    owl_blue.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.redBox .pic-bg').parents('.owl-item').index())
                        .trigger('refresh.owl.carousel');
                }else{
                    owl_blue.find('.pic-bg').remove()
                }
			}
	    	var smailBox = $('.user-orderBox .blueBox'),
	        	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-red">'+_jsLang.Language_Currency+img_price+'</span></div></div><a class="delete" del_id="'+(img_index+1+$i)+'" pair="'+_pair+'"><i class="fa fa-times"></i></a></div>';
	      		
                if($(window).width() > checkWidth){
                    owl_blue.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
                        .trigger('add.owl.carousel',[$(html),0])
                        .trigger('refresh.owl.carousel');
                }else{
                    owl_blue.find('.orderSlideRGP').prepend(html)
                }
			}
	      	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();
    });
});

// ==========================================================
// 	配對區切換功能
// ==========================================================
;(function($) {
    $('body').on('click', '.orderBox-tag', function(e) {
    	e.preventDefault()
    	const target = $(this).attr('href')
    	$(this).addClass('in-active').siblings('.orderBox-tag').removeClass('in-active')
    	$(target).addClass('in-active').siblings('.orderBox').removeClass('in-active')
    })
})($)