$(document).ready(function() {
  // ===========================================
  // page sub menu current
  // ===========================================
  var str = location.href.toLowerCase();
  $('.page-menu-container>li>a').each(function() {
    if (str.indexOf(this.href.toLowerCase()) > -1) {
      $(".page-menu-container>li.current").removeClass("current");
      $(this).parent().addClass("current");
    }
  });
  $('li.active').parents().each(function() {
    if ($(this).is('li')) {
      $(this).addClass("current");
    }
  });
  var str = location.href.toLowerCase();
  $('.grid-navbar>li>a').each(function() {
    if (str.indexOf(this.href.toLowerCase()) > -1) {
      $(".grid-navbar>li.active").removeClass("active");
      $(this).parent().addClass("active");
    }
  });
  $('li.active').parents().each(function() {
    if ($(this).is('li')) {
      $(this).addClass("active");
    }
  });
  // ===========================================
  // form mail  : style 2
  // ===========================================
  $("#formmail-style-2    input.formmail_border[name='add1']").attr('placeholder', 'name');
  $("#formmail-style-2    input.formmail_border[name='add2']").attr('placeholder', 'mail');
  $("#formmail-style-2    input.formmail_border[name='add3']").attr('placeholder', 'phone');
  $("#formmail-style-2    textarea.formmail_textarea_style[name='description1']").attr('placeholder', 'Describe your project');




  // ===========================================
  // ¸ÞÀÎ FAQ
  // ===========================================

 var $faqItems = $('#faqs .faq');
   if( window.location.hash != '' ) {
    var getFaqFilterHash = window.location.hash;
    var hashFaqFilter = getFaqFilterHash.split('#');
    if( $faqItems.hasClass( hashFaqFilter[1] ) ) {
     $('.grid-filter li').removeClass('activeFilter');
     $( '[data-filter=".'+ hashFaqFilter[1] +'"]' ).parent('li').addClass('activeFilter');
     var hashFaqSelector = '.' + hashFaqFilter[1];
     $faqItems.css('display', 'none');
     if( hashFaqSelector != 'all' ) {
      $( hashFaqSelector ).fadeIn(500);
     } else {
      $faqItems.fadeIn(500);
     }
    }
   }
   $('.grid-filter a').on( 'click', function(){
    $('.grid-filter li').removeClass('activeFilter');
    $(this).parent('li').addClass('activeFilter');
    var faqSelector = $(this).attr('data-filter');
    $faqItems.css('display', 'none');
    if( faqSelector != 'all' ) {
     $( faqSelector ).fadeIn(500);
    } else {
     $faqItems.fadeIn(500);
    }
    return false;
     });

  // ===========================================
  // Èê·¯°¡´Â ÅؽºÆ®
  // ===========================================
    $('.bg-text-box .bg-text').marquee({
      speed: 100,
      gap: 30,
      delayBeforeStart: -10000,
      direction: 'left',
      duplicated: true,
      pauseOnHover: false,
    });

/**********************************************/
 // list_card main 04
 /**********************************************/
 $("#list_card > li > a").hover(function(){
  var bg = $(this).attr('data-background');
  $("#section4").css('background-image', 'url('+ bg +')');
 });




    
});






/* webflow only this section swiper pagination */
$(document).ready(function() {
  /* add html by js (no way to add this HTML by webflow UI beacuse this is CMS list*/
  var part1 = "<div class=swiper-pagination></div>";
  //  var part2 = '<div class="swiper-button-prev"></div>';
  //var part3 = '<div class="swiper-button-next"></div>';
  // var swiperString = part1.concat(part2, part3);
  $("#swiper-press").append(part1);
});
/* change active class when click */
$(".swiper-container-videos .swiper-wrapper .swiper-slide a").click(function() {
  $(this)
    .closest(".swiper-slide")
    .addClass("selected")
    .siblings()
    .removeClass("selected");
  mySwiper1.slideTo(mySwiper1.clickedIndex);
});
$(".swiper-container-videos .swiper-slide")
  .first()
  .addClass("selected");
/* 1 of 2 : SWIPER */
var mySwiper1 = new Swiper(".swiper-container-videos", {
  // If loop true set photoswipe - counterEl: false
  loop: false,
  /* slidesPerView || auto - if you want to set width by css like flickity.js layout - in this case width:80% by CSS */
  slidesPerView: "auto",
  spaceBetween: 15,
  centeredSlides: false,
  // If we need pagination
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },
  navigation: {
    nextEl: ".swiper-custom-next",
    prevEl: ".swiper-custom-prev"
  },
  keyboard: {
    enabled: true,
    onlyInViewport: true
  }
});
/* This is what makes the videos responsive. You can either include this in a <script> tag in the markup, or better yet, include it in a separata JavaScript file.*/
$(function() {
  //Look for all the videos inside this element and make them responsive
  $(".vid-container").fitVids();
});
/*JS FOR SCROLLING THE ROW OF THUMBNAILS*/
$(document).ready(function() {
  $(".vid-item").each(function(index) {
    $(this).on("click", function() {
      var current_index = index + 1;
      $(".vid-item .thumb").removeClass("active");
      $(".vid-item:nth-child(" + current_index + ") .thumb").addClass("active");
    });
  });
});