/**
 * 
 */
$(document).ready(function() {

	const cantobadgeclass='badge badge-outline-info badge-pill'

	const sparqlGenerator = sparqljs.Generator;
	const myEngine = new Comunica.QueryEngine();
	const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/commediaontosintgra/query";
	//const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/hdntest/query";
	var primaCanticaLoaded = false;
	var secondaCanticaLoaded = false;
	var terzaCanticaLoaded = false;
	var listaVersi = new Set()
	const ddmenus={"Inferno":"#dmc1",
					"Purgatorio": "#dmc2",
					"Paradiso": "#dmc3"}
	
	var currentMinimap=''
	

	//caricamento prima cantica
	$('#cantica1').on('click', function() {
		hideMinimap();
		activateMenuItem('#cantica1')
		if (!(primaCanticaLoaded)) {
			
			//jsonQuery = versiCantica("Inferno");
			//execQuery = new sparqlGenerator().stringify(jsonQuery);
			//executeQueryVersi(execQuery);
			showCantica('Inferno')
			primaCanticaLoaded = true;
			$(".labelCantica").attr('style', "display: block;");
		}
		else {
			//$("#InfernoCanto_1").attr('style', 'display:block')
			$("#CantiInferno").attr('style', 'display:block')

		}
		
		

	});

	//caricamento seconda cantica
	$('#cantica2').on('click', function() {
		hideMinimap();
		activateMenuItem('#cantica2')
		if (!(secondaCanticaLoaded)) {
			
			//jsonQuery = versiCantica("Purgatorio");
			//execQuery = new sparqlGenerator().stringify(jsonQuery);
			//executeQueryVersi(execQuery);
			showCantica('Purgatorio')
			secondaCanticaLoaded = true;
			$(".labelCantica").attr('style', "display: block;");
		}
		else {
			//$("#PurgatorioCanto_1").attr('style', 'display:block')
			$("#CantiPurgatorio").attr('style', 'display:block')

		}
		

	});

	//caricamento terza cantica
	$('#cantica3').on('click', function() {
		hideMinimap();
		activateMenuItem('#cantica3')
		if (!(terzaCanticaLoaded)) {
			showCantica('Paradiso')
			terzaCanticaLoaded = true;
			$(".labelCantica").attr('style', "display: block;");
		}
		else {
			//$("#ParadisoCanto_1").attr('style', 'display:block')
			$("#CantiParadiso").attr('style', 'display:block')

		}
		

	});
	var mmih=0
	var mmiw=0
	var minimapScrolling=false;
	var displayId='displaycanto'
	var minimapTopPos;
	$( "#"+displayId).scroll(function() {
  			if (minimapScrolling){
  				minimapScrolling=false
  				console.log ('no scroll')
  				}
  			else{
				console.log ('yes scrolling')	
				console.log("viewer top pos before: "+$('#minimapviewer').offset().top)
  				trackScrollCanto()
  				console.log("viewer top pos after: "+$('#minimapviewer').offset().top)
  			}
		});
	
	
	jQuery(document).delegate('.navig-canto', 'click', function(e) {
		$('.canto').each(function() {
			$(this).attr("style", 'display:none');
		});
		$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block')
		
		mmiw=$("#"+displayId).innerWidth();
		mmih=$("#"+displayId).innerHeight();
		
		showMinimap($(this).attr('name').replace(" ", "_"))
		
		currentMinimap=$(this).attr('name').replace(" ", "_");
		//mmviewer diventa draggable
		minimapTopPos=$('#minimapviewer').offset().top
		console.log("top viewer init "+minimapTopPos)
		
		$('#minimapviewer').draggable({ 
    						axis: "y",
    						containment :  $('#displayminimap'),
							scroll : false,
							stop: function( event, ui ) {minimapScrolling=true;},
							stop: function( event, ui ) {minimapScrolling=false;},
							drag: function( event, ui ) {
								
								minimapScrolling=true;
								trackScrollViewer(ui.offset.top-minimapTopPos);
								//trackScrollViewer(ui.offset.top);
								console.log(ui);
								//document.getElementById(displayId).style.transform=`translateY(${viewer.scrollTop * realScale}px)`;
  							}
			});
		
		//$('#minimapviewer').on('drag', trackScrollViewer)

	});

	//Query
	
 
  //$('#searchcomm').on('click', function() {
  jQuery(document).delegate('#searchcomm', 'click', function(e) {
  	
    cleanSearchResult()
    esprlogica=[]
    
	esprlogica.push('Clausola1')
	condizioni={"EsprLogica": esprlogica}
	clausola={}
	clausola['typeGramm0']=$('#queryText').val()
    
    
			
    clausola['queryText']=""
	condizioni['Clausola1']=clausola
	jsonQuery=buildSQ(condizioni)
	myquery =new sparqlGenerator().stringify(jsonQuery)
    
    executeQuerySearch(myquery)
    
    
			
});

//Reset

jQuery(document).delegate('#cleanresult', 'click', function(e) {
  	console.log('clean')
    cleanSearchResult()
    esprlogica=[]
    $('#queryText').val("")
    	
});

	//Utility functions

	//activate navigation menu items

	function activateMenuItem(menuItem) {
		//$('.blog-nav-item').each(function() {
		//	$(this).attr("class", $(this).attr("class").replace(' active', ''));
		//});
		//$(menuItem).attr("class", $(menuItem).attr("class") + ' active');
	}

	

	
	function managePunctuation(stringa) {
		var tempstringa=stringa.replaceAll(" ,", ",")
		tempstringa=tempstringa.replaceAll(" .", ".")
		tempstringa=tempstringa.replaceAll(" :", ":")
		tempstringa=tempstringa.replaceAll(" !", "!")
		tempstringa=tempstringa.replaceAll(" ?", "?")
		tempstringa=tempstringa.replaceAll(" ;", ";")
		tempstringa=tempstringa.replaceAll("%20", " ")
		return tempstringa
	}

	function cleanSearchResult(){
		
		for (verso of listarisultati){
				idverso='#'+verso
				//console.log(idverso)
				//$(idverso).attr('class', 'f6 font-weight-lighter')
				$(idverso).attr('class', 'f6text-secondary text-nowrap font-weight-lighter')
			}
		$( ".badge" ).remove();
		listarisultati=[]
		if (currentMinimap!='')
    		showMinimap(currentMinimap)
	}

	
	//minimap management
	let minimap = document.createElement('div');
	let minimapSize = document.createElement('div');
	let viewer = document.createElement('div');
	let minimapContent = document.createElement('iframe');
	let scale=0.1;
	let realScale;
	let mappedElement=''
	
	function showMinimap(element) {
		

		mmplace=document.getElementById('displayminimap')
		//mmplace=document.getElementById('displaycanto')
		
		minimap.className = 'minimap__container'
		minimapSize.className = 'minimap__size'
		viewer.className = 'minimap__viewer'
		viewer.id='minimapviewer'
		minimapContent.className = 'minimap__content'
		//class="col-3 px-0"
		minimap.append(minimapSize, viewer, minimapContent);
		
		//document.body.appendChild(minimap)
		mmplace.appendChild(minimap)
		
		
		let html = document.getElementById(element).outerHTML//innerHTML
		//console.log(html)
		if (html==null | html=='')
			return;
		
		let iFrameDoc = minimapContent.contentWindow.document;
		
		
		var cssLinkb = document.createElement("link");
		cssLinkb.href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css";
		cssLinkb.rel = "stylesheet"; 
		cssLinkb.type = "text/css";
		
		var cssLinkscroll = document.createElement("link");
		cssLinkscroll.href = "./css/browsingldc.css";
		cssLinkscroll.rel = "stylesheet"; 
		cssLinkscroll.type = "text/css";
		
		iFrameDoc.open();
		iFrameDoc.write(html);
		iFrameDoc.close();
		
		iFrameDoc.head.appendChild(cssLinkb);
		iFrameDoc.head.appendChild(cssLinkscroll);
		mappedElement=element
		
		getDimensionsDiv()
		
		window.addEventListener('scroll', trackScroll)
		
		
		//document.getElementById(displayId).addEventListener('resize', getDimensionsDiv)
		
		window.addEventListener('resize', getDimensionsDiv)
		
	}
	
	
	
	function getDimensions(){
		cantoplace=document.getElementById(displayId)
		let bodyWidth= cantoplace.clientWidth;
		let bodyRatio=  bodyWidth/cantoplace.clientHeight
		//let winRatio=cantoplace.clientWidth / getInnerHeight(cantoplace)
		let winRatio= window.innerHeight / window.innerWidth;
		
		
		minimap.style.width='55%';
		viewer.style.width='55%'
		
		realScale=minimap.clientWidth / bodyWidth;
		
		minimapSize.style.paddingTop=`${bodyRatio * 100}%`
		viewer.style.paddingTop=`${winRatio * 100}%`;
		minimapContent.style.transform=`scale(${realScale})`;
		minimapContent.style.width=`${(100/realScale)}%`;
		minimapContent.style.height=`${(100 / realScale)}%`;
		
		}
	 function getInnerHeight( elm ){
  		var computed = getComputedStyle(elm),
      		padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);

  		return elm.clientHeight - padding
	}
	 function getDimensionsDiv(){
		
		
		cantoplace=document.getElementById(displayId)
		
		elementplace=document.getElementById(mappedElement)
		
		bodyWidth= elementplace.clientWidth;
		bodyRatio= elementplace.clientHeight / bodyWidth;
		//let bodyWidth= cantoplace.clientWidth;
		//let bodyRatio= cantoplace.clientHeight / bodyWidth;
		//let winRatio= window.innerHeight / (window.innerWidth); 
		let winRatio= getInnerHeight(cantoplace) / (cantoplace.clientWidth);
		
	
		//minimap.style.width='15%';
		minimap.style.width='100%';
		
	
		realScale=minimap.clientWidth / bodyWidth;
	
		minimapSize.style.paddingTop=`${bodyRatio * 100}%`
		viewer.style.paddingTop=`${winRatio * 100}%`;
		minimapContent.style.transform=`scale(${realScale})`;
		minimapContent.style.width=`${(100/realScale)}%`;
		minimapContent.style.height=`${(100 / realScale)}%`;
		//minimapContent.style.height=`100%`;
		minimapContent.style.float='right';
	    

	 }

	function trackScroll(){
		//console.log(window.scrollY)
		viewer.style.transform=`translateY(${window.scrollY * realScale}px)`
	}
	function trackScrollCanto(){
		console.log('cantoscrollT*realscale '+document.getElementById(displayId).scrollTop * realScale+' top: ' +document.getElementById(displayId).scrollTop )
		viewer.style.transform=`translateY(${document.getElementById(displayId).scrollTop * realScale}px)`

	}
	function trackScrollViewer(toppos){
		console.log('scrollMMView top*1/realScale: '+toppos*(1/realScale)+' top  pos: '+toppos)
		did=document.getElementById(displayId)
		
		did.scrollTop=(toppos*(1/realScale))
		
		
	}
	
	function hideMinimap(){
		$('.canto').each(function() {
			$(this).attr("style", 'display:none');
		});
		$( ".minimap__container" ).remove();
		currentMinimap=''
	}

	// fa diventare draggable il minimapviewer
	
		
	//end minimap management
	//Cantica management functions
	
	function showCantica(cantica){
		var listaCanti = new Set()
		//var listaVersi = new Set()
		var listaVersi = []
		//var listaForme = new Set()
		var listaForme =[]
		containerForme=formeterza
		if(cantica=='Inferno')
			containerForme=formeprima
		if(cantica=='Purgatorio')
			containerForme=formeseconda
		for (cmpItem of containerForme){
			formaItem=cmpItem[0].split("_")
			listaCanti.add('Canto '+formaItem[1])
			var obj = new Object();
			var forma=new Object()
			obj.numverso = formaItem[3];
			//obj.verso = binding.get('Verso').value;
			obj.canto = 'Canto '+formaItem[1];
			obj.cantica = cantica;
			listaVersi.push(obj)
			forma.numverso = formaItem[3];;
			forma.canto = 'Canto '+formaItem[1];
			forma.pos = formaItem[2];
			forma.form = formaItem[0];
			forma.cantica = cantica;
			listaForme.push(forma)
		}
		renderData(cantica, listaCanti, listaVersi, listaForme);
		return
	}
	function renderData(cantica, listaCanti, listaVersi, listaForme){
		var orderedListaCanti = Array.from(listaCanti)
		//orderedListaCanti = orderedListaCanti.sort((a, b) => {
		//	return parseInt(a.split(" ")[1], 10)-parseInt(b.split(" ")[1], 10)
		//});
		//var orderedListaVersi = Array.from(listaVersi)
		//orderedListaVersi = orderedListaVersi.sort((a, b) => {
		//	return parseInt(a.numverso, 10)-parseInt(b.numverso, 10)	
						
		//});
		
		listaVersi = listaVersi.filter((value, index, self) =>
  			index === self.findIndex((t) => (
    		t.numverso === value.numverso && t.canto === value.canto && t.cantica===value.cantica
  			))
		)
		//var orderedListaForme = Array.from(listaForme)
		//orderedListaForme = orderedListaForme.sort((a, b) => {
		//	return parseInt(a.pos, 10)-parseInt(b.pos, 10)
						
		//});
	
		var divListaCanti = $('<DIV id="Canti' + cantica + '" />')
		for (canto of orderedListaCanti) {
			//var licanto = $('<li class="navig-canto"/>')
			//licanto.attr('name', cantica + canto)
			//licanto.attr('href', "#")
			//licanto.attr("style", "line-height: 1.2em")
			//numcanto=canto.split(" ")[1]
			//licanto.append(numcanto)
	
			
			//licanto.appendTo(divListaCanti)
			
			var divcanto = $('<div />')
			var titolocanto = $('<h4 class="titolo-canto pb-2" />')
			titolocanto.append(cantica+", "+canto)
			divcanto.attr('class', 'canto')
			divcanto.attr('style', 'display:none')
			divcanto.attr('id', (cantica + canto).replace(" ", "_"))
			titolocanto.appendTo(divcanto)
			divcanto.appendTo(' .blog-main')
		}
		//divListaCanti.appendTo('#listacanti')
		divListaCanti.appendTo(ddmenus[cantica])
		for (verso of listaVersi) {
						
						
			var elementoverso = $('<p />')
			//vartestoverso=verso.numverso;
			elementoverso.append(verso.numverso + ". ")
			elementoverso.attr("style", "line-height: 0.5em")
			
			elementoverso.attr('class', 'f6 text-secondary text-nowrap font-weight-lighter')
			//elementoverso.attr('class', 'f6 font-weight-lighter nowrap')
			elementoverso.attr('id', verso.cantica+"_"+ verso.canto.replace(" ", "_")+"_"+verso.numverso)
			elementoverso.appendTo('#' + cantica + verso.canto.replace(" ", "_"))
						
		}
					
		listaForme.forEach((element) => {
			var spanoccorrenza=$('<span />')
			var pos=parseInt(element.pos)
			spanoccorrenza.attr('id', element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso+"_"+pos)
			if (listarisultati.length>0 && listarisultati.includes(spanoccorrenza.attr('id')))
				spanoccorrenza.attr('class', "f6 mark ")
			spanoccorrenza.append(managePunctuation(element.form))
			elementoverso=$('#'+element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso)	
			spanoccorrenza.appendTo(elementoverso)
			elementoverso.append('&nbsp;')
		})
		
	}
	// Search functions
	 
	async function executeQueryVersi(query) {
		bindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
		alert(query)
		try {

			var listaCanti = new Set()
			
			listaVersi = new Set()
			listaForme = new Set()
			let cantica = 0;
			bindingsStream.on('data', (binding) => {
					//cantica
					cantica = binding.get('Cantica').value;
					//la lista dei canti
					listaCanti.add(binding.get('Canto').value)
					//la lista dei versi
					var obj = new Object();
					var forma=new Object()
					obj.numverso = binding.get('NumeroVerso').value;
					obj.verso = binding.get('Verso').value;
					obj.canto = binding.get('Canto').value;
					//obj.pos = binding.get('pos').value;
					//obj.form = binding.get('textform').value;
					obj.cantica = cantica;
					listaVersi.add(obj)
					forma.numverso = binding.get('NumeroVerso').value;
					forma.canto = binding.get('Canto').value;
					forma.pos = binding.get('pos').value;
					forma.form = binding.get('textform').value;
					forma.cantica = cantica;
				   
					listaForme.add(forma)
				

			});
			bindingsStream.on('end', () => {
				
				

					var orderedListaCanti = Array.from(listaCanti)
					orderedListaCanti = orderedListaCanti.sort((a, b) => {
						return parseInt(a.split(" ")[1], 10)-parseInt(b.split(" ")[1], 10)
						//if (parseInt(a.split(" ")[1], 10) < parseInt(b.split(" ")[1]), 10) {
						//	return -1;
						//}
					});
					
					var orderedListaVersi = Array.from(listaVersi)
					
					orderedListaVersi = orderedListaVersi.sort((a, b) => {
						return parseInt(a.numverso, 10)-parseInt(b.numverso, 10)
						//if (parseInt(a.numverso, 10) < parseInt(b.numverso, 10)) {
						//	console.log(parseInt(a.numverso, 10)+' '+parseInt(b.numverso, 10))
						//	return -1;
						//}
						
					});
					
					
					orderedListaVersi = orderedListaVersi.filter((value, index, self) =>
  						index === self.findIndex((t) => (
    					t.numverso === value.numverso && t.canto === value.canto && t.cantica===value.cantica
  						))
					)
					
					

					
					var orderedListaForme = Array.from(listaForme)
					orderedListaForme = orderedListaForme.sort((a, b) => {
						return parseInt(a.pos, 10)-parseInt(b.pos, 10)
						//if (parseInt(a.pos) < parseInt(b.pos)) {
						//	return -1;
						//}
						
					});
	
					var divListaCanti = $('<DIV id="Canti' + cantica + '" />')
					for (canto of orderedListaCanti) {
						var licanto = $('<li class="navig-canto"/>')
						licanto.attr('name', cantica + canto)
						licanto.attr('href', "#")
						licanto.attr("style", "line-height: 1.2em")
						numcanto=canto.split(" ")[1]
						licanto.append(numcanto)
	
						//licanto.appendTo('#listacanti')
						licanto.appendTo(divListaCanti)
						var divcanto = $('<div />')
						var titolocanto = $('<h1 class="f3 titolo-canto" />')
						titolocanto.append(cantica+", "+canto)
						divcanto.attr('class', 'canto')
						divcanto.attr('style', 'display:none')
						divcanto.attr('id', (cantica + canto).replace(" ", "_"))
						titolocanto.appendTo(divcanto)
						divcanto.appendTo(' .blog-main')
					}
					//divListaCanti.appendTo('#listacanti')
					divListaCanti.appendTo(ddmenus[cantica])
					for (verso of orderedListaVersi) {
						
						
						var elementoverso = $('<p />')
						vartestoverso=verso.numverso;
						elementoverso.append(verso.numverso + ". ")
						//elementoverso.append(verso.numverso + ". " + managePunctuation(verso.verso))
						elementoverso.attr("style", "line-height: 0.5em")
						elementoverso.attr('class', 'f6 font-weight-lighter nowrap')
						elementoverso.attr('id', verso.cantica+"_"+ verso.canto.replace(" ", "_")+"_"+verso.numverso)
						elementoverso.appendTo('#' + cantica + verso.canto.replace(" ", "_"))
						
					}
					
					orderedListaForme.forEach((element) => {
						var spanoccorrenza=$('<span />')
						var pos=parseInt(element.pos)
						spanoccorrenza.attr('id', element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso+"_"+pos)
						if (listarisultati.length>0 && listarisultati.includes(spanoccorrenza.attr('id')))
							spanoccorrenza.attr('class', "f6 b dark-blue ")
						spanoccorrenza.append(managePunctuation(element.form))
						elementoverso=$('#'+element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso)	
						spanoccorrenza.appendTo(elementoverso)
						elementoverso.append('&nbsp;')
					})
				


			});
		}
		catch (err) {
			console.log(err.message);
			$("#loader").hide();
		};
	};
	
	//execute query
	var listarisultati=[];
	async function executeQuerySearch(query) {
		seachbBindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
		//console.log(query)
		alert(query)
		try {
			var result = new Set()
			var resultsInCantica=[]
			var resultsInCanto=[]
			seachbBindingsStream.on('data', (binding) => {
				//cantica
				cantica = binding.get('Cantica').value;
				resultsInCantica.push(cantica);
				//canto
				canto=binding.get('Canto').value;
				resultsInCanto.push(cantica+canto)
				//numero del verso
				numverso=binding.get('NumeroVerso').value;
				//posizione delframmento
				pos=binding.get('pos').value;
				result.add(cantica+"_"+canto.replace(" ", "_")+"_"+numverso+"_"+pos)

			});
			seachbBindingsStream.on('end', () => {
				listarisultati = Array.from(result)
				cantiche=["Inferno", "Purgatorio", "Paradiso"]
				
				//evidenzia risultati
				for (ris of listarisultati){
					idris='#'+ris
					$(idris).attr('class', "f6 mark ")
					
				}
				//aggiunge badge con totale risultati accanto alle cantiche
				i=0
				for(cantica of cantiche){
					i+=1
					let count = resultsInCantica.reduce((n, x) => n + (x === cantica), 0);
					var spanbadgecantica=$('<span />');
					spanbadgecantica.attr('class', 'badge badge-primary badge-pill ml-1');
					spanbadgecantica.append(count)
					spanbadgecantica.appendTo($('#cantica'+i))
				}
				//aggiunge badge con totale risultati accanto ai canti
				
				for(cantica of cantiche){
					for( k of Array(35).keys()){
						if (k==0)
							continue
						let count = resultsInCanto.reduce((n, x) => n + (x === cantica+'Canto '+k), 0);
						
						var spanbadge=$('<span />');
						spanbadge.attr('class', cantobadgeclass);
						spanbadge.append(count)
						//$("[name='nameofobject']")
						spanbadge.appendTo($('[name="'+cantica+'Canto '+k+'"]'))
						//spanbadge.insertAfter($('[name="'+cantica+'Canto '+k+'"]'))
					}
				}
				
				
				//aggiorna minimap
				if (currentMinimap!=''){
		
					showMinimap(currentMinimap)
	
				}


			});
		}
		catch (err) {
			console.log(err.message);
			$("#loader").hide();
		};
	};


});