//global variables that can be used by all the functions on this page.
var selects;
var selectText = "Selecteer ...";
var ival = 0;
//this function runs when the page is loaded so put all your other onload stuff in here too.
function init() {
	
	replaceSelects();

}

function replaceSelects() {
	//get all the select fields on the page
    selects = document.getElementsByTagName('select');

	//cycle trough the select fields
    for(var i=0; i < selects.length; i++) {
		if(selects[i].id == 'mySelect1'){
			selects[i].selectedIndex = 0;
			//create and build div structure
			var selectArea = document.createElement('div');
			var left = document.createElement('div');
			var right = document.createElement('div');
			var center = document.createElement('div');
			var button = document.createElement('a');
			var text = document.createTextNode(selectText);
			center.id = "mySelectText"+i;
			//button.href="javascript:showOptions("+i+")";
			button.id=i;
			button.onmouseover = function(){showOptions(this.id)};
			button.onfocus = function(){this.blur()};
			selectArea.className = "selectArea";
			left.className = "left";
			right.className = "right";
			center.className = "center1";
			right.appendChild(button);
			center.appendChild(text);
			selectArea.id="selectDiv"+i;
			selectArea.appendChild(left);
			selectArea.appendChild(right);
			selectArea.appendChild(center);
			
			//hide the select field
			selects[i].style.display='none'; 
			
			//insert select div
			selects[i].parentNode.insertBefore(selectArea, selects[i]);
			
			//build & place options div
			var optionsDiv = document.createElement('div');
			optionsDiv.className = "optionsDivInvisible";
			optionsDiv.id = "optionsDiv"+i;
			optionsDiv.style.left = findPosX(selectArea) + 'px';
			optionsDiv.style.top = findPosY(selectArea) + 19 + 'px';
			
			//get select's options and add to options div
			for(var j=0; j < selects[i].options.length; j++) {
				var optionHolder = document.createElement('p');
				var optionLink = document.createElement('a');
				var optionTxt = document.createTextNode(selects[i].options[j].text);
				if(selects[i].options[j].selected == true){
					document.getElementById("mySelectText"+i).innerHTML = selects[i].options[j].text
				}
				optionLink.href = "javascript:showOptions("+i+"); selectMe('"+selects[i].id+"',"+j+","+i+");";
				optionLink.appendChild(optionTxt);
				optionHolder.appendChild(optionLink);
				optionsDiv.appendChild(optionHolder);
			}
			//insert options div
			
			document.getElementsByTagName("body")[0].appendChild(optionsDiv);
		}
	}
}

function showOptions(g) {
		clearInterval(ival);
		//alert(g)
		elem = document.getElementById("optionsDiv"+g);
		if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";ival = setInterval('checkBounds('+g+')',500);}
		else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
}

function selectMe(selectFieldId,linkNo,selectNo) {
	//feed selected option to the actual select field
	selectField = document.getElementById(selectFieldId);
	for(var k = 0; k < selectField.options.length; k++) {
		if(k==linkNo) {
			link = selectField.options[k].value
			selectField.options[k].selected = "selected";
		}
		else {
			selectField.options[k].selected = "";
		}
	}
	//show selected option
	/*
	textVar = document.getElementById("mySelectText"+selectNo);
	var newText = document.createTextNode(selectField.options[linkNo].value);
	textVar.replaceChild(newText, textVar.childNodes[0]);
	//alert(selectField);
	*/
	clearInterval(ival);
	location.replace(link);
	//MM_jumpMenu('parent',selectField,0)
}

function checkBounds(what) {
	var posx = 0;
	var posy = 0;
	var e = window;
	var Oelem = document.getElementById("optionsDiv"+what);
	var Selem = document.getElementById("selectDiv"+what);
	
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	if (IE) { // grab the x-y pos.s if browser is IE
		var left = findPosX(Selem);
		var right = left + Selem.offsetWidth;
		var top = findPosY(Selem);
		var bottom = top + Oelem.offsetHeight + Selem.offsetHeight;
	} else {  // grab the x-y pos.s if browser is NS
		var left = Selem.offsetLeft;
		var right = left + Selem.offsetWidth;
		var top = Selem.offsetTop;
		var bottom = top + Oelem.offsetHeight + Selem.offsetHeight;
	}  
  
	if(tempX > left && tempX < right && tempY > top && tempY < bottom){
		
	}else{
		clearInterval(ival);
		showOptions(what);
	}
}

function findPosY(obj) {
	var posTop = 0;
	while (obj.offsetParent) {
		posTop += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return posTop;
}
function findPosX(obj) {
	var posLeft = 0;
	while (obj.offsetParent) {
		posLeft += obj.offsetLeft;
		obj = obj.offsetParent;
	}
	return posLeft;
}


// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  

  return true
}

window.onload = init;