$(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;
      }

    });
    
    $(document).on("click", ".breadcrumb-list .with-child > .link", function(e){
      e.preventDefault()
      let parent = $(this).parent(".with-child")
      if(parent.hasClass("in-active")){
        $(".with-child").removeClass("in-active")
        parent.removeClass("in-active")
      }else{
        $(".with-child").removeClass("in-active")
        parent.addClass("in-active")
      }
    })
    
    $(".owl-carousel").owlCarousel({
        loop : true,
        items : 1,
        nav : true,
        dots: false,
        navText: ['', ''],
    });


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

   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;
      }
    });

    var owl6 = $(".user-list6 .orderSlide");
    owl6.owlCarousel({
      responsive:{
        0:{
          items : 2
        },
        480:{
          items : 3
        },
        660:{
          items : 4
        },
        960:{
          items : 5
        },
        1023:{
          items : 6
        }
      },
      nav : true,
      onRefresh : callback,
      dots: false,
      navText: ['', ''],
    });
    var owl5 = $(".user-list5 .orderSlide");
    owl5.owlCarousel({
      responsive:{
        0:{
          items : 2
        },
        481:{
          items : 3
        },
        960:{
          items : 4
        },
        1023:{
          items : 5
        }
      },
      nav : true,
      onRefresh : callback,
      dots: false,
      navText: ['', ''],
    });
    var addowl = $(".userBox .addBox");
    addowl.owlCarousel({
      responsive:{
        0:{
          items : 2
        },
        481:{
          items : 3
        },
        661:{
          items : 1
        }
      },
      nav : true,
      onRefresh : callback,
      dots: false,
      navText: ['', ''],
    });
    function callback(event){
      setTimeout(function(){
        $('.hidebox').animate({'opacity':1}).removeClass('hidebox');
      }, 300);
    }
    $('article > .combosBox ').on('click','.button1',function(e){
      if($(this).attr("class").indexOf('add_to_cart') !=-1){
  			return false;
  		}
      const add_array = new Array()
      const addBoxRegex = /\b[a-z]+?02\b/gi
  		let img = $(this).parents('.productBox')
			let img_src = img.find('img').attr('src')
			let img_title = img.find('.title').text()
			let img_price = img.find('.price-digit').html()
      let img_spec = img.find('.info').html();
      let img_amount= img.find('.num-select').val()
      let img_act= img.find('.shopping-link').attr('act')
      let img_index = 0
      let add_type = null
      let addHtml = ''
      function makeHtml(i, add_type){
        const returnString =  `
          <div class="orderProduct">
            <img src="${img_src}">
            <div class="title">
              <div class="name">${img_title} ${(img_spec) ? ' - '+img_spec : ''}</div>
              <div class="pricebox">
                <span class="font-danger">${img_price}</span>
              </div>
              <a class="delete" del_id="${img_index + 1 + i}" add_type="${add_type}">${_jsLang.刪除}</a>
            </div>
          </div>
          `
        return returnString
      }
      add_array[0] = 0;

      if($(this).parents('.combosBox').attr('class').match(addBoxRegex)) {
        add_type = 2
      } else {
        add_type = 1
      }
      $(".delete[add_type="+add_type+"]").each(function(){
        add_array.push(parseInt($(this).attr("del_id")));
      })
      img_index = Math.max.apply(null,add_array);

      //避免A7 A8點選加購時顯示兩次的BUG
      if((img_act == 'activities7-detail') || (img_act == 'activities8-detail')) {
        console.log("aaa")
        return false;
      }

      if($(this).parents('.combosBox').attr('class').match(addBoxRegex)){
        if($('.addBox .pic-bg').length == 1){
              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=0;$i<img_amount;$i++){
          addHtml = makeHtml($i, add_type)
    			addowl.trigger('to.owl.carousel',[0,0,true])
          			.trigger('add.owl.carousel',[$(addHtml),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 == 1){
              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=0;$i<img_amount;$i++){
          addHtml = makeHtml($i, add_type)
    			owl6.trigger('to.owl.carousel',[0,0,true])
        			.trigger('add.owl.carousel',[$(addHtml),0])
        			.trigger('refresh.owl.carousel');
    			owl5.trigger('to.owl.carousel',[0,0,true])
        			.trigger('add.owl.carousel',[$(addHtml),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);
    });
});

// 商品大小格切換
;(function($) {
    $('.switch-group').on('click', '.switch-item', function(e) {
      const targetClass = $(this).data('target')
      $(this).addClass('now').siblings('.switch-item').removeClass('now')
      $('#Main_Content').removeAttr('class').addClass('items-list combosBox').addClass(targetClass)
    })
})($)


// ==========================================================
//  手機版篩選器/排序 
// ==========================================================
;(function($) {
  $('.filter-button,.filterbox .close').on('click',function(){
    $('.filterbox').toggleClass('in-active')
  });
  let filterWrapper = $(".filter-popup-wrapper"),
      filterBtn = $(".filter-btn-m"),
      targetOrder = $(".order-wrapper-m"),
      targetFilter = $("#topTitle .filterbox"),
      body = $("body")
  
  function filterPopupClose(){
    body.removeClass("overflow-hidden")
    filterWrapper.removeClass("open")
    filterBtn.removeClass("open")
    targetOrder.removeClass("open")
    targetFilter.removeClass("open")
  }
  
  //開關
  filterWrapper.on("click", filterPopupClose)
  filterBtn.on("click", function(){
    let index = $(this).data("index")
    
    if($(this).hasClass("open")){
      filterPopupClose()
    }else{
      body.addClass("overflow-hidden")
      filterWrapper.addClass("open")
      filterBtn.removeClass("open")
      $(this).addClass("open")
      if(index == "order"){
        targetFilter.removeClass("open")
        targetOrder.addClass("open")
      }else if(index == "filter"){
        targetOrder.removeClass("open")
        targetFilter.addClass("open")
      }
    }
  })
  
  //排序toggle樣式
  targetOrder.on("click", ".order-item", function(){
    if(!$(this).hasClass("selected")){
      $(".order-item").removeClass("selected")
      $(this).addClass("selected")
    }
  })
})($)