(function ($) {
	$.fn.cocombobox = function (settings) {
		var config = {
			min: '0px',
			max: '150px',
			timeIn: '300',
			timeOut: '100',
			scroll: 'true',
			name: 'combobox'
		};
		if (settings) $.extend(config, settings);
		this.each(function (i) {
			var name = $(this).attr("id");
			var option = config;
			var input = '<input type="hidden" name="' + name + '" id="' + name + '" value=""/>';
			var index = $(this).offset();
			var z = Math.round("100" - index.top);
			var first = $(this).find("li:eq(0)").find('a').html();
			var zztop = z - i;
			$(this).addClass("min");
			$(this).wrap('<div class="' + name + 'bx combo"></div>');
			$(this).parent().css({
				'position': 'relative',
				'height': option.min,
				'zIndex': zztop
			});
			$(this).css({
				'position': 'absolute',
				'overflow': 'hidden',
				'height': option.min
			});
			$(this).after(input);
			$(this).find("li:eq(0)").find("a").addClass("sel");
			$(this).parent().prepend('<small class="combtn" tabindex="1"></small><span id="option">' + first + '</span>')
			$(this).parent().find("small").click(function () {
				if ($(this).parent().find("ol").hasClass('min')) {
					$(this).parent().find("ol").removeClass("min");
					$(this).parent().find("ol").addClass("full");
					$(this).parent().find("ol").css({
						'overflow': 'auto'
					});
					$(this).parent().find("ol").animate({
						height: option.max
					}, option.timeIn);
					$(this).parent().find("ol").find("li").show();
				} else {
					$(this).parent().find("ol").css({
						'overflow': 'hidden'
					});
					$(this).parent().find("ol").removeClass("full");
					$(this).parent().find("ol").addClass("min");
					$(this).parent().find("ol").animate({
						height: option.min
					}, option.timeOut);
					$(this).parent().find("ol").find("li").hide();
				}
			});
			$(this).parent().find("span").click(function () {
				if ($(this).parent().find("ol").hasClass('min')) {
					$(this).parent().find("ol").removeClass("min");
					$(this).parent().find("ol").addClass("full");
					$(this).parent().find("ol").css({
						'overflow': 'auto'
					});
					$(this).parent().find("ol").animate({
						height: option.max
					}, option.timeIn);
					$(this).parent().find("ol").find("li").show();
				} else {
					$(this).parent().find("ol").css({
						'overflow': 'hidden'
					});
					$(this).parent().find("ol").removeClass("full");
					$(this).parent().find("ol").addClass("min");
					$(this).parent().find("ol").animate({
						height: option.min
					}, option.timeOut);
					$(this).parent().find("ol").find("li").hide();
				}
			});
			$(this).parent().mouseleave(function () {
				$(this).find("ol").css({
					'overflow': 'hidden'
				});
				$(this).find("ol").removeClass("full");
				$(this).find("ol").addClass("min");
				$(this).find("ol").animate({
					height: option.min
				}, option.timeOut);
				$(this).find("ol").find("li").hide();
			});
			$(this).find("li a").click(function () {
				$(this).parent().parent().css({
					'overflow': 'hidden'
				});
				var deep = $(this).attr("rel");
				var section = $(this).html();
				$(this).parent().parent().find("li a").removeClass("sel");
				$(this).addClass("sel");
				$(this).parent().parent().find("li").hide();
				$(this).parent().parent().parent().find("#option").html(section).show();
				$(this).parent().parent().animate({
					height: option.min
				}, option.timeOut);
				$(this).parent().parent().removeClass("full");
				$(this).parent().parent().addClass("min");
				$("#" + name).val(deep);
				return false;
			});
		});
		return this;
	};
	
	var currentSelection = 0;
	var currentUrl = '';
		
	$(document).keypress(function(e) {
		switch(e.keyCode) { 
			// User pressed "up" arrow
			case 38:
				navigate('up');
			break;
			// User pressed "down" arrow
			case 40:
				navigate('down');
			break;
			// User pressed "enter"
			case 13:
				if(currentUrl != '') {
					window.location = currentUrl;
				}
			break;
		}
	});
	
	for(var i = 0; i < $("ol li a").size(); i++) {
		$("ol li a").eq(i).data("number", i);
	}
	
	// Simulote the "hover" effect with the mouse
	$("ol li a").hover(
		function () {
			currentSelection = $(this).data("number");
			setSelected(currentSelection);
		}, function() {
			$("ol li a").removeClass("itemhover");
			currentUrl = '';
		}
	);
	
	function navigate(direction) {
	// Check if any of the menu items is selected
	if($("ol li .itemhover").size() == 0) {
		currentSelection = -1;
	}
	
	if(direction == 'up' && currentSelection != -1) {
		if(currentSelection != 0) {
			currentSelection--;
		}
	} else if (direction == 'down') {
		if(currentSelection != $("ol li").size() -1) {
			currentSelection++;
		}
	}
	setSelected(currentSelection);
	}
	
	function setSelected(menuitem) {
		$("ol li a").removeClass("itemhover");
		$("ol li a").eq(menuitem).addClass("itemhover");
		currentUrl = $("ol li a").eq(menuitem).attr("href");
	}
	
	
})(jQuery);