Holiday card timed events code

gistfile1.js

// don't change these variables
var p 			= false; // currently playing
var e			= false; // ended
var j			= true;  // first play
var videoTimeRaw	= 0;
var currentTime 	= 0;
var defaultInterval	= 100;

// configure these variables
var vidId 		= 'videoEmbed';		// the ID of the div holding the video
var vidYTId		= 'N-zXaiDNKjU';	// the ID of the video from YouTube
var vidParams		= { rel: 0, showsearch: 0, showinfo: 0, modestbranding: 1, autohide: 1, fs: 1 }; // video params
var vidLength		= 141000;			// so we can make sure some checks don't go on forever

domReady(function () {
				
	// check to see if the browser supports flash (for iOS)
	if (swfobject.hasFlashPlayerVersion("1")) {
		// every 100ms do the following:
		//   - see if a video is playing. if it is:
		//   		-- increment the currentTime tracker 100	
		//   		-- fires an event that matches that currentTime
		timeCheck = setInterval(function() {	
			if (p != false) {
				currentTime += defaultInterval;
				YTVideo.fireEvent(currentTime.toString());
			}
		}, defaultInterval);

		// set-up the video
		var YTVideo = new YoutubePlayer(vidId, vidYTId, {
		    width: 800,
		    height: 450,
			objparams: { allowFullScreen: "true", wmode: "window" },
			ytparams: vidParams
		});

		// show select overlays at particular times
		// toggleClass(element, class to remove, class to add)
		var overlaysShow = new Array();
		overlaysShow["26000"] = "towers";
		overlaysShow["28500"] = "reccenter";
		overlaysShow["32000"] = "coliseum";
		overlaysShow["36000"] = "alumni";
		overlaysShow["49000"] = "hsc";
		overlaysShow["54000"] = "fireworks";

		for (time in overlaysShow) {
			YTVideo.at(time, function(_overlay) {
				return function() {
					toggleClass(document.getElementById(_overlay), 'overlayHide', 'overlayShow');
				}
			}(overlaysShow[time]));
		}

		// hide select overlays at particular times
		var overlaysHide = new Array();
		overlaysHide["66000"] = "fireworks";

		for (time in overlaysHide) {
			YTVideo.at(time, function(_overlay) {
				return function() {
					toggleClass(document.getElementById(_overlay), 'overlayShow', 'overlayHide');
				}
			}(overlaysHide[time]));
		}

		// downtown sprite animation info
		YTVideo.at("84500", function() {
			toggleClass(document.getElementById("downtownSprite"), 'foo', 'moveDowntownSprite');
		});
		YTVideo.at("86600", function() {
			toggleClass(document.getElementById("downtownSprite"), 'moveDowntownSprite', '');
		});
		
		// prt sprite animation info
		YTVideo.at("19000", function() {
			toggleClass(document.getElementById("prtSprite"), 'foo', 'movePRTSprite');
		});
		YTVideo.at("20100", function() {
			toggleClass(document.getElementById("prtSprite"), 'movePRTSprite', '');
		});

		// listen for the standard events and note that the video ISN'T playing
		YTVideo.on('unstarted,paused,buffering,cued', function() {
			p = false;
		});

		YTVideo.on('ended', function() {
			p = false;
			e = true;

			// show the thank you message
			// call the functions
			toggleClass(document.getElementById('main'), 'videoHide', 'videoShow');
			toggleClass(document.getElementById('likeables'), 'videoHide', 'videoShow');
			//toggleClass(document.getElementById('bgControls'), 'videoHide', 'videoShow');
			//toggleClass(document.getElementById('snowControls'), 'videoHide', 'videoShow');
			toggleClass(document.getElementById('footer_default'), 'videoHide', 'videoShow');
		});

		// listen for when the video is played. update the currentTime incrementor based on
		// where the user is in the video. note that the video IS playing.
		YTVideo.on('playing', function() {
			videoTimeRaw = document.getElementById(vidId).getCurrentTime();
			currentTime = Math.round(videoTimeRaw*10)*100;
			p = true;

			/* if you have anything else that should happen when a user hits play stick it here */

			// hide the intro & outro text
			toggleClass(document.getElementById('main'), 'videoShow', 'videoHide');
			toggleClass(document.getElementById('likeables'), 'videoShow', 'videoHide');
			//toggleClass(document.getElementById('bgControls'), 'videoShow', 'videoHide');
			//toggleClass(document.getElementById('snowControls'), 'videoShow', 'videoHide');
			toggleClass(document.getElementById('footer_default'), 'videoShow', 'videoHide');

			if (!e && !j) {
				// figure out which animations we should make sure are off on a scrub backwards in time
				var f = false;
				var currentTimeCheck = currentTime;
				while (!f) {
					if (overlaysShow[currentTimeCheck.toString()]) {
						var overlaysTurnOff = overlaysShow.slice(currentTimeCheck);
						f = true;
					}
					currentTimeCheck += defaultInterval;
					if (currentTimeCheck > vidLength) {
						f = true;
					}
				}
				for (time in overlaysTurnOff) {
					toggleClass(document.getElementById(overlaysTurnOff[time]), 'overlayShow', 'overlayHide');
				}
			} else if (e) {
				e = false;
				// turn off all the elements because the video had ended and it's being replayed
				for (time in overlaysShow) {
					toggleClass(document.getElementById(overlaysShow[time]), 'overlayShow', 'overlayHide');
				}

			}

			j = false; // note the first play has happened
		});
	} else {
		var ytURLParams = '';
		for (val in vidParams) {
			ytURLParams += '&'+val+'='+vidParams[val];
		}
		document.getElementById(vidId).innerHTML = '<iframe width="100%" height="100%" src="http://www.youtube.com/embed/'+vidYTId+'?'+ytURLParams+'" frameborder="0" allowfullscreen></iframe>';
	}
});