var customElements = new Array();
var zIndex = 200;

$(document).ready(function(){
	applyCustomForms();
});

function selectOption(idSelect, optionIndex) {
	$("#headerLabel_"+idSelect).html($("#dropDownOption_"+idSelect+"_"+optionIndex).html());
	$("#"+idSelect).replaceWith("<input type='hidden' name='"+idSelect+"' id='"+idSelect+"' value='"+$("#dropDownOption_"+idSelect+"_"+optionIndex).html()+"' />");
	toggleDropDown("dropDown_" + idSelect);
	//var theOption = $("#"+idObject);
}

/**
*
*/
function customSelect(attributes) {
	this.attString = attributes;
	this.addedOptions = new Array();
	this.selectValues = new Array();
	var bulletDelimiter; if (bulletDelimiter == null) bulletDelimiter = false;
	var selectValuesStrings = attributes.split(".");
	
	for (k = 0; k <= selectValuesStrings.length - 1; k++) {
		var value = selectValuesStrings[k].split(":");
		//console.log(value[0] + " " + value[1]);
		this.selectValues[value[0]] = value[1];
	}
	
	this.setLabel=function(newLabel) {
		this.selectValues["label"] = newLabel;
	}
	
	this.getId=function() {
		return this.selectValues["id"];
	}
	
	this.addOption=function(id, label, value, icon, background) {
		theOption = new customSelectOption(id, label, value, icon, background);
		//options[options.length] = theOption;
		//alert(theOption);
		this.addedOptions.push(theOption);
	}
				
	this.draw=function() {
		var thisObject = $("#"+this.attString.replace(/:/g,"\\:").replace(/\./g,"\\."));
		//alert(this.attString);
		//alert(thisObject);
		var newHtml = new String();
		
		newHtml += "<div id='wselect_" + this.selectValues["id"] + "' class='"+this.selectValues["cssClass"]+"' style='position:relative;z-index:"+ zIndex-- +"'>";
		
			newHtml += "<input type='hidden' name='"+this.selectValues["id"]+"' id='"+this.selectValues["id"]+"' value='' />";
		
			newHtml += "<div class='header' onclick='toggleDropDown(\"dropDown_"+this.selectValues["id"]+"\")' style='position:absolute;z-index:"+ zIndex-- +";width:100%'>";
				newHtml += "<div class='headerLabel' id='headerLabel_"+this.selectValues["id"]+"' style='position:relative'>";
					var theLabel = this.selectValues["label"];
					theLabel = theLabel.replace(/ae/g, "&auml;");
					theLabel = theLabel.replace(/oe/g, "&ouml;");
					theLabel = theLabel.replace(/ue/g, "&uuml;");
					theLabel = theLabel.replace(/Ae/g, "&Auml;");
					theLabel = theLabel.replace(/Oe/g, "&Ouml;");
					theLabel = theLabel.replace(/Ue/g, "&Uuml;");
					theLabel = theLabel.replace(/_/g," ");
					newHtml += theLabel;
				newHtml += "</div>";
				
				if (bulletDelimiter) var delimiter = "";
				
				newHtml += "<div class='headerBullet' style='position:relative'>";
					newHtml += "<img src='/arrow_down.png' style='margin-top:auto;margin-bottom:auto' />";
				newHtml += "</div>";
			newHtml += "</div>";
			
			newHtml += "<div class='dropDown' id='dropDown_" + this.selectValues["id"] + "' style='position:absolute;z-index:"+ zIndex-- +";width:100%'>";
				//alert(this.addedOptions.length);
				for(var i = 0; i <= this.addedOptions.length-1; i++) {
					var theOptionLabel = this.addedOptions[i].getLabel();
					theOptionLabel = theOptionLabel.replace(/ae/g, "&auml;");
					theOptionLabel = theOptionLabel.replace(/oe/g, "&ouml;");
					theOptionLabel = theOptionLabel.replace(/ue/g, "&uuml;");
					theOptionLabel = theOptionLabel.replace(/Ae/g, "&Auml;");
					theOptionLabel = theOptionLabel.replace(/Oe/g, "&Ouml;");
					theOptionLabel = theOptionLabel.replace(/Ue/g, "&Uuml;");
					theOptionLabel = theOptionLabel.replace(/_/g," ");
					newHtml += "<div class='link'>";
						newHtml += "<a id='dropDownOption_"+this.selectValues["id"]+"_"+i+"' onclick='javascript:selectOption(\""+this.selectValues["id"]+"\","+i+")' style='cursor:pointer'>"+theOptionLabel+"</a>";
					newHtml += "</div>";
				}
			newHtml += "</div>";
		
		newHtml += "</div><br/>";
		
		thisObject.replaceWith(newHtml);
		
		//alert(newHtml);
		//console.log(theSelect);
	}
}

/**
*
*/
function customSelectOption(id, label, value, icon, background) {
	var id;
	var label;
	var value;
	var icon;
	var background;
	
	this.getLabel=function() {
		return label;
	}
}

function toggleDropDown(id) {
	//$("#"+id).slideToggle("slow");
	$("#"+id).toggle(0);
}

function applyCustomForms() {
	applyCustomSelect();
}

function applyCustomSelect() {
	//console.log($("wselect"));
	
	var customSelects = $("select.wselect");
	//var customSelects = $("WSELECT");
	
	//console.log(customSelects);
	//alert(customSelects.length);
	
	var selectValues = new Array();
	for (i = 0; i <= customSelects.length - 1; i++) {
		theCustomSelect = new customSelect(customSelects[i].id);
		//console.log("ElementID: " + customSelects[i].id);
		//console.log("ElementLabel: " + customSelects[i].getAttribute("label"))
		//console.log(customSelects[i]);
		//console.log(customSelects[i].childNodes);
		var childNodes = customSelects[i].childNodes;
		//alert(childNodes);
		//alert(customSelects[i].childNodes.length);
		for (j = 0; j <= childNodes.length - 1; j++) {
			//alert(childNodes[j]);
			if (childNodes[j].className == "woption") {
				//alert("blub");
				theCustomSelect.addOption(childNodes[j].getAttribute("id"), childNodes[j].innerHTML, childNodes[j].innerHTML);
				//console.log("NodeID: " + childNodes[j].getAttribute("id"));
				//console.log("Inhalt: " + childNodes[j].innerHTML)
			} else if (childNodes[j].className == "wlabel") {
				theCustomSelect.setLabel(childNodes[j].innerHTML);
			}
		}
		var id = theCustomSelect.getId();
		//console.log(id);
		//customElements[id] = customSelects[i];
		theCustomSelect.draw();
	}
	
	//parseDom($("body:first-child"));
	/*while(htmlString = $("body").next()) {
		console.log(htmlString.cssClass());
	}*/
	
	/*startSelect = htmlString.indexOf("<select");
	var endSelect = htmlString.indexOf("select>")+7;
	var theSelect = htmlString.substring(startSelect, endSelect);
	
	console.log(htmlString);
	console.log(startSelect + " " + endSelect);
	console.log(theSelect);
	$("select.webaffairsCustom").html("blub");*/
}