var reviewwidget = document.getElementsByClassName('tl-kandidaten-widget-lijst')[0];	// eerste script blok opzoeken

var reviewwidgetcustom = document.getElementsByClassName('tl-kandidaten-widget-lijst-custom')[0];	// eerste script blok opzoeken


var kandidaatwidget = document.getElementsByClassName('tl-kandidaten-widget-kandidaat-custom')[0];
if(kandidaatwidget){

	console.log("Kandidaatwidget: bestaat.");

	var $id = '';
	if(window.location.hash) {
    	var $id = window.location.hash.substring(1);	
	}

	if($id == ''){
		console.log("Kandidaatwidget: ERROR: geen id bekend. Widget kandidaat wordt niet gegenereerd.");
	}else{
    
    	var $url = 'https://www.mensrel.nl/widget/data/json/kandidaat.php?id='+$id;
    
        var xhr = new XMLHttpRequest();
        xhr.open('GET', $url, true);
        xhr.responseType = 'json';
        xhr.onload = function() {
          var status = xhr.status;
          if (status === 200) {
            
            data = xhr.response;
    
    		kandidaatwidget.getElementsByClassName('naam')[0].innerHTML = data.naam;
    		kandidaatwidget.getElementsByClassName('leeftijd')[0].innerHTML = data.leeftijd;
    		kandidaatwidget.getElementsByClassName('regio')[0].innerHTML = data.regio;
    		kandidaatwidget.getElementsByClassName('advertentieTekst')[0].innerHTML = data.advertentieTekst;
    		kandidaatwidget.getElementsByClassName('formulier')[0].innerHTML = data.formulier;
    
    
    		if(kandidaatwidget.dataset.bedankpagina){
    			
    			kandidaatwidget.getElementsByClassName('formulier')[0].getElementsByClassName('bedankpagina')[0].value = kandidaatwidget.dataset.bedankpagina;
    			
    		}else{
    			alert('bedanktpagina:'+kandidaatwidget.dataset.bedankpagina);		
    		}
    
    		var script = document.createElement('script');
            script.onload = function () {
                //alert('formulier.js geladen');
            };
            script.src = 'https://www.mensrel.nl/widget/js/reageer/formulier.js';
            
            document.head.appendChild(script);
    
          } else {
            //callback(status, xhr.response);
          }
        };
        xhr.send();
	}
}


//reviewwidget.dataset.pagina
//reviewwidget.dataset.aantal
//reviewwidget.dataset.mincijfer


function kandidaatPreview($id){

	console.log("aanroep functie kandidaatPreview voor id "+$id);
	
	verwijderKandidaatInfo();
	
	var elemDiv = document.createElement('div');
	
	elemDiv.classList.add('kandidaatInfo');
	
	//elemDiv.style.cssText = 'width:90%;height:90%;overflow:scroll;background:rgb(192,192,192);position:fixed;top:50%;left:50%;transform: translate(-50%, -50%);';
    elemDiv.innerHTML = '<div onClick="verwijderKandidaatInfo()" class="kandidaatInfoHeader">Sluiten</div><div class="kandidaatInfoBody">Info over kandidaat '+$id+'</div>'; 
    
	document.body.appendChild(elemDiv);

	var widgetHtmlCode = httpGet("https://www.mensrel.nl/widget/kandidaatPreview.php?id="+$id,'kandidaatInfoBody');

}


function kandidatenReactieFormulierVerwerk(form){
	alert("form kandidatenReactieFormulierVerwerk()");

  //function sendData() {
    const XHR = new XMLHttpRequest();

    // Bind the FormData object and the form element
    const FD = new FormData( form );

    // Define what happens on successful data submission
    XHR.addEventListener( "load", function(event) {
    
      // formulier vervangen door response
      
      console.log("formulier goed kunnen verzenden.");
      
      form.parentElement.innerHTML = event.target.responseText;
      
      
    } );

    // Define what happens in case of error
    XHR.addEventListener( "error", function( event ) {
      alert( 'Oops! Something went wrong.' );
    } );

    // Set up our request
    XHR.open( "POST", "https://www.mensrel.nl/widget/html/form/" );

    // The data sent is what the user provided in the form
    XHR.send( FD );

}

function toonReactieFormulier(){
	console.log("aanroep toonReactieFormulier()");

	const elements = document.getElementsByClassName('kandidaatInfoDetails');
	
    elements[0].parentNode.removeChild(elements[0]);
    
    const elementsR = document.getElementsByClassName('reactieFormulier');
   
    	
    elementsR[0].style.display = "block";
 
}


function verwijderKandidaatInfo(){
	console.log("aanroep verwijderKandidaatInfo");

	const elements = document.getElementsByClassName('kandidaatInfo');
	
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

function zoek(){
	//alert('zoeen...');
	var e = document.getElementById("zoekenGeslacht");
	reviewwidget.dataset.geslacht = e.value;
	
	reviewwidget.dataset.pagina = 1;
	
	laadLijst();
}

function laadLijst(){
	console.log("laadLijst");

	var widgetHtmlCode = httpGet("https://www.mensrel.nl/widget/html/?soort="+reviewwidget.dataset.soort+"&pagina="+reviewwidget.dataset.pagina+"&geslacht="+reviewwidget.dataset.geslacht+"&formulierTonen="+reviewwidget.dataset.formulierTonen,'tl-kandidaten-widget-lijst');
}

function ready(callback){
    // in case the document is already rendered
    if (document.readyState!='loading') callback();
    // modern browsers
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
    // IE <= 8
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
    });
}

var getJSON = function(reviewwidgetcustomItem,callback) {

 

	var url = 'https://www.mensrel.nl/widget/data/json/'+objectNaarFiltersParams(reviewwidgetcustomItem);


    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status === 200) {
        callback(null, xhr.response);
      } else {
        callback(status, xhr.response);
      }
    };
    xhr.send();
};


var reviewwidgetcustom;


// $obj = html object
// vars geset in data- labels
// <div data-soort="a" data-geslacht="b"></div>
//
// - pagina: [nummer]
// - aantal: [nummer]
// - geslacht: ['vrouw','man']
// - formulierTonen: ['1','0']
//
function objectNaarFiltersParams($obj){
	return "?siteId="+$obj.dataset.siteid+"&aantal="+$obj.dataset.aantal+"&maxKaraktersOmschrijving="+$obj.dataset.maxkaraktersomschrijving+"&soort="+$obj.dataset.soort+"&pagina="+$obj.dataset.pagina+"&geslacht="+$obj.dataset.geslacht+"&formulierTonen="+$obj.dataset.formulierTonen;
}





var reviewwidgetcustoms = document.getElementsByClassName('tl-kandidaten-widget-lijst-custom');	// eerste script blok opzoeken

Array.prototype.forEach.call(reviewwidgetcustoms, function(reviewwidgetcustomItem) {
    // Do stuff here
    //console.log(el.tagName);
    
    console.log("Kandidaatwidgetlijst: vullen.");

    
    getJSON(reviewwidgetcustomItem,
    	function(err, data) {
    
    		//console.log(data);
    		//console.log(data[0].naam);
    
    		if (err !== null) {
        		alert('Something went wrong: ' + err);
      		} else { 
    
    			//var reviewwidgetcustom = document.getElementsByClassName('tl-kandidaten-widget-lijst-custom');
    
    				//console.log("aantal divs:"+reviewwidgetcustom.length);
    
    
    			
    
    
    			//for(var i=0; i< reviewwidgetcustom.length; i++) { 
     			
     			
     			$aantalTonen = reviewwidgetcustomItem.dataset.aantal;
    				
    			if($aantalTonen > data.length)
    				$aantalTonen = data.length;
     				
     				
     				//reviewwidget.dataset.pagina
     				
     				console.log("Kandidaatwidgetlijst: lijst-item aanmaken en vullen:"+reviewwidgetcustomItem.dataset.aantal);
     				
     				// opzoeken de lijst-item
     				
     				
     				const node = reviewwidgetcustomItem.getElementsByClassName('lijst-item')[0];
         				
     				
     				for(j=0;j<$aantalTonen;j++){
     				
         				console.log("Kandidaatwidgetlijst: tonen: "+(j+1));
         				
         				
         				//console.log(node);
         				
         				const clone = node.cloneNode(true);
         				
         				
         				//console.log(clone.getElementsByClassName('naam')[0]);
         				
         				
         				//console.log('aantal naam-velden in clone:'+clone.getElementsByClassName('naam').length);
         				//console.log('innetHtml naam-velden in clone:'+clone.getElementsByClassName('naam')[0].innerHTML);
         				
         				clone.getElementsByClassName('naam')[0].innerHTML = data[j].naam;
         				clone.getElementsByClassName('leeftijd')[0].innerHTML = data[j].leeftijd;
         				clone.getElementsByClassName('regio')[0].innerHTML = data[j].regio;
         				clone.getElementsByClassName('advertentieTekst')[0].innerHTML = data[j].advertentieTekst;
        
        
        				if(data[j].labelIpvLink != null){
        				
         					clone.getElementsByClassName('reactieLinkMR')[0].getElementsByClassName('link-verder-adv')[0].innerHTML = data[j].labelIpvLink;       
         					
         					var div = document.createElement("div");
							div.innerHTML = clone.getElementsByClassName('reactieLinkMR')[0].innerHTML;
							
							clone.getElementsByClassName('reactieLinkMR')[0].replaceWith(div);
        				
        				}else{
         					clone.getElementsByClassName('reactieLinkMR')[0].href = clone.getElementsByClassName('reactieLinkMR')[0].href+data[j].id;
        				}
         				
         				clone.getElementsByClassName('naam')[0].classList.remove('cloon');
         				
         				
         				
         				
         				//console.log(clone);
         				
         				
         				reviewwidgetcustomItem.appendChild(clone);
    				}
    				
    				console.log('Kandidaatwidgetlijst: einde van generering lijst');
    				
    				node.style.display='none';
     				
     				console.log('Kandidaatwidgetlijst: voorbeeld node.display op none geset');
    				
     				
    
      		}
    });    
    
});



//var jsonUrl = 'https://www.mens-en-relatie.nl/widget/data/json/'+objectNaarFiltersParams(reviewwidgetcustom);




ready(function(){
    //laadLijst();
    
    //console.log("Is er een custom?");
    
    
	if(reviewwidgetcustom){
		//console.log("Ja");
	}
    
});

function pagina($p){
	//$("#reisgraag-reviews").attr("data-pagina",$p);
	
	console.log("Wijzigen var p naar "+$p);
	
	reviewwidget.dataset.pagina=$p;
	
	laadLijst();
}



function httpGet(theUrl,$className){
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {        	
        	var reviewwidget = document.getElementsByClassName($className)[0];
        	reviewwidget.innerHTML = xmlhttp.responseText;

			            
        }
    }
    xmlhttp.open("GET", theUrl, true );
    xmlhttp.send();    
}