<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php $CSS=1; require("../calendar.php"); ?>
<!-- REQUIRED CSS FOR MODAL POPUPS START -->
<link href="../includes/mpop/mpop.css" rel="stylesheet">
<!-- REQUIRED CSS FOR MODAL POPUPS END -->
<title>Examples</title>
<style type="text/css">
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #333;
}
.copyright {
    font-family: Geneva, Verdana, Arial, sans-serif; 
	font-size: 10px; 
	color: #CCCCCC;
	}
body {
	margin: 0px;
}
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}
.style2 {	color: #FFFFFF;
	font-weight: bold;
}
.style3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 4px;
  width: 300px;
  max-width: 500px;
  margin: 20px auto;
}

</style>
</head>

<body>
 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
     <td bgcolor="#0172C0"><a href="index.php"><img src="../images/pageHeader.jpg" alt="header" width="740" height="80" border="0" /></a></td>
   </tr>
 </table>
 <br />
<table width="100%" align="center">
  <tr>
    <td align="center"><h2>AJAX and Modal Window 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 src="../includes/mpop/mpop.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,
		"epcm": "1"
    }, function() {
        $(document).ready(function() {
            $("[data-mpop]").click(function() {
                var currentLink = $(this);
                var evn = Number(currentLink.attr(
                    'data-mpop'));
                $.magnificPopup.open({
                    tLoading: 'Loading...',
                    type: 'ajax',
                    showCloseBtn: false,
                    closeOnContentClick: false,
                    items: {
                        src: epcalPath + 'functions/popup.php'
                    },
                    ajax: {
                        settings: {
                            type: 'GET',
                            data: {
                                "ev": evn,
                                "oc": '1'
                            }
                        }
                    }
                });
            });
        });
    });
    // 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,
		        "epcm": "1"
            }, function() {
                $(document).ready(function() {
                    $("[data-mpop]").click(function() {
                        var currentLink = $(
                            this);
                        var evn = Number(
                            currentLink
                            .attr(
                                'data-mpop'
                            ));
                        $.magnificPopup.open({
                            tLoading: 'Loading...',
                            type: 'ajax',
                            showCloseBtn: false,
                            closeOnContentClick: false,
                            items: {
                                src: epcalPath + 'functions/popup.php'
                            },
                            ajax: {
                                settings: {
                                    type: 'GET',
                                    data: {
                                        "ev": evn,
                                        "oc": '1'
                                    }
                                }
                            }
                        });
                    });
                });
            });
    });
});
</script>
<!-- END AJAX CALENDAR CODE -->

</body>
</html>