Untitled

<?php
/* Template Name: Timer */
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Timer</title>

		<meta charset="utf-8">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="Expires" content="0"/>
		<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/flipclock.css">


    </head>
	<body>

		<div id="timer">
			<div class="clock" style="margin:2em;"></div>
			<div class="message" style="color: #ccc;"></div>
		</div>

		<script src="<?php echo get_stylesheet_directory_uri(); ?>/assets/jquery-2.1.4.min.js"></script>
		<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/flipclock.min.js"></script>
		<script>

			function GetURLParameter(sParam) {
				var sPageURL = window.location.search.substring(1);
				var sURLVariables = sPageURL.split('&');

				for (var i = 0; i < sURLVariables.length; i++) {
					var sParameterName = sURLVariables[i].split('=');
					if (sParameterName[0] == sParam) {
						return sParameterName[1];
					}
				}
			}

			// Update time and refresh
			function DynamicFields(f0, f0_value) {
				time = unescape(f0_value);
				setClock()
			}

			var clock;
			var time = GetURLParameter('time');

			$(document).ready(function(){ setClock(); });

			function setClock(){

				clock = $('.clock').FlipClock(time, {
					clockFace: 'MinuteCounter',
					countdown: true,
					callbacks: {
						stop: function() {
							//$('.message').html('STREAM STARTING SOON');
						}
					}
				});

			};


		</script>

	</body>
</html>