/*
 * Reemplazo de los dropdowns HTML por una version esquineble de funcionamiento similar
 * y de gracefull degradation en caso de no soportar JavaScript ni CSS.
 *
 * Para funcionar correctamente se requiere de un archivo CSS especialmente dise?ado.
 *
 * La estructura es reemplazar el select por un div que contenga un p y
 * una lista sin orden por cada elemento del select. En el texto del p?rrafo
 * se mostrar? el valor del elemento seleccionado.
 */
function CustomDropdown( elementid )
{	
	this.select = document.getElementById(elementid); // Objeto a reemplazar
	this.p = document.createElement('p');	          // parrafo con la seleccion
	this.ul = document.createElement('ul');           // unorderer list
	this.div = document.createElement('div');         // div contenedor
	
	this.div.className = 'customDropdown';

	// Obtenemos el indice de la opcion seleccionada actualmente
	var selectedOpt = (!this.select.selectedIndex) ? 0 : this.select.selectedIndex;
	
	// creacion de la lista
	for( var i = 0; i < this.select.options.length; i++ ) {
		var li = document.createElement('li');
		var txt = document.createTextNode(this.select.options[i].text);
		
		li.appendChild(txt);
		li.selIndex = i;
		
		this.ul.appendChild(li);
		
		// si estamos procesando la opcion seleccionada la copiamos al p y le ponemos
		// al li el atributo de seleccionado
		if(i == selectedOpt) {
			this.p.appendChild( document.createTextNode(txt.data) );
		}
		li.onclick = function() { this.parentNode.parentNode.CustomDropdownObject.lionclick(this); }
		li.onmouseover = function() { this.parentNode.parentNode.CustomDropdownObject.lionmouseover(this); }
	}

	// Agregamos referencia a esta clase en el objeto div y select asociados
	this.select.CustomDropdownObject = this;
	this.div.CustomDropdownObject = this;

	// Le asignamos el comportamiento al p para que muestre el listbox al hacer click
	// y lo oculte, sin cambiar la seleccion, al hacerse click nuevamente
	this.p.onclick = function() {
		this.parentNode.CustomDropdownObject.ponclick();
	}
	
	this.div.appendChild(this.p);
	this.div.appendChild(this.ul);
	
	this.select.parentNode.insertBefore(this.div, this.select);
	this.select.className = 'customDropdown';
}

/*
 * M?todo que se ejecuta cuando se hace click sobre el p del dropdown
 * por lo que se debe mostrar u ocultar el dropdown
 */
CustomDropdown.prototype.ponclick = function() {

	if( this.ul.className == 'opened' )
		this.ul.className = '';
	else {
		// Seleccionamos la opcion actualmente seleccionada
		this.lionmouseover( this.ul.childNodes[this.select.selectedIndex] );
		this.ul.className = 'opened';
	}
}

/*
 * M?todo que se ejecuta cuando se hace click sobre un li del doprdown
 * Debe poner en el p el texto del li clickeado y marcarlo como seleccionado
 * adem?s de ocultar el ul
 */
CustomDropdown.prototype.lionclick = function( li ) {
	this.p.replaceChild(li.childNodes[0].cloneNode(true), this.p.childNodes[0]);
	this.ul.className = '';

	// Cambiamos la seleccion en el listview
	this.select.selectedIndex = li.selIndex;
}

/*
 * M?todo que se ejecuta cuando se mueve el mouse sobre el dropdown y va
 * moviendo el elemento seleccionado
 */
CustomDropdown.prototype.lionmouseover = function( li ) {
	// le quitamos el atributo de seleccionado a todos menos el actual
	var childs = this.ul.childNodes;
	li.className = 'selected';
	for( var i = 0; i < childs.length; i++ ) {
		if(	childs[i] != li )
			childs[i].className = '';
	}
}