jQuery(document).ready( _ => {

	if(jQuery('body').hasClass('page-id-498')) {
		new SectionHintWidget('section.row', 2, 2000);	
	}
});    


// navigation section numéroté
class SectionHintWidget{
	constructor(targetQuery){
		this.currentSelectedSectionIndex = 0;
		this.targetQuery = targetQuery;

		this.widgetSubElms = [];
	//	this.buildWidget();
		this.registerObserver();
		
	//	this.addScrollHandler();
	}
	
	// buildWidget(){
	// 	const sectionExist = document.querySelectorAll(this.targetQuery);
	// 	if(sectionExist.length > 0) {
	// 		const widgetElm = document.createElement('div');
	// 		widgetElm.classList.add('section-hint-widget');
	// 		const widgetSubItemContainer = document.createElement('div');
	// 		widgetSubItemContainer.classList.add('widget-sub-item-container');
	// 		widgetElm.append(widgetSubItemContainer);
			
	// 		const sections = Array.from(document.querySelectorAll(this.targetQuery));
	// 		sections.forEach( ($section,$index) => {
	// 			const widgetSubItem = document.createElement('div');
	// 			widgetSubItem.classList.add('sub-item');
    //             const itemSection = $index + 1;
	// 			$section.setAttribute('id', `section-${itemSection}`);
	// 			widgetSubItem.addEventListener('click', () => {
	// 				this.scrollToElement($section);
	// 			//	$section.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
	// 			});
	// 			widgetSubItem.innerHTML = `<span>0${itemSection}</span>`;
	// 			widgetSubItemContainer.append(widgetSubItem);
	// 			$section.subItem = widgetSubItem;
	// 			$section.subItemIndex = $index;
	// 			this.widgetSubElms.push(widgetSubItem);
	// 		});
			
	// 		this.widgetElm = widgetElm;
	// 		document.body.append(widgetElm);

	// 	}
	// }

	// addScrollHandler(){
	// 	this.wheelDeltaForce = 0;

	// 	window.addEventListener('wheel', (e) => {
	// 		if(this.wheelResetTmr != undefined){
	// 			clearTimeout(this.wheelResetTmr);
	// 		}
			
	// 		this.wheelDeltaForce = this.wheelDeltaForce + ((e.deltaY > 0) ? 1 : -1);

	// 		this.wheelResetTmr = setTimeout(_ => {
	// 			this.wheelDeltaForce = 0;
	// 		},500)

	// 		if(this.wheelDeltaForce > this.wheelSensitivity){
	// 			return this.showNextSection();
	// 		}

	// 		if(this.wheelDeltaForce < -this.wheelSensitivity){
	// 			return this.showPreviousSection();
	// 		}


	// 	},false)
	// }

	// scrollToElement(elm){
	// 	if(elm == null){ 
	// 		this._isChanging = false;
	// 		return Promise.resolve()
	// 	};

	// 	this._isChanging = true;

	// 	console.log('scroll locked');
		
	// 	setTimeout(_ => {
	// 		this._isChanging = false;
	// 		console.log('scroll unlocked');
	// 	},this.scrollBlockTimeout)


	// 	return new Promise( ($resolve,$reject) => {

	// 		elm.scrollIntoViewPromise({behavior: "smooth", block: "start", inline: "nearest"}).then( _ => {
	// 			console.log('element scrolled into view');

	// 			$resolve(elm);
	// 		})
	// 	});
	// }

	
	registerObserver(){
		const options = {
			root: null,
			rootMargin: '0px', // focus sur l'élément qui croise le centre du viewport
			threshold: 0.35,
		};

		const sections = document.querySelectorAll(this.targetQuery);
		
		this.observer = new IntersectionObserver( (entries, observer) => {
			this.sectionCrossHandler(entries, observer);
		}, options);
		
		sections.forEach($s => {
			this.observer.observe($s);	
		});
	}
	
	sectionCrossHandler(entries, observer){
		entries.forEach( (entry) => {
			if (entry.intersectionRatio >= 0.3) {
				this.animateSectionEnter(entry.target);
			  }
  	    });
	}

	animateSectionEnter(target){
		target.classList.add('sectionAnimate');
	}

}

// Element.prototype.scrollIntoViewPromise = function(options){

// 	// "this" refers to the current element (el.scrollIntoViewPromise(options): this = el)
// 	this.scrollIntoView(options);
	
// 	// I create a variable that can be read inside the returned object ({ then: f() }) to expose the current element 
// 	let parent = this;
	
// 	// I return an object with just a property inside called then
// 	// then contains a function which accept a function as parameter that will be execute when the scroll ends 
// 	return { 
// 	  then: function(x){
// 		// Check out https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API for more informations  
// 		const intersectionObserver = new IntersectionObserver((entries) => {
// 		  let [entry] = entries;
		  
// 		  // When the scroll ends (when our element is inside the screen)
// 		  if (entry.isIntersecting) {
		  
// 			// Execute the function into then parameter and stop observing the html element
// 			setTimeout(() => {x(); intersectionObserver.unobserve(parent)}, 100)
// 		  }
// 		});
		
// 		// I start to observe the element where I scrolled 
// 		intersectionObserver.observe(parent);
// 	  }
// 	};
// }