var SelectRestyle = Class.create();
SelectRestyle.prototype = {
	initialize: function(myselect,options)
	{
		this.myselect = myselect;
		this.total_options = myselect.length;
		this.width_1 = (options.width_1 || 0);
		this.width_2 = (options.width_2 || 0);
		this.height_lines = (options.height_lines || 0);
		this.line_height = (options.line_height || 15);
		this.options_height = this.height_lines*this.line_height;
		this.optgruoup = '';
		this.blur_it = 1;
		this.draw();
	},
	draw: function()
	{
		this.parent_all = this.myselect.parentNode;

		//creeaza input hiddenul care va tine valoarea ce va fi trimisa
		this.hidden_input = document.createElement("INPUT");
		this.hidden_input.setAttribute("type","hidden");
		this.hidden_input.setAttribute("name",this.myselect.name);
		this.hidden_input.setAttribute("value",this.myselect[0].value);
		this.hidden_input.setAttribute("id",this.myselect.name+"_hidden_input");
		this.parent_all.appendChild(this.hidden_input);
		
		//creeaza div-ul vizual cu optiunea aleasa: e nevoie de 3 divuri pentru a afisa backgroundul
		this.div_actual_1 = document.createElement("DIV");
		this.div_actual_1.className = "select_div_actual_1";
		this.parent_all.appendChild(this.div_actual_1);
		this.div_actual_2 = document.createElement("DIV");
		this.div_actual_2.className = "select_div_actual_2";
		this.div_actual_1.appendChild(this.div_actual_2);
		this.div_actual = document.createElement("DIV");
		this.div_actual.setAttribute("id",this.myselect.name+"_div_actual");
		this.div_actual.className = "select_div_actual";
		this.div_actual_2.appendChild(this.div_actual);
		this.div_actual_text = document.createElement("DIV");
		this.div_actual_text.className = "text_select";
		this.div_actual_text.setAttribute("id",this.myselect.name+"_div_actual_text");
		this.div_actual.appendChild(this.div_actual_text);
		
		this.div_actual_text.appendChild(document.createTextNode(this.myselect[0].text));
		
		//creeaza catcherul de evenimente
		this.eventcatcher = document.createElement("INPUT");
		this.eventcatcher.setAttribute("type","text");
		this.eventcatcher.className = "select_eventcatcher";
		this.parent_all.appendChild(this.eventcatcher);
		
		Event.observe(this.div_actual,"click",function(){
			if(this.options.style.display == "")
			{
				this.close_options();
			}
			else
			{
				this.open_options();
				this.eventcatcher.focus();
			}
		}.bind(this));
		Event.observe(this.eventcatcher,"keyup",function(evt){
			this.navigate(evt);
		}.bind(this));
		Event.observe(this.eventcatcher,"focus",function(evt){
			this.open_options();
		}.bind(this));
		Event.observe(this.eventcatcher,"blur",function(evt){
			if(this.blur_it==1)
				this.close_options();
		}.bind(this));
		
		//insereaza un clear:both inainte de optiuni
		this.my_clear = document.createElement("DIV");
		this.my_clear.className = "clear";
		this.parent_all.appendChild(this.my_clear);
		
		
		//creeaza div-ul cu optiunile selectului
		this.options = document.createElement("DIV");
		this.options.setAttribute("id",this.myselect.name+"_options");
		this.options.className = "select_options";
		this.options.style.display = "none";
		this.parent_all.appendChild(this.options);
		
		//elimina bugul de blur() de pe eventcatcher
		Event.observe(this.options,"mousedown",function(){
			this.blur_it=0;
		}.bind(this));
		Event.observe(this.options,"mouseup",function(){
			this.blur_it=1;
		}.bind(this));
		Event.observe(this.options,"scroll",function(){
			this.blur_it=1;
			this.eventcatcher.focus();			
		}.bind(this));

		//adaugarea dimensiunii pe orizontala daca are si selectul
		if(this.width_1!=0)
		{
			this.div_actual.style.width = this.width_1;
			this.div_actual_text.style.width = this.width_1;
		}
		if(this.width_2!=0)
		{
			this.options.style.width = this.width_2;
		}
		//adaugare scroll pe verticala
		if(this.height_lines!=0 && this.myselect.length>this.height_lines)
		{
			this.options.style.height = this.options_height+"px";
			this.options.style.overflow = "auto";
			this.options.style.width = parseInt(this.width_2)+20+"px";
		}
		
		//afisam opgroupurile
		for(i=0;i<this.myselect.length;i++)
		{
			if(this.myselect[i].parentNode.tagName=="OPTGROUP" && this.optgroup!=this.myselect[i].parentNode.label)
			{
				this.optgroup=this.myselect[i].parentNode.label;
				this.option_label = document.createElement("DIV");
				this.option_label.className = "select_option_label";
				this.option_label.appendChild(document.createTextNode(this.myselect[i].parentNode.label));
				this.options.appendChild(this.option_label);
			}
			new SelectRestyleOption(this.myselect[i],this.myselect,i,this);
		}
		//cautam elementul selectat si il afisam
		if(this.myselect.selectedIndex)
		{
			this.act_option(this.myselect.selectedIndex,1);
		}
		//eliminam vechiul element <select>
		this.parent_all.removeChild(this.myselect);
	},
	navigate:function(evt)
	{
		if(evt.keyCode=="38" || evt.keyCode=="40" || evt.keyCode=="13" || evt.keyCode=="27")
		{
			maxim = this.total_options;
			curent = -1;
			for(i=0;i<this.total_options;i++)
			{
				if($(this.myselect.name+"_my_option_"+i).className=="select_my_option hover" && curent==-1)
				{
					curent = i;
					$(this.myselect.name+"_my_option_"+i).className="select_my_option";
					break;
				}
			}
			if(curent == -1)
			{
				for(i=0;i<this.total_options;i++)
				{
					if($(this.myselect.name+"_my_option_"+i).className=="select_my_option act")
					{
						curent = i;
						break;
					}
				}
			}
			if(maxim==0) return;
			if(evt.keyCode=="40")
			{
				prev_i = curent+1;
				if(prev_i==maxim) prev_i = 0;
				my_i = prev_i;
			}
			else if(evt.keyCode=="38")
			{
				next_i = curent-1;
				if(next_i<0) next_i = maxim-1;
				my_i = next_i;
			}
			else if(evt.keyCode=="13")
			{
				my_i = curent;
				this.act_option(my_i,0);
				return;
			}
			else if(evt.keyCode=="27")
			{
				this.close_options();
				return;
			}
			if($(this.myselect.name+"_my_option_"+my_i).className!="select_my_option act")
			{
				$(this.myselect.name+"_my_option_"+my_i).className="select_my_option hover";
				poz_option = $(this.myselect.name+"_my_option_"+my_i).offsetTop;
				///*console.log*/alert(parseInt(poz_option)+"-"+(parseInt(this.options.scrollTop)+this.options_height)+' => '+(parseInt(poz_option)+this.line_height)+"px");
				if(parseInt(poz_option)>(parseInt(this.options.scrollTop)+this.options_height-this.line_height))
					this.options.scrollTop = (parseInt(poz_option)+this.line_height-this.options_height);
				else if(parseInt(poz_option)<parseInt(this.options.scrollTop))
					this.options.scrollTop = parseInt(poz_option);
			}
			return;
		}
	},
	open_options:function()
	{
		this.options.style.display = "";
	},
	close_options:function()
	{
		for(i=0;i<this.total_options;i++)
		{
			if($(this.myselect.name+"_my_option_"+i).className=="select_my_option hover")
			{
				$(this.myselect.name+"_my_option_"+i).className="select_my_option";
				break;
			}
		}
		this.options.style.display = "none";
	},
	act_option:function(my_i,ondefault)
	{
		for(i=0;i<this.total_options;i++)
		{
			if($(this.myselect.name+"_my_option_"+i).className!="select_my_option")
			{
				$(this.myselect.name+"_my_option_"+i).className="select_my_option";
			}
		}
		$(this.myselect.name+"_hidden_input").value = $(this.myselect.name+"_my_option_"+my_i).getAttribute("value");
		$(this.myselect.name+"_div_actual_text").innerHTML = $(this.myselect.name+"_my_option_"+my_i).innerHTML;
		$(this.myselect.name+"_my_option_"+my_i).className="select_my_option act";
		$(this.myselect.name+"_options").style.display="none";
		if(this.myselect.onchange!=undefined && this.myselect.onchange!="" && ondefault==0)
		{
			this.myselect.onchange.call();
		}
	},
	get_value:function(){
		return $(this.myselect.name+"_hidden_input").value;
	}
}

var SelectRestyleOption = Class.create();
SelectRestyleOption.prototype = {
	initialize: function(myoption,myselect,current,master_reference)
	{
		this.myselect = myselect;
		this.current = current;
		this.text = myoption.text;
		this.value = myoption.value;
		this.master_reference = master_reference;
		this.draw();
	},
	draw: function()
	{
		this.my_option = document.createElement("DIV");
		this.my_option.appendChild(document.createTextNode(this.text));
		this.my_option.className = "select_my_option";
		this.my_option.setAttribute("value",this.value);
		this.my_option.setAttribute("id",this.myselect.name+"_my_option_"+this.current);
		$(this.myselect.name+"_options").appendChild(this.my_option);
		Event.observe(this.my_option,"click",function(){
			this.master_reference.act_option(this.current,0);
		}.bind(this));
		Event.observe(this.my_option,"mouseover",function(){
			if(this.my_option.className!="select_my_option act")
				this.my_option.className="select_my_option hover";
		}.bind(this));
		Event.observe(this.my_option,"mouseout",function(){
			if(this.my_option.className!="select_my_option act")
				this.my_option.className="select_my_option";
		}.bind(this));
	}
}