/* 
 * Dropdown plugin
 * Create custom dropdowns that behave like native dropdowns
 *
 * @author Zach Waugh <zwaugh@gmail.com>
 * @version 1.3.1
 * @requires ui.core.js
 *
 * Copyright (c) 2009 Zach Waugh MIT License
 * 
 * Callback events: change
 *
 * Updated: 8/7/09
 */

(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 = (options.width) ? options.width : this.element.outerWidth(true) + 12;
		
		// Don't try to figure out width if in css mode
		if (options.css)
		{
			var html = '<div class="ui-dropdown ui-widget">';
			html += '<a href="#" class="ui-dropdown-selected"><span>' + selected.html() + '</span></a>';
			html += '<ul class="ui-dropdown-options" style="display: none;">';
		}
		else
		{
			var html = '<div class="ui-dropdown ui-widget" style="width: ' + width + 'px;">';
			html += '<a href="#" class="ui-dropdown-selected"><span>' + selected.html() + '</span></a>';
			html += '<ul class="ui-dropdown-options" style="display: none; width: ' + width + 'px;">';
		}

		this._data = [];
		this._name = this.element.attr('name');
		
		var stripe = false;
		this.element.find('option').each(function(i)
		{
			html += (stripe) ? '<li class="alt">' : '<li>';
			var href = (options.links) ? $(this).attr('value') : '#' + $(this).attr('value');
			
			if ($(this)[0] == selected[0])
			{
				html += '<a href="' + href + '" class="ui-state-active">' + $(this).html() + '</a></li>';
			}
			else
			{
				html += '<a href="' + href + '">' + $(this).html() + '</a></li>';
			}
			
			self._data[i] = $(this).attr('value');
			stripe = !stripe;
		});

		html += '</ul></div>';
		
		if (options.clear)
		{
			html += '<br class="clear" />';
		}
		
		this.element.hide();
		this._select = this.element;
		this.element = $(html).insertAfter(this.element);
		
		// Bind Events
		this.element.children('a').click(function(event){ return self._toggleDropdown(event); });
		
		if (!options.links)
		{
			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('.ui-dropdown-options').slideUp(this.options.speed, function() {
				self.element.toggleClass('ui-dropdown-visible');
			});	
		}
		else
		{
			this.element.find('.ui-dropdown-options').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('.ui-dropdown-options').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('span').html($(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).html(), value: this._data[index], name: this._name});
		
		return false;
	}
	
});

$.extend($.ui.dropdown, {
	version: "1.7.1",
	defaults: {
		zebra: false, // zebra stripe the dropdown
		links: false, // dropdown is links - don't bind click event
		clear: false, // insert <br class="clear" /> after element
		css: false, // dropdown is controlled with css - don't try to figure out widths
		speed: 300, // speed of animation
		animateHide: false // whether or not to animate showing/hiding dropdown
	}
});

})(jQuery);