<link href="catalogo.css" rel="stylesheet" type="text/css" />

<form action="ayuda_respuesta.php" method="post" enctype="multipart/form-data" name="ayudaform" onsubmit="validarForm('email','nombreapellido','comentarios'); return document.respuestaValidador">
            <p>&nbsp;</p> 
            <p>&nbsp;</p> 
            <p>&nbsp;</p> 
            <p>&nbsp;</p> 
            <h2 align="center">
            <a href="index.php">
        	<img src="imagenes/logo_nuevo.png" width="3%" height="3%" style="vertical-align:middle; margin-top:-10px; margin-left:25px">
            </a>
            
        	<?php echo $diccionario['no_resultados_para_busqueda']; ?>
        	</h2>
        	
    <section>
    	<article class="fila1" style="float:left;width:49%;">
        	<div style="overflow:hidden">
                <p>&nbsp;</p>
                <h1><?php echo $diccionario['no_encuentras'];?> </h1> 
                <p>&nbsp;</p>
                <p align="center"><h3><?php echo $diccionario['contactanos'];?></h3></p>
                <p>&nbsp;</p> 
                <p>&nbsp;</p>            
                <p>
                    <input id="nombreapellido" name="nombreapellido" type="text" class="controles_contacto" value="" placeholder="<?php echo $diccionario['nombre_apellido']; ?>" size="30" maxlength="50" />
                </p>
                <p>&nbsp;</p>
                <p>
                    <input id="email" name="email" type="text" class="controles_contacto" value="" placeholder="<?php echo $diccionario['email']; ?>" size="30" maxlength="80" />
                </p>
                <p>&nbsp;</p>
                <p>
                     <input name="telefono" type="text" class="controles_contacto" value="" placeholder="<?php echo $diccionario['telefono']; ?>" size="30" maxlength="30" />
                </p>
                <p>&nbsp;</p>
                <p>
                    <textarea name="comentarios" id="comentarios" class="controles_contacto" cols="30" rows="11" value="" placeholder="<?php echo $diccionario['comentarios']; ?>"></textarea>
                </p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
			</div>
		</article>
        <article class="fila2" style="float:left;width:49%;">
            <div style="overflow:hidden;">
                <input id="numero_figura" name="numero_figura" value="1" type="hidden"/>
                <p>&nbsp;</p>
                <div class="encabezado_tabla_datos">
                      <?php echo $diccionario['elija_pieza']; ?>
                </div>
                <div style="text-align:right;width:95%;font-size:1em;"> 
                	<?php echo $diccionario['datos_no_obligatorios']; ?>
                </div>
                <div>
                	<div style="float:left; margin-top:16.2%">
                    <a href="javascript:Recargar('-1')"> 
                        <img src="imagenes/Figuras_ayuda/left_arrow.png" width="40px" height="65px"/> 
                    </a>
                    </div>

                    <div id="imagen_pieza" style="text-align:center">

                        <img src="imagenes/Figuras_ayuda/Figura1.png" width="60%" height="60%" />
                    </div>
                    <div style="float:right; margin-top:-40%;" >
                    <a href="javascript:Recargar('1')"> 
                        <img src="imagenes/Figuras_ayuda/right_arrow.png" width="40px" height="65px" /> 
                    </a>
                    </div>
                </div>
                <div class="encabezado_tabla_datos">
                      <?php echo $diccionario['complete_dimensiones']; ?>
                </div>
                <div style="text-align:right;width:95%;font-size:1em;"> 
                	<?php echo $diccionario['datos_no_obligatorios']; ?>
                </div>
                <div class="container">
                    <div class="table-row">
                        <div class="col">
                            <p>&nbsp;</p>
                            <p>
                            	<input id="campo1" name="campo1" type="text" class="controles_contacto" value="" placeholder="<?php echo $diccionario['diametro_munion'];?>"/>                 
                            </p>
                            <p>&nbsp;</p>
                        </div>
                        <div class="col">
                             <p>&nbsp;</p>
                             <p>
                             	<input id="campo2" name="campo2" type="text" class="controles_contacto"  value="" placeholder="<?php echo $diccionario['a1_a2_b1_d2'];?>" /> 
                             </p>
                             <p>&nbsp;</p>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="col">
                             <p>&nbsp;</p>
                             <p>
                             	<input id="campo3" name="campo3" type="text" class="controles_contacto"  value="" placeholder="<?php echo $diccionario['c1_c1prima'];?>" />
                             </p>
                             <p>&nbsp;</p>
                        </div>
                            <div class="col">
                            <p>&nbsp;</p>
                            <p>
                            	<input id="campo4" name="campo4" type="text" class="controles_contacto"  value=""  placeholder="<?php echo $diccionario['c2_c3_c4_d1']; ?>" />
                            </p>
                            <p>&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
    	</article>
    <section>
    <p>&nbsp;</p> 
    <p>
    	<input type="submit" value="<?php echo $diccionario['enviar']; ?>" style="width:20%" class="controles_contacto"/>
    </p>  
    <p>&nbsp;</p>
		<input id="chequeo" name="chequeo" value="cf7776310d3f0bd953190c38f65b006a" type="hidden"/>
</form>
<script type="text/javascript">
	function validarForm() {
		if (document.getElementById){
			var campo = '', errores = '', args = validarForm.arguments;
			for (i = 0; i < (args.length); i++) {  
				campo = document.getElementById(args[i]);

				if (campo.value != "" && campo.value.trim() != ""){ 
					if (campo.name.indexOf('mail') > 0){
						if (campo.value.indexOf('@') < 1) {								
							errores += '- ' + '<?php echo $diccionario['email'] . ' ' . $diccionario['debe_ser_email_valido']; ?>' + '.\n';
						}
					}
				}
				else{
					errores += '- ' + campo.placeholder + '<?php echo ' ' . $diccionario['es_requerido']; ?>' + '.\n';
				}
			} 
			
			if (errores != '')
				alert('<?php echo $diccionario['corrija_siguientes_errores']; ?>' + ':\n' + errores);
				
			document.respuestaValidador = (errores == '');
		} 
	}
	
	 function Recargar(accion) {
        var ajax = ajaxFunction();
        function ajaxFunction() {
            var xmlHttp;
            try {
                // Firefox, Opera 8.0+, Safari
                xmlHttp=new XMLHttpRequest();
                return xmlHttp;
            } 
            catch (e){
                // Internet Explorer
                try {
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                    return xmlHttp;
                } 
                catch(e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        return xmlHttp;
                    } 
                    catch(e){
                        alert("Tu navegador no soporta AJAX!");
                        return false;
                    }
                }
            }
        }
		var nroFig = parseInt(document.getElementById('numero_figura').value);
		if (accion == "1"){
			if (nroFig >= 4){
				nroFig = 1;
			}
			else{
				nroFig += 1; 
			}
		}
		else{
			if (nroFig <= 1){
				nroFig = 4;
			}
			else{
				nroFig -= 1; 
			}
		}
        ajax.open("POST", "ayuda_imagen_medidas.php?numeroPieza=" + nroFig , true);
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajax.onreadystatechange = function(){
            if (ajax.readyState == 4){
				document.getElementById('numero_figura').value = nroFig;
                document.getElementById("imagen_pieza").innerHTML = ajax.responseText;
				document.getElementById('campo1').value = "";
				document.getElementById('campo2').value = "";
				document.getElementById('campo3').value = "";
				document.getElementById('campo4').value = "";
				if (nroFig <= 6){  //es Cruceta
					document.getElementById('campo1').placeholder = "<?php echo $diccionario['diametro_munion'];?>";
					document.getElementById('campo2').placeholder = "<?php echo $diccionario['a1_a2_b1_d2'];?>";
					document.getElementById('campo3').placeholder = "<?php echo $diccionario['c1_c1prima'];?>";
					document.getElementById('campo4').placeholder = "<?php echo $diccionario['c2_c3_c4_d1'];?>";
				}
				else if (nroFig <= 7){ //es Triceta
					document.getElementById('campo1').placeholder = "<?php echo $diccionario['estrias_z'];?>";
					document.getElementById('campo2').placeholder = "<?php echo $diccionario['di'];?>";
					document.getElementById('campo3').placeholder = "<?php echo $diccionario['c1'];?>";
					document.getElementById('campo4').placeholder = "<?php echo $diccionario['h_h1'];?>";
				}
				else{ //es Mov. Univ.
					document.getElementById('campo1').placeholder = "<?php echo $diccionario['f1f2'];?>";
					document.getElementById('campo2').placeholder = "<?php echo $diccionario['d1d2'];?>";
					document.getElementById('campo3').placeholder = "<?php echo $diccionario['e1'];?>";
					document.getElementById('campo4').placeholder = "<?php echo $diccionario['e2'];?>";
				}
            }
        }
        ajax.send(null);
    }
</script>