// JavaScript Document
(function (window, document, $) {

  $(function(){

    getNewarrivalArea('34');
    getNewarrivalArea('33');
    getNewbuildArea('34');
    getNewbuildArea('33');


    myInit();

  });



  $(window).on("load",function(){
    var scllegh = 1000;
    // window.resized を定義
    window.resized = function(){
      if($(window).width() <= 820){
        scllegh = $('.cht_flowlist > li').outerWidth(true) || 308;
      } else {
        scllegh = 1000;
      }
    };

    // 初回実行
    window.resized();

    // リサイズ時に呼び出し
    $(window).on("resize", window.resized);

    //流れスクロールプログレスバー
    const $progressBar = $('#scroll-progress-fill');
      // スクロール量に応じて進捗バーの幅を更新
    const updateScrollProgress = function() {
      const scrollPx = $('.cht_scrollwrap').scrollLeft();
      const contentswidPx = $('.cht_flowlist').width() - $('.cht_scrollwrap').width();
      const scrolled = (scrollPx / contentswidPx) * 100;
      $progressBar.css('width', scrolled + '%');
      if(scrolled <= 0){
        $('#preview').addClass("stt");
      } else {
        $('#preview').removeClass("stt");
      }
      if(scrolled >= 100){
        $('#next').addClass("end");
      } else {
        $('#next').removeClass("end");
      }
      //console.log(scrolled);
    };
    // スクロールイベントが発生するたびに進捗バーを更新
    $('.cht_scrollwrap').on('scroll', updateScrollProgress);
    updateScrollProgress();
    //スクロールのコントロールボタン
    $('#preview').on("click",function(){
      $('.cht_scrollwrap').animate({
        scrollLeft: $('.cht_scrollwrap').scrollLeft() - scllegh
      }, 300);
    });
    $('#next').on("click",function(){
      $('.cht_scrollwrap').animate({
        scrollLeft: $('.cht_scrollwrap').scrollLeft() + scllegh
      }, 300);
    });

  });

function myInit(){


    $('.cht_ticker').slick({
      autoplay: true,
      arrows: false,
      vertical: true,
    });

    function togglePauseBtn(slick) {
      const count = slick.slideCount;
      const show = slick.options.slidesToShow;

      // スライドが発生するなら表示、しないなら非表示
      if (count > show) {
        $('#pauseBtn').show();
      } else {
        $('#pauseBtn').hide();
      }

      $('#pauseBtn').off('click').on('click', function () {
        if ($(this).hasClass('cht_is-paused')) {
          slick.slickPlay();
          $(this).removeClass('cht_is-paused');
        } else {
          slick.slickPause();
          $(this).addClass('cht_is-paused');
        }

      });
    }

    $('.cht_bnrlist')
      .on('init', function(event, slick) {
        togglePauseBtn(slick);
      })
      .on('breakpoint', function(event, slick) {
        togglePauseBtn(slick);
      })
      .slick({
        autoplay: true,
        draggable: false,
        swipe: false,
        touchMove: false,
        pauseOnHover: true,
        slidesToShow: 3,
        dots: true,
        arrows: true,
        appendDots: $('.cht_slick-control'),
        responsive: [
          {
            breakpoint: 820,
            settings: {
              slidesToShow: 1,
            }
          }
        ]
      });

    let prefCd = {'okayama':'33', 'hiroshima':'34'};

    //トップSPエリアタブ
    $('[data-searchbtn]').on("click",function(){
      var tabsclid = $(this).attr("data-searchbtn");
      $('[data-searchbtn]').removeClass("active");
      $('[data-searcharea]').hide();
      $('[data-searcharea="'+tabsclid+'"]').fadeIn("fast");
      $(this).addClass("active");
    });
    //新着タブ
    $('[data-arrivalbtn]').on("click",function(){
      var tabsclid = $(this).attr("data-arrivalbtn");
      $('[data-arrivalbtn]').removeClass("active");
      $('[data-arrival]').hide();
      $('[data-arrival="'+tabsclid+'"]').fadeIn("fast");
      $(this).addClass("active");
    });
    //新築タブ
    $('[data-constructionbtn]').on("click",function(){
      var tablineid = $(this).attr("data-constructionbtn");
      $('[data-constructionbtn]').removeClass("active");
      $('[data-construction]').hide();
      $('[data-construction="'+tablineid+'"]').fadeIn("fast");
      $(this).addClass("active");
    });


    $('#freeword_search_btn').off('click').on('click', function(){
      let freeword = $('#freeword').val();
      if(freeword.length == 0){
        alert('検索ワードを入力してください。');
      }else{
        //location.href='/search/?area[]='+$(this).attr('data-myarea')+'&keyword=' + encodeURIComponent(freeword);
        location.href='/search/?keyword=' + encodeURIComponent(freeword);
      }
    });

    //トップページ内のお気に入りボタン
    topFav();
}

function myInit02(elm){

    if($(window).width() <= 430){

      if(elm && !$(elm).hasClass('slick-initialized')){
        $(elm).on('init', function(event, slick) {
          myImgLoaging();
        }).slick({
          autoplay: true,
          draggable: true,
          swipe: true,
          touchMove: true,
          pauseOnHover: true,
          slidesToShow: 2,
          dots: false,
          arrows: false,
          variableWidth: true
        });
      }

    }else{
      myImgLoaging();
    }


      //トップページ内のお気に入りボタン
      topFav();

      //テーブル02でulクリックで遷移できるように
      myUlClick();


}

function myImgLoaging() {
            $('#newarrival_hiroshima').css('display', 'flex');
            $('#newarrival_okayama').css('display', 'flex');
            $('#newbuild_hiroshima').css('display', 'flex');
            $('#newbuild_okayama').css('display', 'flex');

            $('[data-loadingimg="1"]').css('display', 'none');
            $('[data-loadingimg="2"]').css('display', 'none');
            $('[data-loadingimg="3"]').css('display', 'none');
            $('[data-loadingimg="4"]').css('display', 'none');
}



function getNewarrivalArea(pref) {

    //console.log('getSimilarArea() p:', p);

    var aData = {'pref':pref};
    var sUrl = '/yw/ajax/newarrivalTop.php';

    $.ajax({
        type: 'post',
        url: sUrl,
        data: aData,
        dataType: 'html',
        //async: false,
        success: function(aRes){
          //console.log('aRes:', aRes);
          if(pref == '34'){
            $('#newarrival_hiroshima').html(aRes);
            myInit02('#newarrival_hiroshima');
          }
          if(pref == '33'){
            $('#newarrival_okayama').html(aRes);
            myInit02('#newarrival_okayama');
          }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
          //alert( errorThrown );
          console.log('XMLHttpRequest:', XMLHttpRequest);
          console.log('textStatus:', textStatus);
          console.log('errorThrown:', errorThrown);

        }
    });
}
function getNewbuildArea(pref) {

    //console.log('getSimilarArea() p:', p);

    var aData = {'pref':pref};
    var sUrl = '/yw/ajax/newbuildTop.php';

    $.ajax({
        type: 'post',
        url: sUrl,
        data: aData,
        dataType: 'html',
        //async: false,
        success: function(aRes){
          //console.log('aRes:', aRes);
          if(pref == '34'){
            $('#newbuild_hiroshima').html(aRes);
            myInit02(null);
          }
          if(pref == '33'){
            $('#newbuild_okayama').html(aRes);
            myInit02(null);
          }

        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
          //alert( errorThrown );
          console.log('XMLHttpRequest:', XMLHttpRequest);
          console.log('textStatus:', textStatus);
          console.log('errorThrown:', errorThrown);

        }
    });
}





})(window, document, jQuery);

function topFav(){
    //トップページ内のお気に入りボタン
    $('[data-favdel]').off('click').on('click', function () {
      let roomId = $(this).attr('data-favdel');
      togglefav('[data-favdel="' + roomId + '"]', roomId);
    });
}
