<?php require("header.php"); ?>
<?php $OL=1; require("../calendar.php"); ?>
<table width="100%" align="center">
  <tr><td align="center"><h2>AJAX Mini Calendar Example</h2><br />
  </td>
</tr></table>
<!-- START CALENDAR DISPLAY -->
<div id="epcalencar-nav" align="center">
<table width="250" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle"><a href="javascript:void(0)" class="navTableText" data-mo="-1"><img src="../images/navPrev.png" alt="Previous" width="32" height="32" border="0" /></a></td>
    <td align="center"><div id="epcalendarmini-div"></div>
</td>
    <td align="center" valign="middle"><a href="javascript:void(0)" class="navTableText" data-mo="1"><img src="../images/navNext.png" alt="Next" width="32" height="32" border="0" /></a></td>
  </tr>
</table>
</div>
<!-- END CALENDAR DISPLAY -->

<h4 align="center">Current Time: <?php echo date("H:i:s"); ?></h4>
<p align="center">*** Only the calendar redraws when changing months. ***</p>
<p align="center">Manually refresh the page and the time will change.</p>

<!-- START AJAX CALENDAR CODE -->
<?php
// INITIALIZE MO AND YR VARIABLES FOR AJAX CALENDAR
$yr=intval($_REQUEST['yr']);
$mo=intval($_REQUEST['mo']);
if ($yr<1 || $yr>9999) $yr=date("Y");
if ($mo<1 || $mo>12) $mo=date("m");

// * IF YOUR EXISTING PAGE ALREADY CALLS JQUERY, IT CAN BE REMOVED BELOW
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
	
	// DEFINE RELATIVE PATH TO CALENDAR DIRECTORY
	var epcalPath = '../';
		
	// SET INITIAL VARIALBES
	var EPCajax = 1;
	var mo = <?php echo $mo ?>;
	var yr = <?php echo $yr; ?>;
	var showCat = '';
	var showGrp = '';
	
	// LOAD INITIAL CALENDAR STATE
	$("#epcalendarmini-div").load(epcalPath + "calendar.php",{"mo":mo,"yr":yr,"showCat":showCat,"showGrp":showGrp,"EPCajax":EPCajax});
	
	// LOAD CHANGED CALENDAR STATE
    $("#epcalencar-nav a").click(function() {
      var currentLink = $(this);
	  var moChange = Number(currentLink.attr('data-mo'));
	  mo = mo + moChange;
	  if (mo>12) {
		  mo = mo - 12;
		  yr++;
	  }
	  if (mo<1) {
		  mo = mo + 12;
		  yr--;
	  }
	  if (moChange == 0) {
		  mo = <?php echo date("m"); ?>;
		  yr = <?php echo date("Y"); ?>;
	  }
      $("#epcalendarmini-div").load(epcalPath + "calendar.php",{"mo":mo,"yr":yr,"showCat":showCat,"showGrp":showGrp,"EPCajax":EPCajax});
   });
});
</script>
<!-- END AJAX CALENDAR CODE -->

</body>
</html>