var z = 12;

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

$(document).ready(function() {
	$(document).mousedown(checkExternalClick);
	$('select').each(function() 
	{
		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.children('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>').children('span').text($(this).text());
				}
				i++;
			});

			/* Inject callback when parent form gets reset (have to bind to the
			 *	form because there are forms that do not use input[type=select].
			 */
			(function(select){
				select.parents('form').first().bind('reset', function(  ) {
					select.children('option:eq(0)').attr('selected', 'selected');
					select.parents('.enhanced').first()
						.find('.dropdown_toggle')
							.empty()
							.append(
								$(document.createElement('span'))
									.addClass('selectedItem')
									.text(select.children('option:selected').text())
							 );
				});
			})(targetselect);
		}
	});

	// 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.hide();
		}
		else
		{
			theseOptions.parent().parent().addClass('activedropdown');
			theseOptions.show();
		}
		return false;
	});

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

		var enhanced = $(this).parents('.enhanced').first();
		var realselect = enhanced.children('select').first();

		if( realselect.length > 0 ) {
			// set the proper index
			realselect.children('option:eq(' + $(this).find('span.index').text() + ')').attr('selected', 'selected');

			// update the pseudo selected element
			enhanced.find('.dropdown_toggle')
				.empty()
				.append(
					$(document.createElement('span'))
						.addClass('selectedItem')
						.text($(this).find('span.value').text())
				 );

			realselect.trigger('change');
			return false;
		} else {
			/* Not intended to be an enhanced select. */
			return true;
		}
	});
});