(function ( $ ){
	
	var local = {
		
		div: $(document.createElement('div')),
		index: -1,
		startingText: ''
	};
	
	// Meer weten over, handle
	local.groups = 'Bevers, Welpen, Kabouters, Verkenners, Gidsen, Explorers, Stam, Oude Tak'.split(', ');
	
	// If about doesn't exists, stop execution
	if( $('about') === null ) {
		
		return;
	}
	
	$('about').attr('autocomplete', 'off')
	
	// Create DOM
	local.div.attr('id', 'about-choose');
	local.groupAboutHTML = '';
	
	// Notica ecma standard ;)
	local.groups.forEach(function ( group ){
		
		local.groupAboutHTML += '<div>'+group+'</div>';
	});
	
	local.div.html( local.groupAboutHTML ).hide()
		.appendTo( $('about').parent() );
	
	local.childs = local.div.childs();
	
	$('about').on('focus', function (){
		
		var position = $('about').position();
		
		local.index = -1;
		
		local.div.show().setStyle({

			left: position.left,
			top: position.top + $('about').height(),
			width: $('about').innerWidth(),			// Both elements got a border
			opacity: .4
		}).morph({
			
			opacity: 1
		});
		
		if( local.groups.indexOf( $('about').val() ) !== -1 ) {
			
			local.index = local.groups.indexOf( $('about').val() );
			local.childs[local.index].addClass('active');
		}
	})
	.on('blur', function (){
		
		local.div.hide.bind(local.div).delay(180);
		
		if( typeof local.childs[local.index] === 'object' ) {

			local.childs[local.index].removeClass('active');
		}
	})
	.on('keydown', function ( e ){
		
		if( local.groups.indexOf( $('about').val() ) === -1 ) {
			
			local.startingText = $('about').val();
		}
		
		switch( e.which ) {
			
			// Arrow up
			case 38:
			
				e.stop();
				
				if( local.index <= 0 ) {
					
					$('about').val( local.startingText );
					
					if( typeof local.childs[local.index] === 'object' ) {

						local.childs[local.index].removeClass('active');
					}
					
					local.index = -1;
					
					return;
				}
				
				local.childs[local.index].removeClass('active');
				
				local.index--;
				
				local.childs[local.index].addClass('active');
				
				$('about').val( local.childs[local.index].html() );
				
				break;
				
			// Arrow down
			case 40:
			
				e.stop();
				
				if( local.index >= local.childs.length-1 ) {
					
					return;
				}
				
				if( typeof local.childs[local.index] === 'object' ) {
					
					local.childs[local.index].removeClass('active');
				}
				
				local.index++;
				
				local.childs[local.index].addClass('active');
				
				$('about').val( local.childs[local.index].html() );
				
				break;
			
			case 13:
				
				e.stop();
				
				local.div.hide.bind(local.div).delay(180);

				if( typeof local.childs[local.index] === 'object' ) {

					local.childs[local.index].removeClass('active');
				}
				
				$('text').node.focus();
				
				break;
		}
	});
	
	local.div.on('click', function ( e ){
		
		var target = $(e.target);
		
		if( target === local.div ) {
			
			return;
		}
		
		$('about').val( target.html() );
	})
	
	$('name').on('keydown', function ( e ){
		
		if( e.which === 13 ) {
			
			e.stop();
			$('email').node.focus();
		}
	});
	
	$('email').on('keydown', function ( e ){
		
		if( e.which === 13 ) {
			
			e.stop();
			$('about').node.focus();
		}
	});
})( PB.get );