/****************
Nicer Dropdowns 1.0, Done by Martin Be with many help from Sebastian Es
Idea stolen from: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
****************/

function adddropdownevents(box) {
	var wrapper = document.getElementById(box);
	var selects = wrapper.getElementsByTagName('SELECT');
	for (i=0; i < selects.length; i++) {
		if (selects[i].className == "ddlstyled") {
			if (selects[i].CascadingDropDownBehavior) //add_populated() gets called after the dropdown ist filled
				selects[i].CascadingDropDownBehavior.add_populated(function(sender,args){updateafterpopulated(sender)});
		}
	}
	fillspans(wrapper);
}

function updateafterpopulated(sender) {
	var wrapper = sender._element.parentNode.parentNode;
	fillspans(wrapper);
}

function fillspans(wrapper) {	
	var divs = wrapper.getElementsByTagName('DIV');
	for (i=0; i < divs.length; i++) {
		if (divs[i].className.indexOf('ddlstyled') != -1) {
			var span = divs[i].getElementsByTagName('SPAN');
			var select = divs[i].getElementsByTagName('SELECT');
			
			if (select[0].disabled == true)
				divs[i].style.display="none";
			else
				divs[i].style.display="";
				
			span[0].innerHTML = select[0].options[select[0].selectedIndex].innerHTML;
		}
	}
}

/*
ASP.NET:
~~~~~~~~~~~~~~~~~~~~~~~~
<div id="box"> <!--'box' ist die ID, die adddropdownevents übergeben wird-->
	<div class="first ddlstyled">
		<span class="ddlstyled">Bitte wählen...</span>
		<asp:DropDownList ID="X1" runat="server" CssClass="ddlstyled"></asp:DropDownList>
	</div>
	<div class="ddlstyled" style="display:none">
		<span class="ddlstyled">Bitte wählen...</span>
		<asp:DropDownList ID="X2" runat="server" CssClass="ddlstyled" ></asp:DropDownList>
	</div>
</div>

CSS:
~~~~~~~~~~~~~~~~~~~~~~
#box div.ddlstyled {
	position:relative;
	height:25px;}

#box div.ddlstyled.first {display:block!important;}
//prevents the first DIV from being hidden
	
#box span.ddlstyled {
	position:absolute;
	width:145px;
	height:20px;
	overflow:hidden;
	top:0px;
	left:0px;
	line-height:20px;
	padding:0px 18px 0px 3px;
	text-align:left;
	background:url(point_down.png) right center no-repeat;}

#box select.ddlstyled {
	display:block;
	width:100%;
	height:20px;
	border:0px none;
	position:relative;
	z-index:10;
	opacity:0;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;}
*/