let userAgent;
let isSafari = false;
let browserName;
window.onload = function(){
  //window.scrollBy(0, 1);
  if(screen.width >= 901){
      window.location.href = "../index_designerList.html";   
  }
  userAgent = navigator.userAgent;
  detectBrowser(userAgent);
  detectDirection ();
  let result; 
  let designer;
  let id = 0;
  $.ajax({
    method: "GET",
    url: "./json/designers.json",
    dataType: "json",
  }).done(function (msg) {
    designer = [...msg][id];
    console.log(designer)
    renderinfoCard(designer)
    // renderTab(designer['Content'])
    // renderTabContent(designer['Content'])
  });
}
let over = document.querySelector('.infoContent__navBlock').offsetTop;

function detectBrowser(agent){
  if(userAgent.match(/chrome|chromium|crios/i)){
    browserName = "chrome";
  }else if(userAgent.match(/firefox|fxios/i)){
    browserName = "firefox";
  }  else if(userAgent.match(/safari/i)){
    browserName = "safari";
  }else if(userAgent.match(/opr\//i)){
    browserName = "opera";
  } else if(userAgent.match(/edg/i)){
    browserName = "edge";
  }else{
    browserName="No browser detection";
  }

  if(browserName === 'safari'){
    isSafari = true;
  }
  console.log(isSafari);
}



function detectDirection () {
  let height = (window.screen.width * 2) / 3;
  
  $('.sec-02 .slide-item').css('height', `${height}px`);
  let topHeight = (window.screen.width * 30) / 131;
  
  $('.sec-00 .slide-item').css('height', `${topHeight}px`);
  $('.sec-00 .container-fluid').css('height', `${topHeight}px`);
}

function renderinfoCard(designer) {
  $('.mb__hero__bgImg').attr('backgroundImage', `url(${designer['BannerImg']})`);
  $('.mb__infoCard__avatar').css('backgroundImage', `url(${designer['Designerimg']})`)
  $('.mb__infoCard__name').text(designer['DesignerName']);
  $('.mb__infoCard__seo').text(designer['Description']);
  $('.mb__infoCard__cmy').text(designer['CompanyName']);
  if(designer['Approve'] !== '') {
      $('.mb__infoCard__approve').text(designer['Approve']);
  }
  // Basics
  let str = '';
  for(let i = 0;i < designer['Basics'].length; i ++) {
      str += `<aside class="d-flex">
                  <div class="mb__infoCard__detail__l">
                      <div>${designer['Basics'][i].title}</div>
                  </div>
                  <div class="mb__infoCard__detail__r">
                      <a href="${designer['Basics'][i].link}">${designer['Basics'][i].data}</a>
                  </div>
              </aside>`
  }
  $('.mb__infoCard__basics').html(str);

  // Branches
  let otherStr = '';
  for(let i = 0;i < designer['Branches'].length; i ++) {
      otherStr += `<aside class="d-flex">
                  <div class="mb__infoCard__detail__l">
                      <div>${designer['Branches'][i].title}</div>
                  </div>
                  <div class="mb__infoCard__detail__r">
                      <a href="${designer['Branches'][i].link}" >${designer['Branches'][i].data}</a>
                  </div>
              </aside>`
  }
  $('.mb__infoCard__branches').html(otherStr);

  // scMedia
  let mediaStr = '';
  for(let i = 0;i < designer['scMedia'].length; i ++) {
      if(i === 4) {
        mediaStr += `<span>
                    <img src="${designer['scMedia'][i].img}" class="dislike" alt="">
                    <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
                </span>`;
    } else {
        mediaStr += `<a href="${designer['scMedia'][i].link}">
                    <img src="${designer['scMedia'][i].img}" alt="">
                </a>`;
    }
  }
  $('.scMedia').html(mediaStr);

  document.querySelector('.dislike').addEventListener('click', function() {
    $('.dislike').css('display', 'none');
    $('.like').css('display', 'block');
  })

  document.querySelector('.like').addEventListener('click', function() {
      $('.dislike').css('display', 'block');
      $('.like').css('display', 'none');
  })

  // term condition
  let termStr = '';
  for(let i = 0;i < designer['Terms'].length; i ++) {
      termStr += `<aside class="d-flex">
                      <div class="mb__infoCard__detail__l">
                          <div>${designer['Terms'][i].title}</div>
                      </div>
                      <div class="mb__infoCard__detail__r">
                          <div>${designer['Terms'][i].data}</div>
                      </div>
                  </aside>`
  }
  $('.mb__infoCard__terms').html(termStr);
}


    window.addEventListener('scroll', fixedOnScroll);
    const navBlock = document.querySelector('.infoContent__navBlock');
    function fixedOnScroll() {
      if(window.innerHeight < window.innerWidth){
      } else {
        detectDirection ();
      }
      
        if(window.pageYOffset >= over){
          navBlock.classList.add('tab_sticky');
        } else if(window.pageYOffset < over) {
          navBlock.classList.remove('tab_sticky');
        }
    }
    
    $('.navbar-toggler').click(function(){
        $(".sec-menu").css('display', 'block');
        $(".wholeBody").css('overflow-y', 'hidden');
        $('.sec-menu-block').addClass('slidein');
        $('.sec-menu-block').removeClass('slideout');
    });
    
    $('.navbar-back').click(function(){
        $(".sec-menu").css('display', 'none');
        $(".wholeBody").css('overflow-y', 'scroll');
        $('.sec-menu-block').removeClass('slidein');
        $('.sec-menu-block').addClass('slideout');
    });
    
    $('.subexpand').click(function(){
        $(this).parent().next().toggleClass('show');
        $(this).parent().toggleClass('show');
    });
    
    $('.navbar-search').click(function(){
        $(".sec-search").css('display', 'block');
        $(".wholeBody").css('overflow-y', 'hidden');
    })
    
    $('.navbar-backs').click(function(){
        $(".sec-search").css('display', 'none');
        $(".wholeBody").css('overflow-y', 'scroll');
    });

    $('.navbar-back-fav').click(function(){
      $(".sec-favor").css('display', 'none');
    })

      $('.btn-gotop').click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 500)
    });

    $(window).scroll(function() {
		if ( $(this).scrollTop() > 500 ){
        $('.fixed-btn').fadeIn(222);
        $('.freeCall').fadeIn(222);
		} else {
      $('.fixed-btn').stop().fadeOut(222);
      $('.freeCall').stop().fadeOut(222);
    }
    }).scroll();

    
const searchBtn = document.querySelector('.searchBtn');
const searchBar = document.querySelector('.searchBar');
const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
searchBtn.addEventListener('click', search);
searchBar.addEventListener('keyup', pressSearch);
function search() {
  if(searchBar.value == '') {
    window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
  } else {
    window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
  }
}

function pressSearch(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    search();
  }
}

searchHotLink.forEach((item, i) => {
  item.addEventListener('click', function() {
    window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
  })
})

document.addEventListener('lazybeforeunveil', function(e){
  var bg = e.target.getAttribute('data-bg');
  if(bg){
      e.target.style.backgroundImage = 'url(' + bg + ')';
  }
});

$('.mb__infoCard__more').click(function() {
  $(this).hide();
  $('.other').css('display', 'block');
  over = document.querySelector('.infoContent__navBlock').offsetTop;
})


checkTab()
$('.infoContent .nav-item-link').click(checkTab);

function checkTab() {
  if($('#pills-intro-tab').hasClass('active')) {
    $('.likeSee').attr('hidden', false)
  } else {
    $('.likeSee').attr('hidden', true)
  }
}