<html>
<head>
<style type="text/css">
.tabla{ border-collapse:collapse; border-bottom:1px black;}
.tabla td { border-bottom:1px solid black;}
.loading{position:fixed;left:50%;top:50%;width:250px;height:70px;margin-left:-125px;margin-top:-35px;display:none;background:url(images/bkloading.png);background-repeat:no-repeat;color:#ffffff;padding-top:25px;text-align:center;font-family:arial;font-size:12px;}</style>
<style>
html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
	margin:0;
	padding:0;
		}
body {
	background: #fff url(graphics/bg-body.gif) repeat-x;
	font:12px "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
	}
p {
	text-align:center;
	}	
a:link {
	color:#d42945;
	text-decoration:none;
	border-bottom:1px dotted #ffbac8;
	}	
a:visited {
	color:#d42945;
	border-bottom:none;
	text-decoration:none;
	}		
a:hover,
a:focus {
	color:#f03b58;
	border-bottom:1px solid #f03b58;
	text-decoration:none;
	}
table a,
table a:link,
table a:visited {
	border:none;
	}							
	
img {
	border:0;
	margin-top:.5em;
	}	
table {
	border-top:1px solid #e5eff8;
	border-right:1px solid #e5eff8;
	margin:1em auto;
		border-collapse:collapse;
	}
caption {
	color: #000;
	font-size:.94em;
		letter-spacing:.1em;
		margin:1em 0 0 0;
		padding:0;
		caption-side:top;
		text-align:center;
	}	
tr.odd td	{
	background:#f7fbff
	}
tr.odd .column1	{
	background:#f4f9fe;
	}	
.column1	{
	background:#f9fcfe;
	}
td {
	color:#678197;
	border-bottom:1px solid #e5eff8;
	border-left:1px solid #e5eff8;
	padding:.3em 1em;
	text-align:center;
	}				
th {
	font-weight:normal;
	color: #678197;
	text-align:left;
	border-bottom: 1px solid #e5eff8;
	border-left:1px solid #e5eff8;
	padding:.3em 1em;
	}							
thead th {
	background:#f4f9fe;
	text-align:center;
	font:bold 12px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	color:#66a3d3
	}	
tfoot th {
	text-align:center;
	background:#f4f9fe;
	}	
tfoot th strong {
	font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	margin:.5em .5em .5em 0;
	color:#66a3d3;
		}		
tfoot th em {
	color:#f03b58;
	font-weight: bold;
	font-size: 1.1em;
	font-style: normal;
	}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#periodo").click(function(){
   y=document.getElementById("periodo").value;
   mes=document.getElementById("mes").value;
   anio=document.getElementById("anio").value;
 
   var d = new Date();
   var m = d.getMonth();
   var a = d.getFullYear();
   m=parseInt(m+1);
   if(anio==a&&mes>m)
   { 
   alert("La fecha aun no llega");
   }
   else{
		  if(y=="01")
			{
			$(".loading").fadeIn('fast');load=true;
			$.post("nominasver2.php",{anio:anio,mes:mes,periodo:y},function(data,status){
			$("#contenido").html(data); });	
			}
		  if(y=="02")
			{
			$(".loading").fadeIn('fast');load=true;
			$.post("nominasver2.php",{anio:anio,mes:mes,periodo:y},function(data,status){
			$("#contenido").html(data); });	
			}
		  if(y=="03")
			{
			$(".loading").fadeIn('fast');load=true;
			$.post("nominasver2.php",{anio:anio,mes:mes,periodo:y},function(data,status){
			$("#contenido").html(data); });	
			}
		}
	});	
});
//nominaPrimerPeriodo
</script>
<title>Ver Nomina</title>
</head>
<body>
<form>
<center>
<form name="form" id="form">
<table>
<caption>Selecciona la fecha y el periodo </caption>
<tr><td>A&ntilde;o</td><td>Mes</td><td>Periodo</td></tr>
<tr>
<td>
<select id="anio" name="anio">
<?
$anio=date("Y");
while($anio>=2012)
{ echo"<option value='$anio'>$anio</option>";$anio--; }
echo"</select>";


?>
</td>
	<td>	
		<select id="mes"  name="mes">
			<option <?if(date("m")=="01"){echo"selected=selected";}?>  value="01">ENERO</option>
			<option <?if(date("m")=="02"){echo"selected=selected";}?>  value="02">FEBRERO</option>
			<option <?if(date("m")=="03"){echo"selected=selected";}?>  value="03">MARZO</option>
			<option <?if(date("m")=="04"){echo"selected=selected";}?>  value="04">ABRIL</option>
			<option <?if(date("m")=="05"){echo"selected=selected";}?>  value="05">MAYO</option>
			<option <?if(date("m")=="06"){echo"selected=selected";}?>  value="06">JUNIO</option>
			<option <?if(date("m")=="07"){echo"selected=selected";}?>  value="07">JULIO</option>
			<option <?if(date("m")=="08"){echo"selected=selected";}?>  value="08">AGOSTO</option>
			<option <?if(date("m")=="09"){echo"selected=selected";}?>  value="09">SEPTIEMBRE</option>
			<option <?if(date("m")=="10"){echo"selected=selected";}?>  value="10">OCTUBRE</option>
			<option <?if(date("m")=="11"){echo"selected=selected";}?>  value="11">NOVIEMBRE</option>
			<option <?if(date("m")=="12"){echo"selected=selected";}?>  value="12">DICIEMBRE</option>
		</select>
	</td>
	<td>
		<select id="periodo" name="periodo">
			<option  value="0" >Selecciona el periodo</option>
			<option  value="01">Primero</option>
			<option  value="02">Segundo</option>
			<option  value="03">Quincena</option>
		</select>
	</td>
</tr>
</table>
</form>
<div class="contenido" id="contenido"></div>
				<div class="loading">
			      <img src="images/loading.gif"><br>cargando datos...
				</div>
</center>
</body>
</html>