const
searchInput=document.getElementById("search");latInput=document.getElementById("latInput");longInput=document.getElementById("longInput");uml=document.getElementById("useMyLocation");form=document.getElementById("searchLoc")
backdrop=document.getElementById("bg-playback")
btnOnTheMap=document.querySelectorAll(".on-the-map")
filterToggle=document.querySelector("#filterToggle")
clearFilter=document.querySelector("#clearFilter")
filterForm=document.querySelector("#filterForm")
filterDropdown=document.querySelector(".filters .dropdown")
filterNestedToggle=document.querySelectorAll("[data-for]")
singleClubPageMapSectionEl=document.querySelector(".wmn-single-clubpage .rhs")
singleClubPageContentSectionEl=document.querySelector(".wmn-single-clubpage .lhs")
singleClubPageGrid=document.querySelector(".wmn-single-clubpage .grid")
searchbutton=document.querySelector("search-btn")
pinIcons=[]
const WMNSearchboxResults=document.getElementById('wmn-searchbox-results');keys={backspace:8,tab:9,enter:13,shift:16,ctrl:17,esc:27,space:32,pageup:33,pagedown:34,end:35,home:36,leftarrow:37,uparrow:38,rightarrow:39,downarrow:40,insert:45,delete:46};E=["click","keypress"]
let itemListNodes=[]
let map=null;const markers=[]
coords={center:{Name:"You",Latitude:0,Longitude:0,Icon:"#"},locations:[{Name:"You",Latitude:55.01,Longitude:15,Icon:"#",Id:1},{Name:"You",Latitude:55.02,Longitude:15,Icon:"#",Id:2},{Name:"You",Latitude:55.03,Longitude:15,Icon:"#",Id:3}]}
let isLg=window.innerWidth>=1024
let isMd=420<window.innerWidth&&window.innerWidth<=768
let isSm=window.innerWidth<=420
window.onresize=()=>{isLg=window.innerWidth>=1024
isMd=420<window.innerWidth&&window.innerWidth<=768
isSm=window.innerWidth<=420}
!isSm?backdrop?.setAttribute("src",backdrop.dataset.src):null
const bgEl=document.querySelector(".fallback-img")
const debounce=(cb,delay=500)=>{let timeoutId;return(...args)=>{clearTimeout(timeoutId)
timeoutId=setTimeout(()=>cb(...args),delay)}}
const setBgImages=(images,interval=3)=>{let bgImages=[]
let imgIndex=0
bgImages=images.length&&images.map(url=>{img=new Image()
img.src=url
return img})
bgImages.length&&setInterval(()=>{bgEl.style.background=`url(${bgImages[imgIndex].currentSrc}) no-repeat center/cover`
imgIndex=++imgIndex%bgImages.length;},interval*1000)}
if(searchInput!==null&&searchInput!==undefined){const initSearch=async()=>{const Places=await google.maps.importLibrary("places");searchInput.addEventListener('input',debounce(e=>{Locationinputsearch(searchInput.value,Places)}));searchInput.addEventListener('keydown',(e)=>LocationSearchKeyboardNav(e));};window.addEventListener("DOMContentLoaded",initSearch)}
function LocationSearchKeyboardNav(e){if(e.keyCode==keys.downarrow){form.querySelector("button[type=submit]").disabled=true;if(IsVisible(WMNSearchboxResults)){if(WMNSearchboxResults.querySelectorAll(".selected").length==0){WMNSearchboxResults.getElementsByTagName("div")[1].classList.add("selected");}
else{var currentslection=WMNSearchboxResults.querySelectorAll(".selected")[0];currentslection.classList.remove("selected");var nextSelection=currentslection.nextElementSibling;if(nextSelection!=null){if(nextSelection.classList.contains("wmn-result-title")){nextSelection=nextSelection.nextElementSibling;}
if(nextSelection!=null){nextSelection.classList.add("selected");}
else{WMNSearchboxResults.getElementsByTagName("div")[1].classList.add("selected");}}
else{WMNSearchboxResults.getElementsByTagName("div")[1].classList.add("selected");}}
var selection=WMNSearchboxResults.querySelectorAll(".selected")[0];if(selection!=null)
{var name=selection.getAttribute("data-placeName");searchInput.value=name;if(selection.hasAttribute("data-locationurl"))
{form.querySelector("button[type=submit]").disabled=false;}
GeocodeGetLocation(selection.getAttribute("data-placeId"),false);}}}
if(e.keyCode==keys.uparrow){form.querySelector("button[type=submit]").disabled=true;if(IsVisible(WMNSearchboxResults)){if(WMNSearchboxResults.querySelectorAll(".selected").length==0){WMNSearchboxResults.getElementsByTagName("div")[WMNSearchboxResults.getElementsByTagName("div").length-1].classList.add("selected");}
else{var currentslection=WMNSearchboxResults.querySelectorAll(".selected")[0];currentslection.classList.remove("selected");var prevSelection=currentslection.previousElementSibling;if(prevSelection!=null){if(prevSelection.classList.contains("wmn-location-result-title")){prevSelection=prevSelection.previousElementSibling;if(prevSelection!=null){prevSelection.classList.add("selected");}}
if(prevSelection.classList.contains("wmn-google-result-title")){prevSelection=WMNSearchboxResults.getElementsByTagName("div")[WMNSearchboxResults.getElementsByTagName("div").length-1];if(prevSelection!=null){prevSelection.classList.add("selected");}}
prevSelection.classList.add("selected");}
else{WMNSearchboxResults.getElementsByTagName("div")[WMNSearchboxResults.getElementsByTagName("div").length-1].classList.add("selected");}}
var selection=WMNSearchboxResults.querySelectorAll(".selected")[0];if(selection!=null)
{var name=selection.getAttribute("data-placeName");searchInput.value=name;if(selection.hasAttribute("data-locationurl"))
{form.querySelector("button[type=submit]").disabled=false;}
GeocodeGetLocation(selection.getAttribute("data-placeId"),false);}}}
if(e.keyCode==keys.enter){if(WMNSearchboxResults.querySelectorAll(".selected").length==0){var foundresults=WMNSearchboxResults.querySelectorAll(".wmn-google-result,.wmn-location-result");if(foundresults.length>0){foundresults[0].click();}
return;}
else{WMNSearchboxResults.querySelectorAll(".selected")[0].click();}}
if(e.keyCode==keys.esc){WMNSearchboxResults.style="display:none";}}
function GeocodeGetLocation(placeID,submitForm)
{var geocoder=new google.maps.Geocoder();geocoder.geocode({'placeId':placeID},function(responses,status){if(status=='OK'){var lat=responses[0].geometry.location.lat();var lng=responses[0].geometry.location.lng();latInput.value=lat;longInput.value=lng;form.querySelector("button[type=submit]").disabled=false;if(submitForm){WMNSearchboxResults.style="display:none;";form.submit();}}});}
function IsVisible(elem){return!!(elem.offsetWidth||elem.offsetHeight||elem.getClientRects().length);}
function Locationinputsearch(searchTerm,places){if(searchTerm.length>=3){WMNSearchboxResults.innerHTML="";LocationNameSearch(searchTerm);}
else{WMNSearchboxResults.style="display:none";WMNSearchboxResults.innerHTML="";}}
document.addEventListener("click",function(e){var target=e.target;if(!target.classList.contains("wmn-mapsearch")&&target.id!="search");{WMNSearchboxResults.style="display:none";}
if(target.classList.contains("search-btn"))
{var location=document.querySelector(".wmn-location-result.selected")
if(location!=null)
{e.preventDefault();window.location.href=location.getAttribute("data-locationurl");}}});Element.prototype.insertChildAtIndex=function(child,index){if(!index)index=0
if(index>=this.children.length){this.appendChild(child)}else{this.insertBefore(child,this.children[index])}}
async function LocationNameSearch(searchTerm){var service=new google.maps.places.AutocompleteService(WMNSearchboxResults);service.getPlacePredictions({input:searchTerm},function(results,status){if(status==google.maps.places.PlacesServiceStatus.OK){var existingResults=WMNSearchboxResults.querySelectorAll(".wmn-google-result-title,.wmn-google-result")
for(var i=0;i<existingResults.length;i++){WMNSearchboxResults.removeChild(existingResults[i]);}
var resultsMax=results.length>=4?4:results.length;if(results.length!=0){var Titleitem=document.createElement('div');Titleitem.className="wmn-mapsearch wmn-result-title wmn-google-result-title";Titleitem.innerText="Locations";WMNSearchboxResults.insertChildAtIndex(Titleitem,0);}
for(var i=0;i<resultsMax;i++){var item=document.createElement('div');item.className="wmn-mapsearch wmn-google-result";item.setAttribute("data-placeId",results[i].place_id);item.setAttribute("data-placeName",results[i].description);item.appendChild(document.createTextNode(results[i].description));item.addEventListener("click",function(e){GeocodeGetLocation(e.target.getAttribute("data-placeId"),true);});WMNSearchboxResults.insertChildAtIndex(item,i+1);}}
displaylocationresults();});let response=await fetch('/umbraco/api/WMNSearchByLocationNameApi/SearchByLocationName?searchTerm='+searchTerm)
let data=await response.json();AddLocationsToGoogleResults(data);}
function AddLocationsToGoogleResults(jsonResults){if(jsonResults.length>0){var existingResults=WMNSearchboxResults.querySelectorAll(".wmn-location-result-title,.wmn-location-result")
for(var i=0;i<existingResults.length;i++){WMNSearchboxResults.removeChild(existingResults[i]);}
var Titleitem=document.createElement('div');Titleitem.className="wmn-mapsearch wmn-result-title wmn-location-result-title";Titleitem.innerText="Organisations";WMNSearchboxResults.appendChild(Titleitem);jsonResults.forEach(location=>{var locationEle=document.createElement("div");locationEle.className="wmn-mapsearch wmn-location-result"
locationEle.setAttribute("data-locationUrl",location.locationUrl);locationEle.setAttribute("data-placeName",location.locationName);locationEle.innerHTML=location.locationName;locationEle.addEventListener('click',(e)=>{window.location.href=e.target.getAttribute("data-locationUrl");});WMNSearchboxResults.appendChild(locationEle);});displaylocationresults();}}
function displaylocationresults(){if(WMNSearchboxResults.innerHTML==""){WMNSearchboxResults.style="display:none;";}
else{WMNSearchboxResults.style="display:block;";}}
function WMNLocationRedirect(e){window.location.href=e.getAttribute("data-locationUrl");}
uml?.addEventListener("click",(e)=>{window.navigator.geolocation.getCurrentPosition(insertPosition);});function insertPosition(position){latInput.value=position.coords.latitude;longInput.value=position.coords.longitude;form.submit()}
const setCoords=(_coords)=>{coords=_coords}
const paintMarkers=async(bounds)=>{const{AdvancedMarkerElement}=await google.maps.importLibrary("marker");const{LatLng}=await google.maps.importLibrary("core");coords?.locations.map(loc=>{let pinIcon=document.createElement("img")
pinIcon.src=loc.Icon
pinIcon.id=`loc-${loc.Id}`
pinIcon.classList="pinIcon"
position=new LatLng(loc.Latitude,loc.Longitude)
const marker=new AdvancedMarkerElement({map:map,position:position,title:loc.Name,content:pinIcon});const infoWindowTemplate=document.querySelector("[data-infoWindow]")?.cloneNode(true)
infoWindowTemplate&&(infoWindowTemplate.querySelector("[data-infoWindowTitle]").innerHTML='<span style="font-size:20px;">'+loc.Name+'</span>')
const infowindow=new google.maps.InfoWindow({content:infoWindowTemplate,ariaLabel:loc.name,});marker.addListener("click",()=>{let resultItems=document.querySelectorAll(`[data-longlat]`)
document.querySelectorAll(".pop").forEach(item=>{item.classList.remove("pop")})
pinIcon.classList.add("pop")
resultItems.forEach(item=>{if(item.dataset.longlat==pinIcon.id){const card=item.closest(".results__item")
card?.classList.add("selected")
card?.classList.contains("selected")&&card?.scrollIntoView({behavior:"smooth",block:"center"})}
else{item.closest(".results__item")?.classList.remove("selected")}})
pinIcons.forEach(item=>item.infowindow.close())
infowindow.open({anchor:marker,map,})})
bounds.extend(position)
pinIcons.push({pinIcon,infowindow,marker})
markers.push(marker)})
try{new markerClusterer.MarkerClusterer({markers,map})}
catch(e){console.debug(e)}};window.onclick=(e)=>{pinIcons.forEach(item=>{if(item.pinIcon!=e.target){item.infowindow.close()}})}
const initMap=(async({mapId,zoom})=>{const{Map}=await google.maps.importLibrary("maps");const{LatLng,LatLngBounds}=await google.maps.importLibrary("core");const bounds=new LatLngBounds()
map=new Map(document.getElementById("map"),{mapId:mapId,zoom:zoom||4,center:{lat:coords?.center.Latitude,lng:coords?.center.Longitude},});paintMarkers(bounds).then(()=>{if(markers.length>=2){map.fitBounds(bounds)}})})
btnOnTheMap.forEach(btn=>{btn.addEventListener("click",()=>{let latLongId=btn.dataset?.longlat
if(latLongId){pinIcons.forEach(item=>{item.pinIcon.classList.remove("pop")
item.infowindow.close()})
let item=pinIcons.filter(item=>item.pinIcon.id.includes(latLongId))[0]
btnOnTheMap.forEach(btn=>btn.closest(".results__item")?.classList.remove("selected"))
let loc=coords.locations.filter(loc=>loc.Id==latLongId.split("-")[1])[0]
map.setZoom(18)
map.panTo({lat:loc.Latitude,lng:loc.Longitude})
setTimeout(()=>{item.infowindow.open({anchor:item.marker,map})},200)
item.pinIcon.classList.add("pop")
btn.closest(".results__item").classList?.add("selected")}
else{console.error("Please pass data-longlat in markup")}})})
const closeDropdowns=(el)=>{el.classList.remove("open")
el.setAttribute("tabindex",-1)
if(el.children){[...el.children].forEach(child=>{child.classList.contains("open")&&child.classList.remove("open")
child.getAttribute("tabindex")==0&&child.setAttribute("tabindex",-1)})}}
E.forEach(E=>{filterToggle?.addEventListener(E,(e)=>{if(e.keyCode!=keys.enter&&E!="click"){return}
filterToggle.classList.toggle("open")
filterDropdown?.classList.toggle("open")
filterDropdown?.querySelectorAll(".filter-value").forEach(item=>{if(filterDropdown?.classList.contains("open")){item.setAttribute("tabindex",0)}else{closeDropdowns(item)
closeDropdowns(item.nextElementSibling)}})
filterDropdown?.setAttribute("aria-expanded",filterDropdown?.ariaExpanded==="false"?true:false)})
clearFilter?.addEventListener(E,(e)=>{if(e.keyCode!=keys.enter&&E!="click"){return}
filterForm?.querySelectorAll("input[type=checkbox]").forEach(el=>el.checked=false)
document.querySelectorAll("[data-for]").forEach((el,index)=>el.innerText=itemListNodes[index].defaultText)
itemListNodes.forEach(i=>i.itemList.length=0)
filterForm?.submit()})
filterNestedToggle?.forEach(btn=>{btn.addEventListener(E,(e)=>{if(e.keyCode!=keys.enter&&E!="click"){return}
btn.classList.toggle("open")
let innerMenu=document.querySelector(btn.dataset["for"])
innerMenu?.classList.toggle("open")
innerMenu.querySelectorAll("li").forEach(liItem=>{if(innerMenu.classList.contains("open")){liItem.setAttribute("tabindex",0)}
else{closeDropdowns(liItem)}})
innerMenu?.setAttribute("aria-expanded",!JSON.parse(innerMenu?.ariaExpanded))})})
document.querySelectorAll(".dropdown__section__item__filter li")?.forEach(li=>{li.addEventListener(E,(e)=>{if(e.keyCode!=keys.enter&&E!="click"){return}
let liInput=li.querySelector("input")
liInput.checked=!liInput.checked})})
E==="keypress"&&window.addEventListener("keydown",e=>{if(filterDropdown?.classList.contains("open")&&e.keyCode==keys.esc){filterToggle?.classList.remove("open")
filterDropdown?.classList.remove("open")
filterDropdown?.querySelectorAll(".filter-value").forEach(item=>{if(filterDropdown?.classList.contains("open")){item.setAttribute("tabindex",0)}else{closeDropdowns(item)
closeDropdowns(item.nextElementSibling)}})
filterDropdown?.setAttribute("aria-expanded",false)}})})
document.querySelectorAll("[data-for]").forEach(facet=>{let itemList=[]
let defaultText=facet.dataset.fallback
itemListNodes.push({itemList,defaultText})
const setPills=(input)=>{facet.classList.add("with-items")
let target=input.dataset.label.toLowerCase()
if(itemList.includes(target)){itemList=itemList.filter(item=>item!=target)}
else{itemList.push(target.toLowerCase())}
if(itemList.length>0){facet.innerHTML=""
itemList.forEach(i=>{let nodeItem=document.createElement("span")
nodeItem.classList.add("pill","pill-bordered")
nodeItem.textContent=i
facet.appendChild(nodeItem)})}
else{facet.innerText=defaultText
facet.classList.remove("with-items")}}
document.querySelectorAll(`${facet.dataset.for} input`).forEach(x=>{if(x.checked){setPills(x)}
x.addEventListener("change",()=>setPills(x))})})
function swapMapSection(){if(isLg){const photoGallery=singleClubPageContentSectionEl.querySelector(".photo-gallery")
photoGallery?singleClubPageContentSectionEl.insertBefore(singleClubPageMapSectionEl,singleClubPageContentSectionEl.children[1]):singleClubPageContentSectionEl.insertBefore(singleClubPageMapSectionEl,singleClubPageContentSectionEl.children[0])}
else{singleClubPageGrid?.append(singleClubPageMapSectionEl)}}
if(isLg&&singleClubPageGrid){singleClubPageGrid.style.minHeight=Math.max(singleClubPageGrid?.offsetHeight,singleClubPageMapSectionEl?.offsetHeight)+150+"px"}
if(isSm){document.querySelectorAll(".photo-gallery img").forEach((item,indx)=>{if(indx>1){item.style.display="none"}})};;