var SelectCentros = Class.create({
    //Esta clase se usará en el formulario de registro y en el de actualización de datos personales

    /* Esta clase permite anidar cuatro SELECT (en este caso Provincia, Municipio, Localidad y Centro) y cumplimnetar una input con el valor del último de los select*/
    /* Además, si se actualiza el imput se actualizarían también los Selects*/
   /* El valor del radio activará o desactivará los selects */
    /* Al producirse el evento de cambiar un select se llama a una función que actuliza el Select siguiente. Esta función usa la función cambia Select correspondiente para actulizar los datos con la respuesta ajax */ 
    form	   : null,
    radio   	   : null,
    primerSelect   : null,
    segundoSelect  : null,
    tercerSelect   : null,
    cuartoSelect   : null,
    cajaInput	   : null,

    initialize : function(form,radio,select1,select2,select3, select4,input)
    {
	this.form = $(form)
	this.radio = $(this.form.getInputs('radio',radio));
	
        this.primerSelect = $(select1);
	this.segundoSelect = $(select2);
	this.tercerSelect = $(select3);
	this.cuartoSelect = $(select4);
	this.cajaInput = $(input);
	window.onload=this.inicializaRadio.bind(this);
	this.radio[0].observe('click', this.actualizaRadio.bindAsEventListener(this));
	this.radio[1].observe('click', this.actualizaRadio.bindAsEventListener(this));
        this.primerSelect.observe('change', this.actualizaSelect.bindAsEventListener(this,1,this.segundoSelect));
	this.segundoSelect.observe('change', this.actualizaSelect.bindAsEventListener(this,2,this.tercerSelect));
	this.tercerSelect.observe('change', this.actualizaSelect.bindAsEventListener(this,3,this.cuartoSelect));
	this.cuartoSelect.observe('change', this.actualizaInput.bindAsEventListener(this)); //El último select actualiza la caja de input
	//Este último desencadenará la acción en función de los cmabios en el input
	this.cajaInput.observe('change',this.enviaInput.bindAsEventListener(this));

    },


   inicializaRadio : function(e)
   {
	//Esta función se encargará de activar o desactiva los select en función del valor de los radios al cargarse la página
	if (this.radio[1].checked) this.activaCampos(0);
	else {
		this.activaCampos(1);
		this.radio[0].value='S';
	}

   },
   actualizaRadio : function(e)
   {
	//Esta función será la encargado de activar o desactivar los selects en función del valor del radio
	if (Event.element(e).value=='N') {
		this.activaCampos(0);
	}else if (Event.element(e).value=='S') {
		this.activaCampos(1);
	}
   },
   activaCampos : function(accion)
   {
	switch (accion) {
		case 0:
			this.cajaInput.disable();
			this.cajaInput.value='';
			this.primerSelect.value=-1;
			this.primerSelect.disable();
			this.segundoSelect.value=-1;
			this.segundoSelect.disable();
			this.tercerSelect.value=-1;
			this.tercerSelect.disable();
			this.cuartoSelect.value=-1;
			this.cuartoSelect.disable();
			break;
		case 1 :
			this.cajaInput.enable();
			this.primerSelect.enable();
			this.segundoSelect.enable();
			this.tercerSelect.enable();
			this.cuartoSelect.enable();
			break;
	}
   },	 
   actualizaSelect : function(e,posicion,select)
    {
	//Esta función envía los datos de un select y reinicia los siguientes. Luego la función cambiaSelect actualizará los datos del sguiente		
	var parametros;
	switch (posicion) {
		case 1:
			parametros="cambiaSelect=municipios&provincia="; //Parámetros para el segundo Select
			//Ahora borramos el resto de los selects
			html="<option value='-1'>Seleccione "+this.segundoSelect.name+"</option>";
			select_innerHTML(this.segundoSelect,html);
			html="<option value='-1'>Seleccione "+this.tercerSelect.name+"</option>";
			select_innerHTML(this.tercerSelect,html);
			html="<option value='-1'>Seleccione "+this.cuartoSelect.name+"</option>";
			select_innerHTML(this.cuartoSelect,html);
			break;
		case 2:
			parametros="cambiaSelect=localidades&provincia="+this.primerSelect.value+"&municipio=";//Parámetros para el tercer Select
			html="<option value='-1'>Seleccione "+this.tercerSelect.name+"</option>";
			select_innerHTML(this.tercerSelect,html);
			html="<option value='-1'>Seleccione "+this.cuartoSelect.name+"</option>";
			select_innerHTML(this.cuartoSelect,html);
			break;
		case 3:
			parametros="cambiaSelect=centros&provincia="+this.primerSelect.value+"&municipio="+this.segundoSelect.value+"&localidad=";
			html="<option value='-1'>Seleccione "+this.cuartoSelect.name+"</option>";
			select_innerHTML(this.cuartoSelect,html);
			break;
	}
	//Si se ha seleccionado la opción por defecto de algún select borremos la caja del input y no efectuamos la consulta
	if (Event.element(e).value=='-1') {
		this.cajaInput.value ='';		
		return;
	}
	var options = {
	    method     : 'post',
            parameters :parametros+Event.element(e).value, 
            onSuccess  : this.cambiaSelect.bind(this,select)
        };
        new Ajax.Request('/usuarios/seleccionacentro', options);
    },
    
    actualizaInput : function(e)
    {
	//Esta función actualiza el input en función del último select
	this.cajaInput.value =Event.element(e).value;
    },
    cambiaSelect : function(select,transport)
    {
	//Es la función de modificar el contenido de los Select en función de lo recibido
	var respuesta = transport.responseText.evalJSON(true);
	var contenido = $H(respuesta.contenido);
	var salida;
	salida="<option value='-1'>Seleccione "+$A(arguments)[0].name+"</option>";
	if (contenido.size() > 0) {
	    contenido.each(function(pair) {
		salida +="<option value="+"'"+pair.key+"'>"+pair.value+"</option>";
               
            }.bind(this));
        }
        else {}
	select_innerHTML($($A(arguments)[0].id),salida);	
    },
    //A partir de aquí ponemos funciones que se encargarán de modificar los select en función de lo introducido en la caja input
    
    enviaInput   : function(e)
   {
	//Esta función se usará para actualizar todos los select en función de lo introducido en la caja de input
	//en concreto esta función envía la consulta Ajax y manda la respuesta a la función cambiaTodo	
	var options = {
	    method     : 'post',
            parameters :'codigoCentro='+Event.element(e).value, 
            onSuccess  : this.capturaDatosSelect.bind(this)
        };
	
        new Ajax.Request('/usuarios/cargacentro', options);
   },
    capturaDatosSelect : function(transport)
    {
	var respuesta = transport.responseText.evalJSON(true);
	var contenido = $H(respuesta.contenido);
	var errores = $H(respuesta.errores);
	if (contenido.size() > 0) {
		//Ocultamos la cajita de error por si habia un error previo
		this.ocultaError();
		//Una vez que hemos recibido el contenido ponemos actualizamos todos los select empezando por el de las provincias
		this.actualizaTodo(contenido.get('provincia'),contenido.get('municipio'),contenido.get('localidad'),contenido.get('codigo'));		
	} else if (errores.size()>0) {
            	errores.each(function(pair) {              		 
			this.muestraError(pair.key, pair.value);
            	}.bind(this));
	}
    },
    muestraError : function(key, val)
    {
	//Esta función es para mostrar el error
        var container = this.cajaInput.up().down('.error');
        if (container) {
            container.update(val);
            container.show();
        }
	//Reseteamos los select
	this.primerSelect.value="-1";
	html="<option value='-1'>Seleccione "+this.segundoSelect.name+"</option>";
	select_innerHTML(this.segundoSelect,html);
	html="<option value='-1'>Seleccione "+this.tercerSelect.name+"</option>";
	select_innerHTML(this.tercerSelect,html);
	html="<option value='-1'>Seleccione "+this.cuartoSelect.name+"</option>";
	select_innerHTML(this.cuartoSelect,html);
    },
    ocultaError : function()
    {
	//Esta función es para mostrar el error
        var container = this.cajaInput.up().down('.error');
        if (container) {
            container.update('');
            container.hide();
        }
    },
    actualizaTodo : function(provincia,municipio,localidad,centro)
    {	
	//Esta función será la encargada de actulizar todos los select en función de los datos recibidos
	var opciones0 = {
	    method     : 'post',
            parameters :'cambiaSelect=municipios&provincia='+provincia, 
            onSuccess  : this.cambiaSelect2.bind(this,this.segundoSelect,municipio)
        };
	//Opciones para el segundo select
	var opciones1 = {
	    method     : 'post',
            parameters :'cambiaSelect=localidades&provincia='+provincia+'&municipio='+municipio, 
            onSuccess  : this.cambiaSelect2.bind(this,this.tercerSelect,localidad)
        };
	//Opciones para el tercer select
	var opciones2 = {
	    method     : 'post',
            parameters :'cambiaSelect=centros&provincia='+provincia+'&municipio='+municipio+'&localidad='+localidad, 
            onSuccess  : this.cambiaSelect2.bind(this,this.cuartoSelect,centro)
        };
	this.primerSelect.value=provincia;
        new Ajax.Request('/usuarios/seleccionacentro', opciones0);
	new Ajax.Request('/usuarios/seleccionacentro', opciones1);
	new Ajax.Request('/usuarios/seleccionacentro', opciones2);
    },
    cambiaSelect2 : function(select,valor,transport)
    {
	//Es la función de modificar el contenido de los Select en función de lo escrito en el campo input
	var respuesta = transport.responseText.evalJSON(true);
	var contenido = $H(respuesta.contenido);
	var salida;
	salida="<option value='-1'>Seleccione "+$A(arguments)[0].name+"</option>";
	if (contenido.size() > 0) {
	    contenido.each(function(pair) {
		salida +="<option value="+"'"+pair.key+"'>"+pair.value+"</option>";
               
            }.bind(this));
        }
        else {}
	select_innerHTML($($A(arguments)[0].id),salida);
	$($A(arguments)[0].id).value=valor;

    }
});