/*
	Lightweight accordeon by Terje Rudi, 2019
	
	Example:
	
	After class, use javascript: 
	
	let concertina = new Concertina([
		document.getElementById('concertinaPanel')
	]);
	
	Where array is array of elements containing elements of css class 'concertina'.
	Open concertinas has extra class 'open'.
	
	Remember to insert CSS from https://v.hvl.no/css/concertina.php.css
	OR use param $extension = "css" in parent script before requiring this
*/



	// Insert CSS into page
	try{
		let cCss = document.createElement('link');
		cCss.rel = 'stylesheet';
		cCss.href = 'https://v.hvl.no/css/concertina.php.css';
		document.head.appendChild(cCss);
	}catch(e){
		console.error('Could not insert Concertina CSS: ' + e);
	}
	




let Concertina = function(elementArray){
	console.info('Concertina activated with array: ' + elementArray);
	// Collect all concertina elements for later use
	this.concertinaCollection = [];
	// Class for handling css by opening and closing
	let CssClassHandler = function(el){
		let hasClass = function (el, className) {
			return el.classList ? el.classList.contains(className) : new RegExp('\\b'+ className +'\\b').test(el.className);
		};
		let addClass = function (el, className) {
			if (el.classList) el.classList.add(className);
			else if (!hasClass(el, className)) el.className += ' ' + className;
		};
		let removeClass = function (el, className) {
			if (el.classList) el.classList.remove(className);
			else el.className = el.className.replace(new RegExp('\\b'+ className+'\\b', 'g'), '');
		};
		let headerItem = el.querySelector('*');
		headerItem.setAttribute('data-before','\u25BC');
		if (hasClass(el,'open')){
			headerItem.setAttribute('data-before','\u25B2');
		}
		if (headerItem.hasEvent !== true){	
			headerItem.hasEvent = true;
			headerItem.addEventListener('click',function(){
				if (hasClass(headerItem.parentNode,'open')){
					//console.info('close: ' + headerItem.innerHTML);
					let r = removeClass(headerItem.parentNode,'open');
					headerItem.setAttribute('data-before','\u25BC');
				}else{
					//console.info('open: ' + headerItem.innerHTML);
					let a = addClass(headerItem.parentNode,'open');
					headerItem.setAttribute('data-before','\u25B2');
				}
			});
		};
	}

	// Go, find the elements with class concertina and append style and events
	for (let cParent = 0;cParent < elementArray.length;cParent++){
		let waitForConcertinas = setInterval(function(){
			let concertinas = elementArray[cParent].querySelectorAll('.concertina');
			if (concertinas.length > 0){
				clearInterval(waitForConcertinas);
				for (let c = 0; c < concertinas.length;c++){
					let thisConcertina = concertinas[c];
					thisConcertina.eventHandler = new CssClassHandler(thisConcertina);
				}
				if (this.concertinaCollection != undefined){
					this.concertinaCollection.push(concertinas);
				}
			};
		},1000);
	}
	
	// Adjust sub concertinas bottom space
	let targ = document.querySelectorAll('.concertina > .concertina:last-child');
	targ.forEach(function(elm){
		elm.parentNode.style.paddingBottom = '0';
	});
    
}