var selects;
var selectText = "Bitte wählen Sie";

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].className != 'donotusejs') {
			//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);
			if (selects[i].id) {
				var text = document.createTextNode(selects[i].id);
			}else{
				selects[i].id = i;
				var text = document.createTextNode(selectText);
			}
			if (selects[i].style.width) {
				selectArea.style.width = selects[i].style.width;
			}
			center.id = "mySelectText"+i;
			button.href="javascript:showOptions("+i+")";
			selectArea.className = "selectArea";
			left.className = "left";
			right.className = "right";
			center.className = "center";
			right.appendChild(button);
			center.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');
			if (selects[i].style.width) {
				x = selects[i].style.width
				//x.length = x.length - 2;
				x = x.substr(0, x.length-2)
				x = x - 35;
				optionsDiv.style.width = x+"px";
				center.style.width = x+"px";
			}
			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 (document.priceform) {
					optionLink.href = "javascript:showOptions("+i+"); selectMe('"+selects[i].id+"',"+j+","+i+"); changePrice();";
				}else{
					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);
			
			//check if preselected
			for(var j=0; j < selects[i].options.length; j++) {
				if (selects[i].options[j].selected) {
					selectMe(selects[i].id,j,i);
				}
				//alert(selects[i].options[j].text);
			}
		}
	}
}

function showOptions(g) {
	for each (var ss in document.forms[0].elements) {
		
		if(ss.type=='select-one' && ss.name=='sort' && g==0) {
			document.getElementById("optionsDiv1").className="optionsDivInvisible";
			document.getElementById("optionsDiv2").className="optionsDivInvisible";
		} else if(ss.type=='select-one' && ss.name=='sort' && g==1) {
			document.getElementById("optionsDiv0").className="optionsDivInvisible";
			document.getElementById("optionsDiv2").className="optionsDivInvisible";
		} else if(ss.type=='select-one' && ss.name=='sort' && g==2) {
			document.getElementById("optionsDiv0").className="optionsDivInvisible";
			document.getElementById("optionsDiv1").className="optionsDivInvisible";
		}
	}
	elem = document.getElementById("optionsDiv"+g);	
	if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";}
	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) {
			selectField.options[k].selected = "selected";
			if (document.priceform) {					
				printPrize(selectField.options[k].value);				
			}
		}
		else {
			selectField.options[k].selected = "";
		}
	}
	//show selected option
	textVar = document.getElementById("mySelectText"+selectNo);
	var newText = document.createTextNode(selectField.options[linkNo].text);
	textVar.replaceChild(newText, textVar.childNodes[0]);
}
function printPrize(selSize){	
	price = document.getElementsByName("size"+selSize)[0].value;	
	document.getElementsByName("price")[0].value = price;
}
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;
}

window.onload = init;