$(function(){
    var breadcrumb_on =0;
    $('#breadcrumb .inline-block').on('click',function(){
      if(breadcrumb_on==0){
        $(this).addClass('on');
        breadcrumb_on++;
      }else{
        $(this).removeClass('on');
        breadcrumb_on=0;
      }

    });
    $(".owl-carousel").owlCarousel({
        loop : true,
        items : 1,
        nav : true,
    });


  if($("#picSlides .picItem").length>1){
      $("#picSlides").owlCarousel({
          loop : true,
          items : 1,
          nav : true,
          autoplay:true,
          autoplayTimeout:5000,
      });
   }

   var clickbutton=0;
   $('.filter-button,.filterbox .close').on('click',function(){
      clickbutton++;
      if(clickbutton==1){
        $('.filterbox').css({'top':'10%'});
      }
      if(clickbutton==2){
        $('.filterbox').css({'top':'-100%'});
        clickbutton=0;
      }
    });

    $('#viewMode .view-three').on('click',function(){
      $('#viewMode .view-three').addClass('now');
      $('#viewMode .view-four').removeClass('now');
      $('.content').removeClass('view-four').addClass('view-three hide-back');
      setTimeout(function(){
        $('.content').removeClass('hide-back');
      },380);
    });
    $('#viewMode .view-four').on('click',function(){
      $('#viewMode .view-four').addClass('now');
      $('#viewMode .view-three').removeClass('now');
      $('.content').removeClass('view-three').addClass('view-four hide-back');
      setTimeout(function(){
        $('.content').removeClass('hide-back');
      },380);
    });

    var owl6 = $(".user-list6 .orderSlide");
    owl6.owlCarousel({
      responsive:{
        0:{
          items : 2,
          margin : 20
        },
        480:{
          items : 3,
          margin : 20
        },
        660:{
          items : 5,
          margin : 20
        },
        769:{
          items : 6,
          margin : 30
        },
        1025:{
          items : 7,
          margin : 30
        },
        1680:{
          items : 8,
          margin : 50
        }
      },
        nav : true,
        dots : false,
        onRefresh : callback,
    });
    //user-list5 只在act6
    var owl5 = $(".user-list5 .orderSlide");
    owl5.owlCarousel({
      responsive:{
        0:{
          items : 1,
          margin : 0
        },
        601:{
          items : 2,
          margin : 15
        },
        661:{
          items : 3,
          margin : 15
        },
        769:{
          items : 4,
          margin : 25
        },
        1025:{
          items : 5,
          margin : 30
        },
        1281:{
          items : 6,
          margin : 35
        },
        1441:{
          items : 7,
          margin : 50
        }
      },
        nav : true,
        dots : false,
        onRefresh : callback,
    });
    var addowl = $(".userBox .addBox");
    addowl.owlCarousel({
        items : 1,
        nav : true,
        dots : false,
        onRefresh : callback,
    });
    function callback(event){
      setTimeout(function(){
        $('.hidebox').animate({'opacity':1}).removeClass('hidebox');
      }, 300);
    }
    $('article > .content ').on('click','.button1',function(e)
    {
        var sid = $(this).attr('sid'),
            img = $(this).parents('.productBox'),
            img_src = img.find('img').attr('src'),
            img_title = img.find('.title').html(),
            img_price = img.find('.font-big').html(),
            img_amount= img.find('.num-select').val(),
            add_array = new Array();

        //無商品數量時 加到活動暫存區特效不顯示
        if($(this).attr("stock")==="0"){
            return false;
        }

        //若直接購入購物車 特效不顯示
        if($(this).hasClass('add_to_cart')){
          return false;
        }

        add_array[0] = 0;
        if($(this).parents('.content').attr('class').substring(11,13) == '02'){
            var add_type  = 2
        }else{
            var add_type  = 1;
        }
        $(".delete[add_type="+add_type+"]").each(function(){
            add_array.push(parseInt($(this).attr("del_id")));
        });
        var img_index = Math.max.apply(null,add_array);
     
        if($(this).parents('.content').attr('class').substring(11,13) == '02'){
            if($('.addBox .pic-bg').length == 2){
                addowl.trigger('remove.owl.carousel',$('.addBox .pic-bg').parents('.owl-item').index()).trigger('refresh.owl.carousel');
            }

            var smailBox = $('.user-orderBox .addBox'),
                smailBox_top = smailBox.offset().top,
                smailBox_left = smailBox.offset().left,
                smailBox_width = smailBox.width()/6,
                smailBox_height = smailBox.height()-20;

            for($i=1;$i<=img_amount;$i++)
            {
                var html = `<div class="orderProduct">
                            <img src="${img_src}">
                            <a class="delete delete-btn" del_id="${img_index+$i}" add_type="${add_type}"></a>
                          </div>`
                addowl.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($('.user-list5 > .orderSlide .pic-bg').length == 2){
                owl5.trigger('remove.owl.carousel',$('.user-list5 > .orderSlide .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=1;$i<=img_amount;$i++)
            {
                var html = `<div class="orderProduct">
                                <img src="${img_src}">
                                <a class="delete delete-btn" del_id="${img_index+$i}" add_type="${add_type}"></a>
                            </div>`
                owl6.trigger('to.owl.carousel',[0,0,true])
                .trigger('add.owl.carousel',[html,0])
                .trigger('refresh.owl.carousel');
                owl5.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();
    });
    owl6.on('click','.delete',function(){
      var delitem = $(this).parents('.owl-item');
      delitem.find('.title').remove();
      delitem.animate({'opacity':0},300).animate({'width':0},300);
      setTimeout(function(){
        owl6.trigger('remove.owl.carousel',delitem.index())
            .trigger('refresh.owl.carousel');
      }, 700);
    });
    owl5.on('click','.delete',function(){
      var delitem = $(this).parents('.owl-item');
      delitem.find('.title').remove();
      delitem.animate({'opacity':0},300).animate({'width':0},300);
      setTimeout(function(){
        owl5.trigger('remove.owl.carousel',delitem.index())
            .trigger('refresh.owl.carousel');
          if(owl5.find('.owl-item').length==0){
              var html = '<div class="pic-bg"></div>';
            owl5.trigger('to.owl.carousel',[0,0,true])
              .trigger('add.owl.carousel',[html,0])
              .trigger('refresh.owl.carousel');
          }
      }, 700);
    });
    addowl.on('click','.delete',function(){
      var delitem = $(this).parents('.owl-item');
      delitem.find('.title').remove();
      delitem.animate({'opacity':0},300).animate({'width':0},300);
      setTimeout(function(){
        addowl.trigger('remove.owl.carousel',delitem.index())
            .trigger('refresh.owl.carousel');
          if(addowl.find('.owl-item').length==0){
              var html = '<div class="pic-bg"></div>';
            addowl.trigger('to.owl.carousel',[0,0,true])
              .trigger('add.owl.carousel',[html,0])
              .trigger('refresh.owl.carousel');
          }
      }, 700);
    });
});