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

(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.find('.ui-dropdown-selected').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');
			}
		},
		
		_globalHideDropdown: function(event)
		{
			if (!$(event.target).is('a'))
			{
				this._hideDropdown();
				return false;
			}
		},
	
		_showDropdown: function(event)
		{
			var self = this;
			$(document).one('click.dropdown', function(event){ self._globalHideDropdown(event); });
			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: {
			init: true,
			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);