$(function(){
	var owl_options = {
		responsive:{
			0:{
				items : 2
			},
			481:{
				items : 3
			},
			768:{
				items : 3
			},
			1000:{
				items : 4
			},
            1151:{
                items : 1
            }
		},
        nav : true,
        onRefresh : callback,
    }, owl_options2 = {
		responsive:{
			0:{
				items : 2
			},
			481:{
				items : 3
			},
			768:{
				items : 3
			},
			1000:{
				items : 4
			},
            1151:{
                items : 1
            }
		},
        nav : true,
        onRefresh : callback,
    };
    function callback(event){
      setTimeout(function(){
        $('.hidebox').animate({'opacity':1}).removeClass('hidebox');
      }, 300);
    }
    var box_n=0;

    let owl_red = $(".user-list6 .orderSlide");
    let owl_green = $(".user-list6 .orderSlide");
    let owl_orange = $(".user-list6 .orderSlide");
    let owl_blue = $(".user-list6 .orderSlide");
    owl_red.owlCarousel({
      responsive:{
        0:{
          items : 2,
          margin : 30
        },
        480:{
          items : 3,
          margin : 30
        },
        660:{
          items : 5,
          margin : 30
        },
        769:{
          items : 6,
          margin : 40
        },
        1025:{
          items : 7,
          margin : 30
        },
        1680:{
          items : 8,
          margin : 50
        }
      },
        nav : true,
        dots : false,
        loop : true,
        onRefresh : callback,
    });

    $('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(),
            act_id = $(this).attr('act_id') || '',
            add_array = new Array();
        add_array[0] = 0;

        if($(this).parents('.productBox').hasClass('redBox'))
        {
            var _pair = 1;
        }
        else if($(this).parents('.productBox').hasClass('greenBox'))
        {
            var _pair = 2;
        }
        else if($(this).parents('.productBox').hasClass('blueBox'))
        {
            var _pair = 3;
        }
        else if($(this).parents('.productBox').hasClass('orangeBox'))
        {
            var _pair = 4;
        }
        
        $(".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){
                owl_red.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.redBox .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++){
                var	html = `<div class="orderProduct">
                              <div class="product-tag red-tag"></div>
                              <img src="${img_src}">
                              <a class="delete delete-btn" del_id="${img_index+1+$i}" pair="${_pair}" act_id="${act_id}"></a>
                            </div>`
                owl_red.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){
                owl_green.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.greenBox .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++){
                var	html = `<div class="orderProduct">
                              <div class="product-tag green-tag"></div>
                              <img src="${img_src}">
                              <a class="delete delete-btn" del_id="${img_index+1+$i}" pair="${_pair}" act_id="${act_id}"></a>
                            </div>`
                owl_green.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){
                owl_orange.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.orangeBox .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++){
                var	html = `<div class="orderProduct">
                              <div class="product-tag orange-tag"></div>
                              <img src="${img_src}">
                              <a class="delete delete-btn" del_id="${img_index+1+$i}" pair="${_pair}" act_id="${act_id}"></a>
                            </div>`
                owl_orange.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){
                owl_blue.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.blueBox .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++){
                var	html = `<div class="orderProduct">
                              <div class="product-tag blue-tag"></div>
                              <img src="${img_src}">
                              <a class="delete delete-btn" del_id="${img_index+1+$i}" pair="${_pair}" act_id="${act_id}"></a>
                            </div>`
                owl_blue.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();
    });
    
    //手機版頂端標籤
    $(window).on("resize", function(){
      if(document.body.clientWidth <= 768){
        $(".centent-menu").owlCarousel({
          dots:false,
          nav: false,
          items: 2,
          margin: 10,
          responsive:{
            0:{
              stagePadding: 35
            },
            350:{
              stagePadding: 50
            },
            660:{
              stagePadding: 70
            }
          }
        })
      }else{
        $(".centent-menu").trigger("destroy.owl.carousel")
      }
    })
    $(window).trigger("resize")
});