//global variables that can be used by all the functions on this page.
var selects;
var inputs;
var radios = new Array();
var checkboxes = new Array();
var hovers = new Array();
var buttons = new Array();
var selectText = "Bitte wählen";
var href_static = null;
//this function runs when the page is loaded so put all your other onload stuff in here too.

function init() {
	//check if styles are enabled and only then start replacing elements
	if(document.getElementById('cssTest')) {
		if(findPosX(document.getElementById('cssTest')) == -999) {
			buildHref();
			replaceSelects();
		}
	}
}

function buildHref() {
	if(href_static==null) {
		var f = document.forms[0];
		href_static = f.action + "?";
		var params = "";
		//append all hidden fields
		for(var i=0;i<f.elements.length;i++) {
			el = f.elements[i];
			if(el.type=="hidden") {
				if(params.length>0) params += "&";
				params += el.name;
				params += "=";
				params += el.value;
			}
		}
		href_static += params;
	}
}

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++){

		//alert(elmentsToCount);
		//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 centertext = document.createElement('div');
		var button = document.createElement('a');
		var optgroup = document.createElement('strong');
		var text = document.createTextNode(selectText);

		if(i==0) selectArea.onclick = function(){showOptions(0)};
		if(i==1) selectArea.onclick = function(){showOptions(1)};

		if (selects[i].options[0].text) text = document.createTextNode(selects[i].options[0].text);

		center.id = "mySelectText"+i;
		selectArea.className = "selectArea";
		left.className = "sleft";
		right.className = "sright";
		center.className = "scenter";
		centertext.className = "scentertext";
		right.appendChild(button);
		center.appendChild(centertext);
		centertext.appendChild(text);
		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) + 81 + 'px';

		//get select's options and add to options div
		var optlink=1;
		for(var j=1; j < selects[i].childNodes.length; j++) {

		//get a optiongroup
				if(selects[i].childNodes[j].tagName == "OPTGROUP") {
					var optionHolder = document.createElement('p');
					var optionGrouper = document.createElement('strong');
					var optionTxt = document.createTextNode(selects[i].childNodes[j].label);
					optionGrouper.appendChild(optionTxt);
					optionHolder.appendChild(optionGrouper);
					optionsDiv.appendChild(optionHolder);
		//get childs of optiongroup
					for(var x=0; x < selects[i].childNodes[j].childNodes.length; x++) {
						if(selects[i].childNodes[j].childNodes[x].text){
							if(selects[i].childNodes[j].childNodes[x].value && selects[i].childNodes[j].childNodes[x].value!=null && selects[i].childNodes[j].childNodes[x].value.length>0) {
								var optionHolder = document.createElement('p');
								var optionLink = document.createElement('a');
								var optionTxt = document.createTextNode(selects[i].childNodes[j].childNodes[x].text);
								//optionLink.href = selects[i].childNodes[j].childNodes[x].value;
								optionLink.href = href_static + "&option=" + selects[i].childNodes[j].childNodes[x].value;
								optionLink.appendChild(optionTxt);
								optionHolder.appendChild(optionLink);
								optionsDiv.appendChild(optionHolder);
								optlink++;
							}
						}
					}

		//get select's options
				} else {
					if(selects[i].childNodes[j].text){
						if(selects[i].childNodes[j].value && selects[i].childNodes[j].value!=null && selects[i].childNodes[j].value.length>0){
							var optionHolder = document.createElement('p');
							var optionLink = document.createElement('a');
							var optionTxt = document.createTextNode(selects[i].childNodes[j].text);
							if(selects[i].childNodes[j].value!=""){
								//optionLink.href = selects[i].childNodes[j].value;
								optionLink.href = href_static + "&option=" + selects[i].childNodes[j].value;
							}
							optionLink.appendChild(optionTxt);
							optionHolder.appendChild(optionLink);
							optionsDiv.appendChild(optionHolder);
						}
					}
				}
		}

		//insert options div
		document.getElementById("main").appendChild(optionsDiv);
		//document.getElementsByTagName("body")[0].appendChild(optionsDiv);
	}
}
function hideOptionsTimer(g) {
		//leider nötig:event scheint nicht zu triggern wenn div zu schnell hidden wird
		setTimeout("hideOptions("+g+")",200)
}
function hideOptions(g) {
		elem = document.getElementById("optionsDiv"+g);
		elem.className = "optionsDivInvisible";
}
function showOptions(g) {
		elem = document.getElementById("optionsDiv"+g);
		if(elem.className=="optionsDivInvisible") {
			elem.className = "optionsDivVisible";elem.focus();
			elem.style.outline ="none";
		}else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
		if(elem.addEventListener){
			elem.addEventListener("blur", function(){hideOptionsTimer(g)},false)
		}else{
			elem.attachEvent("onblur",function(){hideOptionsTimer(g)})
		}
}

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;
}