// Author: Alex Littlejohn

(function($){
 	$.fn.extend({ 
 		dropdown: function() {
					
			return this.each(function() 
			{
				
				if( !$(this).is("select") ) {
					// this will only work with select elements sofar
					return
				}
				
				var sourceElement = $(this);
				var selectedElement = sourceElement.find("option[selected]");
				var optionElements = sourceElement.find("option");
				
				var dropDown = $('<dl class="dropdown" tabindex="1"></dl>')
				
				var sourceWidth;
				
				sourceElement.outerWidth() == 0 ? sourceWidth = sourceElement.css("width") : sourceWidth = sourceElement.outerWidth();
				
				dropDown.width(sourceWidth)
				dropDown.append('<dt><a href="#">' + selectedElement.text() + 
					'<span class="value">' + selectedElement.val() + 
					'</span></a></dt>')
				dropDown.append('<dd><ul></ul></dd>')
				
				var listElement = dropDown.find("dd ul");
				
				listElement.width(parseInt(sourceWidth) - 2)
				//listElement.width(listElement.width()-2)
				
				
				//parseInt(sourceWidth.substr(0, sourceWidth.length-2))-2);
				
				optionElements.each(function(){
					if ($(this).text() == selectedElement.text()) {
						listElement.append('<li class="selected"><a href="#"><span class="normaltext">' + 
							$(this).text() + '</span><span class="value">' + 
							$(this).val() + '</span></a></li>');
					} else {
						listElement.append('<li><a href="#"><span class="normaltext">' + 
							$(this).text() + '</span><span class="value">' + 
							$(this).val() + '</span></a></li>');
					}
				});
				
				dropDown.data("oSelect", {mCurrent : 0, mTotal : 0,	keyString : ''})
				
				sourceElement.after(dropDown);
				dropDown.append(sourceElement);
				sourceElement.hide();
				
				
				dropDown.find("dt a").bind("click", dropDownClick);
				
				dropDown.find("dd ul li a").bind("click", dropDownItemClick)
				
			});
			
			function dropDownClick() {
				
				$(this).parents(".dropdown").focus().find("dd ul").toggle();
				
				$(".dropdown dd ul").not($(this).parents(".dropdown").find("dd ul")).hide();
				return false;
			}
			
			function dropDownItemClick() {
				
				var textObject = $(this).find("span.normaltext").text()
				var dropDown = $(this).parents(".dropdown");
				
				dropDown.find("dt a").html(textObject);
				dropDown.find("dd ul").hide();
				
				dropDown.focus();

				dropDown.find("dd ul li").removeClass("selected");
				$(this).parent("li").addClass("selected");
				
                var source = $(this).parents(".dropdown").find("select");
                source.val($(this).find("span.value").html())
				
				dropDown.data("oSelect").mCurrent = source[0].selectedIndex;
				
				source.change();
				
				return false;
			}
		}
	});
})(jQuery);


// hides the dropdowns when the user clicks outside of 1;
$(document).bind('click', function(e) {
	var targetElement = $(e.target);
	if (! targetElement.parents().hasClass("dropdown"))	{
		$(".dropdown dd ul").hide();
	}
});

//==== Treating keys pressed 
$(document).keydown(function(e) { 

	var targetElement = $(e.target);
	var focusElement = $(":focus");
	
	
	
	if (focusElement.hasClass("dropdown")) {
		dropper(focusElement, e)
	}
	
	function dropper(dropDown, e) {
		
		e.preventDefault();
		
		// get keyCode (window.event is for IE) 
		var sKey = e.keyCode || window.event.keyCode; 
		var $select = dropDown.find( "select" ); 
		
		dropDown.data("oSelect").mTotal = dropDown.find( "select option" ).length; 
		
		if(sKey == 40 || sKey == 38){ 
			if( sKey == 38 ){ // keyUp
				if( dropDown.data("oSelect").mCurrent == 0 || dropDown.data("oSelect").mCurrent == -1 ) {
					dropDown.data("oSelect").mCurrent = dropDown.data("oSelect").mTotal-1; 
				} else { 
					dropDown.data("oSelect").mCurrent--;
				} 
			} else { // keyDown 
				if( dropDown.data("oSelect").mCurrent == dropDown.data("oSelect").mTotal -1 ) {
					dropDown.data("oSelect").mCurrent = 0; 
				} else { 
					dropDown.data("oSelect").mCurrent++; 
				}
			}
			
			$ul = dropDown.find("ul"); 
			$ul.children().each(function( i ) { 
				if( i == dropDown.data("oSelect").mCurrent ) { 
					$select[0].selectedIndex = dropDown.data("oSelect").mCurrent; 
					$(this).addClass("selected"); 
				} else {
					$(this).removeClass("selected"); 
				}
			});
			$select[0].selectedIndex = dropDown.data("oSelect").mCurrent;
		
			dropDown.find( 'a:first' ).html( dropDown.find( "ul li.selected a span.normaltext" ).text() );
		} else if( sKey == 13 ) {
			dropDown.find("ul").toggle();
			
		} else if (sKey >= 65 && sKey <= 90) {
			
			dropDown.data("oSelect").keyString = String.fromCharCode(sKey).toLowerCase();
			
			$ul = dropDown.find("ul");
			
			var hasMatched = false;
			
			$ul.children().each(function() { 
			
				var textObject = $(this).find("span.normaltext").text()
				if( dropDown.data("oSelect").keyString != null || dropDown.data("oSelect").keyString != '' ) { 
				
					if ( dropDown.data("oSelect").keyString == textObject.substr(0, dropDown.data("oSelect").keyString.length).toLowerCase()) {
						
						hasMatched = true;
						
						dropDown.find("dt a").html(textObject);
						
						$select.val($(this).find("span.value").html())
						dropDown.data("oSelect").mCurrent = $select[0].selectedIndex;
						
						$(this).addClass("selected");
					} else {
						if(!hasMatched) {
							$(this).removeClass("selected")
						}
					}
				}
			});
			
			return false;
		} else if (sKey == 8) {
			
		}
	}
});