var styleforms = {
	opendropdown: null,

	init: function() {
		var selects = document.getElementsByTagName('select');
		if (selects.length > 0) {
			for (var i = 0; i < selects.length; i++) {
				this.styleselect(selects[i]);
			}
			addEvent(document, 'click', function() { styleforms.closeDropDowns(); });
		}
		
	},
	
	styleselect: function(select) {
		//plaats originele form element buiten zicht
		select.style.position = 'absolute';
		select.style.left = '-2000px';
	
		var parent = select.parentNode;
		//neem afmeting over van origineel
		var width = select.offsetWidth;
		//var height = select.offsetHeight;
		var height = 15; //override
		//zet id zelfde als naam indien deze niet bestaat
		
		//if (!select.id) select.id = select.name;
		
		//maak element
		var newselect = document.createElement('div');
		newselect.className = 'styleselect';
		
		//newselect.id = 'style-'+select.name;
		
		//maak afmeting zo goed als die van origineel
		newselect.style.width = width+'px';
		newselect.style.lineHeight = height+'px';
		//neem eventuele margins over van origineel
		newselect.style.marginTop = getStyle(select, 'marginTop');
		newselect.style.marginRight = getStyle(select, 'marginRight');
		newselect.style.marginBottom = getStyle(select, 'marginBottom');
		newselect.style.marginLeft = getStyle(select, 'marginLeft');
		
		newselect.onclick = function(e) {
			//cancel bubble event
			if (!e) var e = window.event;
			e.cancelBubble = true;
			if (e.stopPropagation) e.stopPropagation();
			//open eigen dropdown
			var lastnode = this.childNodes[this.childNodes.length-1];
			if (lastnode != styleforms.opendropdown) styleforms.closeDropDowns();
			if ((lastnode.style.display == 'none') || (lastnode.style.display == '')) {
				lastnode.style.display = 'block';
				//voeg toe aan open dropdown
				styleforms.opendropdown = lastnode;
			}
			else {
				lastnode.style.display = 'none';
				//verwijder uit open dropdown
				if (styleforms.opendropdown == lastnode) styleforms.opendropdown = null;
			}
		};
		var html = '<div class="selectvalue" style="width:'+(width-12)+'px;">'+select.options[select.selectedIndex].text+'</div>';
		html += '<div class="options" style="min-width: '+width+'px;">';
		for (var i = 0; i < select.options.length; i++) {
			html += '<a ';
			
			html += 'href="" onclick="';
			html += 'styleforms.updateRealSelect(this, \''+select.form.id+'\', \''+select.name+'\', '+i+');';
			
			
			change = select.getAttributeNode('onChange');
			if (change) {
				html += change.value+';';
			}
			
			
			html += 'return false;" class="option">'+select.options[i].text+'</a>';
		}
		html += '</div>';
		
		newselect.innerHTML = html;
		
		parent.insertBefore(newselect, select);
		
		
	},
	
	closeDropDowns: function() {
		if (this.opendropdown) {
			this.opendropdown.style.display = 'none';
			this.opendropdown = null;
		}
	},
	
	updateRealSelect: function(option, formid, selectname, index) {
		var f = document.getElementById(formid);
		var s = f[selectname];
		
		s.selectedIndex = index;
		option.parentNode.previousSibling.innerHTML = s.options[index].text;
		//return false;
	},
	
	updateLabelColor: function(r) {
		var labels = r.parentNode.getElementsByTagName('label');
		for (var i = 0; i < labels.length; i++) {
			labels[i].className = '';
		}
		if (r.checked) {
			r.nextSibling.className = 'checked';
		}
	}
};


var xhraanbod = {
	aanbodchange: function(formid) {
		var f = document.getElementById(formid);
		var aanbodselect = f.aanbod;
		var locatieselect = f.locatie;
		//var naamselect = f.naam;
		var doelgroepselect = f.doelgroep
		
		if (aanbodselect && locatieselect && doelgroepselect) {
			var aanbodoption = aanbodselect.options[aanbodselect.selectedIndex].value;
			var locatieoption = locatieselect.options[locatieselect.selectedIndex].value;
			//var naamoption = naamselect.options[naamselect.selectedIndex].value;
			var doelgroepoption = doelgroepselect.options[doelgroepselect.selectedIndex].value;
			
			var url = 'xhr-aanbod.php?&form='+encodeURIComponent(formid)+'&aanbod='+encodeURIComponent(aanbodoption);
			url += '&locatie='+encodeURIComponent(locatieoption);
			//url += '&naam='+encodeURIComponent(naamoption);
			url += '&doelgroep='+encodeURIComponent(doelgroepoption);
		
			getURL(url);
		}
	},

	hideOptions: function(formid, sname) {
		var f = document.getElementById(formid);
		var select = f[sname];
		//de styleselects staan voor de echte selects
		var sstyle = select.previousSibling;
		//de laatste div bevat de options
		var options = sstyle.childNodes[sstyle.childNodes.length-1];
		//eerste optie blijft altijd staan
		if (options.childNodes.length > 1) {
			for (var i = 1; i < options.childNodes.length; i++) {
				options.childNodes[i].style.display = 'none';
			}
		}
	},
	showOptions: function(formid, sname) {
		var f = document.getElementById(formid);
		var select = f[sname];
		//de styleselects staan voor de echte selects
		var sstyle = select.previousSibling;
		//de laatste div bevat de options
		var options = sstyle.childNodes[sstyle.childNodes.length-1];
		for (var i = 0; i < options.childNodes.length; i++) {
			options.childNodes[i].style.display = 'block';
		}
	},
	showOption: function(formid, sname, svalue) {
		var f = document.getElementById(formid);
		var select = f[sname];
		//de styleselects staan voor de echte selects
		var sstyle = select.previousSibling;
		//de laatste div bevat de options
		var options = sstyle.childNodes[sstyle.childNodes.length-1];
		for (var i = 0; i < options.childNodes.length; i++) {
			if (options.childNodes[i].innerHTML == svalue) {
				options.childNodes[i].style.display = 'block';
			}
		}
	}
};

addEvent(window, 'load', function() { styleforms.init(); } );