/* 
 * Dropdown plugin
 * Create custom dropdowns that behave like native dropdowns
 *
 * @author Zach Waugh <zwaugh@gmail.com>
 * @version 1.1
 * @requires ui.core.js
 *
 * Copyright (c) 2009 Zach Waugh MIT License
 */

(function($) {

$.widget("ui.dropdown", {

	_init: function() {
		var self = this, options = this.options;
		
		var select_options = this.element.find('option');
		var selected = this.element.find('option[selected]');
		var width = this.element.innerWidth() + 12;
		
		var html = '<dl class="ui-dropdown ui-widget" style="width: ' + width + 'px;">';
		html += '<dt><a href="#' + selected.attr('value') + '"><span>' + selected.html() + '</span></a></dt>';
		html += '<dd style="display:none">';
		html += '<ul class="ui-dropdown-options">';
		
		this.element.find('option').each(function(){
			if ($(this)[0] == selected[0])
			{
				html += '<li><a href="#' + $(this).attr('value') + '" class="ui-state-active">' + $(this).html() + '</a></li>';
			}
			else
			{
				html += '<li><a href="#' + $(this).attr('value') + '">' + $(this).html() + '</a></li>';
			}
		});
		
		html += '</ul></dd></dl><br class="clear" />';
		
		this.element.hide();
		this._select = this.element;
		this.element = $(html).insertAfter(this.element);
		
		// Bind Events
		this.element.find('dt a').click(function(event){ return self._toggleDropdown(event); });
		this.element.find('.ui-dropdown-options a').click(function(event) { return self._didChooseDropdownOption(event); });
	},
	
	_hideDropdown: function(event)
	{
		// Hide menu and toggle visibility
		this.element.find('dd').slideUp(this.options.speed);
		this.element.toggleClass('ui-dropdown-visible');
	},
	
	_showDropdown: function(event)
	{
		var self = this;
		$(document).one('click.dropdown', function(event){ self._hideDropdown(event); return false; });
		this.element.find('dd').stop().slideDown(this.options.speed);
		this.element.addClass('ui-dropdown-visible');
	},
	
	_toggleDropdown: function(event)
	{
		event.preventDefault();
		
		var self = this;
		
		if (this.element.hasClass('ui-dropdown-visible'))
		{
			$(document).unbind('click.dropdown');
			this._hideDropdown(event);
		}
		else
		{
			this._showDropdown(event);
		}

		return false;
	},
	
	_didChooseDropdownOption: function(event)
	{
		// Indicate selected option in list
		this.element.find('.ui-dropdown-options a.ui-state-active').removeClass('ui-state-active');
		$(event.target).addClass('ui-state-active');
		
		// Swap text with current selection
		this.element.find('dt a span').text($(event.target).text());
		
		$(document).unbind('click.dropdown');
		this._hideDropdown();
		
		// Change hidden select element so value is submitted
		var index = this.element.find('.ui-dropdown-options a').index(event.target);
		this._select.find('option').eq(index).attr('selected', 'selected');
		
		// Fire callback
		this._trigger('change', event, {option: event.target});
		
		return false;
	}
	
});

$.extend($.ui.dropdown, {
	version: "1.7.1",
	defaults: {
		speed: 300
	}
});

})(jQuery);