$(document).ready(function () {
  /* 價錢篩選*/
  // $('.nstSlider').nstSlider({
  //     "left_grip_selector": ".leftGrip",
  //     "right_grip_selector": ".rightGrip",
  //     "value_bar_selector": ".bar",
  //     "highlight": {
  //         "grip_class": "gripHighlighted",
  //         "panel_selector": ".highlightPanel"
  //     },
  //     "value_changed_callback": function(cause, leftValue, rightValue) {
  //         $('.leftLabel').text(leftValue);
  //         $('.rightLabel').text(rightValue);
  //     },
  // });

  // Call methods and such...
  // var highlightMin = Math.random() * 20,
  //     highlightMax = highlightMin + Math.random() * 80;
  // $('.nstSlider').nstSlider('highlight_range', highlightMin, highlightMax);
  /* 價錢篩選end*/
  if($("#picSlides .picItem").length>1){
      $("#picSlides").owlCarousel({
          autoplay: true,
          autoplayTimeout: 5000,
          items : 1,
          loop : true,
          responsive: {
            0: {
              dots: false,
              nav : false,
            },
            1025: {
              dots: true,
              nav : true,
            },
          }
      });
  }

  $('.filterbox').ontouchmove = function(event){
      event.preventDefault();
  }
  var _window = $(window);
  var _body = $('body');
  var change_1023 = 0;
  var productSlidebox = $(".productSlidebox");
  if(_window.width() <= 1023 && change_1023 != 1023){
      change_1023 = 1023;
      $('#filtercontrol-2,#filtercontrol-3,#filtercontrol-4').attr('checked',true);
  }else if(_window.width() > 1023 && change_1023 != 1200){
    change_1023 = 1200;
    productSlidebox.owlCarousel({
        loop : true,
        items : 1,
        nav : true,
    });
  }
  _window.on('resize',function(){
      if(_window.width() <= 1023 && change_1023 != 1023){
          change_1023 = 1023;
          $('#filtercontrol-2,#filtercontrol-3,#filtercontrol-4').attr('checked',true);
          productSlidebox.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
          productSlidebox.find('.owl-stage-outer').children().unwrap();
      }else if(_window.width() > 1023 && change_1023 != 1200){
        change_1023 = 1200;
        productSlidebox.owlCarousel({
            loop : true,
            items : 1,
            nav : true,
        });
        $('#filtercontrol-2,#filtercontrol-3,#filtercontrol-4').removeAttr('checked');
      }
  });

  var clickbutton=0;
  $('.filter-button,.filterbox .close').on('click',function(){
    clickbutton++;
    if(clickbutton==1){
      $('.filterbox').css({'top':'50px'});
    }
    if(clickbutton==2){
      $('.filterbox').css({'top':'-100%'});
      clickbutton=0;
    }
  });
  $('#viewMode .view-three').on('click',function(){
    // console.log('message');
    $('#viewMode .view-three').addClass('now');
    $('#viewMode .view-four').removeClass('now');
    $('.content').removeClass('view-four').addClass('view-three hide-back');
    $('.content .warpper').show();
    setTimeout(function(){
      $('.content').removeClass('hide-back');

      $('#filtercontrol-2,#filtercontrol-3,#filtercontrol-4').attr('checked',true);
      productSlidebox.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
      productSlidebox.find('.owl-stage-outer').children().unwrap();
      productSlidebox.owlCarousel({
            loop : true,
            items : 1,
            nav : true,
            navText:["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
        });
      $('#filtercontrol-2,#filtercontrol-3,#filtercontrol-4').removeAttr('checked');
    },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');
    // $('.content .warpper').hide();
    setTimeout(function(){
      $('.content').removeClass('hide-back');

      $('#filtercontrol-2,#filtercontrol-3,#filtercontrol-4').attr('checked',true);
      productSlidebox.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
      productSlidebox.find('.owl-stage-outer').children().unwrap();
      productSlidebox.owlCarousel({
            loop : true,
            items : 1,
            nav : true,
            navText:["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
        });
      $('#filtercontrol-2,#filtercontrol-3,#filtercontrol-4').removeAttr('checked');
    },380);
  });
  $(".newbox").find(function(){
      $(".newitem").parents("#newlist").prevAll("#newTitle").removeAttr('checked')
  })
});





// ==========================================================
//  商品列表篩選器開關
// ==========================================================
;(function($) {
  let filterStep = 0
  let deviceType = ''
  $(window).on('resize', function(e) {
    if (deviceType !== 'mobile' && $(window).width() <= 1024) {
      deviceType = 'mobile'
      filterStep = 0
    } else if (deviceType !== 'desktop' && $(window).width() > 1024) {
      deviceType = 'desktop'
      filterStep = 1
    }
  })
  $(window).trigger('resize')



  function filterCheck(step) {
    if(step) {
      $('#Main_Content').addClass('aside-open')
      $('.filter-toggle.func-toggle').text('隱藏搜尋列').prev('span').text('<')
    } else {
      $('#Main_Content').removeClass('aside-open')
      $('.filter-toggle.func-toggle').text('顯示搜尋列').prev('span').text('>')
    }
  }


  $('body').on('click', '.filter-toggle', function(e) {
    filterStep = (filterStep + 1) % 2
    filterCheck(filterStep)

  })

  $('#Main_Content').on('click', function(e) {
    if(e.target === $('.left-aside')[0] || e.target === $('.aside-closer')[0]) {
      filterStep = 0
      filterCheck(filterStep)
    }
  })

  filterCheck(filterStep)
})($)






// ==========================================================
//  手機版排序區塊
// ==========================================================
;(function($) {
  function sortStepCheck(jqElement, step, className) {
    if(step) {
      jqElement.addClass(className)
    } else {
      jqElement.removeClass(className)
    }
  }
  let sortStep = 0

  // 排序功能開關
  $('#Main_Content').on('click', '.select-title', function(e) {
    sortStep = (sortStep + 1) % 2

    sortStepCheck($(this).parents('.mobile-select'), sortStep, 'open-click')
  })

  // 排序項目選擇
  $('#Main_Content').on('click', '.option-list-item', function(e) {
    const targetText = $(this).text()
    const targetValue = $(this).data('value')

    $(this).parents('.mobile-select').find('.select-title').text(targetText)
    sortStep = 0

    sortStepCheck($('.mobile-select'), sortStep, 'open-click')
    $('#orderbox').val(targetValue)
    $(`.option-list-item[data-value="${targetValue}"]`).addClass('in-checked').siblings('.option-list-item').removeClass('in-checked')
    console.log($('#orderbox').val())

    $('#orderbox').val(targetValue);
    $('#orderbox').trigger('change');
  })
})($)





// ==========================================================
//  filter group 開關
// ==========================================================
;(function($) {
  $('#Main_Content').on('click', '.filter-title', function(e) {
    $(this).parents('.filter-group:not(.checked-group)').toggleClass('in-open');
  })
})($)






// ==========================================================
//  篩選器挑選功能
// ==========================================================
;(function($) {
  let deviceType = ''
  const filterArray = []

  function filterCount(array, selector) {
    const arrayAmount = array.length
    $(selector).text(arrayAmount)
  }

  function filterTags(array, wrapper, className) {
    $(wrapper).empty()

    array.forEach((item, i) => {
      const itemEle = `<li class="${className}"><span class="cleanItem"></span>${item}</li>`

      $(wrapper).append(itemEle)
    })
  }

  function tagCheck(array, value, jqElement, className) {
    const tagIndex = array.indexOf(value)

    if(tagIndex !== -1) {
      array.splice(tagIndex, 1)
      jqElement.removeClass(className)
    } else {
      array.push(value)
      jqElement.addClass(className)
    }
  }

  function checkedBox(array, selector) {
    const arrayAmount = array.length

    if(arrayAmount) {
      $(selector).slideDown(500)
    } else {
      $(selector).slideUp(500)
    }
  }

  $(window).on('resize', function(e) {
    if ($(this).outerWidth(true) > 1024 && deviceType !== 'desktop') {
      deviceType = 'desktop'
      $('.checked-group').removeAttr('style')
    } else if ($(this).outerWidth(true) <= 1024 && deviceType !== 'mobile') {
      deviceType = 'mobile'
      if (filterArray.length) {
        $('.checked-group').css({
          display: 'block',
        })
      }
    }
  })

  //預設選項
  $('.filter-list-item').each(function(){
      if(!$(this).hasClass('in-check'))
      {
          return ;
      }

      const targetValue = $(this).data('value');
      tagCheck(filterArray, targetValue, $(`[data-value="${targetValue}"]`), 'in-check');
  });

  $('#Main_Content').on('click', '.filter-group:not(.checked-group) .filter-list-item', function(e) {
    const targetValue = $(this).data('value')

    tagCheck(filterArray, targetValue, $(`[data-value="${targetValue}"]`), 'in-check')
    filterCount(filterArray, '.filter-box span')
    filterTags(filterArray, '.checked-group .filter-list', 'filter-list-item')
    if (deviceType === 'mobile') {
      checkedBox(filterArray, '.checked-group')
    }
  })

  $('#Main_Content').on('click', '.checked-group span', function(e) {
    const targetValue = $.trim($(this).parents('.filter-list-item').text())

    tagCheck(filterArray, targetValue, $(`[data-value="${targetValue}"]`), 'in-check')
    filterCount(filterArray, '.filter-box span')
    filterTags(filterArray, '.checked-group .filter-list', 'filter-list-item')
    if (deviceType === 'mobile') {
      checkedBox(filterArray, '.checked-group')
    }
  })

  $('#Main_Content').on('click', '.filter-clearall', function(e) {
    filterArray.length = 0

    $('.filter-list-item').removeClass('in-check')
    filterCount(filterArray, '.filter-box span')
    filterTags(filterArray, '.checked-group .filter-list', 'filter-list-item')
    if (deviceType === 'mobile') {
      checkedBox(filterArray, '.checked-group')
    }
  })

})($)






// ==========================================================
//  條件搜尋按鈕
// ==========================================================
;(function($) {
  function log(obj) {
    console.log(obj)
  }

  $(window).on('scroll', function(e) {
    const $offsetStart = $('#Main_Content').offset().top + $('#topTitle').outerHeight() - $('.header-fixe').outerHeight()
    const $offsetEnd = $('.pager').offset().top - $(window).outerHeight(true) + $('.headerBottom').outerHeight()
    const $winWidth = $(window).outerWidth(true)

    if($winWidth <= 1024) {
      if ($(window).scrollTop() >= $offsetStart && $(window).scrollTop() <= $offsetEnd) {
        $('.mobile-scroll-button').fadeIn('500')
      } else {
        $('.mobile-scroll-button').fadeOut('150')
      }
    }

  })

  $(window).trigger('scroll')
})($)





// ==========================================================
//  快速購物跳窗
// ==========================================================
;(function($) {
    $('body').on('click', '.product-quickshop', function(e) {
      $(this).parents('.productBox').find('.quickshop-box').toggleClass('in-show');
    })
})($)