Matchapp = function () {
	new MatchLayer('functieniveau');
	new MatchLayer('sector');
	new MatchLayer('uren');
	this.form = document.getElementById('matchappFrm');
	this.but = document.getElementById('matchappSubmit');
	if(this.but) {
		this.but.onclick = this.form.submit;
	}
	// group of radio buttons + text fields
	var urenPerWeek = new RadioText('uren');
}
MatchLayer = function (name) {
	this.name = name;
	this.layer = document.getElementById(name);
	this.overlay = document.getElementById('overlay');
	this.openbut = document.getElementById(name + '_but');
	if(this.openbut) {
		this.openbut.onclick = createContextFunction(this, "open");
	}
	this.closebut = document.getElementById(name + '_OK');
	if(this.closebut) {
		if (this.name == "uren") 
			this.closebut.onclick = createContextFunction(this, "selectUren");
		else
			this.closebut.onclick = createContextFunction(this, "select");
	}
	this.selection = document.getElementById(name + '_selection');
	this.inputs = this.layer.getElementsByTagName('input');
	for (var i = 0; i < this.inputs.length; i++) {
		if (this.inputs[i].type == 'radio' || this.inputs[i].type == 'checkbox') {
			this.inputs[i].onclick = this.clear;
			this.inputs[i].matchLayer = this;
		}
	}
}
MatchLayer.prototype.open = function () {
	this.layer.style.display = 'block';
	this.overlay.style.display = 'block';
}
MatchLayer.prototype.close = function () {
	this.layer.style.display = 'none';
	this.overlay.style.display = 'none';
}
MatchLayer.prototype.clear = function () {
	if (this.id && this.id == this.matchLayer.name + '_geenvoorkeur') {
		for (var i = 0; i < this.matchLayer.inputs.length; i++) {
			this.matchLayer.inputs[i].checked = false;
		}
		this.checked = true;
	}
	else {
		document.getElementById(this.matchLayer.name + '_geenvoorkeur').checked = false;
	}
	return true;
}
MatchLayer.prototype.select = function () {
	var selection = "";
	for (var i = 0; i < this.inputs.length; i++) {
		if (this.inputs[i].checked) 
      //selection.length > 0 ? selection += ", " + this.inputs[i].value : selection += this.inputs[i].value;
			selection.length > 0 ? selection += ", " + this.inputs[i].id : selection += this.inputs[i].id;
	}
	//this.selection.innerHTML = selection;

if (selection == 'sector_geenvoorkeur')
  {
    this.selection.innerHTML = "geen voorkeur";
  }
else if (selection == 'functieniveau_geenvoorkeur')
  {
    this.selection.innerHTML = "geen voorkeur";
  }
else 
  {
  this.selection.innerHTML = selection;
  }

	this.close();
	if (selection.length > 0) 
		this.selection.style.visibility = "visible"
	else
		this.selection.style.visibility = "hidden"
}
MatchLayer.prototype.selectUren = function () {
	var selection = "";
	for (var i = 0; i < this.inputs.length; i++) {
		if (this.inputs[i].checked) 
      // Spider value niet bruikbaar daarom id uitlezen
			//selection = this.inputs[i].value;
      selection = this.inputs[i].id;
	}
	if (selection == "Parttime") {
		var urenmin = document.getElementById('urenmin').value;
		var urenmax = document.getElementById('urenmax').value;
		selection = "min. " + urenmin + " uur, max. " + urenmax + " uur";
	}
	this.selection.innerHTML = selection;
	this.close();
	if (selection.length > 0) 
		this.selection.style.visibility = "visible"
	else
		this.selection.style.visibility = "hidden"
}
MatchLayer.prototype.createContextFunction = function (method) {
	var context = this;
	return (function(){
		eval("context."+method+"()");
		return false;
    });
}
RadioText = function (name) {
	// create array of radios
	this.radios = new Array;
	var els = document.getElementById(name).getElementsByTagName('input');
	for(i = 0; i < els.length; i++) {
		if(els[i].type != 'radio') continue;
		this.radios[this.radios.length] = els[i];
		els[i].context = this;
		els[i].onclick = function() {
			//alert(props(this));
			this.context.toggleText(this);
		}
	}
	// disable all text fields except of the radio that's checked
	for(var i=0; i<this.radios.length; i++) {
		if(this.radios[i].checked) this.toggleText(this.radios[i]);
	}
}
RadioText.prototype.toggleText = function(source) {
	for(var i = 0; i < this.radios.length; i++) {
		var radio = this.radios[i];
		// check for surrounding element (class 'grouped')
		if(!radio.parentNode.className.match("grouped")) continue;
		// get all inputs within
		var elements = radio.parentNode.getElementsByTagName('input');
		var fields = new Array;
		for(var j = 0; j < elements.length; j++) {
			// check if the input is a text field
			if(elements[j].type!='text' && elements[j].type!='password') continue;
			fields[fields.length] = elements[j];
			if(radio == source) {
				// enable field if part of current radio
				elements[j].disabled = false;
			} else {
				// disable and empty if not
				elements[j].disabled = true;
				elements[j].value = "";
			}
		}
		// if any fields exist for current radio, give focus to first
		if(radio == source && fields.length > 0) {
			fields[0].focus();
			fields[0].select();
		}
	}
}

function props(el){
	var r;
	for(var i in el) r=r+i+"\n";
	return r;
}


function submitform(target, url){


 //this check triggers the validations
    //document.matchappFrm.submit();
    if(target == 1) {
      document.matchappFrm.submit();
    }
    if(target == 2) {
      var spiderlink = (url + '/jobboard/JobCriteriaDisplayAction.do?activeApplicationId=JOBBOARDING&currentMenuId=ANONYMOUS.JOBBOARDING"');
      document.matchappFrm.action=spiderlink;
      document.matchappFrm.submit();
 }
}