/**
 * 
 */

var getJsonQuery;
var fillStructCard;
var emptyStructCard;
var currPage = 0;
var latestPhraseId = "";
var numeroPagine = 0;
var latestOffset = 0;

const cssCantoHeight = 0.65;
const cssTableMainHeight = 0.95;  //.tableMain {height: 95%;}
const bgImgUrl1 = "./images/fefeff.png";
const bgImgUrl2 = "./images/f8f9fa.png";
const textAbout = '<div class="container"><div class="row align-items-start pt-3"><div class="col">'
+ '<div><h3 class="font-weight-bold">Linking Dante <small class=\"text-muted\">(LiDa)</small></h3> '
+ '<p>Linking Dante (LiDa) è un progetto federatore sviluppato dall’<a href="https://www.isti.cnr.it/" target="_blank" rel="noopener noreferrer">ISTI CNR</a> con l’obiettivo di digitalizzare le '
+ 'opere dantesche e la conoscenza a esse relativa, collegando – e in alcuni casi implementando – precedenti progetti per mettere a disposizione dell’utente una piattaforma integrata, dove sono '
+ 'possibili diverse tipologie di navigazione ed interrogazione. <br> La biblioteca digitale di LiDa è basata sulle tecnologie e sui linguaggi del Semantic Web e rispetta i principi FAIR (Findable, '
+ 'Accessible, Interoperable, Reusable): il testo di Dante si trova al centro di una rete che lo connette a diverse risorse che permettono di approfondire le sue caratteristiche linguistiche, '
+ 'retoriche e semantiche; per raggiungere questo scopo, LiDa ha tradotto la conoscenza relativa al testo dantesco che si trova disseminata in diversi strumenti digitali e cartacei in un grafo '
+ 'strutturato secondo logiche calcolabili ed espresso in linguaggio formale. In particolare, LiDa integra la conoscenza raccolta dai progetti:</p><ul class="m-0 mb-1"><li><strong> <a href="https://dantesearch.dantenetwork.it/" '
+ 'target="_blank" rel="noopener noreferrer">DanteSearch</a></strong> è una risorsa digitale che permette l’interrogazione dell’intero corpus delle opere volgari e latine di Dante, che sono state interamente '
+ 'lemmatizzate e annotate in XML-TEI per descriverne la morfologia e – solo nel caso di Rime, Convivio e Commedia – la sintassi. Il progetto attivato nel 1999 ed espanso nel 2009 con il coordinamento del '
+ 'prof. Mirko Tavoni dell’Università di Pisa; all’interno di LiDa, la conoscenza raccolta da DanteSearch è stata strutturata grazie alle ontologie OLiRes e ORL, che sono a loro volta interoperabili '
+ 'con MOnt, l’ontologia delle metafore della Commedia realizzata da Carlo Meghini e Gaia Tomazzoli.</li><li><strong> <a href="https://dama.dantenetwork.it/" target="_blank" rel="noopener noreferrer">'
+ 'Dante Medieval Archive (DaMA)</a></strong>, allestito nell’ambito del progetto PRIN 2006 "La biblioteca medievale di Dante. Archivio digitale delle fonti volgari e latine (DaMA-Dante Medieval '
+ 'Archive) e edizioni commentate delle opere minori", coordinato dall’Università di Pisa, è un archivio digitale che pubblica le opere dantesche e molte delle loro fonti classiche, tardoantiche e '
+ 'medievali, in latino e in volgare; tutte le opere possono essere consultate online o	scaricate in formato XML-TEI. </li><li><strong> <a href="https://dantesources.dantenetwork.it/" target="_blank" '
+ 'rel="noopener noreferrer">DanteSources</a></strong> è stato sviluppato grazie a una collaborazione tra l’ISTI CNR e l’Università di Pisa nell’ambito del progetto PRIN (2013-2016) "Per una Enciclopedia '
+ 'Dantesca Digitale". Il progetto mette a disposizione dell’utente una biblioteca digitale delle fonti primarie delle opere minori di Dante, e permette interrogazioni complesse fornendo diverse tipologie '
+ 'di visualizzazione dei risultati. L’ontologia alla base di DanteSources è stata arricchita con il progetto“Hypermedia Dante Network” (HDN), finanziato dal bando PRIN (2017) e coordinato dall’Università '
+ 'di Pisa in collaborazione con l’ISTI CNR. Grazie a un accordo con la Società Dantesca Italiana e con l’Università di Princeton, HDN rappresenta la conoscenza sulle fonti della Commedia disseminata nei '
+ 'commenti danteschi digitalizzati dal Dartmouth Dante Project.</li></ul><p class="m-0 p-1">&nbsp;</p></div>'
+ '</div></div><div class="row align-items-end justify-content-center"><div class="col align-self-end"><p class="text-muted text-center align-bottom border-top pt-2">Copyright © 2024 ISTI-CNR</p></div></div></div></div>';



$(document).ready(function() {

	window.addEventListener("resize", function() {
    	clearTimeout(this.id);
    	this.id = setTimeout(doneResizing, 300);
	}, true);
	
	function doneResizing(){
		$("#displayminimap").empty();;
		$('#displayminimap').css('height', 'auto');
		drawMinimap(currentMinimap, false, latestOffset);
	};

	$(displayCantoWrapperId).scroll(function() {
		if (minimapScrolling) {
			minimapScrolling = false
		}
		else {
			trackScrollCanto()
		}
	});
 
	// Evento: click sul cambio stile
	$('.stileLink').on('click', function() {
		var newStyle = $(this)[0].id;
		setStyle(newStyle);
    });


	// Evento: click sulla voce about del menu info
	$("#visAbout").PopupLayer({
        to: 'bottom',
        contentToggle: false,
        screenRatio: 0.6,
        blur: true,
		content: textAbout,
		color: "#212529", 
        backgroundColor: "rgb(246, 247, 245)",
	});
	
	
	$("#incrFontSize").click(function() {
		newFontSize = incSize($('#displaycanto').css("font-size"), 10, 18, 58)
		newH4FontSize = incSize($('#displaycanto h4').css("font-size"), 12, 24, 72)
		//newLiFontSize = incSize($('#displaycanto li::marker').css("font-size"), 6, 12, 32)
		$('#displaycanto').css("font-size", newFontSize);
		$('#displaycanto h4').css("font-size", newH4FontSize);
		//$('#displaycanto li::marker').css("font-size", newLiFontSize);
		drawMinimap(currentMinimap, false);
		$('iframe').contents().find('.blog-main').css("font-size", newFontSize);
		$('iframe').contents().find('.blog-main h4').css("font-size", newH4FontSize);
	});


	// Funzioni di gestione del comportamento dei bottoni collapse 
	$('#collapseLogic').on('hidden.bs.collapse', function (e) {
		if (e.target.id == "collapseLogic") {
			$("#showLogic").html('<span class="text-muted">Mostra</span>');
			$("#collapseAdvanced").collapse('hide');
		};
	})
	
	$('#collapseLogic').on('shown.bs.collapse', function () {
  		$("#showLogic").html('<span class="font-weight-bold text-muted">Nascondi</span>');
  		$("#collapseAdvanced").collapse('show');
	})
	
	$('#collapseOptions').on('hidden.bs.collapse', function (e) {
		if (e.target.id == "collapseOptions") {
			$("#showOptions").html('<span class="text-muted">Opzioni</span>');
		};
	})
	
	$('#collapseOptions').on('shown.bs.collapse', function () {
  		$("#showOptions").html('<span class="font-weight-bold text-muted">Opzioni</span>');
	})

	$('.collapse').on('hide.bs.collapse', function (e) {
		if (e.target.id.substr(0,11) == "collapseCla") {
			var claIdNum = e.target.id.substr(11);
			$("#claCollapse" + claIdNum)[0].removeAttribute("style");
			$("#claCollapse" + claIdNum).removeClass( "border-bottom-0" );
			$("#claCollapse" + claIdNum).addClass( "border" );
			$("#claCollapse" + claIdNum).blur();
			e.stopPropagation();
		};
	})
	
	$('.collapse').on('show.bs.collapse', function (e) {
		if (e.target.id.substr(0,11) == "collapseCla") {
			var claIdNum = e.target.id.substr(11);
			$("#claCollapse" + claIdNum)[0].setAttribute("style", "border-bottom-left-radius: 0;border-bottom-right-radius: 0;");
			$("#claCollapse" + claIdNum).removeClass( "border" );
			$("#claCollapse" + claIdNum).addClass( "border-bottom-0" );
			$("#claCollapse" + claIdNum).blur();
			e.stopPropagation();
		};
	})
	
	// Evento: click sullo switch di ricerca avanzata
	$('#searchToggle').on('change', function() {
		if ($(this).prop('checked')) {
			queryJson.QueryAvanzata = "1";
			$("#collapseOptions").collapse('hide');
			$("#simpleSearchDiv").fadeOut(300, function(){
				$("#rigaRicercaSemplice").removeClass( "bg-lida08" )
				$("#rigaRicercaSemplice").addClass( "bg-lida10" )
				$("#simpleSearchDiv").removeClass( "d-flex" )
				$("#advancedSearchDiv").addClass( "d-flex" )
				$("#advancedSearchDiv").fadeIn(400, function(){
					$("#collapseAdvanced").collapse('show');
					$("#collapseLogic").collapse('show');	
				});
			});
		} else {
			queryJson.QueryAvanzata = "0";
			$("#collapseAdvanced").collapse('hide');			
			$("#advancedSearchDiv").fadeOut(300, function(){
				$("#rigaRicercaSemplice").removeClass( "bg-lida10" )
				$("#rigaRicercaSemplice").addClass( "bg-lida08" )
				$("#advancedSearchDiv").removeClass( "d-flex" )
				$("#simpleSearchDiv").addClass( "d-flex" )
				$("#simpleSearchDiv").fadeIn(400);
				
			});
		};
    });
    
	// Inizializza sortable
	$( "#sortable0" ).sortable({
		items: "> li",
		handle: ".handle",
		opacity: 0.6, 
		cursor: 'move'
	});

	// Inizializza selectable-xX0 e definisce le funzioni 
	$("#selectable-xX0").selectable({
		filter: ".sel-canto",
		selected: function(event, ui) {
            window.context0[ui.selected.id.substring(0,1)][ui.selected.id.substring(2)] = 1;
            var tmpFocusBtn = "#plusBtn" + ui.selected.id.substring(0,1) + "-xX" + tabID;
            $(tmpFocusBtn).focus();
		}
	});

  // Inizializza resizable
	$(".menuNavigazione").resizable({
		handles: "e",
		minWidth: 100,
		maxWidth: 350,
		resize: function(event, ui) {
			getDimensionsDiv(true);
		},
		stop: function(event, ui) {
			setWidthInPercent(ui.element);
		}
	});
  
	$(".menuRicerca").resizable({
		handles: "w",
		minWidth: 350,
		resize: function(event, ui) {
			ui.position.left = 0;
			getDimensionsDiv(true);
		},
		stop: function(event, ui) {
			setWidthInPercent(ui.element);
		}
	});
  
	$(".visCanto").resizable({
		handles: "s",
		minHeight: 60,
		//maxHeight: 880,
		alsoResize: "#displaycanto",
		resize: function(event, ui) {
			//console.log($("#colVisualizza").css("height"));
			$("#displaycanto").width(" min-content");
			var infoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2-46;
			$("#displayinfo").css("maxHeight", infoHeightToSet+"px");
			$("#displayinfo").css("height", infoHeightToSet+"px");
			$("#displaynote").css("maxHeight", infoHeightToSet+"px");
			$("#displaynote").css("height", infoHeightToSet+"px");
			$(".visInfo").css("height", (infoHeightToSet+4)+"px");
			//console.log($("#colVisualizza").css("height"));
			getDimensionsDiv(true);
		},
		stop: function(event, ui) {
			$("#displaycanto").width(" min-content");
		}
	});

	// Funzioni di gestione dei bottoni di paginazione
	$('#collapseZero').on('shown.bs.collapse', function () {
		managePage();
	});

	$('#paginaLista').on('change', function() {
		currPage = $("#paginaLista")[0].options[$("#paginaLista")[0].selectedIndex].value;
		managePage();
	});

	$('#pagPrecedente').on('click', function() {
		if (!$(this).hasClass("disabled")){
			currPage--;
			$('#paginaLista option[value=' + currPage + ']').prop('selected', true);
			managePage();
		};
	});

	$('#pagSuccessiva').on('click', function() {
		if (!$(this).hasClass("disabled")){
			currPage++;
			$('#paginaLista option[value=' + currPage + ']').prop('selected', true);
			managePage();
		};
	});
	
	// Evento: modifica dell'unita di ricerca'
	$("#unitaRicerca").on('change', function() {
		queryJson.unitaRicerca = $("#unitaRicerca")[0].options[$("#unitaRicerca")[0].selectedIndex].value;
	});
	
	// Evento: modifica di un campo clausole
	$("form #lemma_forma,#queryText,#opzioni_testo").on('change', function() {
		if ($(this)[0].id == "queryText"){
			var orgSelection = $('#lemma_forma option:selected')[0].value
			var qText = $(this)[0].value;
			if (qText !== null && qText !== '') {qText = ' "' + qText + '"';}
			setLemmaForma(qText,orgSelection);
		};
		refreshClaList();
	});

	$('#cla-TabContent').on('change', '.monMe', function() {
		refreshClaList();
	});

	// Evento: click sull'icona rimuovi clausola
    $('#cla-TabContent').on('click', '.removeCla', function() {
		var claListItemId = $(this).closest('li').attr('id');
		var claIdNum = claListItemId.substr(6);
		claListLen--;
 		var thisIs = $("#" + claListItemId);
		$("#" + claListItemId).fadeOut(300, function(){ 
            thisIs.remove();    
       		delete queryJson["Clausola" + claIdNum];
			delete window["context" + claIdNum];
    		refreshClaList();
		    refreshSortables();
        });
	});

	// Evento: click sull'icona rimuovi condizione
	$('#sortable0').on('click', '.removeCond', function() {
		var thisIs = $(this).closest('ul').parent();
		$(this).closest('ul').fadeOut(300, function(){
            thisIs.remove();
			condListLen--;
			if (claListLen == 0 && condListLen == 0) {
				$('#sortable0').html(emptyClaList);
			};
			refreshClaList();
			refreshSortables();
			refreshConnectWith();
        });
	});
	
	// Evento: click sulla lista di clausole nel dropbox "Aggiungi clausola di tipo:" o "aggiungi condizione logica:"
	$('.addCCbtn').on('click', function() {
		var addCC =  $(this).attr('id');
		switch (addCC) {
        	case "btnAddCla1":
        		tabID++;
        		addGramCla("#sortable0",1,tabID,1);
         	    break;
        	case "btnAddCla2":
        		tabID++;
        		addSyntCla("#sortable0",1,tabID,1);
        	    break;
        	case "btnAddCla3":
        		tabID++;
        		addMetaCla("#sortable0",0,tabID,0);
        	    break;
        	case "btnAddCond":
        		addLogicCond("#sortable0","OR");
        		break;
        	default:
        };
        refreshClaList();
        refreshSortables();
	});

	// Evento: clausola spostata nella lista
	$('#sortable0').sortable({ 
    	opacity: 0.6,
    	cursor: 'move',
    	update: function() {
			refreshClaList();
			refreshSortables();
    	}
	});
		
	// Evento: cambiato il tipo della condizione logica
	$('#cla-TabContent').on('change', '.condType', function() {
		var condtype = $(this).val();
		var condId = $(this).attr('id').substring(12);
		if (condtype == "AND") {
			$("#cond" + condId).removeClass( "condLI-OR bg-lida13" )
			$("#cond" + condId).addClass( "condLI-AND bg-lida12" )
			//$(this).removeClass( "bg-lida13" )
			//$(this).addClass( "bg-lida12" )
		} else {
			$("#cond" + condId).removeClass( "condLI-AND bg-lida12" )
			$("#cond" + condId).addClass( "condLI-OR bg-lida13" )
			//$(this).removeClass( "bg-lida12" )
			//$(this).addClass( "bg-lida13" )
		};
		refreshClaList();
	});
		
	// Evento: click sul bottone di edit delle clausole
	$('#cla-TabContent').on('click', '.claAct', function() {
		var claListItemId = $(this).closest('li').attr('id');
		var tabPanelId = "#" + claListItemId.substring(3);
        if ($(this).prop('checked')) {
        	$(tabPanelId).attr("data-claActive", 1);
			$(this).closest('li').find('.clatext').fadeTo( "slow", 1 );
        } else {
			$(tabPanelId).attr("data-claActive", 0);
			$(this).closest('li').find('.clatext').fadeTo( "slow", 0.6 );
		}
		refreshSortables();
    });
	
	// Evento: click sull'icona di refresh dei radio button
	$('#cla-TabContent').on('click', '.radioReset', function() {
		fSet = $(this).parent().siblings('fieldset');
		if (fSet.find(":checked").length) {
			radioChecked = fSet.find(":checked")[0];
			radioChecked.checked = false;
		};
        refreshClaList();
    });

	// Evento: click sull'icona di trash del contesto
	$('#rigaRicerca').on('click', '.trashClaCont', function() {
		var claIdNum = $(this)[0].id.substring(15);
		resetContext(claIdNum);
		refreshClaList();
    });

	// Evento: click sull'icona di add del contesto
	$('#rigaRicerca').on('click', '.addClaCont', function() {
		var claIdNum = $(this).closest('.ui-selectable').attr('id').substr(13);
		var selectedCanti = $(this).closest('.card').find('.ui-selected');
		if (selectedCanti.length == 0) {
			$(this).closest('.card').find('.ui-selectee').each(function() {
				$(this).addClass( "ui-selected" );
				window["context" + claIdNum][$(this).attr("id").substring(0,1)][$(this).attr("id").substring(2)] = 1;
			});
		};
		parseContext(claIdNum);
		hideContextCanti(claIdNum);
		if ($(this).closest('.card').find('span:visible').length == 1) {
			$(this).closest('.card').find('div .sel-canti-intro').text("Selezionati tutti i canti.");
		};
		refreshClaList();
    });
	
	// Evento: click sull'icona di save local
	$('#advancedSearchDiv').on('click', 'ion-icon[name="save-outline"]', function() {
		var fileA = document.createElement("a");
		fileA.href = window.URL.createObjectURL(new Blob([JSON.stringify(queryJson)], {type: "text/plain;charset=utf-8"}));
		fileA.download = "LiDaQuery.txt";
		fileA.click();
		fileA.remove();
    });
	
	// Evento: click sull'icona di load local
	$('#advancedSearchDiv').on('click', 'ion-icon[name="folder-open-outline"]', function() {
		$('#apriFile').click();
    });
	
	$("#apriFile").on('change', function() {
		var file = $(this).prop('files')[0];
		var reader = new FileReader();
        reader.onload = function(data){
			queryJson = JSON.parse(data.target.result)
        	makeUpGui(queryJson);
        };
  		if (file !== '') {
			reader.readAsText(file);
			$("#apriFile")[0].value = '';
		};
	});

	// Evento: SCELTA CATEGORIA GRAMMATICALE 
	$('#cla-TabContent').on('change', 'select.catgram', function(e) {
		e.preventDefault();
		var tabPaneId = ($(this).closest('.tab-pane').attr("id"));		
		var selectedValue = $(this).val();
		addCatgramSubcla(tabPaneId,selectedValue);
		refreshClaList();	
	});

	// Evento: Submit form
	$("form").submit(function(e){
		e.preventDefault();
	});

	// Evento: click sul bottone di reset semplice
	$('#cleanresult').on('click', function() {
		resetResult();
		resetSimpleGui();
		refreshClaList();
	});
	
	// Evento: click sul bottone di reset azanzata
	$('#cleanresult2').on('click', function() {
		resetResult();
		resetAdvGui();
		refreshClaList();
	});

	// Evento: click sull'icona rimuovi nota
    $('#displaynote').on('click', '.closeNote', function() {
		var noteListItemId = $(this).closest('.card');
		if (($(noteListItemId).siblings(".card-body").length == 0) && !($(noteListItemId).hasClass("noteCardGroup")) ) {
			$(noteListItemId).parent().remove()
		} else {
			$(noteListItemId).remove();
		}
		if ($('#displaynote .card').length == 0) {
			$('#displaynote').append($(emptyNoteList))
		};
	});

	// Evento: click sull'icona rimuovi periodo
    $('#displayinfo').on('click', '.closeStruct', function() {
		//$('#displayinfo').empty();
		//$('#displayinfo').append($(emptyInfo))
		$('#infoCard0').attr('style', "display: flex;");
		$('#structGroupCard0').attr('style', "display: none;");
		resetGraphStruct()
	});
		
	// Variabili JSON per i filtri
	var verboJson = {
		"filtriverbo": {
			"Diatesi": ["Attivo", "Passivo"],
			"Transitivita": ["Transitivo", "Intransitivo"],
			"Genere": ["Femminile", "Maschile"],
			"Numero": ["Singolare", "Plurale"],
			"Pers": ["Impersonale"],
			"Rifl": ["Riflessivo"],
			"Coniugazione": ["Qualsiasi coniugazione", "Prima coniugazione", "Seconda coniugazione", "Terza coniugazione", "Essere coniugazione", "Avere coniugazione"],
			"Tempi": ["Qualsiasi tempo verbale", "Indicativo presente", "Indicativo passato prossimo", "Indicativo imperfetto", "Indicativo passato remoto", 
				"Indicativo trapassato prossimo", "Indicativo trapassato remoto", "Indicativo futuro semplice", "Indicativo futuro anteriore", "Congiuntivo presente", 
				"Congiuntivo imperfetto", "Congiuntivo passato", "Congiuntivo trapassato", "Condizionale presente", "Condizionale passato", "Imperativo presente", 
				"Infinito presente", "Infinito passato", "Participio presente", "Participio passato", "Gerundio presente", "Gerundio passato"],
			"Persona" : ["Qualsiasi persona", "1ª persona singolare", "2ª persona singolare", "3ª persona singolare", "1ª persona plurale", "2ª persona plurale", "3ª persona plurale"],
			"Funzione": ["Tutte le funzioni", "Aggettivo", "Sostantivo maschile", "Sostantivo femminile"],
			"Declinazione": ["Tutte le declinazioni", "Prima declinazione", "Seconda declinazione", "Terza declinazione"],
		}
	}
	
	var sostantivoJson = {
		"filtrisostantivo": {
			"Numero": ["Singolare", "Plurale"],
			"Genere_lemma": ["Lemma femminile", "Lemma maschile"],
			"Genere_forma": ["Forma femminile", "Forma maschile"],
			"riflpers": ["In locuzione"],
			"Declinazione_sostantivo": ["Tutte le declinazioni", "Prima declinazione", "Seconda declinazione", "Terza declinazione"],
		}
	}

	var aggettivoJson = {
		"filtriaggettivo": {
			"Classe": ["1ª", "2ª"],
			"Genere": ["Femminile", "Maschile"],
			"Numero": ["Singolare", "Plurale"],
			"Con_oggetto_indiretto": ["Con oggetto indiretto"],
			"Tipo_aggettivo": ["Qualsiasi tipo aggettivo", "Qualificativo", "Indefinito", "Interrogativo", "Esclamativo", "Numerale", "Dimostrativo", "Relativo", "Possessivo", "In locuzione"],
			"Grado": ["Qualsiasi grado", "Comparativo di maggioranza", "Comparativo di minoranza", "Comparativo di uguaglianza", "Superlativo relativo", "Superlativo assoluto"],
			"Tipo_di_Complemento": ["Qualsiasi tipo di Complemento", "Introdotto da A", "Introdotto da CON", "Introdotto da CONTRO", "Introdotto da DA", "Introdotto da DI", "Introdotto da IN",
				"Introdotto da PER", "Introdotto da SU", "Introdotto da TRA", "Introdotto da VERSO", "Introdotto da SOPRA",
				"Introdotto da SOTTO", "Introdotto da DINANZI", "Introdotto da prep.", "Oggetto ind.", "Ogg. indi. + compl. con DI", "Ogg. ind. pronom."],
			"Tipo_di_frase": ["Qualsiasi tipo di frase", "Con infinito retto da A", "Con infinito retto da DA", "Con infinito retto da DI", "Con infinito retto da PER",
				"Con infinito retto da SE", "Con subordinata all'indic.", "Con subordinata al cong.", "In locuzione imp.+infinito",
				"In locuzione imp.+che+indic.", "In locuzione imp.+che+cong.", "In locuzione imp.+se+indic.", "In locuzione imp.+se+cong.",
				"In locuzione imp.+come+indic.", "In locuzione imp.+quando+indic.", "In locuzione imp.+perché+cong.", "In locuzione imp.+a+infinito"]
		}
	}

	var pronomeJson = {
		"filtripronome": {
			"Genere": ["Femminile", "Maschile"],
			"Numero": ["Singolare", "Plurale"],
			"Classe_Persona": ["Qualsiasi Classe Persona", "1ª", "2ª", "3ª"],
			"Tipo": ["Qualsiasi tipo", "Personale", "Riflessivo", "Interrogativo", "Esclamativo", "Dimostrativo", "Relativo", "Possessivo"],
			"Forma_Personali_Riflessivi": ["Qualsiasi forma (Personali-Riflessivi)", "Libero", "Libero in Composizione", "Proclitico", "Enclitico"],
			"Funzione_Personali": ["Qualsiasi funzione (Personali)", "Libero - soggetto", "Libero - soggetto impersonale", "Libero - complemento", "Libero - rafforzativo",
				"Clitico - accusativo", "Clitico - dativo", "Clitico - partitivo"],
			"Tipo_Riflessivi": ["Qualsiasi tipo (Riflessivi)", "Proprio", "Lessicalizzato", "Impersonale", "Passivo", "Reciproco"]
		}
	}
	
	var articoloJson = {
		"filtriarticolo": {
			"Genere": ["Femminile", "Maschile"],
			"Numero": ["Singolare", "Plurale"],
			"Tipo": ["Determinativo", "Indeterminativo"]
		}
	}

	var avverbioJson = {
		"filtriavverbio": {
			"Tipo": ["Qualsiasi tipo", "Al comparativo di maggioranza", "Al comparativo di minoranza",
				"Al superlativo assoluto", "Al superlativo relativo",
				"In Locuzione", "In Locuzione separato", "Proclitico", "Enclitico"]
		}
	}

	var preposizioneJson = {
		"filtripreposizione": {
			"Tipo_I": ["Propria", "Impropria"],
			"Tipo_preposizione": ["Qualsiasi tipo preposizione", "Semplice", "Articolata", "In locuzione", "In locuzione separata"],
			"Sintassi": ["Qualsiasi sintassi", "Soggettiva", "Oggettiva", "Dichiarativa", "Completiva obliqua", "Finale",
				"Causale", "Concessiva", "Consecutiva", "Temporale", "Modale", "Eccettuativa", "Esclusiva",
				"Limitativa", "Comparativa", "Avversativa"],
			"Complemento_(I)": ["Qualsiasi complemento (I)", "Di stato in luogo", "Di moto a luogo", "Di moto da luogo", "Di moto per luogo",
				"Di luogo", "Predicativo del soggetto", "Predicativo dell'oggetto", "Di distanza",
				"Di tempo determinato", "Di tempo continuato", "Di tempo", "Di termine", "Di vantaggio",
				"Di svantaggio", "Di specificazione", "Di modo", "Di mezzo", "Di compagnia",
				"Di unione", "Di allontanamento-separazione", "Di materia"],
			"Complemento_(II)": ["Qualsiasi complemento (II)", "Di limitazione", "Di qualità", "Di causa", "Di agente", "Di causa efficiente", "Di fine o scopo",
				"Di paragone", "Di argomento", "Distributivo", "Di sostituzione", "Di estensione", "Di rapporto",
				"Di esclusione", "Di peso", "Di quantità", "Di colpa", "Di denominazione", "partitivo",
				"Di abbondanza-privazione", "Di origine-provenienza", "Concessivo", "Di effetto", "Di pena",
				"Simmetrico", "Indiretto esperiente", "Indiretto dativo", "Indiretto oggetto", "Indiretto possessore",
				"Indiretto benefattivo"]
		}
	}

	var congiunzioneJson = {
		"filtricongiunzione": {
			"Coo_sub": ["Coordinativa", "Subordinativa"],
			"Tipo": ["Qualsiasi tipo", "Semplice", "Composta", "Locuzione", "Locuzione separata"],
			"Coord_tipo": ["Qualsiasi coord. tipo", "Copulativa", "Disgiuntiva", "Avversativa", "Esplicativa", "Conclusiva", "Correlativa"],
			"Subord_tipo": ["Qualsiasi subord. tipo", "Soggettiva", "Oggettiva", "Dichiarativa", "Completiva obliqua", "Interrogativa",
				"Finali", "Causali", "Concessiva", "Consecutiva", "Temporale", "Modale",
				"Eccettuativa", "Comparativa", "Condizionale", "Esclusiva", "Limitativa"]
		}
	}

	var onomasticacitazioneJson = {
		"filtrionomastica": {
			"Tipo": ["Qualsiasi tipo", "Nome proprio", "Nome proprio separato", "Titolo"]
		},

		"filtricitazione": {
			"Tipo": ["Qualsiasi tipo", "Latina", "Provenzale", "Francese", "Spagnola", "Ebraica", "Greca"]
		}
	}

	var categorie = {
		"verbovolgare": "filtriverbo",
		"sostantivovolgare": "filtrisostantivo",
		"pronomevolgare": "filtripronome",
		"aggettivovolgare": "filtriaggettivo",
		"articolovolgare": "filtriarticolo",
		"avverbiovolgare": "filtriavverbio",
		"preposizionevolgare": "filtripreposizione",
		"congiunzionevolgare": "filtricongiunzione",
		"onomasticavolgare": "filtrionomastica",
		"citazionevolgare": "filtricitazione"
	}

	var catGrammsenzaspec = ['all', 'interiezionevolgare']

	var subordinazioneJson = {
		"subordinazione": {
			"livello": ["Qualsiasi livello di subordinazione", "principale", "coordinata a una principale", "subordinata di I grado",
				"subordinata di II grado", "subordinata di III grado", "subordinata di IV grado", "subordinata di V grado",
				"subordinata di VI grado", "subordinata di VII grado", "coordinata a una subordinata di I grado",
				"coordinata a una subordinata di II grado", "coordinata a una subordinata di III grado",
				"coordinata a una subordinata di IV grado", "coordinata a una subordinata di V grado", "pseudo-coordinata",
				"parentetica", "coordinata a una parentetica"]
		}
	}

	var categorieJson = $.extend({}, verboJson, sostantivoJson, pronomeJson, aggettivoJson, articoloJson, avverbioJson, preposizioneJson, congiunzioneJson, onomasticacitazioneJson);


    // Variabili testuali per compattezza
    const iconReset = '<div class="p-0 align-self-start align-items-start justify-content-end text-right"> \
						<button class="btn btn-sm btn-outline-success bg-light radioReset border rounded text-success px-1 pb-0" style="margin-top: 1px !important;margin-right: 1px !important;"> \
						<ion-icon name="refresh-circle"></ion-icon></button></div>';
    const iconCloseCond = '<div class="p-0 mr-3 mt-0 text-right text-success"><span class="iconClClass removeCond"><ion-icon name="close-circle"></ion-icon></span></div>';
	const emptyClaList = '<li id="li-cla0" class="list-group-item align-items-center my-1 ui-state-default ui-state-disabled border text-muted bg-white ui-state-disabled-opacity-06 small">Nessuna clausola aggiunta.</li>';
	const defaultCond = '<div id="cla-defaultCond" class="col-12 p-1 small font-weight-bold text-muted"> Clausole e condizioni in AND di default</div>';
	const emptyNoteList = '<div class="card card-body well well-sm m-1 mt-2 p-0" id="noteCard0"><span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessun commento visualizzato</span></div>';
	//const emptyInfo = '<div class="card card-body well well-sm m-1 mt-2 p-0" id="infoCard0"><span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessuna struttura visualizzata</span></div>';

	const canticheList = ["Inferno","Purgatorio","Paradiso"];
	const cla0JsonText = '{"queryText": "", "lemma_forma": "lemma", "opzioni_testo": "parola", "TipoClausola": "0", "Attiva": "0"}';
	const condLIplaceholderText1 = 'Trascina qui almeno 1 clausola o condizione';
	const condLIplaceholderText2 = 'Trascina qui almeno 2 clausole o condizioni';
	const condLIplaceholderText1d = 'Trascina qui almeno 1 clausola o condizione, oppure attiva le clausole inattive';
	const condLIplaceholderText2d = 'Trascina qui almeno 2 clausole o condizioni, oppure attiva le clausole inattive';
	const condLIplaceholderPart1 = '<li id="placeholderSort';
	const condLIplaceholderPart2 = '" class="mx-0 my-1 p-1 pl-3 list-group-item align-items-center border text-muted small bg-light ui-state-disabled">';
	
	// Variabili e costanti funzionali
	var minimapScrolling = false;
	var tabID = 0;
	var claListLen = 0;
	var condListLen = 0;
	var logicExprString = ``;
	var guiLogicString = ``;
	const cc0 = new Array(34).fill(0);
	const cc1 = new Array(33).fill(0);
	const cc2 = new Array(33).fill(0);
	const contextEmpty = [cc0,cc1,cc2];
	var queryJson = JSON.parse('{"EsprLogica":"", "LogicaGui":"", "QueryAvanzata": "0"}');
	queryJson.LiDaVersion = "1.0";
	queryJson.unitaRicerca = "verso";
	queryJson.Clausola0 = JSON.parse(cla0JsonText);
	queryJson.Clausola0.contesto = JSON.stringify(contextEmpty);
	window.context0 = JSON.parse(JSON.stringify(contextEmpty));
	const jsonReplacer = (key, value) =>
		typeof value === 'undefined' ? 0 : value;
	const nRisultatiPerPag = 25;

	// Fine variabili


	getJsonQuery = function(){
		return queryJson;
	};

	// Funzioni di gestione del tab Periodo, usate da synthgraph.js

	fillStructCard = function(lisid){
/*		var structGroupCard = $('<div class="card card-body structCardGroup well well-sm mx-1 my-2 p-0" id="structGroupCard0">');
		var commentHeader = $('<div class="d-flex align-content-start flex-nowrap text-muted" id="structGruppoVersi0">')
		var rigaNota = $('<div class="p-0 m-0">');
		var buttons = $('<div class="d-flex flex-wrap-reverse ml-auto align-items-center justify-content-end px-1 pt-1 pb-0">')
		var closeButton = $('<button id="closeStruct0"'+
				'class="btn btn-sm btn-outline-warning btn-outline-warning-mod closeStruct rounded text-warning align-self-end px-1 pb-0 ml-1 mb-1">'+
				'<ion-icon name="close-circle"></ion-icon>');
		var structCard = $('<div class="card card-body well well-sm mx-1 mb-1 mt-0 px-2 pt-1 pb-0 border-lida08" id="structCard0">');			
*/
		var cantiche=["Inferno", "Purgatorio","Paradiso"];
		var romani = ["I","II","III","IV","V","VI","VII","VIII","IX","X",
					  "XI","XII","XIII","XIV","XV","XVI","XVII","XVIII","XIX","XX",
					  "XXI","XXII","XXIII","XXIV","XXV","XXVI","XXVII","XXVIII","XXIX","XXX",
					  "XXXI","XXXII","XXXIII","XXXIV"];
		var lisidArray = lisid.split('_')		
/*
		closeButton.appendTo(buttons);
		rigaNota.append('<h6 class="card-title m-2 text-warning">' + cantiche[lisidArray[0]-1] + ", Canto " + romani[lisidArray[1]-1] + ", Verso " + lisidArray[2] + "</h6>");
		rigaNota.appendTo(commentHeader);
		buttons.appendTo(commentHeader);
		commentHeader.appendTo(structGroupCard);
		structCard.appendTo(structGroupCard);
		$('#displayinfo').empty();
		structGroupCard.appendTo($('#displayinfo'));
*/
		$('#structHead0').text(cantiche[lisidArray[0]-1] + ", Canto " + romani[lisidArray[1]-1] + ", Verso " + lisidArray[2]);
		$('#structGroupCard0').attr('style', "display: flex;");
		$('#infoCard0').attr('style', "display: none;");
	};
	
	emptyStructCard = function(){
		//$('#displayinfo').empty();
		//$('#displayinfo').append($(emptyInfo))
		$('#infoCard0').attr('style', "display: flex;");
		$('#structGroupCard0').attr('style', "display: none;");
	};
	
	
	// Funzione di creazione del tab delle clausole grammaticali
	function addGramCla(sortableId,active,tabID,toExpand){
		if (active > 0) {
			var checkInsert = ' checked="checked"';
		} else {
			var checkInsert = '';
		};
		var claText = "Categoria grammaticale: <br>";
		addLIitem(sortableId,tabID,claText,checkInsert,toExpand);
		var claClone = document.getElementById("tipogrammaticaleN").cloneNode(true);
		claClone.setAttribute("id","cla" + tabID);
		claClone.setAttribute("data-claActive", active);
		claClone.setAttribute("aria-labelledby","cla" + tabID + "-tab");
		claClone.setAttribute("style", "");
		$('#claBody' + tabID).append(claClone);
		// se non cambio l'id della select react non rileva l'evento onchange:		
		$('#cla' + tabID + " #grammtypesN").attr("id","grammtypes" + tabID);
		$('#cla' + tabID + " #lemma_formaN").attr("id","lemma_forma" + tabID);
		$('#cla' + tabID + " #queryTextN").attr("id","queryText" + tabID);
		$('#cla' + tabID + " #opzioni_testoN").attr("id","opzioni_testo" + tabID);
		$('#cla' + tabID + " #contextDivN").attr("id","contextDiv" + tabID);
		addClaContext(tabID);
	}
	
	// Funzione di creazione delle subclausole grammaticali basate sul valore scelto
	function addCatgramSubcla(tabPaneId,selectedValue){
		var dettagliBox = $("#" + tabPaneId + " .dettaglifiltri");
		dettagliBox.html("");
		if (Object.keys(categorie).includes(selectedValue)) {
			var filtro = categorie[selectedValue]
			var keys = Object.keys(categorieJson[filtro])
			for (var key in keys) {
				var vals = categorieJson[filtro][keys[key]]
				switch (vals.length) {
        			case 2:
					var element = $('<div />');
					element.attr('class', 'd-flex flex-sm-nowrap pr-0 py-0 mb-1 form-group form-control-sm border justify-content-between bg-light');
					var rbfieldset = $('<fieldset />');
					var flexdiv1 = $('<div />');
					var flexdiv2 = $('<div />');
					var input1 = $('<input />');
					var input2 = $('<input />');
					var label1 = $('<label />');
					var label2 = $('<label />');

					rbfieldset.attr('id', tabPaneId + keys[key].replace(/\s/g, ''));
					rbfieldset.attr('class', 'custom-control-inline monMe');
					flexdiv1.attr('class', 'custom-control custom-radio custom-control-inline m-0 mr-2 pb-0');
					flexdiv1.attr('style', 'padding-top: 2px!important;');
					flexdiv2.attr('class', 'custom-control custom-radio custom-control-inline m-0 pb-0');
					flexdiv2.attr('style', 'padding-top: 2px!important;');
					input1.attr('class', 'custom-control-input');
					input2.attr('class', 'custom-control-input');
					input1.attr('type', 'radio');
					input2.attr('type', 'radio');
					input1.attr('id', tabPaneId + vals[0].replace(/\s/g, ''));
					input2.attr('id', tabPaneId + vals[1].replace(/\s/g, ''));
					input1.attr('value', vals[0]);
					input2.attr('value', vals[1]);
					input1.attr('name', tabPaneId + keys[key]);
					input2.attr('name', tabPaneId + keys[key]);
					label1.attr('class', 'custom-control-label form-control-sm custom-control-inline m-0 pl-0 text-muted curPoint');
					label1.attr('style', 'padding-top: 2px!important;');
					label2.attr('class', 'custom-control-label form-control-sm custom-control-inline m-0 pl-0 text-muted curPoint');
					label2.attr('style', 'padding-top: 2px!important;');
					label1.attr('for', tabPaneId + vals[0].replace(/\s/g, ''));
					label2.attr('for', tabPaneId + vals[1].replace(/\s/g, ''));
					label1.append(vals[0]);
					label2.append(vals[1]);

					input1.appendTo(flexdiv1);
					input2.appendTo(flexdiv2);
					label1.appendTo(flexdiv1);
					label2.appendTo(flexdiv2);
					flexdiv1.appendTo(rbfieldset);
					flexdiv2.appendTo(rbfieldset);
					rbfieldset.appendTo(element);
					var iconR = $(iconReset);
					iconR.appendTo(element);
					element.appendTo(dettagliBox);
					break;
       			case 1:
					var element = $('<div />');
					//element.attr('class', ' d-flex flex-sm-nowrap pr-2 py-1 mb-1 form-group form-control bg-light');
					element.attr('class', 'd-flex flex-sm-nowrap form-group form-control-sm border px-2 mb-1 pt-1 pb-0 bg-light');
					var rbfieldset = $('<fieldset />');
					flexdiv1 = $('<div />');
					input1 = $('<input />');
					label1 = $('<label />');
					rbfieldset.attr('id', tabPaneId + keys[key].replace(/\s/g, ''));
					rbfieldset.attr('class', 'custom-control-inline monMe align-items-center');
					flexdiv1.attr('class', 'custom-control custom-checkbox custom-control-inline');
					flexdiv1.attr('style', 'padding-top: 1px!important;');
					input1.attr('class', 'custom-control-input align-self-center');
					input1.attr('type', 'checkbox');
					input1.attr('id', tabPaneId + vals[0].replace(/\s/g, ''));
					input1.attr('value', vals[0]);
					input1.attr('name', keys[key]);
					label1.attr('class', 'custom-control-label form-control-sm custom-control-inline p-0 text-muted curPoint align-self-start');
					label1.attr('style', 'padding-top: 2px!important;');
					label1.attr('for', tabPaneId + vals[0].replace(/\s/g, ''));
					label1.append(vals[0]);

					input1.appendTo(flexdiv1);
					label1.appendTo(flexdiv1);
					flexdiv1.appendTo(rbfieldset);
					rbfieldset.appendTo(element);
					element.appendTo(dettagliBox);
					break;
       			default:
					var element = $('<div />');
					element.attr('class', ' form-group p-0 pb-1 m-0');
					//var select = $('<select class="form-control custom-select-sm monMe bg-light text-muted border btn-outline-success"/>');
					var select = $('<select class="custom-select custom-select-sm monMe bg-light text-muted border btn-outline-success"/>');
					select.attr('id', tabPaneId + keys[key].replace(/\s/g, ''));
					select.attr('title', keys[key]);
					select.attr('name', keys[key]);
					for (var val in vals) {
						var seloption = $('<option />');
						seloption.attr('value', vals[val]);
						seloption.append(vals[val]);
						seloption.appendTo(select);
					}
					select.appendTo(element);
					element.appendTo(dettagliBox);
				}
			}
		}
		if (element) {
			element.attr('style', "display: block;");
			element.appendTo(dettagliBox);
		};
	}

	// Funzione di creazione del tab delle clausole sintattiche
	function addSyntCla(sortableId,active,tabID,toExpand){
		if (active > 0) {
			var checkInsert = ' checked="checked"';
		} else {
			var checkInsert = '';
		};
		var claText = "Tipo sintattico: <br>";
		addLIitem(sortableId,tabID,claText,checkInsert,toExpand);
		var claClone = document.getElementById("tiposintatticoN").cloneNode(true);
		claClone.setAttribute("id","cla" + tabID);
		claClone.setAttribute("data-claActive",active);
		claClone.setAttribute("aria-labelledby","cla" + tabID + "-tab");
		claClone.setAttribute("style", "");
		$('#claBody' + tabID).append(claClone);
		$('#cla' + tabID + " #lemma_formaN").attr("id","lemma_forma" + tabID);
		$('#cla' + tabID + " #queryTextN").attr("id","queryText" + tabID);
		$('#cla' + tabID + " #opzioni_testoN").attr("id","opzioni_testo" + tabID);
		$('#cla' + tabID + " #contextDivN").attr("id","contextDiv" + tabID);
		addClaContext(tabID);
	}

	// Funzione di creazione del tab delle clausole metafore
	function addMetaCla(sortableId,active,tabID,toExpand){
		var checkInsert = ' disabled';
		//if (active > 0) {
		//	var checkInsert = '" checked="checked"';
		//} else {
		//	var checkInsert = '"';
		//};
		var claText = "Clausola Metafore - non ancora implementata";
		addLIitem(sortableId,tabID,claText,checkInsert,toExpand);
		var claClone = document.getElementById("tipometaforaN").cloneNode(true);
		claClone.setAttribute("id","cla" + tabID);
		claClone.setAttribute("data-claActive",active);
		claClone.setAttribute("aria-labelledby","cla" + tabID + "-tab");
		claClone.setAttribute("style", "");
		$('#claBody' + tabID).append(claClone);
	}

	// Funzione di creazione della parte di definizione del contesto delle clausole
	function addClaContext(tabID){
		var contClone = document.getElementById("contextTable-xX0").cloneNode(true);
		contClone.setAttribute("class","row no-gutters px-2 pt-0 pb-2 bg-lida11");
		contClone = contClone.outerHTML.replace(/xX0/g, "xX" + tabID);
		contClone = contClone.replace(/-secondary/g, "-success");
		contClone = contClone.replace(/sel-canto/g, "sel-canto suxess");
		$("#contextDiv" + tabID).append($(contClone)[0]);
		resetContext(tabID);
		$("#selectable-xX" + tabID).selectable({
			filter: ".sel-canto",
			selected: function(event, ui) {
	            window["context" + tabID][ui.selected.id.substring(0,1)][ui.selected.id.substring(2)] = 1;
            	var tmpFocusBtn = "#plusBtn" + ui.selected.id.substring(0,1) + "-xX" + tabID;
            	$(tmpFocusBtn).focus();
			}
		});
	};

	// Funzione di creazione del LI delle condizioni logiche
	function addLogicCond(sortableId,condtype){
		condListLen++;
		var cloneLI = document.getElementById("condxX4Xx").cloneNode(true);
		cloneLI.removeAttribute("style");
		cloneLI = cloneLI.outerHTML.replace(/xX4Xx/g, condListLen)
		cloneLI = cloneLI.replace(/xX5Xx/g, condtype)
		if (condtype == "AND") {
			cloneLI = cloneLI.replace(/xX6Xx/g, "lida12")
		} else {
			cloneLI = cloneLI.replace(/xX6Xx/g, "lida13")
		}
		if ($("#li-cla0")[0]) {
			$("#li-cla0")[0].remove();
		};
		$(sortableId).append($(cloneLI)[0]);
		$("#andOrSelect-" + condListLen).val(condtype);
		$("#sortable" + condListLen).sortable();
		$("#sortable" + condListLen).sortable( "option", "appendTo", document.body );
		$("#sortable" + condListLen).sortable({
			items: "> li",
			handle: ".handle",
			opacity: 0.6, 
			cursor: 'move',
			update: function() {refreshSortables();}
		});
		refreshConnectWith();
	}

	// Funzione di creazione del LI di una clausola nella lista sortable
	function addLIitem(sortableId,tabID,claText,checkInsert,toExpand){
		claListLen++;
		var cloneLI = document.getElementById("li-claxX1Xx").cloneNode(true);
		cloneLI.setAttribute("style", "opacity: 0.1;");
		cloneLI = cloneLI.outerHTML.replace(/xX1Xx/g, tabID)
		cloneLI = cloneLI.replace(/xX2Xx/g, claText)
		cloneLI = cloneLI.replace(/xX3Xx"/g, tabID + '" ' + checkInsert)
		if (checkInsert == ' disabled') {
			cloneLI = cloneLI.replace(/claCollBtn/g, "claCollBtn " + checkInsert);		
		};
		$(sortableId).append($(cloneLI)[0]);
		if (toExpand == 1){
			$("#claCollapse" + tabID).focus();
			$("#claCollapse" + tabID).trigger("click");
		}
		$("#li-cla" + tabID).fadeTo(1000,1);
	};

	// Funzione di refresh della lista clausole nella tab principale e del json della query
	function refreshClaList(){
		var l_f = $("form #lemma_forma")[0].options[$("form #lemma_forma")[0].selectedIndex].value;
		var qText = $("form #queryText")[0].value;
		var optText = $("form #opzioni_testo")[0].value;
		if (qText == "") {			//disattivo clausola 0 se il testo e' vuoto 
			var claActive = 0
		} else {
			var claActive = 1
		};
    	queryJson.Clausola0 = JSON.parse('{"queryText": "' + qText + '", "lemma_forma": "' + l_f + '", "opzioni_testo": "' + optText + '", "TipoClausola": "0", "Attiva": "' + claActive + '"}');
		queryJson.Clausola0.contesto = JSON.stringify(window.context0);
		queryJson.unitaRicerca = $("#unitaRicerca")[0].options[$("#unitaRicerca")[0].selectedIndex].value;
    	var tabsContent = $("#sortable0").find(".claLI");
    	if ($(tabsContent).length) {
			if ($("#li-cla0")[0]) {
				$("#li-cla0")[0].remove();	
			};
    		$(tabsContent).each(function(){
				var claIdNum = $(this).attr('id').substr(6);
				updateClaListItem(claIdNum, "#sortable0");
			});
		} else {
			if (claListLen == 0 && condListLen == 0) {
				$('#sortable0').html(emptyClaList);
				queryJson.EsprLogica = "";
				queryJson.LogicaGui = "";
			}
			tabID = 0;
		};
		if ($('#sortable0').children("li").length <= 1) {
			$("#cla-defaultCond").remove();
		} else {
			if ($('#cla-defaultCond').length == 0) {
				$("#cla-list-row").prepend($(defaultCond));
			}
		};
	}
	
	// Funzione di creazione del LI nella lista delle clausole nel tab principale, aggiunta della clausola nel JSON
	function updateClaListItem(claIdNum, sortableId){
				var claText = '';
				var termText = '';
				var checkInsert = '';
				var claId = "cla" + claIdNum;
				var claListItemId = "li-cla" + claIdNum;
				var claType = $("#" + claId).attr('data-claType');
				var claActive = $("#" + claId).attr('data-claActive');
				if (claActive > 0) {
					checkInsert = ' checked="checked"';
				};
				switch (claType) {
          	  		case "Grammaticale":
						var l_f = $("form #lemma_forma" + claIdNum)[0].options[$("form #lemma_forma" + claIdNum)[0].selectedIndex].value;
						var l_f_t = $("form #lemma_forma" + claIdNum)[0].options[$("form #lemma_forma" + claIdNum)[0].selectedIndex].text;
						var qText = $("form #queryText" + claIdNum)[0].value;
						var optText = $("form #opzioni_testo" + claIdNum)[0].value;
						var optText_t = $("form #opzioni_testo" + claIdNum)[0].options[$("form #opzioni_testo" + claIdNum)[0].selectedIndex].text;
						if (qText != "") {
							termText = l_f_t + ' <span class="text-dark font-weight-bold">' + qText + '</span> ' + optText_t + '.<br>';
						};
						var jsonTextToParse = '{"queryText": "' + qText + '", "lemma_forma": "' + l_f + '", "opzioni_testo": "' + optText + '", "TipoClausola": "' + claType + '", "Attiva": "' + claActive + '"';
            			var gramSelect = $("#" + claId).find(".catgram");
            			var contextText = $("#contextText-xX" + claIdNum).text();
						claText = termText + "Categoria grammaticale: " + gramSelect[0].options[gramSelect[0].selectedIndex].text;
						jsonTextToParse = jsonTextToParse + ', "' + gramSelect.attr('name') + '": "' + gramSelect[0].options[gramSelect[0].selectedIndex].value + '"';
						var claSubParList = $("#" + claId).children(".dettaglifiltri").find("select, fieldset");
						claSubParList.each(function(){
							var claSubParType = $(this)[0].type;
							if (claSubParType == "fieldset" && $(this).find(":checked").length) {
								var claSubParName = $(this).find(":checked")[0].name;
								if (claSubParName.startsWith(claId)) {
									claSubParName = claSubParName.replace(claId,'');
								}
								claText = claText +  "; " + $(this).find(":checked")[0].defaultValue;
								jsonTextToParse = jsonTextToParse + ', "' + claSubParName + '": "' + $(this).find(":checked")[0].value + '"';
							};
							if (claSubParType == "select-one" && $(this)[0].selectedIndex != 0) {
								claText = claText + "; " + $(this)[0].options[$(this)[0].selectedIndex].text;
		        	  			jsonTextToParse = jsonTextToParse + ', "' + $(this)[0].name + '": "' + $(this)[0].options[$(this)[0].selectedIndex].value + '"';
							};
						});
						claText = claText + '.<br>Contesto: ' + contextText;
         	    		break;
        	  		case "Sintattico":
						var l_f = $("form #lemma_forma" + claIdNum)[0].options[$("form #lemma_forma" + claIdNum)[0].selectedIndex].value;
						var l_f_t = $("form #lemma_forma" + claIdNum)[0].options[$("form #lemma_forma" + claIdNum)[0].selectedIndex].text;
						var qText = $("form #queryText" + claIdNum)[0].value;
						var optText = $("form #opzioni_testo" + claIdNum)[0].value;
						var optText_t = $("form #opzioni_testo" + claIdNum)[0].options[$("form #opzioni_testo" + claIdNum)[0].selectedIndex].text;
						if (qText != "") {
							termText = l_f_t + ' <span class="text-dark font-weight-bold">' + qText + '</span> ' + optText_t + '.<br>';
						};
						var jsonTextToParse = '{"queryText": "' + qText + '", "lemma_forma": "' + l_f + '", "opzioni_testo": "' + optText + '", "TipoClausola": "' + claType + '", "Attiva": "' + claActive + '"';
        	  			var syntSelect = $("#" + claId).find("#synttypes");
        	  			var funcSelect = $("#" + claId).find("#syntfunc");
        	  			var contextText = $("#contextText-xX" + claIdNum).text();
						claText = termText + "Tipo sintattico: " + syntSelect[0].options[syntSelect[0].selectedIndex].text + ';<br>Livello di subordinazione: ' + funcSelect[0].options[funcSelect[0].selectedIndex].text + '.<br>Contesto: ' + contextText;
        	  			jsonTextToParse = jsonTextToParse + ', "' + syntSelect.attr('name') + '": "' + syntSelect[0].options[syntSelect[0].selectedIndex].value + '", "' + funcSelect.attr('name') + '": "' + funcSelect[0].options[funcSelect[0].selectedIndex].value + '"';
        	    		break;
					default:
        	    		claText = $("#" + claListItemId + " .clatext").text();
         	  			checkInsert = ' disabled';
						var jsonTextToParse = '{"queryText": "", "lemma_forma": "", "opzioni_testo": "", "TipoClausola": "' + claType + '", "Attiva": "' + claActive + '"';
         		};
         		if ($("#" + claListItemId)[0]) {
					$("#" + claListItemId + " .clatext").replaceWith('<span class="small clatext">' + claText + '</span>');
         		} else {
					addLIitem(sortableId,claIdNum,claText,checkInsert,0);
				};
				queryJson["Clausola" + claIdNum] = JSON.parse(jsonTextToParse + '}');
				queryJson["Clausola" + claIdNum].contesto = JSON.stringify(window["context" + claIdNum]);
	};
	
	// Funzione di refresh dei placeholders e attivazione/disattivazione bottoni nelle liste sortable
	function refreshSortables(){
		$("#sortable0").children(".claLI").each(function() {
			if ($(this).find("input")[0].checked){
				$(this).find('.clatext').css({ opacity: 1 });
			};
			if ($(this).find("input")[0].checked == false){
				$(this).find('.clatext').css({ opacity: 0.6 });
			};
		});
		$("#cla-TabContent .ui-sortable:not(:first)").each(function() {
			var sortableID = $(this)[0].id;
			var placeholderID = "#placeholderSort" + sortableID.slice(-1);
			var iconBtn = $(this).find(".iconClClass")[0];
			var iconDiv = $(iconBtn).parent()[0];
			var activeUL = $(this).children("li").children("ul").length;
			var activeLI = 0;
			var inactiveLI = 0;
			var condLIplaceholder = "";
			$(this).children("li .claLI").each(function() {
				if ($(this).find("input")[0].checked){
					activeLI++;
					$(this).find('.clatext').css({ opacity: 1 });
				};
				if ($(this).find("input")[0].checked == false){
					inactiveLI++;
					$(this).find('.clatext').css({ opacity: 0.6 });
				};
			});
			switch (activeLI + activeUL) {
        		case 0:
        			if ($(placeholderID).length) {

				        $(placeholderID).fadeOut(300, function(){ 
							if (inactiveLI > 0){
								$(placeholderID).text(condLIplaceholderText2d);
							} else {
								$(placeholderID).text(condLIplaceholderText2);
							};					
				            $(placeholderID).fadeTo(100, 0.9).fadeTo(300, 0.6);    
				        });

					} else {
						if (inactiveLI > 0){
							condLIplaceholder = condLIplaceholderPart1 + sortableID.slice(-1) + condLIplaceholderPart2 + condLIplaceholderText2d + '</li>';
						} else {
							condLIplaceholder = condLIplaceholderPart1 + sortableID.slice(-1) + condLIplaceholderPart2 + condLIplaceholderText2 + '</li>';
						}						
        				//$("#" + sortableID).append(condLIplaceholder).hide().fadeIn(300);
       					$("#" + sortableID).append(function(){
							return $(condLIplaceholder).hide();
						});
						$(placeholderID).fadeTo(100, 0.9).fadeTo(300, 0.6);
						
					};
					if (inactiveLI == 0){
						$(iconBtn).attr("class","btn btn-sm btn-outline-success iconClClass removeCond text-success border rounded px-1 pb-0");
						$(iconBtn).prop("disabled", false);
						$(iconDiv).attr("class","col-md-auto p-0 mr-2 mt-0 text-right text-success");
					};
					break;
        		case 1:
        			if ($(placeholderID).length) {
				        $(placeholderID).fadeOut(300, function(){ 
							if (inactiveLI > 0){
								$(placeholderID).text(condLIplaceholderText1d);
							} else {
								$(placeholderID).text(condLIplaceholderText1);
							};					
				            $(placeholderID).fadeTo(100, 0.9).fadeTo(300, 0.6);    
				        });
					} else {
						if (inactiveLI > 0){
							condLIplaceholder = condLIplaceholderPart1 + sortableID.slice(-1) + condLIplaceholderPart2 + condLIplaceholderText1d + '</li>';
						} else {
							condLIplaceholder = condLIplaceholderPart1 + sortableID.slice(-1) + condLIplaceholderPart2 + condLIplaceholderText1 + '</li>';
						}						
        				//$("#" + sortableID).append(condLIplaceholder).hide().fadeIn(300);
       					$("#" + sortableID).append(function(){
							return $(condLIplaceholder).hide();
						});
						$(placeholderID).fadeTo(100, 0.9).fadeTo(300, 0.6);
					};
					$(iconBtn).attr("class","btn btn-sm iconClClass NOremoveCond text-muted border rounded px-1 pb-0");
					$(iconBtn).prop("disabled", true);
					$(iconDiv).attr("class","col-md-auto p-0 mr-2 mt-0 text-right text-muted");
					break;
        		case 2:
         			if ($(placeholderID).length) {
				        $(placeholderID).fadeOut(300, function(){ 
				            $(placeholderID).remove();    
				        });
						//$(placeholderID).remove();
					};
					$(iconBtn).attr("class","btn btn-sm iconClClass NOremoveCond text-muted border rounded px-1 pb-0");
					$(iconBtn).prop("disabled", true);
					$(iconDiv).attr("class","col-md-auto p-0 mr-2 mt-0 text-right text-muted");
					break;
				default:
        			if ($(placeholderID).length) {
				        $(placeholderID).fadeOut(300, function(){ 
				            $(placeholderID).remove();    
				        });
						//$(placeholderID).remove();
					};
			};
		});
		logicExprString = parseCond("#sortable0", "AND", 0);
		guiLogicString = parseCond("#sortable0", "AND", 1);
		queryJson.EsprLogica = logicExprString.split(' ');
		queryJson.LogicaGui = guiLogicString.split(' ');
	};
	
	// Funzione di refresh dei collegamenti tra elementi sortable
	function refreshConnectWith(){
		for (var i=0; i <= condListLen; i++) {
			var cw = "";
			for (var j=0; j <= condListLen; j++) {
				if (i != j) {
					cw = cw + "#sortable" + j + ", ";
				};
				$( "#sortable" + i ).sortable( "option", "connectWith", cw.slice(0, -2) );
			};
		};
	};

	// Funzione usata da resizable
	function setWidthInPercent(element) {
		var percentageWidth = (element.width() / element.parent().width()) * 100;
		element.width(percentageWidth + '%');
	};
	

	// Funzione di parsing delle clausole e delle condizioni logiche	
	function parseCond(sortableList, condType, forGui){
		var condText = "";
		var items = $(sortableList).children("li");
		var itemsText = [];
		$(items).each(function() {
			if ($(this).hasClass("condLI-AND")) {
				var andID = "#" + $(this).children("ul").attr("id");
				var andText = parseCond(andID, "AND", forGui);
				if (andText.length){
					itemsText.push(andText);
				};	
			};
			if ($(this).hasClass("condLI-OR")) {
				var orID =  "#" + $(this).children("ul").attr("id");
				var orText = parseCond(orID, "OR", forGui);
				if (orText.length){
					itemsText.push(orText);
				};	
			};
			if ($(this).hasClass("claLI")) {
				var claNum = "Clausola" + $(this)[0].id.substr(6);
				if (forGui || ($(this).find("input")[0].checked == true)){
					itemsText.push(claNum);
				};
			};
		});
		var iTlen = itemsText.length;
		switch (iTlen) {
        	case 0:
        		break;
        	case 1:
        		if (forGui) {
					condText = "( " + condType + " " + itemsText[0] + " )";
				} else {
        			condText +=  itemsText[0];
        		}
        		break;
        	default:
        		condText = "( " + condType + " ";
				for (let i = 0; i < iTlen; i++) {
					condText += itemsText[i] + " ";
				}
				condText +=  ")";
			};
		return condText;
	};

	function hideContextCanti(claIdNum) {
		$('#selectable-xX' + claIdNum + " .ui-selected").each(function() {
			$(this).attr('style', "display: none;");
			$(this).removeClass( "ui-selected" )
		});
	};

	function makeUpGui(queryJson) {
		// 1. verifica json legit --> TO DO
		// -------------------
		// Pulizia ricerca avanzata:
		resetAdvGui();
		// Imposta checkbox: .attr("checked", true)
		if (queryJson["QueryAvanzata"] == 1) {
			$("#cla-Advanced").attr('style', "display: block;");
			$("#searchToggle").prop("checked", true);
        } else {
			$("#cla-Advanced").attr('style', "display: none;");
			$("#searchToggle").prop("checked", false);
		};
		// Rigenerazione Clausola0:
		if (queryJson["Clausola0"].Attiva) {
			$("#queryText").val(queryJson["Clausola0"].queryText);
			$("#opzioni_testo").val(queryJson["Clausola0"].opzioni_testo);
			var qText = queryJson["Clausola0"].queryText;
			if (qText !== null && qText !== '') {qText = ' "' + qText + '"';}
			setLemmaForma(qText,queryJson["Clausola0"].lemma_forma);
			resetContext(0);
			window.context0 = JSON.parse(queryJson.Clausola0.contesto);
			parseContext(0);
		};
		$("#unitaRicerca").val(queryJson.unitaRicerca);
		// Generazione lista clausole e condizioni con elementi padre:
		guiLogicString = queryJson.LogicaGui;
		var clau2Make = "";
		var claParent = [];	// array di coppie [elemento, elemento padre]
		var treeLevel = []; // pila di elementi padre 
		var condNum = 0;
		for (var i=0; i < guiLogicString.length; i++) {
			switch (guiLogicString[i]) {
				case "(":
					break;
				case ")":
					treeLevel.pop();
					break;
				case "OR":
    	    		claParent.push([guiLogicString[i], treeLevel[treeLevel.length - 1]]);
    	    		treeLevel.push("#sortable" + ++condNum);
					break;
				case "AND":
					if (i > 1) {
	    	    		claParent.push([guiLogicString[i], treeLevel[treeLevel.length - 1]]);
    	    			treeLevel.push("#sortable" + ++condNum);
					} else {
						treeLevel.push("#sortable0");
					};
					break;
				default:
					claParent.push([guiLogicString[i].replace("Clausola", ""), treeLevel[treeLevel.length - 1]]);
			};
		};
		$(claParent).each(function(){
			var itm = $(this)[0]
			if ($(this)[0] == "OR" || $(this)[0] == "AND") {
				addLogicCond($(this)[1],$(this)[0]);
	        }
			if (itm != "OR" && itm != "AND") {
				clau2Make = queryJson["Clausola" + itm].TipoClausola;
				active = queryJson["Clausola" + itm].Attiva
				tabID++;
				switch (clau2Make) {
					case "Grammaticale":
						selectedValue = queryJson["Clausola" + itm].typeGramm0;
						addGramCla($(this)[1],active,tabID,0);
						$("#lemma_forma" + tabID).val(queryJson["Clausola" + itm].lemma_forma);
						$("#queryText" + tabID).val(queryJson["Clausola" + itm].queryText);
						$("#opzioni_testo" + tabID).val(queryJson["Clausola" + itm].opzioni_testo);
						if (selectedValue != "all") {
							$("#grammtypes" + tabID).val(selectedValue);
							addCatgramSubcla("cla" + tabID, selectedValue);
							var ks = Object.keys(queryJson["Clausola" + itm]);
							for (var j = 6; j < ks.length - 1; j++) {
								var melID = "cla" + tabID + ks[j];
								var melement = document.getElementById(melID);
								switch (melement.type) {
									case "fieldset":
										var sval = queryJson["Clausola" + itm][ks[j]]
										$("#cla" + tabID + sval.replace(/\s/g, '')).attr("checked", true);
										break;
									case "select-one":
										melement.value = ([queryJson["Clausola" + itm][ks[j]]])
										break;
									default:
								};
							};
						};
						window["context" + tabID] = JSON.parse(queryJson["Clausola" + itm].contesto);
						parseContext(tabID);
						break;
					case "Sintattico":
						addSyntCla($(this)[1],active,tabID,0);
						$("#lemma_forma" + tabID).val(queryJson["Clausola" + itm].lemma_forma);
						$("#queryText" + tabID).val(queryJson["Clausola" + itm].queryText);
						$("#opzioni_testo" + tabID).val(queryJson["Clausola" + itm].opzioni_testo);
						if (queryJson["Clausola" + itm].typeSyntax0 != ".+") {
							$("#cla" + tabID + " #synttypes").val(queryJson["Clausola" + itm].typeSyntax0);
						}
						if (queryJson["Clausola" + itm].functionSyntax != ".+") {
							$("#cla" + tabID + " #syntfunc").val(queryJson["Clausola" + itm].functionSyntax);
						}
						window["context" + tabID] = JSON.parse(queryJson["Clausola" + itm].contesto);
						parseContext(tabID);
						break;
					case "Metafora":
						addMetaCla($(this)[1],active,tabID,0);
						break;
					default:
				};	
	        };
		});
		refreshClaList();
	    refreshSortables();
	};
	
	function resetSimpleGui() {
		$('#queryText').val("");
		setLemmaForma("","forma");
		$('#opzioni_testo').val("parola");
		resetContext(0);
	};
	
	function setLemmaForma(qText,newSelection) {
			var newOptions = {['La forma' + qText]: 'forma', ['Il lemma' + qText]: 'lemma', ['Il testo' + qText]: 'testo'};
			$("#lemma_forma").empty();
			$.each(newOptions, function(key,value) {
				$("#lemma_forma").append($("<option></option>").attr("value", value).text(key));
				});
			$("#lemma_forma").val(newSelection);
	};
	
	function resetContext(claIdNum) {
		$('#selectable-xX' + claIdNum + " .ui-selectee").each(function() {
			$(this).attr('style', "line-height: 1.2em");
		});
		$('#selectable-xX' + claIdNum + " .ui-selected").removeClass( "ui-selected" )
		$('#selectable-xX' + claIdNum + ' .sel-canti-intro').each(function() {
			$(this).text("Seleziona i canti:")
		});;
		$("#contextText-xX" + claIdNum).html("Tutta l'opera.");
		window["context" + claIdNum] = JSON.parse(JSON.stringify(contextEmpty));
		$('#selectable-xX' + claIdNum + " .show").removeClass("show");
	};

	function resetAdvGui() {
		var tabsContent=$("#cla-TabContent").find(".tab-pane:not(:first)");
		if ($(tabsContent).length) {
			var claIdNum = '';
    		$(tabsContent).each(function(){
				claIdNum = $(this)[0].id.substring(3);
				delete window["context" + claIdNum];
				$(this).remove();
			});
		};
		claListLen = 0;
		condListLen = 0;
		tabID = 0;
		$('#sortable0').html(emptyClaList);		
	};

	function parseContext(claIdNum) {
		var context = window["context" + claIdNum];
		var contextStringParts = ["","",""];
		var contextString = [];
		var rangeHolderS = 0;
		var rangeHolderE = -1;
		var lastElem = "";
		var totCan = 0;
		for (var i=0; i < 3; i++) {
			for (var j=0; j <= context[i].length; j++) {
				if (context[i][j] == 1) {
					if (j == (rangeHolderE+1)) {
						rangeHolderE++;
					} else {
						rangeHolderS = j;
						rangeHolderE = j;
					};
					totCan++;
				} else {
					if (rangeHolderE >= 0) {
						if ( rangeHolderS == rangeHolderE) {
							lastElem = (rangeHolderE+1);
						} else {
							lastElem = (rangeHolderS+1) + "-" + (rangeHolderE+1);
						};
						rangeHolderE = -1;
					};
				};
				if (lastElem != "") {
					if (contextStringParts[i] == "") {
						contextStringParts[i] = " " + canticheList[i] + " [" + lastElem;
					} else {
						contextStringParts[i] = contextStringParts[i] + "," + lastElem;
					};
					lastElem = "";
				};
			};
			rangeHolderS = 0;
			rangeHolderE = -1;
			if (contextStringParts[i] != "") {
				contextStringParts[i] = contextStringParts[i] + "]"
				contextString.push(contextStringParts[i]);
			}
		};
		if ((contextString.toString() != "") && (totCan < 100)) {
			$("#contextText-xX" + claIdNum).html(contextString.toString()+".");
		} else {
			resetContext(claIdNum)
		}
	};
	
	function managePage() {
		if (currPage == 0){
			numeroPagine = Math.ceil(numeroContesti/nRisultatiPerPag);
			$("#paginaLista option").remove();
			for (let i = 1; i <= numeroPagine; i++) {
				$('#paginaLista').append(`<option value="${i}">${i+'/'+numeroPagine}</option>`);
			};
			$("#pagPrecedente").addClass("disabled");
			if (numeroPagine > 1) {
				$("#pagSuccessiva").removeClass("disabled")
			} else {
				$("#pagSuccessiva").addClass("disabled")
			};
			currPage = 1;
		} else {
			if ((currPage == 1) && (currPage == numeroPagine)) {
				$("#pagPrecedente").addClass("disabled")
				$("#pagSuccessiva").addClass("disabled")		
			} else {
				if (currPage == 1) {
					$("#pagPrecedente").addClass("disabled")
					$("#pagSuccessiva").removeClass("disabled")
				} else {
					if (currPage == numeroPagine) {
						$("#pagPrecedente").removeClass("disabled")
						$("#pagSuccessiva").addClass("disabled")		
					} else {
						$("#pagPrecedente").removeClass("disabled")
						$("#pagSuccessiva").removeClass("disabled")								
					}				
				}
			};
		};
		$.manageResultList((currPage-1)*nRisultatiPerPag, nRisultatiPerPag);
		if (latestPhraseId != "") {
			document.getElementById(latestPhraseId).scrollIntoView({
					behavior: "smooth",
				});
			latestPhraseId = "";
		}
	};
	
	function incSize(currentSize, incr, min, max) {
		fSize = Math.max((parseFloat(currentSize) + incr) % max, min);
		return (fSize) + 'px';
	};

	function setStyle(newStyle, fadeDuration = 700) {
		if (newStyle != currStyle) {
			var bgImgEl = document.createElement("IMG");
			bgImgEl.id = "bgImg";
			currStyle = newStyle;
			switch (newStyle) {
				case "style1":
					$("body").fadeOut(fadeDuration, function() {
						bgImgEl.src = bgImgUrl1;
						$("#style1-Boot").prop('disabled', false);
						$("#style1-Custom").prop('disabled', false);
						$("#style2-Boot").prop('disabled', true);
						$("#style2-Custom").prop('disabled', true);
						$("body").fadeIn(fadeDuration);
						});
					break;
				case "style2":
					$("body").fadeOut(fadeDuration, function() {
						bgImgEl.src = bgImgUrl2;
						$("#style2-Boot").prop('disabled', false);
						$("#style2-Custom").prop('disabled', false);
						$("#style1-Boot").prop('disabled', true);
						$("#style1-Custom").prop('disabled', true);
						$("body").fadeIn(fadeDuration);
						});
					break;
				default:
			};
		$('#bgImg').replaceWith(bgImgEl);
		drawMinimap(currentMinimap, false, 0);
		Cookies.set('LiDa_style', newStyle);		};
	};

	
});

$(window).on('load', function() {
	var cantoHeightToSet = $("body")[0].clientHeight*cssCantoHeight;
	var maxCantoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight-110; // 63 padding top + 47 margine bottom
	$(visCantoClass).css("max-height", maxCantoHeightToSet);	
	$(visCantoClass).css("height", cantoHeightToSet);	
	$(displayCantoId).css("max-height", maxCantoHeightToSet);	
	$(displayCantoId).css("height", cantoHeightToSet);
	var bgImgEl = document.createElement("IMG");
	bgImgEl.id = "bgImg";
	switch (currStyle) {
		case "style1":
			bgImgEl.src = bgImgUrl1;
			break;
		case "style2":
			bgImgEl.src = bgImgUrl2;
			break;
		default:
	};
	$('#bgImg').replaceWith(bgImgEl);
});