class ThumbnailSlider{static instances=[];constructor(slider){this.slider=slider;this.slider.removeAttribute('data-flickering');this.SCROLL_DURATION=parseFloat(slider.getAttribute('data-scroll-duration'));this.SCROLL_EASE=slider.getAttribute('data-scroll-ease');this.SELECTOR_DURATION=parseFloat(slider.getAttribute('data-selector-duration'));this.SELECTOR_EASE=slider.getAttribute('data-selector-ease');this.thumbContainer=slider.querySelector('.dan-thumbnail-slider__thumb-container');this.mainImage=slider.querySelector('.dan-thumbnail-slider__main-image');this.selector=slider.querySelector('.dan-thumbnail-slider__selector');this.thumbs=Array.from(slider.querySelectorAll('.dan-thumbnail-slider__thumb'));if(this.thumbs.length>0){this.mainImage.setAttribute('src',this.thumbs[0].getAttribute('src'));this.mainImage.setAttribute('data-test','test')}
this.init()}
init(){this.thumbs.forEach(thumb=>{thumb.addEventListener('click',()=>this.updateMainImage(thumb));thumb.addEventListener('keydown',e=>{if(e.key==='Enter')thumb.click();})});const arrowLeft=this.slider.querySelector('.dan-thumbnail-slider__arrow--left');const arrowRight=this.slider.querySelector('.dan-thumbnail-slider__arrow--right');if(arrowLeft){arrowLeft.addEventListener('click',()=>this.navigate(-1));arrowLeft.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();this.navigate(-1)}})}
if(arrowRight){arrowRight.addEventListener('click',()=>this.navigate(1));arrowRight.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();this.navigate(1)}})}
gsap.set(this.thumbContainer,{scrollLeft:0});const initial=this.slider.querySelector('.dan-thumbnail-slider__thumb--active');if(initial)this.moveSelector(initial);}
updateMainImage(thumb){this.mainImage.src=thumb.src;const active=this.slider.querySelector('.dan-thumbnail-slider__thumb--active');if(active)active.classList.remove('dan-thumbnail-slider__thumb--active');thumb.classList.add('dan-thumbnail-slider__thumb--active');this.moveSelector(thumb);this.scrollThumbnailIntoView(thumb)}
moveSelector(thumb){gsap.to(this.selector,{x:thumb.offsetLeft,y:thumb.offsetTop,duration:this.SELECTOR_DURATION,ease:this.SELECTOR_EASE})}
scrollThumbnailIntoView(thumb){const cw=this.thumbContainer.clientWidth;const sw=this.thumbContainer.scrollWidth;const sl=this.thumbContainer.scrollLeft;const containerLeft=sl;const containerRight=sl+cw;const idx=this.thumbs.indexOf(thumb);const prev=this.thumbs[idx-1]||null;const next=this.thumbs[idx+1]||null;if(idx===0){gsap.to(this.thumbContainer,{scrollTo:{x:0},duration:this.SCROLL_DURATION,ease:this.SCROLL_EASE});return}
if(idx===this.thumbs.length-1){gsap.to(this.thumbContainer,{scrollTo:{x:sw-cw},duration:this.SCROLL_DURATION,ease:this.SCROLL_EASE});return}
if(next){const visibleNext=containerRight-next.offsetLeft;if(visibleNext<next.clientWidth/2){let target=next.offsetLeft+next.clientWidth/2-cw;target=Math.max(0,Math.min(target,sw-cw));gsap.to(this.thumbContainer,{scrollTo:{x:target},duration:this.SCROLL_DURATION,ease:this.SCROLL_EASE});return}}
if(prev){const visiblePrev=(prev.offsetLeft+prev.clientWidth)-containerLeft;if(visiblePrev<prev.clientWidth/2){let target=prev.offsetLeft+prev.clientWidth/2;target=Math.max(0,Math.min(target,sw-cw));gsap.to(this.thumbContainer,{scrollTo:{x:target},duration:this.SCROLL_DURATION,ease:this.SCROLL_EASE});return}}}
navigate(direction){const activeIndex=this.thumbs.findIndex(thumb=>thumb.classList.contains('dan-thumbnail-slider__thumb--active'));const newIndex=activeIndex+direction;if(newIndex>=0&&newIndex<this.thumbs.length){this.updateMainImage(this.thumbs[newIndex])}}
destroy(){}
static destroyAllInstances(){ThumbnailSlider.instances.forEach(instance=>instance.destroy());ThumbnailSlider.instances=[]}}
function dancepad_thumbnail_slider(){ThumbnailSlider.destroyAllInstances();document.querySelectorAll('.dan-thumbnail-slider').forEach(slider=>{const instance=new ThumbnailSlider(slider);ThumbnailSlider.instances.push(instance)})}