<script src="!PATH!/SP__jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="!PATH!/SP__Card_Sorting.css"/>

<div id="anzeige"></div>

<script>
	window.onload = function(){
		var randomize = $('#random').text();									//liest aus, ob die Cartitems randomisiert werden sollen (wert=1 -> rabdomisieren)
		var min = $('#Min').text();												//liest aus, ob in jeden Kasten eine mindestanzahl von Carditems gehören
		var max = $('#Max').text();												//liest aus, ob die Anzahl der Carditems in einem Kasten auf ein Maximum begrenzt ist
		var ranking = $('#ranking').text();										//liest aus, ob die Carditems im Kasten in einer Rangfolgeangeordnet werden sollen
		var breite = $('#itembreite').text();									//liest aus, ob die Breite für die Carditems angegeben wurde
		var hoehe = $('#itemhoehe').text();										//liest aus, ob die Hoehe fuer die Carditems angegeben wurde
		var mehr = $('#mehrmals').text();										//liest aus, ob Carditems oefters vorhanden sind
		var alle = $('#alle').text();											//liest aus, ob alle Carditems einem Kasten zugeordnet werden soll
		var copycounter = new Array;											//Array für die copycounter der Carditems
		let txtfeld = document.querySelectorAll('[id^="qts0r"]');				// alle Textfelder auslesen
		
		
		function shuffle(itemarray){
			var currentIndex = itemarray.length, temporaryValue, randomIndex;

			// Randomisiere solange bis alle Elmente durch sind
			while (0 !== currentIndex) {

				// Waehle ein Element, das noch nicht randomisiert ist
				randomIndex = Math.floor(Math.random() * currentIndex);
				currentIndex -= 1;

				// Vertausche das gewaehlte Element mit dem, an der aktuellen position
				temporaryValue = itemarray[currentIndex];
				itemarray[currentIndex] = itemarray[randomIndex];
				itemarray[randomIndex] = temporaryValue;
			}

			return itemarray;
		}
		
	
		function baue_anzeige_items(itemstemp) {
			
			let items = new Array();
			
			
			for (i = 0; i < itemstemp.length; i++){
				if (!itemstemp[i].innerText.startsWith("ZC:")){
					let it = itemstemp[i].innerHTML;
					items.push(it);
				}
			}
			
			
			// für jedes Item ein Listenelement erstellen
			let itemelemente = "";
			for (i = 0; i < items.length; i++){
				
				
				
				itemelemente+= '<li class=\"item \" id="item'+i+'">'+items[i]+'</li>';
				
				
			}
			
			return itemelemente;
		}
		
		function baue_anzeige_kasten(kattemp) {
			
			let kategorien = new Array();
			
			for (i = 0; i < kattemp.length; i++){
				if (kattemp[i].innerText.startsWith("ZC:")){
				let kt = kattemp[i].innerHTML;
					kt = kt.replace("ZC:", "");
				kategorien.push(kt);
				}
			}
			
						
			// für jede Kategorie eine Liste erstellen
			let katelemente = "";
			let counter =0;
			for (i = 0; i < kategorien.length; i++){
				counter ++;
				
				if(ranking == 1){
					katelemente+= '<div class=\"headero\"><div class ="headname">'+kategorien[i]+'</div><ol id=\"kategorie_'+counter+'\"></ol></div>';
				}
				
				else {
				katelemente+= '<div class=\"header\"><div class ="headname" >'+kategorien[i]+'</div><ul id=\"kategorie_'+counter+'\"></ul></div>';
				}
				
				
			}
			
			return katelemente;
			
		}
		
		//Funktion, die die Hintergrundfarbe aus dem RogEditor uebernimmt
		function farbe_ein(itemstemp){
			let kcolors = new Array()
			
			
			for (i = 0; i < itemstemp.length; i++){
				
				var velement = document.getElementById('qtd0r'+i);
				
				var vcolor = velement.getAttribute('bgcolor');
				//Wenn es Karten sind Farbe uebernehmen
				if (!itemstemp[i].innerText.startsWith("ZC:")){		
					document.getElementById('item' +i).style.backgroundColor = vcolor;				
				}
				//sonst, Farbwert in Array fuer die Kaesten ablegen
				else{
					
					kcolors.push(vcolor);
				}
				
			}
	
			//Kaesten faerben
			for (j = 0; j < kcolors.length; j++){
						//console.log($('.headname:nth-child('+j+')'));
						//console.log('kcolor'+[j]+': '+ kcolors[j]);
						document.getElementsByClassName('headname')[j].style.backgroundColor = kcolors[j];
						
			}
			
		}
		
			
		//HTML-Struktur für die Anzeige des Cardsorting erstellen
		var tables = '<div class="wrapper">';
			tables += '	<table border="0" cellspacing="0" cellpadding="0">';
			tables += '		<tr>';
			tables += '			<td align="center">';
			tables += '				<!--BEREICH FUER KARTEN-->';
			tables += '				<div id = "antworten">';
			tables += '  				<ul class="ul" id="itemliste"></ul>';
			tables += ' 			</div>';
			tables += ' 		</td>';
			tables += ' 	</tr>';
			tables += '		<tr>';
			tables += '			<td align="center">';
			tables += ' 			<!--BEREICH FUER KÄSTEN-->';
			tables += '				<div align="center" id = "kaesten">';
			tables += '				</div>';
			tables += '			</td>';
			tables += '		</tr>';
    		tables += '	</table>';
    		tables += '</div>';
	
		document.getElementById('anzeige').innerHTML = tables;										// HTML-Struktur dem DOM hinzufuegen
		document.getElementById('itemliste').innerHTML = baue_anzeige_items(txtfeld);				// Itemliste bauen und dem DOM hinzufuegen
		document.getElementById('kaesten').innerHTML = baue_anzeige_kasten(txtfeld);				// Kaesten bauen und dem DOM hinzufuegen
		farbe_ein(txtfeld);
		
		
		//Wenn Hoehe und Breite der Items vorgegeben werden diese Setzen
		if (breite != "" && breite != 0){
			breite = parseInt(breite);
			
			$('.item').css("width", breite);
			$('[id*="kategorie"]').css("width", (breite+10));
			$('[class*="header"]').css("width", (breite+10));
			//Zum Anpassen der des placeholders muss direkt das Stylesheet veraendert werden, da dieser nur dann im DOM existiert wenn er benoetigt wird
			document.styleSheets[6].insertRule('.highlight { min-width: ' + breite + 'px !important; }', 0);
			
		}
				
		if (hoehe != "" && hoehe != 0){
			hoehe = parseInt(hoehe);
			
			$('.item').css("height", hoehe);
			$('[id*="kategorie"]').css("min-height", (hoehe+80));
			$('[class*="header"]').css("min-height", (hoehe+85));
			//Zum Anpassen der des placeholders muss direkt das Stylesheet veraendert werden, da dieser nur dann im DOM existiert wenn er benoetigt wird
			document.styleSheets[6].insertRule('.highlight { height: ' + hoehe + 'px !important; }', 0);
			
		}
		
		//den Platz fuer die Kartenliste setzen
		let hiteml = document.getElementById('itemliste').offsetHeight;								//liest aus, welchen Platz die Liste mit den Carditems einnimmt
		document.getElementById('itemliste').style.minHeight = hiteml+'px';
		
		//Wenn Carditem oefter als einmal auswaehlbar das copycounter-Array befuellen
		if (mehr > 0){
		for (i = 0; i < txtfeld.length; i++){
				if (!txtfeld[i].innerText.startsWith("ZC:")){
					copycounter[i] = mehr;
				}
			}
		}
		
		
		//Pruefen of Maxima und Minmum eingehalten werden
		document.getElementById('next_btn').onclick = function() {
			//console.log('next wurde geklickt');
			var ubermax = false;
			var untermin = false;
			
			//console.log('anfang ubermax:'+ ubermax);
			//console.log('anfang untermin:'+ untermin);
			
			
			if (max > 0 || min > 0 || alle == 1 ){
				//console.log('-----------------------------------------');
				//console.log('max:'+max+',min:'+min+',alle:'+alle);
				var klisten = document.querySelectorAll('[id^="kategorie"]');
				//console.log(klisten);
				var cardliste = $('#itemliste').children();
				
				
				
				if(alle == 1 && cardliste.length > 0){
					//console.log('nicht alle ausgeteilt');
					fenster('<center><b>Ausf&uuml;llhinweis:</b><br/> Es sind '+cardliste.length+' Karten &uuml;brig. Bitte ordnen Sie alle Karten einem Kasten zu.</center>');
					
				}
				
				else if (max > 0 || min > 0 ){

					for (li = 0; li < klisten.length; li++ ){

					
						var lielem = $('[id="kategorie'+(li+1)+'"]').children();

						
						if (max > 0 && lielem.length > max){
						
							ubermax = true;

						}
										
						else if (min > 0 && lielem.length < min ){
							untermin = true;
							//console.log ('untermin:'+ untermin);
						}
					
					}
					
				    if (ubermax == true && untermin == true ){
						fenster('<center><b>Ausf&uuml;llhinweis:</b><br/>Einer oder mehrere K&auml;sten wurden mit mehr als den maximalen '+max+' Elementen bzw. mit weniger als der minimalen Anzahl an Elementen von '+min+' belegt.Bitte pr&uuml;fen Sie die eingegebenen Werte.</center>');
					}
				
					else if (ubermax == true){
						fenster('<center><b>Ausf&uuml;llhinweis:</b><br/>Einer oder mehrere K&auml;sten wurden mit mehr als den maximalen '+max+' Elementen belegt. Bitte pr&uuml;fen Sie die eingegebenen Werte.</center>');
					}
				
					else if (untermin == true){
					fenster('<center><b>Ausf&uuml;llhinweis:</b><br/>Einer oder mehrere K&auml;sten wurden mit weniger als den minimalen '+min+' Elementen belegt. Bitte pr&uuml;fen Sie die eingegebenen Werte.</center>');
					}
					
					else {
					next();
					}
				
				}
				
				else {
					next();
					
				}
			}
			
				
			
			else {
				next()
				
			}	
		}
		
	
		//sortable-Methoden, die esrmoeglicht Items von der Itemliste in die Kategoriekaesten zu schieben
		$(function() {
			
			
			$('#itemliste, ul[id*="kategorie"], ol[id*="kategorie"] ').sortable({
				placeholder: 'highlight',									//erzeugt einen Platzhalter für das verschobene Item
								
				start: function (event, ui) {
					//console.log(ui.item);
					//console.log (ui.placeholder.width);
					 
										
				},
				
								
				//Funktion, die bei Ende des Drag die Farbe des Elements aendert
				stop: function (event, ui) {
					 
					
					//console.log(ui.item);
										
					//Ermitteln des Kastens mit der groeßten Hoehe und Anpssen der Hoehe der anderen Kaesten
					var kaesten = document.querySelectorAll('[class^="header"]');		//alle Kaestenelemente auswaehlen
					var listen = document.querySelectorAll('[id^="kategorie"]');		//alle Listenelemente in den Kaesten auswählen 
					//console.log(kaesten);
					var hoehek = new Array();											//Arrays für die ausgelesenen Höhen von Kaesten und Listen
					var hoehel = new Array();
					
					//Hoehen auslesen und in Arrays verschieben
					for (k = 0; k < kaesten.length; k++){
						//console.log('listen drin');
						var temphoehek = kaesten[k].clientHeight;
						var temphoehel = listen[k].clientHeight;
						temphoehek = parseInt(temphoehek);
						temphoehel = parseInt(temphoehel);
						hoehek.push(temphoehek);
						hoehel.push(temphoehel);
						
					}
					
					// die Werte des groeßten Kastens ermitteln
					var maxhoehek = Math.max.apply(Math, hoehek);
					//console.log('maxhoehek: '+maxhoehek);
					var maxhoehel = Math.max.apply(Math, hoehel);
					//console.log('maxhoehel: '+maxhoehel);
					
					//Andere Kästen an den Größten anpassen
					for (k = 0; k < kaesten.length; k++){
						//console.log('listen drin');
						kaesten[k].style.minHeight = maxhoehek+"px";
						listen[k].style.minHeight = maxhoehel+"px";
					}
					
				}
			});
			
			
			$('#itemliste, ul[id*="kategorie"], ol[id*="kategorie"]').sortable({
				connectWith: '#itemliste, ul[id*="kategorie"], ol[id*="kategorie"]',				//ermoeglicht das Ziehen eines Elements von einer Liste zur Anderen
				dropOnEmpty: true,																	//ermoeglicht es in eine leere Liste zu ziehen
				
			});
			
			
			
			
			$('ul[id*="kategorie"], ol[id*="kategorie"]').sortable({
								
				// Funktion die aufgerufen wird, wenn sich in den Listen etwas aendert
				update: function(event, ui) {
					
					var katfld = document.querySelectorAll('[id^="qts0r"]');				// alle Textfelder auslesen

					var headertxt =($(this).prev().text()); 								//liest den Text des Headers der Liste aus in die das Item(die Card) verschoben wird

					var kasteid = $(this).attr('id'); 									//Id des Kastens auslesen
					
					var kartetxt = new Array();											//Array fuer die Kartentexte
					var	kastenin =$(this).children();									//Inhalt des aktuellen Kastens
						
					for (i=0; i<kastenin.length; i++){
						kartetxt.push(kastenin[i].innerText);							//Texte des aktuellen Kastens in Array 
					}
					
					
					
						for (i = 0; i < katfld.length; i++){
						
							
							for (j = 0; j < kartetxt.length; j++){
								if(kartetxt[j] == katfld[i].innerText){ 							//Wenn der Text der Karte uebereinstimmt
									var kartid = katfld[i].id;
									var counterkat = kartid.slice(5);
									//console.log ('kart id: '+kartid);
									$('[name="t0_'+counterkat+'"').val(kasteid.split("_")[1]+'#'+(j+1));				//schreibt die Id des Kastens und die Position in das richtige Textfeld
								}
							}
						}
												
					
					
					
					if (ranking == 1){
						$(this).sortable().children().attr('class','itemo');   		//beim ranking Items Ordered Lists-Styling zuweisen

					}
					
					else {
						$(this).sortable().children().attr('class','itemu');		//sonst ranking Items Unordered Lists_Styling zuweisen
					}
					
											
				}				
								
			});
			
			$('#itemliste').sortable({
				update: function(event, ui) {
					$(ui.item).removeClass('itemo');
					$(ui.item).removeClass('itemu');
					$(ui.item).addClass('item ui-sortable-handle');
					
				},
				
				start: function( event, ui ) {
					// Wenn Carditem mehrfach vorhanden 
					if (mehr > 0){
						//console.log ('item mehtrfach vorhanden');
						//console.log (txtfeld);
						var x = $(ui.item).attr('id').replace("item", "");					//position des Card auslesen
						
						//So lange das copycounter-Array an der Stelle x nicht 0 ist
						while (copycounter[x] > 0){
							copycounter[x] -= 1;
							var kopie = $(ui.item).clone();									//kopie vom ausgewaehlten Carditem erstellen

							
							// Kopie an der richtigen Stelle einfügen 
							if (kopie.attr('id') == "item0"){
								$(this).prepend(kopie);
								kopie.css({'position': 'relative', 'z-index': ''}); 		//Z-Index wird entfernt da es sonst zu Probleme mit dem Layout kommt 
								
							}
							
							
							if ($(this).sortable().children().length == 2){
								$(this).append(kopie);
								kopie.css({'position': 'relative', 'z-index': ''}); 		//Z-Index wird entfernt da es sonst zu Probleme mit dem Layout kommt 
								
							}
							
							else{
								var pos = kopie.attr('id').replace("item", "");
								pos2 = parseInt(pos,10);
								$(kopie).insertAfter('#itemliste :nth-child('+pos2+')')
								kopie.css({'position': 'relative', 'z-index': ''});			//Z-Index wird entfernt da es sonst zu Probleme mit dem Layout kommt 
								
							}
							
							
							
						}
			
						
					}
					
				}
			});
			
			
		});
		
		
	
	}
</script>