//Script para sustituir un select por una lista desplegable (<ul>+<li's>) a la que se pueden dar estilos con javascript

//funcion para crear la lista e insertarla en el contenedor
function reemplazaSelect(sel) {
	
  //buscador que vamoa a reemplazr
  var selectOriginal = jQuery(sel);
  
  //variable que indica el estado del select clonado
  //si está abierto, será true, si está cerrado, será false
  var selectAbierto = false;
  
  //variables para almacenar el texto del select
  var textoSelect = jQuery('#filaselectbus td:first').text();
  
  //ocultamos la fila de la tabla que contiene el select
  jQuery('#filaselectbus').css('display','none');

  //elemento en el que vamos a insertar el select clonado
  var cont = jQuery('#buscador-avanzado');

  //creamos el elemento ul
  cont.prepend('<ul id="clonselect"></ul>');
  var clonSelect = jQuery('#clonselect');
  
  //lo envolvemos en un div
  clonSelect.wrap('<div id="clonselect_wrapper"></div>');
  var clonSelectWrapper = jQuery("#clonselect_wrapper");
  
  //creamos el 'boton' para desplegar el ul y el texto explicativo
  clonSelectWrapper.prepend('<span id="clonselect_txt">'+textoSelect+'</span>');
  clonSelectWrapper.append('<img src="/lang/img/buscador/bus_flecha_select.jpg" id="clonselect_open" alt="Elija una sección de la página para buscar" />');
  
  // recogemos los valores del select
  var opciones = [];
  opciones = selectOriginal.find('option');
  
  //variable que almacenará los lis del select clon
  var elementos = [];
  
  //establecemos dos variables con el valor de la altura para el select clon abierto y cerrado
  var alturaApertura = "";
  var alturaOption = "";
  
  function compruebaSeleccion()
  {
     var opcionSel = jQuery('option:selected',selectOriginal);
	 var indexOpcionSel = opciones.index(opcionSel);
	 if (indexOpcionSel >= 0) 
	 {
		 return indexOpcionSel;
	 }
	 else 
	 {
		 return 0;
	 }
	
  }
  

    
  function creaElementos()
  {
	  // recorremos las opciones creando los li's
	  opciones.each(function(i)
	  {
		 jQuery('#clonselect').append('<li class="clonselect_option"></li>');
	  })
	  
	  rellenaElementos();	
  
  };
  
  creaElementos();
  
  function rellenaElementos()
  {
	  // recorremos los li's rellenandolos con su valor
	  elementos = jQuery('#clonselect').children('li');
	  
	  //numero de opciones en el select
	  numElementos = elementos.length;
	  
	  // comprobamos si hay algun elemento seleccionado, si no lo hay, seleccionamos el primero
  	  var seleccionado = compruebaSeleccion();
	  
	  //iteramos por los li's cargando el valor
	  jQuery(elementos).each(function(i)
	  {
		jQuery(this).text(jQuery(opciones[i]).text());
		
		//si el elemento se corresponde con la opción seleccionada, añadimos una clase para marcarlo	 
		if (i == seleccionado)
		{
		  jQuery(this).addClass('clonselect_selected');
		}
		
		//si hay más de un elemento, al último le asignamos una clase 
		if (numElementos > 1)
		{
			if (jQuery(this,elementos).is(':last-child'))
			{
				jQuery(this).addClass('clonselect_option_last');
			}
		}
		
	  });
	 	  
	  //cargamos los valores del select clon cuando esté abierto y cerrado
	  calculaAlturas(elementos);
  
  };
  
  //cuando el select esta cerrado, la altura del option es de 32px; cuando el select se abre, la altura es de 20px
  //así que le pasamos la altura 'a mano', más los 6px de más que tiene el último option
  function calculaAlturas(elementos) 
  {
	  alturaOption = 20;
	  alturaApertura = (alturaOption * jQuery(elementos).size()) + 6;
  }
  
  function abreycierraSelect()
  {
	  //seleccionamos el boton y le asignamos el evento click para abrir y cerrar el select
	  jQuery('#clonselect_open, .clonselect_option').click(function()
	  {
		  //cambiamos la bandera que indica el estado del select
		  switch(selectAbierto)
		  {
			  case false:
			  selectAbierto = true;
			  break;
			  case true:
			  selectAbierto = false;
			  break;
		  }
		  
		  //añadimos una clase al ul para indicar que está abierto
		  jQuery('#clonselect').toggleClass('clonselect_open',selectAbierto);
		  
		  //
		  if(selectAbierto)
		  {
				    //animamos la altura del div que envuelve al select clon
					clonSelect.animate({
					height:alturaApertura
					},1000);
          }
		  else
		  {
				    //animamos la altura del div que envuelve al select clon
					clonSelect.animate({
					height:32
					},1000);
		  }
		
	  
		  //si hemos hecho click en el li
		  if (jQuery(this).is('li'))
		  {
			  //eliminamos la clase selected de todos los li's
			  elementos.removeClass('clonselect_selected');
			  //se la añadimos al li en el que hemos hecho click
			  jQuery(this).addClass('clonselect_selected');
			  //cambiamos el valor del select que está escondido
			  var posElemento = elementos.index(this);
			  cambiaSelect(posElemento)
		  }
		  		  
	  });
  }
  
  abreycierraSelect();
  
  function cambiaSelect(index)
  {
	  var opcionSeleccionada = selectOriginal.find('option').eq(index);
	  opciones.each(function(i)
	  {
		  //jQuery(this).removeAttr('selected');
		  if (i == index) {
			  selectOriginal.val(jQuery(this).val());
		  }
		  
	  });
  }
  
}

//script que extraera los options de la tabla en la que están y los introducirá en un div

function cambiaOptions() {
	
	//seleccionamos el tr que contiene los options
	var filaOpciones = jQuery('#filatipbus');
	//eliminamos la primera celda que está vacía
	filaOpciones.find('td:first').remove();
	
	//creamos un div con una tabla y lo introducimos junto al select
	jQuery('#clonselect_wrapper').before('<div id="clonoptions_wrapper"><table id="clonoptions"><tr>'+filaOpciones.html()+'</tr></table></div>');
	filaOpciones.remove();
	
}

//script que extraera el input del buscador de la tabla en la que está y lo introducirá en un div

function cambiaInput() {
	
	//seleccionamos el tr que contiene los options
	var filaInput = jQuery('#filatextbus');
	
    //variables para almacenar el texto del input
 	var textoInput = jQuery('#filatextbus td:first').text();
		
	//creamos un div con una tabla y lo introducimos despues del select
	jQuery('#clonselect_wrapper').after('<div id="cloninput_wrapper"><div id="cloninput"></div></div>');
	
	//introducimos el input en el div correspondiente
	jQuery('input',filaInput).appendTo('#cloninput').attr('id','bus_input');
	
	//seleccionamos el boton del buscador y lo introducimos tras el input
	var boton = jQuery("#bus_boton");
	var botonClon = boton.clone();
	boton.parents('table').remove();
	
	if ($get('interfaz') == 'en')
	{
		botonClon.attr('src','/lang/img/buscador/bus_fondo_boton_in.jpg');
	}
	else
	{
		botonClon.attr('src','/lang/img/buscador/bus_fondo_boton.jpg');
	}
	
	jQuery('#cloninput').after(botonClon);
	
	//creamos el 'boton' para desplegar el ul y el texto explicativo
    jQuery('#cloninput').before('<span id="cloninput_txt">'+textoInput+'</span>');
  
 
	filaInput.remove();
	
}

jQuery(document).ready(function()
{
	//select que vamos a sustituir
 	var sel = jQuery('.select-bus');
 	reemplazaSelect(sel);
	cambiaOptions();
	cambiaInput();
});