/* 
 * 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;
		
		if (this.element.hasClass('ui-widget'))
		{
			this._select = options.select;
		}
		else
		{
			var select_options = this.element.find('option');
			var selected = this.element.find('option[selected]');
			var width = (options.width) ? options.width : this.element.innerWidth() + 30;

			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>';

			this.element.hide();
			this._select = this.element;
			this.element = $(html).insertAfter(this.element);
			//$('<br class="clear" />').insertAfter(this.element);
		}

		
		// Bind Events
		this._select.change(function () { return self._change(); });
		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)
	{
		var self = this;
		
		// Hide menu and toggle visibility
		if (this.options.animateHide)
		{
			this.element.find('dd').slideUp(this.options.speed, function () {
				self.element.toggleClass('ui-dropdown-visible');
			});	
		}
		else
		{
			this.element.find('dd').hide();
			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;
	},
	
	/**
	 * Change event called when select is modified directly
	 */
	_change: function ()
	{
		// Update dropdown to reflect selected option
		this.element.find('dt a span').text(this._select.find('option[selected]').html());
		
		return false;
	}
});

$.extend($.ui.dropdown, {
	version: '1.7.2',
	defaults: {
		speed: 300,
		animateHide: false
	}
});

})(jQuery);