var z = 9;

checkExternalClick = function(event)
{
	if ($(event.target).parents('.activedropdown').length === 0)
	{
		$('.activedropdown').removeClass('activedropdown');
		$('.options').fadeOut();
	}
};

$(document).ready(function()
{
	$(document).mousedown(checkExternalClick);

	$('select').each(function() 
	{
		if(!$(this).hasClass('noEnhance')){
			if(!$(this).parent().hasClass('enhanced'))
			{
				targetselect = $(this);
				targetselect.hide();

				// set our target as the parent and mark as such
				var target = targetselect.parent();
				target.addClass('enhanced');

				// prep the target for our new markup
				target.append('<dl class="dropdown"><dt><a class="dropdown_toggle" href="#"></a></dt><dd><div class="options"><ul></ul></div></dd></dl>');
				target.find('.dropdown').css('zIndex',z);
				z--;

				// we don't want to see it yet
				target.find('.options').hide();

				// parse all options within the select and set indices
				var i = 0;
				targetselect.find('option').each(function() 
				{
					// add the option
					target.find('.options ul').append('<li><a href="#"><span class="value">' + $(this).text() + '</span><span class="hidden index">' + i + '</span></a></li>');

					// check to see if this is what the default should be
					if($(this).attr('selected') == true)
					{
						targetselect.parent().find('a.dropdown_toggle').append('<span></span>').find('span').text($(this).text());
					}
					i++;
				});
			}
		}
	});


	// let's hook our links, ya?
	$('a.dropdown_toggle').live('click', function() 
	{
		var theseOptions = $(this).parent().parent().find('.options');
		if(theseOptions.css('display')=='block')
		{
			$('.activedropdown').removeClass('activedropdown');
			theseOptions.fadeOut();
		}
		else
		{
			theseOptions.parent().parent().addClass('activedropdown');
			theseOptions.slideDown();
		}
		return false;
	});

	// bind to clicking a new option value
	$('.options a').live('click', function(e)
	{
		$('.options').fadeOut();

		var enhanced = $(this).parent().parent().parent().parent().parent().parent();
		var realselect = enhanced.find('select');

		// set the proper index
		realselect[0].selectedIndex = $(this).find('span.index').text();

		// update the pseudo selected element
		enhanced.find('.dropdown_toggle').empty().append('<span></span>').find('span').text($(this).find('span.value').text());
		
		if($(realselect).attr("onchange") != "")
		{
			$(realselect).trigger('onchange');
		}

		return false;
	});
});