/*
	Form replacement
*/

formReplacement = function(formname) { 
	var self = this;
	this.zIndex = 1000;
	this.formName = formname;
	this.selectWidth = 15;
		
	/*
		Function: replaceSelect();
	*/
	this.replaceSelect = function(el) {
		el.style.display = 'none';
		var select = document.createElement('div');
			select.className = el.className + ' bg select-div';
			select.id = 's-'+el.id
			select.innerHTML = '<span id="st-'+el.id+'" onclick="replaceSelectShow(this);">'+el.options[el.selectedIndex].text+'</span><span id="ss-'+el.id+'" class="bg select-span" onclick="replaceSelectShow(this);"><!--//--></span>';	
		var ul = document.createElement('ul');
			ul.id = 'su-'+el.id;
			ul.className = 'select-ul';
			ul.style.zIndex = self.zIndex-10;
		for(l=0; l < el.length; l++) {
			var li = document.createElement('li');
				li.innerHTML = el.options[l].text;
				li.setAttribute('value',el.options[l].value);
				li.onclick = function(){ replaceSelectClick(this); };
			ul.appendChild(li);
		}
		select.appendChild(ul);
		el.parentNode.insertBefore(select, el);
		document.getElementById('st-'+el.id).style.width = (document.getElementById('su-'+el.id).offsetWidth-40)+'px';
		//ul.style.width = '235px';
		ul.style.width = (document.getElementById('su-'+el.id).offsetWidth+self.selectWidth-36)+'px';
		ul.style.display = 'none';
	}
	
	/*
		Function: replaceSelectShow();
	*/
	this.replaceSelectShow = function(el) {
		document.getElementById(el.id.replace('st-','su-').replace('ss-','su-')).style.display = 'block';
	}
	
	/*
		Function: replaceSelectClick();
	*/
	this.replaceSelectClick = function(el) {
		el.parentNode.style.display = 'none';
		var select = document.getElementById(el.parentNode.id.replace('su-',''));
		for(s=0; s < select.length; s++) {
			if(el.getAttribute('value') == select.options[s].value) {
				select.selectedIndex = s;
				document.getElementById(el.parentNode.id.replace('su-','st-')).innerHTML = select.options[s].text;
                //if(select.name == 'requested_price' || select.name == 'requested_provider') {
                    refreshSelects(select); 
                //}
				//vm
				break;
			}
		}
	}
	
	/*
		Function: onLoad
	*/
	this.onLoad = function() {
		if(document.getElementById(self.formName) != undefined) {
			for(i=0; i < document.getElementById(self.formName).elements.length; i++) {
				var el = document.getElementById(self.formName).elements[i];
				if(el.type=='select-one') replaceSelect(el);
			}
		}
	}
	    
	onLoad();

}
    var zIndexx = 900;
	function updateReplaceSelect(el) {
		el.style.display = 'none';
		var select = document.createElement('div');
			select.className = el.className + ' bg select-div';
			select.id = 's-'+el.id
			select.innerHTML = '<span id="st-'+el.id+'" onclick="replaceSelectShow(this);">'+el.options[el.selectedIndex].text+'</span><span id="ss-'+el.id+'" class="bg select-span" onclick="replaceSelectShow(this);"><!--//--></span>';	
		var ul = document.createElement('ul');
			ul.id = 'su-'+el.id;
			ul.className = 'select-ul';
			ul.style.zIndex = zIndexx-10;
		for(l=0; l < el.length; l++) {
			var li = document.createElement('li');
				li.innerHTML = el.options[l].text;
				li.setAttribute('value',el.options[l].value);
				li.onclick = function(){ replaceSelectClick(this); };
			ul.appendChild(li);
		}
		select.appendChild(ul);
		el.parentNode.insertBefore(select, el);
		document.getElementById('st-'+el.id).style.width = (document.getElementById('su-'+el.id).offsetWidth-40)+'px';
		//ul.style.width = '235px';
		ul.style.width = (document.getElementById('su-'+el.id).offsetWidth+self.selectWidth-36)+'px';
		ul.style.display = 'none';
	}

//Gaarne niet de onload overschrijven!
//window.onload = function() {
//	formReplacement('searchbox');
//	formReplacement('sortbox');
//}

//ADD TO THE WINDOW ONLOAD QUEUE
womAdd("formReplacement('searchbox')");
womAdd("formReplacement('sortbox')");