jquery countdown timer that replaces a slider with a live video player upon countdown completion.

description.txt

This is a livecountdown timer jquery script. The concept is simple.
1. I have a slider on my homepage that when the counter is counting down shows the slider
2. when the countdown timer hits zero, then the slider div is hidden and the video div is displayed in it's place.

The primary jquery file livecountdown.js basically does 2 things:
1. the countdown timer itself is wrapped in a div ".live_countdown" When the timer is counting down then the ".live_countdown" is displayed, when the countdown timer hits zero, then the ".live_countdown" is faded out to display none
*That basically takes care of displaying the timer and removing the timer when it hits zero.
**alternately instead of hiding the timer, I can just as easily replace the timer with a 'now playing' graphic or something like that

2. The slider carousel is wrapped in a div ".stepcarousel" This slider is displayed while the countdown timer is greater than zero or still counting down
The live video div "#livetheme-online-container" is HIDDEN while the countdown timer is counting down. When the countdown timer hits zero, then the live video div "#livetheme-online-container" is then displayed.

Wrapping up:
During countdown the countdown timer is displayed as is the slider
When countdown timer is at zero then the slider is hidden and the live video container is displayed in it's place.

Making it better:
I built this theme years ago, if I were to do it over again today, then instead of hiding div's depending upon the countdown timer state, I would do it right and actually load/unload the divs via ajax. 

Why?
Frankly it is just plain stupid to load something and to simply hide it from view when not in use. It means that users are either downloading an entire slider that they won't see when the countdown timer is at zero, or they are loading a live video player and its assets when the countdown timer is still counting down.

Back in those days, (3-4 years ago) I had no concept of optimization and mobile websites were not even on the radar. Today this is TOTALLY Unacceptable. I HATE themes with a passion that are lazy and simply hide elements via css/jquery until they are needed. It's a waste of bandwidth and resources and makes for a lousy customer experience, even if they don't know it.

I have a few sites that have millions of people on there each week, and while loading sliders or video players and hiding them doesn't seem like a big deal, you quickly learn that it is when dealing with those kind of numbers. I'm always looking to become a better coder.

*I will include a few files.
1. the livecountdown jquery file
2. part of the header.php file where I actually place the countdown timer php code.
3. part of the slider code so that you can see the divs that show/hide depending upon the state of the timer.

header-countdown-timer-display.php

<div class="live_countdown" id="live_countdown-3" style="display: block;">	
	<div class="live_countdown_container">

		<span class="live_countdown_display">
			<span class="live_countdown_live">Live In</span>
			<span class="live_countdown_days_left lt_num"></span>
			<span class="live_countdown_days_label lt_label">Days</span>
			<span class="live_countdown_hours_left lt_num"></span>
			<span class="live_countdown_hours_label lt_label">Hrs</span>
			<span class="live_countdown_minutes_left lt_num"></span>
			<span class="live_countdown_minutes_label lt_label">Min</span>
			<span class="live_countdown_seconds_left lt_num"></span>
			<span class="live_countdown_seconds_label lt_label">Sec</span>
			<span style="display: block; clear: both;"></span>
		</span>

		<div style="display: none;" class="live_countdown_control">
			<span class="live_countdown_live">Live In</span>
			<span class="live_countdown_month"><?php echo $woo_options['woo_month_count']; ?></span>
			<span class="live_countdown_day"><?php echo $woo_options['woo_day_count']; ?></span>
			<span class="live_countdown_year"><?php echo $woo_options['woo_year_count']; ?></span>
			<span class="live_countdown_hour"><?php echo $woo_options['woo_hour_count']; ?></span>
			<span class="live_countdown_minute"><?php echo $woo_options['woo_minute_count']; ?></span>
			<span class="live_countdown_ampm"><?php echo $woo_options['woo_ampm_count']; ?></span>
			<span class="live_countdown_timezone"><?php echo $woo_options['woo_timezone_count']; ?></span>
		</div><!-- /.live_countdown_control -->

	</div><!-- /.live_countdown_container -->
</div><!-- /#live_countdown-3 -->

livecountdown.js

jQuery(function() {
	jQuery.liveCountdown();
});

(function($) {

	$.liveCountdown = function() {
	
		var iOriginalOffset = $('.live_countdown_control').children('.live_countdown_timezone').text();
		var iCurrentOffset = new Date().getTimezoneOffset() / 60;
		
		var oInterval = setInterval(function() {
		
			$('.live_countdown_control').each(function() {
		
				var oTimeNow = new Date();
				var oTimeNowEpoch = oTimeNow.getTime();
		
				var sDay = $(this).children('.live_countdown_day').text();
				var sMonth = $.liveCountdown.getMonthName($(this).children('.live_countdown_month').text());
				var sYear = $(this).children('.live_countdown_year').text();
				var sHour = parseInt($(this).children('.live_countdown_hour').text()) + (iOriginalOffset - iCurrentOffset);
				if(sHour > 12) {
					sHour -= 12;
				}
				
				var sMinute = $(this).children('.live_countdown_minute').text();
				var sSeconds = $(this).children('.live_countdown_second').text();
				var sAmPm = $(this).children('.live_countdown_ampm').text();
				
				var oTargetTime = new Date(sDay + " " + sMonth + ", " + sYear + " " + sHour + ":" + sMinute + ":00 " + sAmPm);
				var oTargetTimeEpoch = oTargetTime.getTime();
				
				var iDaysLeft = Math.floor(((oTargetTimeEpoch - oTimeNowEpoch) / (60 * 60 * 24)) / 1000);
				iDaysLeft = iDaysLeft < 0 ? 0 : iDaysLeft;
				$(this).siblings('.live_countdown_display').children('.live_countdown_days_left').text(iDaysLeft);
				
				var iHoursLeft = Math.floor(((oTargetTimeEpoch - oTimeNowEpoch) / (60 * 60)) / 1000);
				iHoursLeft = iHoursLeft < 0 ? 0 : iHoursLeft;				
				$(this).siblings('.live_countdown_display').children('.live_countdown_hours_left').text(iHoursLeft - (iDaysLeft * 24));
				
				var iMinutesLeft = Math.floor(((oTargetTimeEpoch - oTimeNowEpoch) / (60)) / 1000);
				iMinutesLeft = iMinutesLeft < 0 ? 0 : iMinutesLeft;
				$(this).siblings('.live_countdown_display').children('.live_countdown_minutes_left').text(iMinutesLeft - (iHoursLeft * 60));
				
				var iSecondsLeft = Math.floor(((oTargetTimeEpoch - oTimeNowEpoch) / 1000));
				iSecondsLeft = iSecondsLeft < 0 ? 0 : iSecondsLeft;
				$(this).siblings('.live_countdown_display').children('.live_countdown_seconds_left').text(iSecondsLeft - (iMinutesLeft * 60));
				
				if($.liveCountdown.eventHasStarted(iDaysLeft, iHoursLeft, iMinutesLeft, iSecondsLeft)) {
					if($('#livetheme-online-container').length > 0) {
						$('.stepcarousel').hide();
						clearInterval(oSlideshowInterval);
					}
					$('#livetheme-online-container').fadeIn('slow');
					if($(this).siblings(':first').is(':visible')) {
						$(this).siblings(':first').fadeIn('slow');
					} else {
						$(this).siblings(':first').show();
					}
					$('.live_countdown').fadeOut('slow');
				} else {
					$('.live_countdown').fadeIn('slow');
				}
				
			}); // end each
			
		}, 1000); // end setInterval	
		
		var oSlideshowInterval = null;
		if(!$('#livetheme-online-container').is(':visible')) {
			$.liveCountdown.initSlideshow();
			if($('.stepcarousel').children().length > 1) {
				oSlideshowInterval = setInterval(function() {
					$.liveCountdown.runSlideshow();
				}, 5000);
			}
		} else {
			$('.stepcarousel a').hide();
			clearInterval(oSlideshowInterval);
		}
		
	} // end liveCountdown
	
	$.liveCountdown.getMonthName = function(iId) {
		var sMonthName = null;
		switch(parseInt(iId)) {
				case 1:
					sMonthName = 'January';
					break;
				case 2:
					sMonthName = 'February';
					break;
				case 3:
					sMonthName = 'March';
					break;
				case 4:
					sMonthName = 'April';
					break;
				case 5:
					sMonthName = 'May';
					break;
				case 6:
					sMonthName = 'June';
					break;
				case 7:
					sMonthName = 'July';
					break;
				case 8:
					sMonthName = 'August';
					break;
				case 9:
					sMonthName = 'September';
					break;
				case 10:
					sMonthName = 'October';
					break;
				case 11:
					sMonthName = 'November';
					break;
				case 12:
					sMonthName = 'December';
					break;
				default:
					break;
			} // end switch/case
			return sMonthName;
	} // end getMonthName
	
	$.liveCountdown.eventHasStarted = function(iDay, iHour, iMinute, iSecond) {
		return iDay === 0 && iHour === 0 && iMinute === 0 && iSecond === 0;
	} // end hasInvalidDate
	
	$.liveCountdown.runSlideshow = function(oInterval) {
		$.liveCountdown.initSlideshow();
		if($('.activeImg').next().get(0) !== undefined) {
			$('.activeImg').fadeOut('slow', function() {
				$(this).removeClass('activeImg').next().addClass('activeImg').fadeIn();
			});
		} else {
			$('.activeImg').fadeOut('slow', function() {
				$(this).removeClass('activeImg').siblings(':first').addClass('activeImg').fadeIn();
			});
		}
	
	} // end runSlideshow
	
	$.liveCountdown.initSlideshow = function() {
		if(!$('.stepcarousel').is(':visible')) {
			$('.stepcarousel a').hide();
			$('.stepcarousel').show().children('a:first').fadeIn('slow', function() {
				$(this).addClass('activeImg');
			});
		}
	} // end initSlideshow
	
})(jQuery);

slider-and-live-video-containers.php

<div id="accordion">
	<div class="sermon_content">
		<div id="video_player">

			<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
			<div
				 href="http://my-server.com:1935/live-stream-uwcmi/mp4:[email protected]/playlist.m3u8"
				 style="display:block;width:665px;height:368px"
				 id="live">
			</div>

			<!-- this will install flowplayer inside previous A- tag. -->
			<script>
			$f("live", "http://my-server.com/flowplayer/flowplayer-3.2.11.swf", {

			    clip: {
				scaling: 'fit',
				live: true,
				// configure clip to use influxis as our provider, it uses our rtmp plugin
				provider: 'rtmp',
				url: '0_f8yzp6ny_1@livestream',
				autoPlay: false,
				ipadUrl: "http://my-server.com:1935/live-stream-uwcmi/0_f8yzp6ny_1@livestream/playlist.m3u8"
			    },

			    // streaming plugins are configured under the plugins node
			    plugins: {

				// here is our rtpm plugin configuration
				rtmp: {
				    url: encodeURIComponent("http://my-server.com/flowplayer/flowplayer.rtmp-3.2.10.swf"),
				    // netConnectionUrl defines where the streams are found
				    netConnectionUrl: encodeURIComponent('rtmp://my-server.com:1935/live-stream-uwcmi')
				}
			    }
			}).ipad();// alternately .ipad( { simulateiDevice: true } );
			</script>
			
			<script>
			setTimeout("fixVideo()",50);

			function fixVideo() {
				if (document.getElementById('live').innerHTML=='') {
					document.getElementById('player_api').innerHTML = '<source src="http://my-server.com:1935/live-stream-uwcmi/mp4:[email protected]/playlist.m3u8">';
				}
			}
			</script>

		</div><!-- video_player -->
	</div><!-- sermon_content -->
</div><!-- accordion -->