/**
 * 
 */
$(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";
	
	var listaVersi = new Set()
	const ddmenus = {
		"Inferno": "#dmc1",
		"Purgatorio": "#dmc2",
		"Paradiso": "#dmc3"
	}

	var currentMinimap = ''
	var listarisultati = [];


	hideMinimap();
	showCantica('Inferno')
	
	$('#cantica2').css({ 'opacity': 0.40 });
	$('#cantica3').css({ 'opacity': 0.40 });
	$("#CantiInferno").attr('style', 'display:block')
	$("#InfernoCanto_1").attr('style', 'display:block')
	
	showCantica('Purgatorio')
	showCantica('Paradiso')


	//caricamento prima cantica
	$('#cantica1').on('click', function() {

		$("#CantiInferno").attr('style', 'display:block')
		$('#cantica1').css({ 'opacity': 1 });
		$('#cantica2').css({ 'opacity': 0.40 });
		$('#cantica3').css({ 'opacity': 0.40 });
	});

	//caricamento seconda cantica
	$('#cantica2').on('click', function() {
		//hideMinimap();
		$("#CantiPurgatorio").attr('style', 'display:block')
		$('#cantica1').css({ 'opacity': 0.40 });
		$('#cantica2').css({ 'opacity': 1 });
		$('#cantica3').css({ 'opacity': 0.40 });

	});

	//caricamento terza cantica
	$('#cantica3').on('click', function() {
		//hideMinimap();
		$("#CantiParadiso").attr('style', 'display:block')
		$('#cantica1').css({ 'opacity': 0.40 });
		$('#cantica2').css({ 'opacity': 0.40 });
		$('#cantica3').css({ 'opacity': 1 });
	});
	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');
		});
		// Crea id per la div che contiene il canto
		$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block')
		manageMiniMap(this);
		
	});

	function manageMiniMap(divElem) {
		mmiw = $("#" + displayId).innerWidth();
		mmih = $("#" + displayId).innerHeight();

		showMinimap($(divElem).attr('name').replace(" ", "_"))
		currentMinimap = $(divElem).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);
				console.log(ui);
			}
		});
	}
	
	//Query


	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

	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
			$(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')
		minimap.className = 'minimap__container'
		minimapSize.className = 'minimap__size'
		viewer.className = 'minimap__viewer'
		viewer.id = 'minimapviewer'
		minimapContent.className = 'minimap__content'
		minimap.append(minimapSize, viewer, minimapContent);

		mmplace.appendChild(minimap)

		let html = document.getElementById(element).outerHTML//innerHTML
		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)
		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 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 = ''
	}

	
	//Cantica management functions

	function showCantica(cantica) {
		var listaCanti = new Set()
		var setVersi = new Set()
		
		containerForme = formeterza
		if (cantica == 'Inferno')
			containerForme = formeprima
		if (cantica == 'Purgatorio')
			containerForme = formeseconda
		for (cmpItem of containerForme) {
			formaItem = cmpItem[0].split("_")
			listaCanti = createDivCanti(listaCanti, cantica, 'Canto ' + formaItem[1])
			var forma = new Object()
			setVersi = createDivVersi(setVersi, cantica, formaItem[3], 'Canto ' + formaItem[1])

			forma.numverso = formaItem[3];
			forma.canto = 'Canto ' + formaItem[1];
			forma.pos = formaItem[2];
			forma.form = formaItem[0];
			forma.cantica = cantica;
			createSpanForme(forma)
		}
		return
	}
	
	function createSpanForme(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(element.form.replaceAll("%20", " "))
		elementoverso = $('#' + element.cantica + "_" + element.canto.replace(" ", "_") + "_" + element.numverso)
		spanoccorrenza.appendTo(elementoverso)
		elementoverso.append('&nbsp;')

	}
	
	function createDivVersi(setVersi, cantica, num, canto) {
		if (setVersi.has(cantica + "_" + num + "_" + canto))
			return setVersi
		else {
			var elementoverso = $('<p />')

			elementoverso.append(num + ". ")
			elementoverso.attr("style", "line-height: 0.5em")

			elementoverso.attr('class', 'f6 text-secondary text-nowrap font-weight-lighter')

			elementoverso.attr('id', cantica + "_" + canto.replace(" ", "_") + "_" + num)
			elementoverso.appendTo('#' + cantica + canto.replace(" ", "_"))
			setVersi.add(cantica + "_" + num + "_" + canto)
			return setVersi
		}

	}

	function createDivCanti(orderedListaCanti, cantica, canto) {
		if (orderedListaCanti.has(canto)) {
			return orderedListaCanti
		}
		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')
		orderedListaCanti.add(canto)
		return orderedListaCanti
	}

	// 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.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)
				});

				var orderedListaVersi = Array.from(listaVersi)

				orderedListaVersi = orderedListaVersi.sort((a, b) => {
					return parseInt(a.numverso, 10) - parseInt(b.numverso, 10)
				});


				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)
				});

				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(ddmenus[cantica])
				for (verso of orderedListaVersi) {


					var elementoverso = $('<p />')
					vartestoverso = verso.numverso;
					elementoverso.append(verso.numverso + ". ")
					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
	
	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();
		};
	};


});