/// <reference path="jquery.js" />

/*
Final render example

<div class="skinned-select">
	<div class="select-text">BBBBB</div>
	<div id="controlWrapperctl00" class="controlWrapper">
		<select>
			<option value="3">AAAAAA</option>
			<option value="7" selected="selected">BBBBB</option>
			<option value="17">CCCCC</option>
		</select>
	</div>
</div>
*/

$(document).ready
(
	function()
	{
		$('.my-skinnable-select').each
		(			
		
			function(i)
			{
				selectContainer = $(this);		
				
				// Add click/change handler
				//selectContainer.bind("click change", handleClick);				
		        
				// Remove the class for non JS browsers
				selectContainer.removeClass('my-skinnable-select');
		        
				// Add the class for JS Browers
				selectContainer.addClass('skinned-select');
				
				// Create new jquery element for nice display of selected option
				selectTextDiv = $(document.createElement('div'));
				selectTextDiv.addClass('select-text');
				
				// Add the div displaying current chosen value and set its initial value 
				selectContainer.children().before(selectTextDiv).each
				(        
					function()
					{
						// this = selectContainer.children = select element
						if(this.options)
							if (this.options.length > 0)
								$(this).prev().text(this.options[this.selectedIndex].innerHTML);
						
					}
				);
				
				
				// Store the parent object
				var parentTextObj = selectContainer.children().prev();

				// As we click or make a change on the options
				selectContainer.children().bind("click change", function()
				{
					// Set the value of the html - make sure list has options first
					if (this.options != undefined && this.options.length > 0)
						parentTextObj.text(this.options[this.selectedIndex].innerHTML);
				});				
			}
		);
	}
);


function handleClick()
{

				if (this.options.length > 0)
					$(this).prev().text(this.options[this.selectedIndex].innerHTML);

				// Set the value of the html
				if(this.options)
					parentTextObj.text(this.options[this.selectedIndex].innerHTML);

        

}