// 
// home.js
// 

$(function() {

  // Hero Carousel (full-carousel)
  $('#hero-carousel').owlCarousel({
    autoplay: true,
    autoplayTimeout: 6000,
    loop: true,
    nav: false,
    dots: true,
    responsive:{
        0:{
          items:1
        },
        577:{ // 577以上
          items: 1,
          nav: true,
          dots: false,
        }
    }
  });

  // About Carousel (full-carousel)
  $('#about-carousel').owlCarousel({
    autoplay: true,
    autoplayTimeout: 6000,
    loop: true,
    nav: false,
    dots: true,
    responsive:{
        0:{
          items:1
        },
        577:{ // 577以上
          items: 1,
          nav: true,
          dots: false,
        }
    }
  });

  // Product Carousel (item-carousel)
  $('#product-carousel').owlCarousel({
    loop: true,
    nav: false,
    dots: true,
    margin: 5,
    responsive:{
        0:{
          items: 1,
          stagePadding: 20,
          margin: 18,
        },
        768: { // 768 以上
          items: 2,
          stagePadding: 12
        },
        992: { // 992以上
          items: 3,
          stagePadding: 12
        },
        1600:{ // 1600以上
          items: 4,
          nav: true,
          dots: false,
        }
    }
  });

  // News Carousel (item-carousel)
  $('#news-carousel').owlCarousel({
    loop: false,
    nav: false,
    dots: true,
    margin: 65,
    responsive:{
        0:{
          items: 1,
          // stagePadding: 20,
          margin: 0,
        },
        768: { // 768 以上
          items: 2,
          // stagePadding: 12
        },
        1200: { // 1200以上
          items: 3,
          // stagePadding: 12
        },
        1600: { // 1600以上
          items: 3,
          nav: true,
          dots: false,
        }
    }
  });


  
  // 首頁輪播
  // var owl = $('.home-carousel');

  // var playstop = '\
  //   <a class="play"></a>\
  //   <a class="stop"></a>\
  // ';

  // owl.owlCarousel({
  //   animateOut: 'fadeOut',
  //   loop: true,
  //   margin: 0,
  //   nav: false,
  //   dots: true,
  //   items: 1,
  //   // autoHeight: true,
  //   // autoplay: true,
  //   // autoplayHoverPause: true
  // })

  // owl.on('translate.owl.carousel', function(event) {
  //   autoplayControls();

  //   // 重置輪播設定
  //   owl.trigger('stop.owl.autoplay')
  //   owl.trigger('play.owl.autoplay', [3000])
  // })

  // owl.on('resized.owl.carousel', function(event) {
  //   autoplayControls();

  //   owl.trigger('play.owl.autoplay', [3000])
  //   $('.owl-dot.active span').addClass('running');
  // })

  // function autoplayControls() {
  //   // 在dots後加入play, stop按鈕
  //   owl.find('.owl-dots').append(playstop);

  //   $('.owl-dot span').removeClass('paused').removeClass('running');

  //   $('.play').on('click', function() {
  //     owl.trigger('play.owl.autoplay', [3000])
  //     $('.owl-dot.active span').removeClass('paused').addClass('running');

  //     $('.play').hide();
  //     $('.stop').css('display', 'block');
  //   })

  //   $('.stop').on('click', function() {
  //     owl.trigger('stop.owl.autoplay')
  //     $('.owl-dot.active span').removeClass('running').addClass('paused');

  //     $('.play').css('display', 'block');
  //     $('.stop').hide();
  //   })
  // }
  
  // // 啟動自動輪播
  // function startAutoplay() {
  //   owl.trigger('to.owl.carousel', [0]);
  //   owl.trigger('play.owl.autoplay', [3000]);
  //   $('.owl-dot.active span').addClass('running');
  //   autoplayControls();
  // }

  // startAutoplay();

  // // 首頁精選商品
  // var $product_item = $('.product-item');
  // var product_width = $product_item.outerWidth();
  // var product_length = $product_item.length;
  // var container_width = product_width * product_length;
  // var duration = product_length * 8;

  // //position in a row
  // TweenMax.set($product_item, {
  //   x: function(i) {
  //     return i * product_width;
  //   }
  // });

  // TweenMax.to($product_item, duration, {
  //   ease: Linear.easeNone,
  //   x: "+=" + container_width, //move each box 500px to right
  //   modifiers: {
  //     x: function(x) {
  //       return x % container_width; //force x value to be between 0 and 500 using modulus
  //     }
  //   },
  //   repeat: -1
  // });

  // 最新消息
  // $('.news-carousel').owlCarousel({
  //   loop: true,
  //   margin: 0,
  //   nav: false,
  //   dots: true,
  //   responsive: {
  //     // breakpoint from 0 up
  //     0 : {
  //       margin: 16,
  //       items: 2,
  //     },
  //     576 : {
  //       margin: 20,
  //       items: 3,
  //     },
  //     992 : {
  //       margin: 64,
  //       items: 3,
  //     },
  //   }
  // })
  
})