/**********************************************************
 * jQuery Dropdown Replacement with search
 *
 * @author Josh Levine
 * @link http://josh.levine.ws
 *
 **********************************************************/

jQuery.fn.dds = function()
{
	
	this.each(function()
		{
			// Replace select with DDS components
			$(this).after(
				'<div class="dds-wrapper">' +
					'<div class="selected-item">'+$(this).find(':selected').text()+'</div>' +
					'<div class="dds-popup">' +
						'<input type="text" class="dds-search" value="" />' +
						'<div class="dds-list">' +
							'<ul>' +
							'</ul>' +
						'</div>' +
					'</div>' +
				'</div>'
			);
			
			var selectBox = $(this);
			var ddsBase = $('.dds-wrapper'); 
			var selectedItem = $(ddsBase).children('.selected-item');
			var popup = $(ddsBase).children('.dds-popup');
			var list = popup.children('.dds-list').children('ul');
			var search = popup.children('.dds-search');
			
			// Add all the options to our list, then remove the <select> object
			
			var maxWidth = 0;

			$(this).children('option').each(
				function()
				{
					list.append(
						'<li id="'+selectBox.attr('name')+'_'+$(this).val()+'" class="text">'+$(this).text()+'</li>'
					);
					
					var lastWidth = list.children('.text:last').width();
					
					if (lastWidth > maxWidth) maxWidth = lastWidth;
				}
			);
			
			list.width(list.width()+60);
			
			ddsBase.width(list.width() - 10);
			
			ddsBase.mouseover(
				function()
				{
					$(this).addClass('mouseover');
				}
			);
			
			ddsBase.mouseout(
				function()
				{
					$(this).removeClass('mouseover');
				}
			)
			
			selectedItem.click(
				function()
				{
					if (popup.filter(':visible').length > 0)
					{
						popup.fadeOut(350);
					}
					else
					{
						
						// Position the popup
						var pos = selectedItem.position();
						var hOffset = selectedItem.outerHeight();
						
						popup.css('top', (pos.top+hOffset) + 'px');
						popup.css('left', pos.left + 10 + 'px');
						
						popup.show();
					}
				}
			);

			
			search.keyup(
				function(event)
				{
					var index = 0;
					selectBox.children().each(
						function()
						{
							var option = $(this);
							var listItem = list.children(':eq('+index+')');
							
							var match = new RegExp(search.val(), 'i');
							
							if (match.test(option.text()))
							{
								var toReplace = match.exec(option.text());
								listItem.html(
									option.text().replace(toReplace, '<span class="search-hightlight">'+toReplace+'</span>')
								)
								.show();
							}
							else
							{
								listItem.html(option.text()).hide();
							}
							
							index++;
						}
					);
				}
			).keypress(
				function(event)
				{
					if (event.keyCode == 13) return ( false );
				}
			);
			
			list.children().each(
				function()
				{
					$(this)
					.mouseover(
						function()
						{
							$(this).siblings().removeClass('hover');
							$(this).addClass('hover');
						}
					)					
					.click(
						function()
						{
							var id = $(this).attr('id');
							var idParts = id.split('_');
							var newVal = idParts[idParts.length-1];
							selectBox.val(newVal);
							selectedItem.html(selectBox.children(':selected').text());
							popup.fadeOut(350);
							//alert('t- ' + $(this).html());
						}
					);
				}
			);

		
			// Hide the popup window when the document is clicked
			$(window).click(
				function()
				{
					if (ddsBase.filter('.mouseover').length == 0)
						popup.fadeOut(350);
				}
			);	
				
			
			// Position the popup
			var pos = selectedItem.position();
			var hOffset = selectedItem.outerHeight();
			
			popup.css('top', (pos.top+hOffset) + 'px');
			popup.css('left', pos.left + 10 + 'px');
			
			
			
			// Add drop shadow divs
			
			popup.append(
				'<div class="dds-shadow-bottom-left"></div>' +
				'<div class="dds-shadow-bottom">&nbsp;</div>' +
				'<div class="dds-shadow-bottom-right"></div>' +
				'<div class="dds-shadow-right-top"></div>' +
				'<div class="dds-shadow-right">&nbsp;</div>'
			);
			
			var shadowBottomLeft = popup.children('.dds-shadow-bottom-left');
			var shadowBottom = shadowBottomLeft.next('.dds-shadow-bottom');
			var shadowBottomRight = shadowBottom.next('.dds-shadow-bottom-right');
			var shadowRightTop = shadowBottomRight.next('.dds-shadow-right-top');
			var shadowRight = shadowRightTop.next('.dds-shadow-right');
			
			popup.width(selectedItem.width() - 20);
			
			search.width(popup.width() - (search.position().left * 2) - 6);
			
			// Positioning & Sizing
			var popupPos = popup.position();
			
			var totalBottomWidth = popup.width() + shadowBottomRight.width();
			
			shadowBottom.width(totalBottomWidth - shadowBottomLeft.width() - shadowBottomRight.width());
			shadowRight.height(popup.height() - shadowRightTop.height());
			
			
			shadowBottomLeft.css('top', popup.height() + 'px').css('left', '0px');
			shadowBottom.css('top', popup.height() + 'px').css('left', shadowBottomLeft.width() + 'px');
			shadowBottomRight.css('top', popup.height() + 'px').css('left', shadowBottom.width() + shadowBottomLeft.width() + 'px');
			
			shadowRightTop.css('top', '0px').css('left', popup.width() + 'px');
			shadowRight.css('top', shadowRightTop.height() + 'px').css('left', popup.width() + 'px');
			
			popup.hide();
			
			selectBox.hide();
		}	
	);
};

jQuery(
	function()
	{
		jQuery(window).keyup(
			function(event)
			{

				// Check first for an active popup list
				var activeDDS = $('.dds-popup:visible');
				
				if (activeDDS.length > 0)
				{
					//alert('.length > 0 [' + activeDDS.length + ']');
				
					var list = activeDDS.children('ul');
				
					// Up arrow
					if (event.keyCode == 38)
					{
						if (list.children('.hover').length == 0)
						{
							list.children(':visible').filter(':first').addClass('hover');
						}
						else
						{
							var nextHover = list.children('.hover').prevAll(':visible').filter(':first');
							list.children('.hover').removeClass('hover');
							nextHover.addClass('hover');
						}
					}
					// Down Arrow
					else if (event.keyCode == 40)
					{
						if (list.children('.hover').length == 0)
						{
							list.children(':visible').filter(':first').addClass('hover');
						}
						else
						{
							var nextHover = list.children('.hover').nextAll(':visible').filter(':first');
							list.children('.hover').removeClass('hover');
							nextHover.addClass('hover');
						}					
					}
					// Enter
					else if (event.keyCode == 13)
					{
						list.children('.hover').click();
					}
				}
				else
				{
					//alert('.length == 0');
				}
			
			}		
		);
	}
);