stuartleigh/gist:6328714

## gistfile1.txt
<html>
<head>
  <title>countdown</title>
</head>
<body>

	<!-- Feel free to change this markup, but keep the ids and classes, timeRef classes get the values "days", "hours" etc" the classes days, minutes, etc get the actual countdown values -->
	<dl id="myCountdown">
		<dt class="timeRefDays"></dt>
		<dd class="days"></dd>
		<dt class="timeRefHours"></dt>
		<dd class="hours"></dd>
		<dt class="timeRefMinutes"></dt>
		<dd class="minutes"></dd>
		<dt class="timeRefSeconds"></dt>
		<dd class="seconds"></dd>
	</dl>

	<!-- make sure you include jQuery before you include the script you pasted -->
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

	<!-- this is the script you pasted, it could be in a separate file if you want, it's all here to make it easier -->
	<script type="text/javascript">
(function($) { $.fn.countdown = function(options, callback) {
    //custom 'this' selector
    thisEl = $(this);

    //array of custom settings
    var settings = {
        'date': null,
        'format': null
    };

    //append the settings array to options
    if(options) {
        $.extend(settings, options);
    }

    //main countdown function
    function countdown_proc() {

        eventDate = Date.parse(settings['date']) / 1000;
        currentDate = Math.floor($.now() / 1000);

        if(eventDate <= currentDate) {
            callback.call(this);
            clearInterval(interval);
        }

        seconds = eventDate - currentDate;

        days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
        seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed

        hours = Math.floor(seconds / (60 * 60));
        seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed

        minutes = Math.floor(seconds / 60);
        seconds -= minutes * 60; //update the seconds variable with no. of minutes removed

        //conditional Ss
        if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
        if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
        if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
        if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }

        //logic for the two_digits ON setting
        if(settings['format'] == "on") {
            days = (String(days).length >= 2) ? days : "0" + days;
            hours = (String(hours).length >= 2) ? hours : "0" + hours;
            minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
            seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
        }

        //update the countdown's html values.
        if(!isNaN(eventDate)) {
            thisEl.find(".days").text(days);
            thisEl.find(".hours").text(hours);
            thisEl.find(".minutes").text(minutes);
            thisEl.find(".seconds").text(seconds);
        } else {
            alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
            clearInterval(interval);
        }
    }

    //run the function
    countdown_proc();

    //loop the function
    interval = setInterval(countdown_proc, 1000);

}
}) (jQuery);
	</script>

	<!-- after jQuery is loaded, and thhe countdown script is loaded, instatiate it here, we wrap it inside a $(document).ready() function so that it wont try to execute before the dom is ready for it -->
	<script type="text/javascript">
	$(document).ready(function(){
		$('#myCountdown').countdown({
			date: '2013-12-25',
			format: 'on'
		});
	});
	</script>

	<!-- Hope this helps

	- Stu

	-->
</body>
</html>
	<html>
	<head>
	<title>countdown</title>
	</head>
	<body>

	<!-- Feel free to change this markup, but keep the ids and classes, timeRef classes get the values "days", "hours" etc" the classes days, minutes, etc get the actual countdown values -->
	<dl id="myCountdown">
	<dt class="timeRefDays"></dt>
	<dd class="days"></dd>
	<dt class="timeRefHours"></dt>
	<dd class="hours"></dd>
	<dt class="timeRefMinutes"></dt>
	<dd class="minutes"></dd>
	<dt class="timeRefSeconds"></dt>
	<dd class="seconds"></dd>
	</dl>

	<!-- make sure you include jQuery before you include the script you pasted -->
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

	<!-- this is the script you pasted, it could be in a separate file if you want, it's all here to make it easier -->
	<script type="text/javascript">
	(function($) { $.fn.countdown = function(options, callback) {
	//custom 'this' selector
	thisEl = $(this);

	//array of custom settings
	var settings = {
	'date': null,
	'format': null
	};

	//append the settings array to options
	if(options) {
	$.extend(settings, options);
	}

	//main countdown function
	function countdown_proc() {

	eventDate = Date.parse(settings['date']) / 1000;
	currentDate = Math.floor($.now() / 1000);

	if(eventDate <= currentDate) {
	callback.call(this);
	clearInterval(interval);
	}

	seconds = eventDate - currentDate;

	days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
	seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed

	hours = Math.floor(seconds / (60 * 60));
	seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed

	minutes = Math.floor(seconds / 60);
	seconds -= minutes * 60; //update the seconds variable with no. of minutes removed

	//conditional Ss
	if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
	if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
	if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
	if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }

	//logic for the two_digits ON setting
	if(settings['format'] == "on") {
	days = (String(days).length >= 2) ? days : "0" + days;
	hours = (String(hours).length >= 2) ? hours : "0" + hours;
	minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
	seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
	}

	//update the countdown's html values.
	if(!isNaN(eventDate)) {
	thisEl.find(".days").text(days);
	thisEl.find(".hours").text(hours);
	thisEl.find(".minutes").text(minutes);
	thisEl.find(".seconds").text(seconds);
	} else {
	alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
	clearInterval(interval);
	}
	}

	//run the function
	countdown_proc();

	//loop the function
	interval = setInterval(countdown_proc, 1000);

	}
	}) (jQuery);
	</script>

	<!-- after jQuery is loaded, and thhe countdown script is loaded, instatiate it here, we wrap it inside a $(document).ready() function so that it wont try to execute before the dom is ready for it -->
	<script type="text/javascript">
	$(document).ready(function(){
	$('#myCountdown').countdown({
	date: '2013-12-25',
	format: 'on'
	});
	});
	</script>

	<!-- Hope this helps

	- Stu

	-->
	</body>
	</html>