$(".p-section").each(function (index) {
  let childTriggers = $(this).find(".scroll-text-item");
  let childTargets = $(this).find(".scroll-image-item");
  // switch active class
  function makeItemActive(index) {
    childTriggers.removeClass("is-active");
    childTargets.removeClass("is-active");
    childTriggers.eq(index).addClass("is-active");
    childTargets.eq(index).addClass("is-active");
  }
  makeItemActive(0);
  // create triggers
  childTriggers.each(function (index) {
    ScrollTrigger.create({
      trigger: $(this),
      start: "top center",
      end: "bottom center",
      onToggle: (isActive) => {
        if (isActive) {
          makeItemActive(index);
        }
      }
    });
  });
});

//Mapbox API token
mapboxgl.accessToken =
  "pk.eyJ1Ijoibmlja2RyZWlsaW5nIiwiYSI6ImNreWM1bHJ0YTBtMjMyb28xcDUxbTlhdG8ifQ.HC1ZRxJzHaHyun8p5GEFSQ";

//Geocoder used for gettiing address information
const geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  types: "address, poi, region, place, postcode,locality,neighborhood",
  countries: "us",
  placeholder: "Where's Your Jobsite?"
});

// Add Geocoder to DOM
geocoder.addTo("#geocoder");

// Format results into API format
(geocoderHelperResultFormatter = (result) => {
  result.context.push({
    id: result.id,
    text: result.text
  });
  var location = {
    name: null,
    address: null,
    city: null,
    zip: null,
    state: null,
    country: null,
    lon: result.geometry.coordinates[0],
    lat: result.geometry.coordinates[1]
  };
  if (result.place_type.includes("address")) {
    location.address = result.place_name.substring(
      0,
      result.place_name.indexOf(",")
    );
  }
  if (result.place_type.includes("poi")) {
    location.address = result.properties.address;
    location.name = result.place_name.substring(
      0,
      result.place_name.indexOf(",")
    );
  }
  location.city = result.context.find((x) => {
    return x.id.startsWith("place");
  }).text;
  if (
    result.context.find((x) => {
      return x.id.startsWith("postcode");
    })
  ) {
    location.zip = result.context.find((x) => {
      return x.id.startsWith("postcode");
    }).text;
  }
  location.state = result.context.find((x) => {
    return x.id.startsWith("region");
  }).text;
  location.country = result.context.find((x) => {
    return x.id.startsWith("country");
  }).text;
  return location;
}),
  //Parse formatted result into API request to plot site and redirect to it.
  (onResult = (result) => {
    var formattedResult = geocoderHelperResultFormatter(result);
    const searchURL = new URL("https://projects.getplot.com/search_results");
    for (var key in formattedResult) {
      formattedResult[key] &&
        searchURL.searchParams.append(key, formattedResult[key]);
    }
    window.open(searchURL, "_blank");
  });

// Add geocoder result to container.
geocoder.on("result", (e) => {
  onResult(e.result);
});