	<?php
// This results in an error.
// The output above is before the header() call
	if(!isset($_COOKIE["token"])) {
		header('Location: http://www.huddle.ca/login.html');
		die("Please Login...");
	}
?> 

<!DOCTYPE html>

<html>
	<head>
		<title>Summer/Fall Events Calendar</title>
		<meta charset="UTF-8">
		<meta name="description" content="Events Calendar">
		<meta name="keywords" content="HTML, CSS, XML, JavaScript">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="pragma" content="no-cache" />	
		<link rel="icon" type="image/png" href="http://huddle.ca/images/calendar.png" />
		<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lemon" />
		<style>
			body, div, td {font-family: Sans-serif; box-sizing: border-box}
			a {text-decoration: none; border: 0px none white}
			hr {width: 70%; border: 0; height: 1px; margin: 0px auto; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));}
			label {text-shadow: 1px 1px PaleGoldenRod ;font-weight: bold}
			input,select, .ae_style {color: Green; border: 2px inset #B4CFEC; margin-bottom: 5pt; padding: 3pt 5pt 2pt 6pt; border-radius: 10px}
			button {background: #34add9; background-image: linear-gradient(to bottom, #34add9, #2372a3); border-radius: 28px; color: #ffffff; font-size: 16px; padding: 10px 20px 10px 20px; text-decoration: none; border-width: 1px}
			p {padding: 0px; margin: 2px 0px}
			.month_name {color: DarkSlateGrey; border: 0px inset none; font-family: cursive; font-weight: bold; text-shadow: 2px 2px 5px rgba(99, 96, 94, 0.54); font-size: 18pt; text-align: center; padding: 5pt 1pt; border-radius: 10px; transition: max-height 800ms ease-in; max-height: 32pt; white-space: nowrap; overflow: hidden}
			.month_name {color: DarkSlateGrey; border: 0px inset none; font-family: cursive; font-weight: bold; text-shadow: 2px 2px 5px rgba(99, 96, 94, 0.54); font-size: 18pt; text-align: center; padding: 5pt 1pt; border-radius: 10px; white-space: nowrap; height: auto; max-height: 500px}

			.month_name:hover {max-height: 400px}
			.day_name {color: Navy; font-variant: small-caps; text-align: center; width: 100%}
			.month_box {color: Navy; border: 2px solid MediumTurquoise; vertical-align: top; border-radius: 5px; width: 10pt}
			.month_number {font-size: 16pt; font-family: Lemon; width: 100%; text-align: center}
			.e_line {position: relative; top: 0px; left: 0px; display: block; white-space: nowrap; font-size: 10pt; padding-left: 14px ;text-indent: -14px ;}
			.etime {color: MidnightBlue; font-family: Monospace; opacity: .3; float: right}

			.calendar {width: 100%; border-collapse: separate; border-spacing: 2pt 2pt;}
			.e_block {position: relative; top: 0px; left: 0px; vertical-align: top; border: 1px solid Gainsboro; background: Gainsboro; border-radius: 5px; padding: 3pt 3pt; background: linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(181,198,208,1) 48%,rgba(216,225,231,1) 56%,rgba(224,239,249,1) 100%)}
			.ico_block {position: absolute; bottom: 5pt; right: 5pt; opacity: .5}
			.e_location {font-size: 9pt; LightSlateGray}
			.e_deleted {color: red; font-size: 9pt}
			.e_holiday {width: 99; text-align: center; font-weight: bold; color: SeaGreen}
			#img_add_event {position: fixed; right: 6pt; bottom: 6pt; opacity: .8; width: 64px; cursor: pointer}
			#edit_box {width: 100%; display: none; background: LightBlue; border: 5px Navy solid; border-radius: 7px; border-collapse: separate; border-spacing: 2pt 2pt; padding: 0px 0px 5pt 0px}
			#history_img {cursor: pointer; border: 0px none white}
			.add_event {}
			#ae_title {background: Navy; color: LightCyan; text-align: center; font-weight: bold; font-family: "Lemon"; padding: 0px 10pt 4pt 10pt}
			#ae_start_date_desc {font-size: .7em; padding: 0px 0px 0px 5pt; margin-top: 0px}
			#ae_date_repeat {opacity: .4; vertical-align: middle;}
			#td_ae_repeat {display: none}

			#month_peek {position: fixed; top: 5px; right: 10px; opacity: .5; background: radial-gradient(circle, white, rgba(250,0,0,0) 30%); font-size: 14pt; font-weight: bold; padding: 5pt 10pt; transition: opacity 4s ease-in 0s;}
			
			.ae_style {color: Green}
			.e_menu {max-width: 15px; overflow-x: hidden; text-overflow: clip; white-space: nowrap; padding-right: 6pt; transition: max-width 800ms ease-in; border: 2px groove CadetBlue; border-style: none none none none}
			.e_menu:hover {max-width: 300px; border-style: none solid none none}
			
			.tiny_cal_tbl {width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12pt; color: gray; margin: 8pt 0px 5pt 0px}
			.tiny_cal_tbl th {color: white; background: gray; text-align: center; vertical-align: top; font-size: 8pt; font-weight: bold}
			.tiny_cal_tbl td {background: LightSteelBlue; text-align: right; vertical-align: top; font-size: 8pt; text-shadow: none; padding: 3px 5pt 10pt 0px; cursor: pointer}
			.btn {text-shadow: 1px 1px 3px #666666; font-family: Arial; color: #ffffff; font-size: 15px; padding: 5px 20px 6px 20px;text-decoration: none; } 
		</style>
	</head>
	<script src="/javascript/m.calendar.js?ver=6.21"></script>
	<body onload="init()">
		<!--
		<img id="img_add_event" src="/images/if_add-event_47974.png" onclick="show_edit_box()">
		-->
		<div id="edit_box">
			<div id="ae_title">Add Event</div>
			<div style="padding: 9pt 12pt">
			<label for="ae_name">Event Name:</label><br><input id="ae_name" class="ae_style" style="width: 95%"><br>
			<label for="ae_location">Event Location:</label><br><input id="ae_location" list="ae_list_locations" class="ae_style" style="width: 95%"><? include ("locations.dat"); ?><br>
			<label for="ae_url">Event URL:</label><br><input id="ae_url" class="ae_style" type="url" style="width: 95%"><br>
			<table>
				<tr><td><label for="ae_start_date">Start Date:</label></td><td><input id="ae_start_date" type="date" class="ae_style" oninput="update_end_date()"> <img src="/images/if_Gnome-Media-Playlist-Repeat-32_55080.png" id="ae_date_repeat" onclick="show_hide_repeat()"><br><div id="ae_start_date_desc"></div></td></tr>
				<tr id="td_ae_repeat"><td><label for="ae_start_date">Repeat:</label></td><td><select id="ae_repeat_option"><option value="44">Weekly</option><option value="66">Bi-Weekly</option><option value="88">Monthly</option></select>
				<tr><td><label for="ae_end_date">End Date:</label></td><td><input id="ae_end_date" type="date" class="ae_style"></td></tr>
				<tr><td><label for="ae_category">Category</label></td><td>
				<select id="ae_category">
					<option value="T">Tentative</option>
					<option value="X">Xavier</option>
					<option value="P">Pascale</option>
					<option value="C">Confirmed</option>
					<option value="Q">Private</option>
					<option value="H">Holiday</option>
					<option value="A">Annual</option>
				</select>
				</td></tr>			
				<tr><td style="text-align: center" colspan="2"><button onclick="edit_box_save()">Save</button>&nbsp;<button onclick="edit_box_close()">Cancel</button>&nbsp;<img src='images/reminder.png' style='height: 20px; float: right'></td></tr>
				</table>
			</div>
		</div>
		<div id="content">&nbsp;</div>
		<div id="month_peek"></div>
	</body>
		<script type="text/javascript">
	<?
		$con=mysqli_connect("localhost","shadenyx_user","@JwqiR!%Z5roc$","proactive");

		// Check connection
		if (mysqli_connect_errno($con)) {
			echo "Failed to connect to MySQL: " . mysqli_connect_error();
		}
		
		$alternate_date = $_GET["sd"];
		$first_day = date_create($alternate_date,timezone_open("America/Toronto"));
		$first_day->modify("-1 days");
		$last_day = date_create($alternate_date,timezone_open("America/Toronto"));
		$last_day->modify("+62 days");
		$recent = date_create();
		$recent->modify("-20 hours");

		$nResult = mysqli_query($con, "SELECT MAX(`id`) As MaxID FROM `calendar`");
		$row = mysqli_fetch_array($nResult);
		$top_4 = $row['MaxID'] - 4;

		$nResult = mysqli_query($con, "SELECT * FROM `calendar` WHERE (`date_start` >= '" . date_format($first_day,"Y-m-d") . "' OR `date_end` >= '" . date_format($first_day,"Y-m-d") . "') AND `date_start` <= '" . date_format($last_day,"Y-m-d") . "' AND `event_tags` NOT LIKE '%D%' ORDER BY `date_start`");
		While($row = mysqli_fetch_array($nResult)) {
			$ndate = date_create($row['date_start']);
			$e_name = str_replace("~32;"," ",$row['event_name']);
			$e_name = str_replace("<3","&hearts;",$e_name);
			$e_name = str_replace("~39;","&rsquo;",$e_name);
			$e_name = str_replace("~8217;","&rsquo;",$e_name);
			$e_name = str_replace("~55357;~56469;","&hearts;",$e_name);
			$e_name = str_replace("~","&#",$e_name);

			if($row['id'] > $top_4 OR date_timestamp_get(date_create($row['date_created'])) > date_timestamp_get($recent)) {
				$e_name = $e_name . " <img src='/images/new_icons.gif'>";
			}
			
			do {
				$d_id = "d" . date_format($ndate,"Y.n.j");
				if(date_format($ndate,"Ymd") >= date_format($first_day,"Ymd")) {
					echo "events.push(\"" . $d_id . "~" . $e_name . "~" . str_replace("~","&#",$row['event_location']) . "~" . $row['event_url'] . "~" . $row['id'] . "~" . $row['event_tags'] . "~" . $row['e_color'] . "\");\n";
				}
				$ndate->modify('+1 day');
			} while (date_format($ndate,"U") <= date_format(date_create($row['date_end']),"U"));  
		}
	?>
	</script>

</html>