Autocompleter.SelectBox = Class.create();
Autocompleter.SelectBox.prototype = Object.extend(new Autocompleter.Base(), {
  initialize: function(select, options) {
	this.element = "<a href=\"javascript:void(0);\" class=\"custom_combo\"   id=\"" + $(select).id + "_combo\" /><span class=\"left\"></span><span class=\"middle\" id=\"" + $(select).id + "_combo_in\" ></span><span class=\"right\"></span></a>"
	new Insertion.Before(select, this.element);
	//new Insertion.Before(select, "<div class=\"clear\"></div>");
	
	/*
	var inputClasses = Element.classNames(select);
	inputClasses.each(function(inputClass)
		{
			Element.addClassName($(select).id + "_combo", inputClass);
		});
	*/
	
	this.update = "<div id=\"" + $(select).id + "_options\" class=\"autocomplete\"></div>"	
	new Insertion.Before(select, this.update)
		
		
    this.baseInitialize($(select).id + "_combo", $(select).id + "_options", options);
    this.select = select;
	this.selectOptions = [];
		
	//$(this.element.id).setAttribute('readonly','readonly');
	//this.element.readOnly = true;
	this.element_in=$($(select).id + "_combo_in");
	
	// WIDTH
	this.select_width=$(select).getWidth();
	this.element.setStyle({width:this.select_width+'px'});
	var in_arr=this.element.select('span[class="middle"]');
	this.element_in.setStyle({width:(this.select_width-30)+'px'});
	
	
	
	this.element.value = '';
	if(this.options.debug)alert('input ' + this.element.id + ' and div '+ this.update.id + ' created, Autocompleter.Base() initialized');
	if(!this.options.debug)Element.hide(select);

	var optionList = $(this.select).getElementsByTagName('option');
	var nodes = $A(optionList);

	for(i=0; i<nodes.length;i++){
		this.selectOptions.push("<li id=\"" + nodes[i].value + "\">" + nodes[i].innerHTML + '</li>');
		if (nodes[i].getAttribute("selected")){
			this.element_in.update(nodes[i].innerHTML); 
			this.element.value=nodes[i].innerHTML; 
			this.veryoldElementValue = this.oldElementValue ;
			this.oldElementValue = this.element.value;
		}
		
		if(this.options.debug)alert('option ' + nodes[i].innerHTML + ' added to '+ this.update.id);
	}
	
	Event.observe(this.element, "click", this.activate.bindAsEventListener(this));
	
	if ($(select).selectedIndex >= 0){
		this.element_in.update($(select).options[$(select).selectedIndex].innerHTML);
		this.element.value=$(select).options[$(select).selectedIndex].innerHTML;
		this.veryoldElementValue = this.element.value;
		this.oldElementValue = this.element.value;
	}
	
	var self = this;
	this.options.afterUpdateElement = function(text, li) {
		var optionList = $(select).getElementsByTagName('option');
		var nodes = $A(optionList);

		var opt = nodes.find( function(node){
			return (node.value == li.id);
		});
		$(select).selectedIndex=opt.index;
		if(self.options.redirect) document.location.href = opt.value;
		if(self.options.autoSubmit != ''  && self.veryoldElementValue!=self.element.value){
			$(self.options.autoSubmit).submit();
		}	

		if(self.options.selectOnChange != false && self.veryoldElementValue!=self.element.value){
			self.options.selectOnChange();
		}	
		self.veryoldElementValue=self.element.value;	
		
		
		//alert(text);	
		$($(text).id + "_in").update(li.innerHTML); 	
			
	}
	$(this.element).stopObserving('blur');

	Event.observe($('frame'), 'click', this.onBlur.bindAsEventListener(this));
	
	//alert('element.value:'+this.element.value);
  },


  getUpdatedChoices: function() {
  		this.updateChoices(this.setValues());
  },

  setValues : function(){
		return ("<ul>" + this.selectOptions.join('') + "</ul>");
  },
  
  onBlur: function(event) {
	//alert('dont:'+$(this.update).dont_hide);
	if($(this.update).dont_hide!=true){
		// needed to make click events working
		setTimeout(this.hide.bind(this), 250);
		this.hasFocus = false;
		this.active = false;     
	}	
  }, 
  
  setOptions: function(options) {
    this.options = Object.extend({
		//MORE OPTIONS TO EXTEND THIS CLASS
		redirect	: false, // redirects to option value
		debug		: false, //show alerts with information
		autoSubmit	: '', //form Id to submit after change 	
		selectOnChange	: false, //execute select on change				
		
		onShow :    function(element, update){ 
						if(!update.style.position || update.style.position=='absolute') {
						  update.style.position = 'absolute';
						  //alert('sss:'+$(element).getWidth());
						  
						  Position.clone(element, update, {
							setHeight: false, 
							offsetTop: element.offsetHeight
						  });
						  $(update).setStyle({width:($(element).getWidth()-23)+'px'});
						}
						$(update).show();
						$(update).dont_hide=true;
						//Effect.Appear(update,{duration:0.15});
						this.changeDont.delay(0.2,update);

					},
		onHide :    function(element, update){ $(update).hide(); },
		changeDont :function showMsg(update) {
							$(update).dont_hide=false;
						}		
	}, options || {});
  }
})