const active_link = ["aboutme", "portfolio", "reflection", "aboutus"]
const active_id = ["link_about_me", "link_portfolio", "link_reflection", "link_aboutus"]
const scroll_y_offset = 80

var active_link_position = []
var active_link_width = []
var scroll_y = []


update_position();
scroll_to('aboutme');


$(".dark-mode-button").on("click", function (e) {

  document.querySelector("body").classList.toggle("dark-mode");
})

$("#ass_but").on("mouseenter", function (e) {
  $("#ass_lists").css("visibility", "visible")
})

$("#ass_but").on("mouseleave", function (e) {
  $("#ass_lists").css("visibility", "hidden")
})

$("#ass_lists").on("mouseenter", function (e) {
  $("#ass_lists").css("visibility", "visible")
})

$("body").on("click", function (e) {
  $("#ass_lists").css("visibility", "hidden")
})

$(".about_me").each(function () {
  var pos = $(this).offset().top;
  var winTop = $(window).scrollTop();
  if (pos < winTop + 600) {
    $(this).addClass("slide");
  }
  if (pos > 1000) {
    $("#active_link").animate({ left: active_link_position[1] });
  }
});


$(window).scroll(function () {
  update_position();
  if (window.scrollY < scroll_y[1]) {
    move_active_link(active_link[0]);
  } else if (window.scrollY > scroll_y[1] && window.scrollY < scroll_y[2]) {
    move_active_link(active_link[1]);
  } else if (window.scrollY > scroll_y[2] && window.scrollY < scroll_y[3] - 200) {
    move_active_link(active_link[2]);
  } else {
    move_active_link(active_link[3]);
  }


  // } else if (window.scrollY > scroll_y[3] && window.scrollY < scroll_y[4] - 300) {
  //   move_active_link(active_link[3]);
  // }
  // else if (window.scrollY > scroll_y[4] && window.scrollY < scroll_y[5]) {
  //   move_active_link(active_link[4]);
  // } else if (window.scrollY > scroll_y[5] && window.scrollY < scroll_y[6] - 200) {
  //   move_active_link(active_link[5]);
  // } else {
  //   move_active_link(active_link[6]);
  // }

  $(".slideanim").each(function () {
    var pos = $(this).offset().top;
    var winTop = $(window).scrollTop();
    if (pos < winTop + 500) {
      $(this).addClass("slide");
      $(this).removeClass("slideanim");
    }
  });
});



function scroll_to(section_id) {
  move_active_link(section_id);

  var pos = $('#' + section_id).offset().top;
  $('html, body').animate({
    scrollTop: pos
  }, 50);
}

function move_active_link(current_id) {
  const active_link_ = document.getElementById('active_link');
  let index = active_link.indexOf(current_id)
  active_link_.style.width = active_link_width[index]
  active_link_.style.left = active_link_position[index]
}

function update_position() {
  for (let i = 0; i < active_id.length; i++) {
    var div = document.getElementById(active_id[i]);
    var rect = div.getBoundingClientRect();
    active_link_position[i] = rect.left + 'px';
    active_link_width[i] = rect.width + 'px';

    var div = document.getElementById(active_link[i]);
    var rect = div.getBoundingClientRect();
    // console.log(rect.top)

    var pos = $('#' + active_link[i]).offset().top;
    scroll_y[i] = pos - scroll_y_offset;
  }
  console.log(scroll_y)
}
function update_scroll_position() {
  for (let i = 0; i < active_id.length; i++) {

  }
}