/*
Autor: http://www.niquelao.net
Puedes utilizar líbremente este script respetando estas línea de comentarios.
También puedes modificarlo líbremente. Cualquier mejora será bienvenida.
*/
// Se revisan todos los formularios del documento, así como todos los campos que vamos
// a controlar mediante este script.
var forms =	document.getElementsByTagName('form');
var inputs = document.getElementsByTagName('input');
var textareas =	document.getElementsByTagName('textarea');
var selects = document.getElementsByTagName('select');
var labels = document.getElementsByTagName('label');
// Guardamos los valores iniciales
var valorinicial = new Array();

var obligatorio = new Array();

// Guardamos los estilos iniciales
var labelestilo = new Array();
var campoestilo = new Array();


// Esta función asigna a los campos en los que se puede introducir texto las funciones
// necesarias para vaciar su contenido o restaurarlo al original según las circunstancias.
// Además comprueba qué campos son los obligatorios y almacena dicha información.
function formulario() {
	for (var i = 0; i < inputs.length; i++) {
		if((inputs[i].type == 'text') || (inputs[i].type == 'password')) { 
			valorinicial[inputs[i].id]=inputs[i].value;
			inputs[i].onfocus = function() {vacia(this.id,this.value)}
			inputs[i].onblur = function() {restaura(this.id,this.value)}
		}
	}
	for (var i = 0; i < textareas.length; i++) { 
		valorinicial[textareas[i].id]=textareas[i].value;
		textareas[i].onfocus = function() {
			vacia(this.id,this.value)
		}
		textareas[i].onblur = function() {
			restaura(this.id,this.value)
		}
	}
	for (var i = 0; i < selects.length; i++) { 
		valorinicial[selects[i].id]=selects[i].value;
	}

	for (var i = 0; i < forms.length; i++) {
		// Al ir a enviarse el formulario , se restauran los estilos y se comprueba que los campos
		// obligatorios se han rellenado.
		forms[i].onsubmit = function() {
			clear(this.id);
			comprobacionyenvio(this.id);
			return false
		}
	}
	// Dando por sentado que el marcado es el correcto y que todos los campos de formulario
	// poseen su correspondiente label asociado, revisamos los labels para identificar
	// dicho campo. Posteriormente, dicha información se guardará en el caso de que 
	// encontremos un campo obligatorio
	for (var i = 0; i < labels.length; i++) {
		asociado = labels[i].htmlFor;
		var elasociado = document.getElementById(asociado);
		contlabel = labels[i].innerHTML;
		// La obligatoriedad o no de un campo podrá establecerse de diferentes maneras en el marcado.
		// Este script cubre las posibilidades de que la clase o el contenido del label o la clase del input asociado a dicho label
		// sea el término "obligatorio", o incluso que el contenido del label incluya un asterísco (*). Puede utilizarse uno solo de estos
		// métodos, con lo que el script se puede adaptar.
		if((contlabel.indexOf('*') > -1) || (labels[i].className.indexOf('obligatorio') > -1) || (elasociado.className.indexOf('obligatorio') > -1)){
			obligatorio[asociado] = true;
			labelestilo[asociado] = labels[i].className;
			campoestilo[asociado] = elasociado.className;
		}
	}
}


// Esta función vacía los campos únicamente cuando su contenido sea el mismo que el inicial
function vacia(id,valor){
		var targetElement = document.getElementById(id);
	var tipo = targetElement.type;
	switch ( tipo ) { 
		case 'text':
			if (valorinicial[id] == valor)
				targetElement.value = '';
			break
		case 'password':
			if (valorinicial[id] == valor)
				targetElement.value = '';
			break
		case 'textarea':
			if (valorinicial[id] == valor) {
				targetElement.innerHTML = '';
				targetElement.value = '';
			}
			break
	}
}

// Esta función restaura el contenido de los campos en el caso
// de no haber introducido nada o úncicamente espacios en blanco
// Restauramos el contenido de los campos en el caso
// de no haber introducido nada o úncicamente espacios en blanco
function restaura(id){
    var targetElement = document.getElementById(id);
	var tipo = targetElement.type;
	switch ( tipo ) { 
		case 'text':
			if (targetElement.value.replace(/ /g, '') == '')
				targetElement.value = valorinicial[id];
				break
		case 'password':
			if (targetElement.value.replace(/ /g, '') == '')
				targetElement.value = valorinicial[id];
				break
		case 'textarea':
			revisa = targetElement.value.replace(/ /g, '');
			// Eliminamos saltos de línea y tabulaciones
			revisa = revisa.replace(/\n/g, '')
			revisa = revisa.replace(/\t/g, '')
			revisa = revisa.replace(/\r/g, '')
			if (revisa == '') {
				targetElement.innerHTML = valorinicial[id];
				targetElement.value = valorinicial[id];
			}
			break
	}
}

// Esta función devuelve el identificador de elemento parental del tipo que le indiquemos
// respecto al elemento que se le pase
function padre(element, pTagName) {
	if (element == null) return null;
	else if (element.nodeType == 1 && element.tagName.toLowerCase() == pTagName.toLowerCase())
		return (element.id)
	else
		return padre(element.parentNode, pTagName);
}

// Esta función restaura los estilos a los iniciales en el formulario en cuestión
function clear(id) {
	var targetElement = document.getElementById(id);
	for (var i = 0; i < labels.length; i++) {
		if(padre(labels[i], 'form') == id){
			asociado = labels[i].htmlFor;
			elasociado = document.getElementById(asociado);
			labels[i].className = labelestilo[asociado]
			elasociado.className = campoestilo[asociado]
		}
	}
}

// Esta función controla que los campos obligatorios no sean como los valores originales
// y envía el formulario si esta circunstancia se cumple
function comprobacionyenvio(id) {
	var targetElement = document.getElementById(id);
	for (var i = 0; i < labels.length; i++) {
		asociado = labels[i].htmlFor;
		var elasociado = document.getElementById(asociado);
	}

	var new_stock = document.createElement('ul');
	new_stock.id = 'lista_errores';
	for (var i = 0; i < labels.length; i++) {
		if(padre(labels[i], 'form') == id){
			asociado = labels[i].htmlFor;
			var elasociado = document.getElementById(asociado);
			if(obligatorio[asociado]) {
				if(valorinicial[elasociado.id] == elasociado.value) {
					var error = true;
					labels[i].className = 'error';
					elasociado.className = 'error';
					var new_item = document.createElement('li');
					var texto = document.createTextNode(labels[i].innerHTML);
					new_item.appendChild(texto);
					new_stock.appendChild(new_item);
				}else if(elasociado.type == 'textarea' && valorinicial[elasociado.id] == elasociado.innerHTML){
					var error = true;
					labels[i].className = 'error';
					elasociado.className = 'error';
					var new_item = document.createElement('li');
					var texto = document.createTextNode(labels[i].innerHTML);
					new_item.appendChild(texto);
					new_stock.appendChild(new_item);
				}else if(elasociado.type == 'checkbox' && !elasociado.checked){
					var error = true;
					labels[i].className = 'error';
					elasociado.className = 'error';
					var new_item = document.createElement('li');
					var texto = document.createTextNode(labels[i].innerHTML);
					new_item.appendChild(texto);
					new_stock.appendChild(new_item);
				}
			}
		}
	}
	if (!error){
		document.forms[targetElement.id].submit()
	}else {
		if (document.getElementById('contenedor_error'))
		targetElement.removeChild(document.getElementById('contenedor_error'));
		var contenedor_error = document.createElement('div');
		contenedor_error.id = 'contenedor_error';
		var error_alert = document.createElement('p');
		error_alert.id = 'error_alert';
		var texto_de_alerta = 'Los siguientes campos son obligatorios. ';
		texto_de_alerta += 'no los ha cumplimentado correctamente:';
		var error_alert_text = document.createTextNode(texto_de_alerta);
		error_alert.insertBefore(error_alert_text,error_alert.firstChild);
		contenedor_error.insertBefore(new_stock,contenedor_error.firstChild);
		contenedor_error.insertBefore(error_alert,contenedor_error.firstChild);
		targetElement.insertBefore(contenedor_error,targetElement.firstChild);
		var ancla = location.href;
		if(ancla.indexOf('#error_alert') > -1) {
			location.href = ancla
		}else{
			location.href = ancla + "#error_alert"
		}
	}
}

window.onload = formulario;