/**
* jquery.dropdowns: For me, standard HTML Select element is pretty much annoying. It's ugly. It can't be styled properly in
*                   Internet Explorer. And it can't contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element.
* Author: Janko Jovanovic
* Contact: http://www.jankoatwarpspeed.com/contact.aspx
* URL: http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx
* Version: 1.0
**/

$(document).ready(function() {
	createDropDown();
	$(".dropdown dt a").click(function() {
		$(".dropdown dd ul").toggle();
	});
	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (! $clicked.parents().hasClass("dropdown"))
			$(".dropdown dd ul").hide();
	});
	$(".dropdown dd ul li a").click(function() {
		var text = $(this).html();
		$(".dropdown dt a").html(text);
		$(".dropdown dd ul").hide();
		var source = $("#source");
		source.val($(this).find("span.value").html())
	});
});

function createDropDown(){
	var source = $("#source");
	var selected = source.find("option[selected]");
	var options = $("option", source);
	$("#attribute_1").append('<dl id="target" class="dropdown"></dl>')
	$("#target").append('<dt><a href="#">' + selected.text() + 
		'<span class="value">' + selected.val() + 
		'</span></a></dt>')
	$("#target").append('<dd><ul></ul></dd>')
	options.each(function(){
		$("#target dd ul").append('<li><a href="#">' + 
			$(this).text() + '<span class="value">' + 
			$(this).val() + '</span></a></li>');
	});
}