/*
SelectBox 2008
Funcion creada por Carlos Macias - http://www.cmacias.com - carlos@cmacias.com
Este javascript es de libre uso y puedes utilizarlo como y donde quieras (en caso de que te sirva, claro)
No es necesario notificarme su uso, pero si lo quieres hacer, te lo agradezco (nunca viene mal paa el ego)
Se han omitido las tildes o acentos graficos en los comentarios para conseguir compatibilidad con Explorer 6. Si, lo se, no me lo digas ;)

Para utilizar este script tan solo es necesario incluirlo en tu pagina de la siguiente manera:
<script type="text/javascript" src="comboBox.js"></script>
No es necesario añadir evento alguno a la pagina

Bugs conocidos:
	En Explorer 6 y 7 en caso de salir scroll, no es posible utilizar ni los botones ni la bara de scroll.
	Unicamente se permite hacer scroll con la rueda del ratón

*/
document.write('<link type="text/css" rel="stylesheet" href="http://www.cmacias.com/wp-content/uploads/demos/combobox/comboBox.css"/>');

function selectBox()
{	
	
	
	var selectItem = document.getElementsByTagName('select');
	
	for(var i = 0; i < selectItem.length; i++)
	{
		if(!selectItem[i].multiple)
		{
			selectItem[i].style.display = 'none';
			selectItem[i].style.visibility = 'hidden';
			
			// Creamos el div que contendra el nuevo desplegable
			var divSelect = document.createElement("DIV");
				divSelect.className = "selectBox";
				divSelect.i = i;
			
			// Aplicamos al "nuevo select" los estilos de posicion y tamaño que pudiera tener el original
			if(selectItem[i].style.width) 
			{
				divSelect.style.width = selectItem[i].style.width;
				// En caso de que el combo original tenga un ancho sacado del estilo, tenemos que separar los "px" del valor.
				ancho 		= selectItem[i].style.width.split("px");
				anchoSelect = ancho[0];		
			} else {
				divSelect.style.width = "150px";
				anchoSelect = "150";
			}
			
			if(selectItem[i].style.position) 
			{
				divSelect.style.position = selectItem[i].style.position;
			} else {
				divSelect.style.position = "relative";
			}
			if(selectItem[i].style.left) divSelect.style.left = selectItem[i].style.left;
			if(selectItem[i].style.top) divSelect.style.top = selectItem[i].style.top;
			if(selectItem[i].style.right) divSelect.style.right = selectItem[i].style.right;
			if(selectItem[i].style.bottom) divSelect.style.bottom = selectItem[i].style.bottom;
			
			// Añadimos los eventos necesarios para cambiar los estilos segun la accion
			divSelect.onmouseover = function() 	{ this.className = "selectBox selectBox-over"; }
			divSelect.onmouseout = function() 	{ this.className = "selectBox"; }
			
			
			// Creamos el input que recibira el valor del item seleccionado
			var inputSelect = document.createElement("INPUT");
				inputSelect.type = "text";
				inputSelect.style.width = (anchoSelect-7) + "px"; 	/* 
																	En este caso, el valor 7 lo sacamos de: 
																	 - 2px del borde
																	 - 4px de los padding right && left
																	 - 1px a mayores para darle el aspecto redondeado al botón
																	*/
				
				// Configuramos el resto de parametros predefinidos para el input
				inputSelect.style.position = "absolute";
				inputSelect.style.left = "0px";
				inputSelect.style.top = "0px";
				
				
			// Creamos la imagen que hara las veces de boton
			var aSelect = document.createElement("A");
				aSelect.href = "javascript:;";
				aSelect.i = i;
				
				// Configuramos el resto de parametros predefinidos para el boton
				aSelect.style.position = "absolute";
				aSelect.style.left = "auto";
				aSelect.style.right = "0px";
				aSelect.style.top = "0px";	
			
			
			// Creamos el elemento UL de la nueva lista y le aplicamos los estilos necesarios
			var ulSelect = document.createElement("UL");
				ulSelect.style.display = "none";
				ulSelect.style.width = (anchoSelect - 2) + "px";
				ulSelect.style.position  =  "absolute";
				ulSelect.style.left  =  0;
				ulSelect.style.margin  =  0;
				ulSelect.style.padding  =  0;
				ulSelect.style.overflow  =  "auto";
				
			// Buscamos los value del SelectBox
			liEls = selectItem[i].getElementsByTagName("option");
			
			// Ahora que sabemos cuantos elementos existen, damo una altura al listado segun el numero de elementos
			if(liEls.length > 8) { ulSelect.style.height = 145 + "px"; }
			
			for(var e = 0; e < liEls.length; e++)
			{
				// Creamos la lista
				liSelect = document.createElement("LI")
				
				// Comprobamos si el SelectBox original tiene algun option seleccionado
				if(liEls[e].selected == true) { liSelect.className = "selected";}
				
				// Creamos dos variables que nos muestre tanto el estado de seleccion del elemento como la posicion que ocupa
				liSelect.selected	= liEls[e].selected;
				liSelect.selectC	= liEls[e];
				liSelect.e			= e;
				liSelect.i			= i;
				liSelect.liEls		= liEls;
				liSelect.o			= inputSelect;
				
				// Creamos el texto para la lista
				textLi = document.createTextNode(liEls[e].text);
				
				// Acoplamos ese texto a cada lista
				liSelect.appendChild(textLi);
				
				// En caso de que la lista original tenga un item seleccionado
				if(liEls[e].selected == true) { inputSelect.value = liEls[e].text; }
				
				// Incluimos el evento que nos permite marcar y desmarcar el elemento seleccionado
				liSelect.onmousedown = function(e,i,o)
													{
														aLi = this.parentNode.getElementsByTagName("LI");
														
														// recorremos todos los elementos y borramos el atributo class
														for(o = 0; o < aLi.length; o++)
														{
															// Eliminamos la clase, no sin antes aplicar la regla segun el navegador >:-(
															removeClass(aLi[o]);
														}
															
														this.className = "selected";
														
														// Seleccionamos el elemento original
														selectItem[this.i].getElementsByTagName("option")[this.e].selected = true;
														
														// Añadimos el valor del elemento seleccionado al input
														this.o.value = this.liEls[this.e].text;
														
														// Ocultamos el listado
														ulSelect.style.display = "none";
													}
				
				// Y le damos unos colorines al pasar el raton por encima
				liSelect.onmouseover = function()
												{
													if(this.className != "selected")
													{
														this.className = "over"
													} 
												}
				
				// Y eliminamos el atributo class al sacar el raton de encima
				liSelect.onmouseout = function()
												{
													if(this.className != "selected")
													{
														removeClass(this);
													} 	
												}
				
				
				// Y acoplamos ese elemento al UL principal
				ulSelect.appendChild(liSelect);
			}	
			
			// Generamos las acciones de los botones, input y lista.
			
			// Creamos un nuevo valor en el input y el boton para relacionarlo con su listado
			inputSelect.o 			= ulSelect;
			inputSelect.aSelect		= aSelect;
			aSelect.o 				= ulSelect;
			
			// Evento al hacer click en el Input
			inputSelect.onmousedown = function(o)
												{
													this.aSelect.className = "selectBoxBtn-on";
													
													// Si esta visible
													if(this.o.style.display == "block")
													{
														// Lo ocultamos
														this.o.style.display = "none";
													} else {
														// Lo mostramos
														this.o.style.display = "block";
													}
												}
			
			// Evento cuando el input pierde el foco
			inputSelect.onblur = function(o){ this.o.style.display = "none"; }
			
			// Como este combo no tiene autocompletar, eliminamos la posibilidad de escribir dentro de el
			inputSelect.onkeydown = function() { return false;}
			
			// impedimos que se seleccione en texto del input
			inputSelect.onselect = function() { this.blur(); }
			
			// Eliminamos la clase que permite hacer el efecto de click en el boton
			inputSelect.onmouseup = function(){ removeClass(this.aSelect);}
			
			// Evento al hacer click en el Boton
			aSelect.onmousedown = function(o)
											{
												// Creamos el efecto click cambiandole al boton la clase
												this.className = "selectBoxBtn-on";
												
												if(this.o.style.display == "block")
												{
													this.o.style.display = "none";
												} else {
													this.o.style.display = "block";
												}
											}
			
			// Eliminamos la clase que permite hacer el efecto de click
			aSelect.onmouseup = function(){ removeClass(this);}
			
			// Evento cuando el boton pierde el foco
			aSelect.onblur = function(o) { this.o.style.display = "none"; }	
			
			// Colocamos el nuevo SelectMultiple en el documento	
			divSelect.appendChild(inputSelect);
			divSelect.appendChild(aSelect);
			divSelect.appendChild(ulSelect);
			document.body.appendChild(divSelect);
			
			// Y lo posicionamos justo antes del Select Original
			selectItem[i].parentNode.insertBefore(divSelect,selectItem[i]);
		}
	}
}

// Con esta funcion unificamos criterios a la hora de eliminar el atributo class
function removeClass(eL)
{
	if (navigator.appName == 'Microsoft Internet Explorer')
		{
			eL.removeAttribute("className");
		} else {
			eL.removeAttribute("class");
		}
}

// Esta funcion nos permite añadir una accion al evento onLoad
function addLoadEvent(func) 
{
	// añadimos todas las funciones que pudiera tener la pagina al cargar
	var oldonload = window.onload;
	
	if (typeof window.onload != 'function') 
	{
		window.onload = func;
	} else {
		window.onload = function() 
		{
			oldonload();
			func();
		}
	}
}

// Ejecutamos directamente la funcion SelectMultiple
addLoadEvent(selectBox);