var JSelect = Class.create({
	initialize: function(select_id, div_input_id) {
		this.select = $(select_id);
		this.div_input_id = div_input_id;
		
		this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
		
		if (this.select.style.display == 'none'){
			this.currentIndex = 0;
			this.options = new Array();
			
			var options_count = this.select.childNodes.length;
			
			for ( i = 0 ; i < options_count; i++){
				var option = this.select.childNodes[i];
				if (option.tagName == 'DIV'){
					var id = option.id;
					
					if (typeof(id) != 'undefined' && id != ''){
						this.options.push(id);
					}
				}
			}
			
			this.show();
			
			Event.observe(this.select, "mouseover", this.clearAll.bindAsEventListener(this));
			Event.observe(this.select, "mouseout", this.mouseOut.bindAsEventListener(this));
		}else{
			this.select.style.display = 'none';
		}
	},
	
	show: function(){
		
		Position.clone($(this.div_input_id), this.select, {
			setHeight: false, 
			setWidth: false			
		});
		
		lastShowedDiv = this.select.id;
		this.enableKeyboardNav();
		this.select.style.display = 'block';
	},
	
	start: function(delete_last_showed_div){
		this.show();
		this.currentIndex = 0;
		
		if (delete_last_showed_div){
			lastShowedDiv = '';
		}
	},
	
	mouseOut: function(){
		if (this.select.style.display == 'block'){
			this.start(true);
		}
	},
	
    enableKeyboardNav: function() {
        document.observe('keydown', this.keyboardAction);  
    },

    disableKeyboardNav: function() {
        document.stopObserving('keydown', this.keyboardAction);
    },

    keyboardAction: function(event) {
    	if (this.select.style.display == 'block'){
			switch(event.keyCode) {
				case Event.KEY_TAB:
				case Event.KEY_RETURN:
					this.selectOption();
					Event.stop(event);
				case Event.KEY_ESC:
					this.hide();
					Event.stop(event);
					return;
				case Event.KEY_LEFT:
				case Event.KEY_RIGHT:
					return;
				case Event.KEY_UP:
					this.markPrevious();
					Event.stop(event);
					return;
				case Event.KEY_DOWN:
					this.markNext();
					Event.stop(event);
					return;
			}
    	}else{
    		this.hide();
    	}
	},
	
	markNext: function(){
		if (this.currentIndex == this.options.length){
			this.currentIndex = 1;
		}else{
			this.currentIndex++;
		}
		
		this.clearAll(false);
		
		if ($(this.options[this.currentIndex - 1])){
			$(this.options[this.currentIndex - 1]).className = 'select_hovered';
		}
	},
	
	markPrevious: function(){
		if (this.currentIndex == 0 || this.currentIndex == 1){
			this.currentIndex = this.options.length;
		}else{
			this.currentIndex--;
		}
		
		this.clearAll(false);
		
		if ($(this.options[this.currentIndex - 1])){
			$(this.options[this.currentIndex - 1]).className = 'select_hovered';
		}
	},
	
	hide: function(){
		this.select.style.display = 'none';
		this.clearAll(true);
	},
	
	clearAll: function(del){
		var options_count = (this.options).length;
		
		for (i = 0; i < options_count; i++){
			$(this.options[i]).className = '';
		}
		
		if (del){
			this.currentIndex = 0;
			this.disableKeyboardNav();
		}
	},
	
	selectOption: function() {
		if (this.currentIndex > 0){	
			var value = $(this.options[this.currentIndex - 1]).readAttribute('value');
			var div_input_id = $(this.options[this.currentIndex - 1]).readAttribute('div_input_id');
			var prefix = $(this.options[this.currentIndex - 1]).readAttribute('prefix');
			var input_id = $(this.options[this.currentIndex - 1]).readAttribute('input_id');
			var select_div_id = $(this.options[this.currentIndex - 1]).readAttribute('select_div_id');
			
			select(value, div_input_id, prefix, input_id, select_div_id);
		}
		this.clearAll(true);
	}
})