const model = require('modules/module.js');

(function($){
/*為JQ添加naturalWidth()和naturalHeight()方法，抓取圖片原始尺寸*/
  var
  props = ['Width', 'Height'],
  prop;


  while (prop = props.pop()) {
  (function (natural, prop) {
    $.fn[natural] = (natural in new Image()) ?
    function () {
    return this[0][natural];
    } :
    function () {
    var
    node = this[0],
    img,
    value;

    if (node.tagName.toLowerCase() === 'img') {
      img = new Image();
      img.src = node.src,
      value = img[prop];
    }
    return value;
    };
  }('natural' + prop, prop.toLowerCase()));
  }

/*評論預覽商品圖*/
$("body").on("click",".pic-over",function(){
	var _this = $(this),
		pic_src = _this.find("img").attr('src');
	_this.parents(".pic-box").find(".click").removeClass("click");
	_this.addClass("click");
	_this.parents(".pic-box").find(".pic-viewer").addClass("click")
	.find('img').attr({src: pic_src});
});
$('body').on('click', '.pic-box .close', function(event) {
	var _this = $(this).parents(".pic-box");
	_this.find(".pic-viewer").removeClass("click");
	_this.find(".click").removeClass("click");
});


var _window = $(window);
  var change = '';
  var moreview = false;




  // ==========================================================
  // 	依寬度判斷行為
  // ==========================================================
  function productSlideMobile() {
	$('.productImg').owlCarousel({
        loop: false,
        items: 1,
        nav: false,
        dots: true,
    });
  }
  function productSlideDesktop() {
    if($('.moreview').children().length) {
      $('.moreview').owlCarousel({
          dots: false,
          nav: true,
          responsive: {
            0: {
              margin: 5,
              items: 4,
            },
            1200: {
              margin: 10,
              items: 5,
            },
          },
      });
    }
  }

  _window.on('resize',function(){

    if( _window.width() >= 768 && change !== 'desktop'){
        change = 'desktop';
        $.get('/products/ajax/detail/productView_pc.php',{sid:$(".wishlist").attr("sid")}, function(data,status){
          $('.productView').html(data);
          productSlideDesktop()
          model.smallPicBox();
          model.videoBox();
          model.zoomBox();
        });
        $('.item-1').off('click','img');

      }else if(_window.width() < 768 && change !== 'mobile'){
          change = 'mobile';
        $.get('/products/ajax/detail/productView_moblie.php',{sid:$(".wishlist").attr("sid")}, function(data,status){
          $('.productView').html(data);
          productSlideMobile();
          $('.productImg').on('changed.owl.carousel',function(e){
          var num  = e.item.index;

				if(document.getElementById("Video")){
					if($(".productView").find(".owl-item").eq(num).find("#Video").attr("style")){
						$("#big_picture").hide();
						document.getElementById("Video").play();
					}else{
						$("#big_picture").show();
						document.getElementById("Video").pause();
					}
				}
			});
		});

      };
  });

  $('.productView').on('click', '.moblie .picbox', function(e) {
    // console.log('mobile click')
    const bigPicPath = $(this).attr('big-pic')

    if(bigPicPath) {
      const appendDOM = `
      <div class="full-picture">
          <button class="picture-closer closer" type="button">close</button>
          <div class="picture-content">
              <img src="${bigPicPath}" alt="">
          </div>
      </div>
      `

      $('body').addClass('overflow-hidden').append(appendDOM)
      // console.log(bigPicPath)
    }
  })
  $('body').on('click', '.full-picture', function(e) {
    if(e.currentTarget === e.target || $(e.target).hasClass('closer')) {
      e.preventDefault()
      $(e.currentTarget).remove()
      $('body').removeClass('overflow-hidden')
    }
  })
}(jQuery));








// ==========================================================
// 	商品詳細資訊下方其他商品輪播
// ==========================================================
;(function($) {
    $('.extra-content').each(function(i, ele) {
    	$(ele).owlCarousel({
    		nav: true,
    		dots: false,
    		responsive: {
    			0: {
    				margin: 10,
    				items: 2,
    			},
    			576: {
    				margin: 10,
    				items: 3,
    			},
    			660: {
    				margin: 30,
    				items: 3,
    			},
    			768: {
    				margin: 30,
    				items: 4,
    			},
    			992: {
    				margin: 30,
    				items: 5,
    			},
    			1380: {
    				margin: 30,
    				items: 6,
    			},
    		},
    	})
    })
})($)





// ==========================================================
//  運費試算跳窗
// ==========================================================
;(function($, jQuery) {
  $('body').on('click', '.fare-button', function(e) {
    e.preventDefault()
    jQuery.ajax({
      url: '/products/ajax/detail/ajax_fare_calculate.php' ,
      type: 'POST',
      data: {price: $('#price_input').val(),
             huge_flag: $("#huge_input").val(),
             Amount: $('#Main_Amount').val(),
             Prod_No: $('#Prod_No').val()
           },
      dataType: 'html',
      async: true,
    }).done(function(res) {
      // console.log(res)
      $('body').addClass('overflow-hidden').append(res)
    }).fail(function(x, y, z) {
      console.log(x)
    })
  })
  $('body').on('click', '.fare-calculator', function(e) {
    if(e.currentTarget === e.target || $(e.target).hasClass('closer')) {
      e.preventDefault()
      $(e.currentTarget).remove()
      $('body').removeClass('overflow-hidden')
    }
  })
})($, jQuery)






// ==========================================================
//  細節頁 tags 切換
// ==========================================================
;(function($) {
    $('body').on('click', '.detail-tags .link', function(e) {
      e.preventDefault()
      const tagTarget = $(this).attr('href')
      $(this).parent('.tag-item').addClass('in-active').siblings('.tag-item').removeClass('in-active')
      $(tagTarget).addClass('in-active').siblings('.content-item').removeClass('in-active')

      $('body, html').animate({
        scrollTop: $(this).parents('.detail-tags').offset().top - $('.header').height()
      }, 750);
    })

    const pageHash = location.hash
    if(pageHash && $(pageHash).length) {
      $('.detail-tags .link[href=' + pageHash + ']').trigger('click')
    }
})($)





// ==========================================================
//  快捷鍵返回購買處
// ==========================================================
;(function($) {
  $(window).on('scroll', function(e) {
    if($(this).width() < 768) {
      if($(this).scrollTop() > $('#shoppingGroup').offset().top || $(this).scrollTop() < $('#shoppingGroup').offset().top - $(window).height()) {
        $('.shop-bt').fadeIn(500);
      } else {
        $('.shop-bt').fadeOut(250);
      }
    }
  })

  let quickshopStep = false
  $('body').on('click', '.selectbox-button', function(e) {
    e.preventDefault()
    if(!quickshopStep) {
      quickshopStep = true
      console.log($('#Serial_No').val())



      jQuery.ajax({
        url: '/ajax/ajax_get_quickshop.php',
        type: 'POST',
        dataType: 'JSON',
        async: true,
        data: {
          Serial_No: $('#Serial_No').val(),
          Amount: $('#Main_Amount').val(),
        },
      }).done(function(res) {
        $('body').addClass('overflow-hidden')
        $('#Main_Content').append(res.content)
      }).fail(function(x, y, z) {
        console.log(x)
        quickshopStep = false
      })
    }
  })

  $('body').on('click', '.quickshop-popup', function(e) {
    if(e.target === e.currentTarget || $(e.target).hasClass('closer')) {
      e.preventDefault()
      quickshopStep = false
      $(e.currentTarget).remove()
      $('body').removeClass('overflow-hidden')
    }
  })
})($)



// ==========================================================
//   預約體驗
// ==========================================================
;(function($) {
  $(document).on("click", ".appointment-closer", function(e){
    e.preventDefault()
    $(this).parents(".appointment-link").remove()
  })
})($)



// ==========================================================
//   trigger function
// ==========================================================
;(function($) {
    $(window).triggerAll('resize scroll')
})($)