//-- 아코디언 --//
$(".accordion .accordion-control").click(function () {
  const accordion = $(this).parents(".accordion");
  var close_text = accordion.attr("data-close");
  var open_text = accordion.attr("data-open");
  var parent = accordion.parent();
  var isAccordionKeep = accordion.parent(".accordion-keep");
  isAccordionKeep = isAccordionKeep.length > 0 ? true : false;
  if (!isAccordionKeep) {
    $(parent).children(".accordion").find(".accordion-content").slideUp();

    if (accordion.hasClass("active") === true) {
      $(parent).children(".accordion").removeClass("active");
      accordion.addClass("active");
      $(this).html(close_text);
      accordion.children(".accordion-content").slideUp();
    } else {
      $(".accordion .accordion-control").html(close_text);
      $(parent).children(".accordion").removeClass("active");
      $(this).html(open_text);
      accordion.children(".accordion-content").slideDown();
    }
    accordion.toggleClass("active");
  } else {
    if (accordion.hasClass("active") === true) {
      $(this).html(close_text);
      accordion.children(".accordion-content").slideUp(function () {
        accordion.removeClass("active");
      });
    } else {
      $(this).html(open_text);
      accordion.children(".accordion-content").slideDown();
      accordion.addClass("active");
    }
  }
});
//-- 아코디언  --//

//-- 탭  --//
var allTab = $(".tab");
allTab.each(function () {
  if (!$(this).hasClass("tab-sub")) {
    $(this).children(".tab-content").children("div").hide();
  } else {
    $(this).children(".tab-nav").children("div:first-child").addClass("active");
  }
});

// #(해시) url에 있을 경우 매칭
var locationHash = location.hash;
if (locationHash != "") {
  //check tab active
  var isActiveTab = false;
  var tabNavActive = $(".tab .tab-nav>div.active");
  if (tabNavActive.length == 0) {
    $(".tab .tab-nav>div:first-child").addClass("active");
    $(".tab .tab-content>div:first-child").show();
  }
  var tabName = locationHash.replace("#", "");
  $(".tab .tab-nav>div[rel=" + tabName + "]")
    .parent()
    .children("div")
    .removeClass("active");
  $(".tab .tab-nav>div[rel=" + tabName + "]").addClass("active");
  $(locationHash).parent(".tab-content").children("div").hide();
  $(locationHash).show();
} else {
  $(".tab .tab-nav>div:first-child").addClass("active");
  $(".tab .tab-content>div:first-child").show();
}

//탭 버튼 클릭시
$(".tab .tab-nav>div").click(function () {
  const tab = $(this).parents(".tab").eq(0);
  console.log($(tab));
  $(tab).children(".tab-nav").children("div").removeClass("active");
  $(this).addClass("active");
  $(tab).children(".tab-content").children("div").hide();
  var activeTab = $(this).attr("rel");
  $("#" + activeTab).fadeIn();

  if (!$(tab).hasClass("tab-sub")) {
    var scrollmem = $("body").scrollTop() || $("html").scrollTop();
    window.location.hash = activeTab;
    $("html,body").scrollTop(scrollmem);
  }
});

// 탭 상단 조정
window.addEventListener("hashchange", function () {
  //현재 해시
  var hash = location.hash;
  //hash 에fix-tab이 없을 경우
  if (hash.indexOf("fixTab") == -1) {
    return false;
  }
  if ($(".fix-tab").length > 0) {
    //$('.tab-nav') 의 높이
    var tabnavheight = $(".fix-tab .tab-nav").height();
    var headerheight = $("#header").height();
    var top =
      $(".fix-tab .tab-content").offset().top -
      tabnavheight -
      headerheight -
      50;
    $("html, body").animate(
      {
        scrollTop: top,
      },
      500
    );
  }
});

// 탭 터치 스크롤
$(document).ready(function () {
  var dom = $(".tab-touch-scroll .tab-nav");
  bind_drag_to_scroll(dom);
});
//-- 탭 --//

//-- dropdown  --//
var dropdown_pos = -1; // 현재 포지션
var dropdown_maxpos = 0; // 최대 포지션값

//모두 닫기
function allCloseDropdown() {
  var dropdowns = document.getElementsByClassName("dropdown");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains("show")) {
      openDropdown.classList.remove("show");
    }
  }
}
// 버튼클릭시
$("body").on("click", ".dropdown-select-button", function (e) {
  var dropdown = $(this).parents(".dropdown");
  var is_show = false;
  if (dropdown.hasClass("show")) {
    is_show = true;
  }

  var dropdown_list = dropdown.find(".dropdown-content>ul>li");
  var origin_maxpos = dropdown_maxpos;
  dropdown_maxpos = dropdown_list.length - 1;

  allCloseDropdown();
  if (is_show == true) {
    dropdown.removeClass("show");
  } else {
    dropdown.toggleClass("show");
  }

  var x = window.scrollX,
    y = window.scrollY;
  window.scrollTo(x, y);
  var is_focus = false;
  var focus_pos = -1;
  if (dropdown_list.length > 0) {
    for (i = 0; i < dropdown_list.length; i++) {
      $(dropdown_list[i]).attr("data-pos", i);
      if ($(dropdown_list[i]).hasClass("focus")) {
        is_focus = true;
        focus_pos = $(dropdown_list[i]).attr("data-pos");
      }
    }
    if (is_focus == false) {
      $(dropdown_list[0]).addClass("focus");
      if (origin_maxpos != dropdown_maxpos) {
        dropdown_pos = -1;
      }
    }
  }
});

//마우스 오버
$("body").on("mouseover", ".dropdown-content>ul>li", function (e) {
  var dropdown = $(this).parents(".dropdown");
  var dropdown_list = dropdown.find(".dropdown-content>ul>li");
  dropdown_list.removeClass("focus");
  $(this).addClass("focus");
});

//값선택시
$("body").on("click", ".dropdown-content>ul>li", function (e) {
  var dropdown = $(this).parents(".dropdown");
  var dropdown_list = dropdown.find(".dropdown-content>ul>li");
  var select_value = $(this).attr("data-value");
  var select_text = $(this).html();
  //클래스에 disabled가 있으면 선택 안됨
  if ($(this).hasClass("disabled")) {
    return false;
  }
  // html 태그 내용 삭제
  select_text = select_text.replace(/<span[^>]*>.*?<\/span>/g, ""); // <span> 태그 내용 삭제
  select_text = select_text.replace(/<p[^>]*>.*?<\/p>/g, ""); // <p> 태그 내용 삭제
  select_text = select_text.replace(/<b[^>]*>.*?<\/b>/g, ""); // <b> 태그 내용 삭제
  dropdown.find(".dropdown-select-value").text(select_text);
  dropdown.find("input").val(select_value);
  dropdown.toggleClass("show");
  dropdown_list.removeClass("focus");
  $(this).addClass("focus");
  dropdown_pos = Number($(this).attr("data-pos"));

  //함수가 있으면 실행
  var dropdown_function = dropdown.attr("data-function");
  if (dropdown_function != undefined) {
    window[dropdown_function](dropdown, e, select_value);
  }
});

//키보드 이동
$("body").on("keydown", ".dropdown", function (e) {
  var dropdown = $(this);
  var dropdown_list = dropdown.find(".dropdown-content>ul>li");
  dropdown_list.removeClass("focus");
  if (e.which == 40) {
    //down
    dropdown_pos = dropdown_pos == dropdown_maxpos ? 0 : dropdown_pos + 1;
  }
  if (e.which == 38) {
    //up
    dropdown_pos = dropdown_pos == -1 ? 0 : dropdown_pos;
    dropdown_pos = dropdown_pos == 0 ? dropdown_maxpos : dropdown_pos - 1;
  }
  if (e.which == 13) {
    //up
    dropdown.toggleClass("show");
  }
  var select_value = dropdown_list.eq(dropdown_pos).attr("data-value");
  var select_text = dropdown_list.eq(dropdown_pos).text();

  //클래스에 disabled가 있으면 선택 안됨
  if (dropdown_list.eq(dropdown_pos).hasClass("disabled")) {
    return false;
  }

  dropdown.find(".dropdown-select-value").text(select_text);
  dropdown.find("input").val(select_value);
  dropdown_list.eq(dropdown_pos).addClass("focus");

  var scrollContainer = dropdown.find(".dropdown-content>ul");
  var scrollTo = dropdown.find(".dropdown-content .focus");

  if (e.which == 40) {
    //down

    var cal_height = scrollContainer.height() - scrollTo.outerHeight(true);
    console.log(scrollTo.outerHeight(true));
    scrollContainer.animate(
      {
        scrollTop:
          scrollTo.offset().top -
          scrollContainer.offset().top +
          scrollContainer.scrollTop() -
          cal_height,
      },
      10
    );
  }
  if (e.which == 38) {
    //up
    scrollContainer.animate(
      {
        scrollTop:
          scrollTo.offset().top -
          scrollContainer.offset().top +
          scrollContainer.scrollTop(),
      },
      10
    );
  }

  //함수가 있으면 실행
  var dropdown_function = dropdown.attr("data-function");
  if (dropdown_function != undefined) {
    window[dropdown_function](select_value);
  }
  return false; //cancel scrolling
});

//밖에 클릭시 닫힘
window.onclick = function (event) {
  if (!event.target.matches(".dropdown-select-button")) {
    allCloseDropdown();
  }
};
//-- dropdown --//

//-- Observer Scroll event --//
const Observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    // 관찰 대상이 viewport 안에 들어온 경우 클래스를 추가
    if (entry.intersectionRatio > 0) {
      // scroll-event 클래스가 없으면
      if (!entry.target.classList.contains("scroll-event")) {
        entry.target.classList.add("scroll-event");
        createStyleForeach(
          ".delay-seq .scroll-event",
          "animation-delay",
          "100ms",
          "200ms",
          "+"
        );
      }
    }
    // 그 외의 경우 클래스 제거
    else {
      if (entry.target.classList.contains("scroll-event")) {
        entry.target.classList.remove("scroll-event");
        createStyleForeach(
          ".delay-seq .scroll-event",
          "animation-delay",
          "100ms",
          "200ms",
          "-"
        );
      }
    }
  });
});

// 관찰할 대상을 선언하고, 해당 속성을 관찰시킨다.
const scrollElList = document.querySelectorAll('[data-event="scroll"]');

scrollElList.forEach((el) => {
  Observer.observe(el);
});

// 페이지 로드 시 한 번만 실행
$(document).ready(function () {
  createStyleForeach(
    ".delay-seq .scroll-event",
    "animation-delay",
    "100ms",
    "200ms",
    "+"
  );
});
//-- Observer Scroll event --//

// 스크롤 이벤트
function initScrollAnimation(className, exposurePercentage = 100, loop = true) {
  const $elements = $(className);

  // 윈도우의 스크롤 이벤트를 모니터링합니다.
  $(window)
    .on("scroll", function () {
      // 각 요소에 대해 반복합니다.
      $elements.each(function () {
        const $el = $(this);

        // 요소의 위치 정보를 가져옵니다.
        const rect = $el[0].getBoundingClientRect();
        const winHeight = window.innerHeight; // 현재 브라우저 창의 높이
        const contentHeight = rect.bottom - rect.top; // 요소의 높이

        // 요소가 화면에 특정 비율만큼 노출될 때 처리합니다.
        if (
          rect.top <= winHeight - (contentHeight * exposurePercentage) / 100 &&
          rect.bottom >= (contentHeight * exposurePercentage) / 100
        ) {
          $el.addClass("on");
        }
        // 요소가 화면에서 완전히 사라졌을 때 처리합니다.
        if (loop && (rect.bottom <= 0 || rect.top >= window.innerHeight)) {
          $el.removeClass("on");
        }
      });
    })
    .scroll();
}

// 사용 예시(기본 세팅)
$(document).ready(function () {
  initScrollAnimation(".ani", 100, true);
});
//-- 스크롤 이벤트 --//

// Toggle dot menu
$(document).ready(function () {
  $(".dot-toggle").on("click", function () {
    if ($(this).hasClass("active")) {
      $(this).removeClass("active");
    } else {
      $(".dot-toggle").removeClass("active");
      $(this).addClass("active");
    }
    // if click outside card-dot-toggle, close dot menu
    $(document).on("click", function (e) {
      if (!$(e.target).closest(".dot-toggle").length) {
        $(".dot-toggle").removeClass("active");
      }
    });
  });
});

//버튼 점핑 효과 (jumping) : span으로 분리
document.querySelectorAll(".btn.jumping").forEach(function (el) {
  //icon 태그가 있으면 저장
  var icon = el.querySelector(".icon");
  var iconTag = "";
  if (icon) {
    iconTag = "<span>" + icon.outerHTML + "</span>";
  }
  el.innerHTML =
    "<div><span>" +
    el.textContent.trim().split("").join("</span><span>") +
    "</span>" +
    iconTag +
    "</div>";
  //icon 태그가 있으면 원래 있던 span 태그를 복구
});

//버튼 점핑 효과 (jumping) : 반복 스타일 생성(변수)
$(document).ready(function () {
  createStyleForeach(".btn.jumping div span", "--d", "50ms", "50ms", "+");
});

// 스플래쉬 알림
function showNotificationsAlert(type, title, message) {
  var id = Math.floor(Math.random() * 1000000000);
  var icon = "done";
  if (type == "warning") {
    icon = "exclamation";
  } else if (type == "error") {
    icon = "exclamation";
  } else if (type == "info") {
    icon = "info_i";
  }

  var notificationsAlert = `
  <div class="notifications-alert ${type}" id="${id}">
      <div class="icon-area">
          <span class="material-symbols-outlined icon">${icon}</span>
      </div>
      <div class="text">
          <p><span>${title}</span>${message}</p>
      </div>
      <div class="close-btn">
          <span class="material-icons-outlined">close</span>
      </div>
  </div>
      `;
  // .Notifications-alert 있으면 자기 top 값 가져오기
  var notificationsAlerts = $(".notifications-alert");
  if (notificationsAlerts.length > 0) {
    // NotificationsAlerts반복
    notificationsAlerts.each(function () {
      var top = $(this).css("top");
      // top값이 있으면
      if (top) {
        // top값을 가져와서 숫자로 변환
        var topNumber = parseInt(top);
        // top값에 60을 더해서 다시 top값으로 설정
        $(this).css("top", topNumber + 60);
      }
    });
  }
  $("body").append(notificationsAlert);
  setTimeout(function () {
    $("#" + id).addClass("show");
  }, 100);
  setTimeout(function () {
    $("#" + id).remove();
  }, 5000);
  // close button click
  $(".notifications-alert .close-btn").click(function () {
    $(this).parent().remove();
  });
}

// page click
$(document).ready(function () {
  $(".page-item").on("click", function () {
    $(".page-item").removeClass("active");
    $(this).addClass("active");
  });
  $(".page-item-last").on("click", function () {
    $(".page-item").removeClass("active");
    $(".pagination li.page-item").last().addClass("active");
  });

  //탭 버튼 클릭시
  $(".tab .tab-nav>div").click(function () {
    const tab = $(this).parents(".tab").eq(0);
    console.log($(tab));
    $(tab).children(".tab-nav").children("div").removeClass("active");
    $(this).addClass("active");
    $(tab).children(".tab-content").children("div").hide();
    var activeTab = $(this).attr("rel");
    $("#" + activeTab).fadeIn();

    if (!$(tab).hasClass("tab-sub")) {
      var scrollmem = $("body").scrollTop() || $("html").scrollTop();
      window.location.hash = activeTab;
      $("html,body").scrollTop(scrollmem);
    }
  });
});


  function board_link(baseUrl) {
    window.location = baseUrl;
    }