Publico 25 Anos - Load YouTube Videos

main-25anos-video.js

// Set some vars
var onYouTubeIframeAPIReady;
var videoList = ['r_FgH-8i-Oo', 'Z7RrDbjeLso', 'qhWINlncAzg', 'G53J4BSaiYI', '84D3zS4ZPFo', 'Dg9NkjBtk8Y', 'ANEO4JGul6E', 'HPaj4-PW4ks', 'ao-KFMD-kZg', 'QbORd1LhQvw', 'kRGWITsjrdg', '9NsAhKp4dh4', 'jieTu3ISZlE', 'pTZ4Vw0MY8o', 'D1FaHRPxwH8', '0RvSl5meXD4', '1EyH8SXKbGQ', 'UsHRmr_QkOw', 'McHsqE8-Kz4', 'Rt76h45keJU', 'UEz53zlIxns', 'pNmcZmequ1c', 'zWBUSTsMtlk', 'N6OXG9335_I'];
var $ytcontainer;
var player;
var idle_time2 = 0, idle_limit2 = 5, idle_interval2;

// Define some functions
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
}

function resizeVideo() {

	var windowWidth = $(window).width(),
		windowHeight = $(window).height(),
		videoWidth = (16 * windowHeight) / 9,
		videoHeight = (9 * windowWidth) / 16;

	if( ((windowHeight)  / windowWidth) <= 0.5625 ) {
		$ytcontainer
			.width( windowWidth )
			.height( videoHeight )
			.css({'top': (((windowHeight - videoHeight) / 2)) + 'px', 'bottom': 'auto', 'left': 0, 'right': 0 })
			// .css({'left': (((windowWidth - videoWidth) / 2)) + 'px', 'right': 'auto', 'top': 0, 'bottom': 0 });
	} else {
		$ytcontainer
			.width( videoWidth )
			.height( windowHeight )
			.css({'left': (((windowWidth - videoWidth) / 2)) + 'px', 'right': 'auto', 'top': 0, 'bottom': 0 });
	}

}

function isInt(n){
    return Number(n)===n && n%1===0;
}

function pad(n) {
    return (n < 10) ? ("0" + n) : n;
}

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

// Fade in elements with CSS3
$.fn.fadeIn = function(speed, callback) {
    var transitionSpeed = typeof (speed) == "undefined" ? 1000 : speed;    
    $(this).show().transition({opacity: 1 }, transitionSpeed, callback);

};


// On document ready...
$(function() {

	// Set some local vars
	var clock;
	var hashed = false;
	var videoPaused = 0;
	var clockCounting = 0;
	var videoFirstPlay = 0;
	var videoHourChange = false;
	var firstRun = true;
	var videoQualityRequest = 0;
	var timeMachineMode = 0;
	var lockedMode = false;
	var lockedDate =  new Date('2015', '2', '4');
	var currentDate = new Date();
	var currentHour = currentDate.getUTCHours();
	var currentTime;
	var elapsedMinutes = ( currentDate.getUTCHours() * 60 ) + currentDate.getUTCMinutes();
	var elapsdeHourlySeconds = currentDate.getUTCMinutes() * 60; 
	var elapsedDailySeconds = ( currentDate.getUTCHours() * 3600 ) + elapsdeHourlySeconds;
	var playerControls = 0;


	// DEBUG
	// currentHour = 23;
	// elapsedMinutes = 59;
	// elapsdeHourlySeconds = 3596; 
	// elapsedDailySeconds = 68340;

	var i = null;

	var $videoTimeline = $('#video-timeline'),
		$videoTimelineMinutes = $videoTimeline.find('li.video-timeline-m'),
		$videoTimelineControls = $videoTimeline.find('.video-timeline-controls'),
		$videoControls = $('#video-controls'),
		$videoZoomControls = $('#video-timeline-zoom-controls'),
		$videoProgress = $videoTimeline.find('.video-timeline-progress'),
		$videoReset = $('#video-reset'),
		$videoTitle = $('#video-info').find('.video-info-title'),
		$videoTitleLoc = $('#video-info').find('.video-info-subtitle .text');

	$ytcontainer = $('#video-yt-container');

	// Mobile options
	if( isMobile.any() ) {
		playerControls = 0;

		$('body').addClass('isMobile');

		$videoTimelineControls.find('.video-timeline-controls-play')
				.addClass('paused');
	}

	// Count pageviews
	idle_interval2 = setInterval(function () {
	    idle_time2 = idle_time2 + 1;
	    if (idle_time2 >= idle_limit2) {
	        if (typeof doPageCount == 'function') { 
				doPageCount('VIDEOS');
			}
	        idle_time2 = 0;
	    }
	}, 60000);

	// Check if lock mode 
	if(lockedDate.setHours(0,0,0,0) == currentDate.setHours(0,0,0,0)) {
    	lockedMode = true;

    	// Disable arrow right
    	$videoControls.find('li.video-controls-next').addClass('disabled');
	}

	// Prepapre tooltips
	function timelineTooltips() {
		$videoTimeline.find('li.video-timeline-hour').tooltip({
			container: $videoTimeline,
			delay: 0,
			title: function(){ 
				return $(this).data('hour') + 'h'
			}
		});
	}

	// Update video info every minute
	function minuteUpdate() {

		if( currentTime != 1440 ) {
			var currentIndex = currentTime;
				videoTitle = videoListMeta[currentIndex].t
				videoLocation = videoListMeta[currentIndex].l,
				progressLocation = ((currentTime+1)*100) / 1440;

			// Set title & location
			$videoTitle.html( videoTitle );
			$videoTitleLoc.html( videoLocation );

			// Update progress bar 
			$videoProgress.css({'left': progressLocation + '%'});

			// Active video
			$videoTimeline
				.find('li.video-timeline-m.active')
					.removeClass('active')
					.end()
				.find('li.video-timeline-m[data-minute=' + (currentIndex + 1) + ']')
					.addClass('active');

			// Disble locked hours
			if( lockedMode ) {
				var currentDateCheck = new Date(),
					elapsedMinutesCheck = ( currentDateCheck.getUTCHours() * 60 ) + currentDateCheck.getUTCMinutes();

				$videoTimelineMinutes
					.filter(function() {
						return $(this).data("minute") - 1 > elapsedMinutesCheck;
					})
					.addClass('locked')
						.end()
					.filter(function() {
						return $(this).data("minute") - 1 <= elapsedMinutesCheck;
					})
					.removeClass('locked')
						.end();
			}
		} else {
			restartVideo()
		}

		// Update hash
		document.location.hash = '!' + currentHour + 'h' + pad( Math.floor(currentTime - (currentHour * 60)) );
	}

	// Update video info every hour
	function hourUpdate() {
		currentHour = Math.floor( currentTime / 60 );
	}

	// Fire video form current time 
	function startVideo() {
		var startDate = new Date(),
			startElapsedMinutes = ( startDate.getUTCHours() * 60 ) + startDate.getUTCMinutes();

		changeVideo( startElapsedMinutes );
	}

	// Restar video
	function restartVideo() {
		// Reset timeline
		$videoZoomControls.find('li.disabled').removeClass('disabled')

		// Close hour
		$videoTimeline
			.removeClass('zoomed')
			.find('li.video-timeline-hour.zoomed-hour')
				.removeClass('zoomed-hour');

		if( !isMobile.any() ) {
			$videoTimeline
				.find('li.video-timeline-m')
					.tooltip('destroy');

			// Reset tooltips
			timelineTooltips();
		}

		// Loop video
		if( lockedMode ) {
			lockedMode = false;
		}

		changeVideo( 0, true );
	}

	// Reset video to actual minute
	function resetVideo() {
		// Chnange to "live" mode
		timeMachineMode = 0;
		$videoReset.removeClass('show');

		// Just in case...
		clock.stop();

		// Get new time
		var resetDate = new Date();
		var resetHour = resetDate.getUTCHours();
		var resetElapsedMinutes = ( resetDate.getUTCHours() * 60 ) + resetDate.getUTCMinutes();
		var resetElapsdeHourlySeconds = resetDate.getUTCMinutes() * 60; 
		var resetElapsedDailySeconds = ( resetDate.getUTCHours() * 3600 ) + resetElapsdeHourlySeconds;

		// Set "new" current time
		currentTime = resetElapsedMinutes;

		// Reset clock
		clock.setTime( resetElapsedDailySeconds );

		// Check if wanted video is already playgin
		if( currentHour == resetHour ) {
			// Start player
			player.seekTo( resetElapsdeHourlySeconds + 2 );
		}
		// Otherwise switch video
		else { 
			currentHour = resetHour;

			// Start player
			player.playVideoAt(currentHour).seekTo( (currentTime - (currentHour * 60)) * 60 );
		}
	}

	// Change video
	function changeVideo(minute, loop) {
		var currentDateCheck = new Date(),
			elapsedMinutesCheck = ( currentDateCheck.getUTCHours() * 60 ) + currentDateCheck.getUTCMinutes();

		if( minute >= 0 ){
			// Don't let go forward if in lock mode
			if( lockedMode && minute > elapsedMinutesCheck ) {
				$videoControls.find('li.video-controls-next').addClass('disabled');

				// Show message if hash
				if( hashed ) {
					startVideo();
				}
			} else {
				$videoControls.find('li.disabled').removeClass('disabled');

				// Chnange to "time machine" mode
				if( !loop ) {
					timeMachineMode = 1;
					$videoReset.addClass('show');
				}

				// Just in case...
				clock.stop();

				// Check if wanted video is already playgin
				if( currentHour == Math.floor( minute / 60 ) ) {
					var seekTime = (minute - (currentHour * 60)) * 60;
					var newTime = (currentHour * 3600) + seekTime;

					// Set "new" current time
					currentTime = Math.floor( ( (currentHour * 3600) + seekTime ) / 60 );

					// Reset clock
					clock.setTime( newTime );

					// Start player
					player.seekTo( seekTime + 2 );
				} 
				// Otherwise switch video
				else {
					$('body').addClass('buffering');

					// Set "new" current hour
					currentHour = Math.floor( minute / 60 );

					var seekTime = (minute - (currentHour * 60)) * 60;
					var newTime = (currentHour * 3600) + seekTime;

					// Set "new" current time
					currentTime = Math.floor( ( (currentHour * 3600) + seekTime ) / 60 );

					// Reset clock
					clock.setTime( newTime );

					// Start player
					player.playVideoAt(currentHour).seekTo( seekTime + 2 );

				}
			}
		}

		// Check to see if we're at the beginning 
		if( minute == 0 ) {
			$videoControls.find('li.video-controls-previous').addClass('disabled');
		}

		// Check to see if we're at the end 
		if( minute == 1440 ) {
			restartVideo();
		}

		// Check to see if we've catch up with live video again
		if( minute == elapsedMinutesCheck ) {
			timeMachineMode = 0;
			$videoReset.removeClass('show');

			// And if in lock mode, disable arrow again
			if( lockedMode ) {
				$videoControls.find('li.video-controls-next').addClass('disabled');
			}
		}
	}

	// Resize video on loading...
	if( !isMobile.any() ) {
		resizeVideo();

		// ...and bind to window resize event
		$(window).resize( $.throttle( 500, function(){
			resizeVideo()
		}));
	}


	// Zoom timeline
	function zoomHour($el) {
		var $this = $el;

		// Close previously zoomed hour
		$videoTimeline.find('li.zoomed-hour').removeClass('zoomed-hour');

		// Tell timeline we're zoomed
		$videoTimeline.addClass('zoomed');

		// Deativate zoom arrows
		$videoZoomControls.find('li.disabled').removeClass('disabled')

		if( $this.is(':last-child') ) {
			$videoZoomControls.find('li.next').addClass('disabled')
		}

		if( $this.is(':first-child') ) {
			$videoZoomControls.find('li.previous').addClass('disabled')
		}

		// Zoom on hour
		$this
			.addClass('zoomed-hour');

		if( !isMobile.any() ) {
			$this
				.find('li.video-timeline-m').tooltip({
					container: $videoTimeline,
					delay: 0,
					title: function(){ 
						var $this = $(this),
							hour = Math.floor( ($this.data('minute')-1) / 60),
							minute = ($this.data('minute')-1) - (hour * 60),
							warning = '';

						if( $this.hasClass('locked') ) {
							warning = ' (este minuto ainda não chegou)'
						}

						return hour + 'h' + pad( minute ) + warning;
					}
				});

			$videoTimeline.find('li.video-timeline-hour').tooltip('destroy');
		}
	}

	// Init clock
	clock = $('#video-clock').FlipClock({
        clockFace: 'HourlyCounter',
        autoStart: false,
        callbacks: {
        	interval: function(){
        		// Keep track of tme
        		var internalTime = clock.getTime().time;

        		// Keep track of global minutes
        		currentTime = Math.floor( internalTime / 60 );

        		// Update every minute
        		if( internalTime % 60 === 0 ) {
        			minuteUpdate();
        		}

        		// Update every minute
        		if( internalTime % 3600 === 0 ) {
        			hourUpdate();
        		}

        		// Update every minute
        		if( internalTime === 68343 ) {
        			restartVideo();
        		}
        	},
        	start: function() {
        		clockCounting = 1;
        		
        		// Store start time
        		currentTime = Math.floor( clock.getTime() / 60 );

        		// Set title on strat
        		minuteUpdate();   		
        	},
        	stop: function() {
        		// Tell everyone video is paused
        		videoPaused = 1;
        	}
        }
	});

	// Load the IFrame Player API code asynchronously.
	var tag = document.createElement('script');

	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	// Init YT player
	onYouTubeIframeAPIReady = function() {
		player = new YT.Player('video-yt-player', {
			height: '100%',
			width: '100%',
			videoId: 'N6OXG9335_I',
			playerVars: {
				controls: playerControls,
				showinfo: 0,
				autoplay: 0,
				disablekb: 1,
				fs: 0,
				iv_load_policy: 3,
				modestbranding: 1,
				wmode: 'opaque',
				enablejsapi: 1
			},
			events: {
	        	'onReady': onPlayerReady,
	        	'onStateChange': onPlayerStateChange,
	        	'onPlaybackQualityChange': onPlayerQualityChange
	        }
		});
	}

	// Cue playlist
	function onPlayerReady(event) {
		player.cuePlaylist(videoList, currentHour, 0, 'large');

		// Hide infterface
		if( !Modernizr.touch ){
			$(document)
				.on('mousemove', function() {
				    clearTimeout(i);

				   $('#video-timeline, #video-controls').css({'opacity': 1}); 

				    i = setTimeout(" $('#video-timeline, #video-controls').css({'opacity': 0}); ", 3000);
				})
				.on('mouseup', function() {
				    clearTimeout(i);

				    i = setTimeout(" $('#video-timeline, #video-controls').css({'opacity': 0}); ", 3000);
				})
				.on('mouseleave', function() {
				    clearTimeout(i);

				    $('#video-timeline, #video-controls').css({'opacity': 0});  
				});
		}

		// Init tooltips
		if( !isMobile.any() ) {
			timelineTooltips();
		}

		// Bind click events
		$videoTimeline.on('click', 'li.video-timeline-hour', function(e){
			if( !$videoTimeline.hasClass('zoomed') ) {
				zoomHour( $(this) );
			}
		});

		$videoTimeline.on('click', 'li.video-timeline-m', function(e){
			if( $videoTimeline.hasClass('zoomed') ) {
				var $this = $(this);

				if( !$this.hasClass('locked') && !$this.hasClass('active') ) {
					idle_time2 = 0;

					if (typeof doPageCount == 'function') { 
						doPageCount('VIDEOS');
					}

					changeVideo( $this.data('minute') - 1 );
				}
			}
		});

		$videoControls.on('click', 'li', function(){
			var $this = $(this);

			if( $this.data('action') == 'previous' && !$this.hasClass('disabled') ) {

				changeVideo(currentTime - 1);

				idle_time2 = 0;

				if (typeof doPageCount == 'function') { 
					doPageCount('VIDEOS');
				}
			} 
			if ( $this.data('action') == 'next' && !$this.hasClass('disabled') ) {

				changeVideo(currentTime + 1);

				idle_time2 = 0;

				if (typeof doPageCount == 'function') { 
					doPageCount('VIDEOS');
				}
			}
		});

		$videoReset.on('click', function(){
			resetVideo();
		});	

		$videoZoomControls.on('click', 'li', function(){
			var $this = $(this);

			// Previous hour
			if( $this.hasClass('previous') && !$this.hasClass('disabled') ) {
				zoomHour( $videoTimeline.find('li.zoomed-hour').prev() );
			}

			// Next hour
			if( $this.hasClass('next') && !$this.hasClass('disabled') ) {
				zoomHour( $videoTimeline.find('li.zoomed-hour').next() );
			}

			// Zoom out
			if( $this.hasClass('zoomout') ) {

				// Reactivate arrows
				$videoZoomControls.find('li.disabled').removeClass('disabled')

				// Close hour
				$videoTimeline
					.removeClass('zoomed')
					.find('li.video-timeline-hour.zoomed-hour')
						.removeClass('zoomed-hour');

				if( !isMobile.any() ) {
					$videoTimeline
						.find('li.video-timeline-m')
							.tooltip('destroy');

					// Reset tooltips
					timelineTooltips();	
				}
			}
		});

		$videoTimelineControls.on('click', 'li', function(){
			var $this = $(this);

			if( $this.hasClass('video-timeline-controls-play') ) {
				if( player.getPlayerState() == 2 ) {
					player.playVideo()
				}
				
				if( player.getPlayerState() == 1 ) {
					player.pauseVideo();
				}
			}

			if( $this.hasClass('video-timeline-controls-mute') ) {
				$this.toggleClass('muted');

				if( player.isMuted() ) {
					player.unMute();
				} else {
					player.mute();
				}
			}

			if( $this.hasClass('video-timeline-controls-quality') ) {
				if( videoQualityRequest == 0 ) {
					$this.addClass('requesting');

					if( player.getPlaybackQuality() != 'hd1080' ) {
						player.setPlaybackQuality('hd1080');
					} else {
						$('body').addClass('buffering');
						player.stopVideo();
						player.setPlaybackQuality('large');
						player.playVideo();
					}
				}
				videoQualityRequest = 1;
			}
		});

		// Error button
		$('#video-retry').on('click', function(){
			location.reload(true);
		});

		// Popups
		$('#video-timeline-links').on('click', 'li', function(){
			$('body').addClass( 'popup-' + $(this).data('modal') );
		});

		$('#video-main').find('.video-popup .close').on('click', function(){
			$('body').removeClassPrefix('popup-');
		});

		$(document).keydown(function(event){    
			var key = event.which;                
				switch(key) {
				case 37:
					
					changeVideo(currentTime - 1);

					idle_time2 = 0;

					if (typeof doPageCount == 'function') { 
						doPageCount('VIDEOS');
					}

					break;
				case 27:
					$('body').removeClassPrefix('popup-');
					break;
				case 39:
					
					changeVideo(currentTime + 1);

					idle_time2 = 0;

					if (typeof doPageCount == 'function') { 
						doPageCount('VIDEOS');
					}

					break;
			}   
		});

		// Shares
		$('#video-share')
			.on('click', '.share-facebook', function(e){
				var tweetTitle = videoListMeta[currentTime].l,
					tweetText = tweetTitle,
					tweetHour = Math.floor( currentTime / 60 ),
					tweetMinute = currentTime - (tweetHour * 60),
					tweetHash = Math.floor( currentTime / 60 ) + 'h' + pad( tweetMinute );
				
				publish = {
	                method: 'stream.publish',
	                message: '',
	                display: 'popup',
	                attachment: {
	                    name: "Um dia normal",
	                    caption: "Veja os 1440 vídeos",
	                    description: tweetText,
	                    href: "http://www.publico.pt/25anos/um-dia-normal#!" + tweetHash,
	                    media: [{
	                        'type': 'image',
	                        'src': 'http://static.publico.pt/files/publico25anos/img/videos/thumbs-l/' + currentTime + '.jpg',
	                        'href': "http://www.publico.pt/25anos/um-dia-normal#!" + tweetHash
	                    }]
	                },
	                action_links: [
	                    { text: 'PÚBLICO', href: 'http://www.publico.pt' }
	                ],
	                user_prompt_message: ''
	            };
				
				FB.ui(publish, function (data) {
		            if (data) {
		                if (data.post_id) {
		                    trackEvent("25ANOS_DIANORMAL", "FACEBOOK", data.post_id);
		                } else {
		                    trackEvent("25ANOS_DIANORMAL", "FACEBOOK_ERROR", data.error_msg);
		                }
		            }
		        });
		        
		        e.preventDefault();
			})
			.on('click', '.share-twitter', function(){
				var tweetTitle = videoListMeta[currentTime].l + ': um dia normal, via @publico',
					tweetText = tweetTitle,
					tweetHour = Math.floor( currentTime / 60 ),
					tweetMinute = currentTime - (tweetHour * 60),
					tweetHash = Math.floor( currentTime / 60 ) + 'h' + pad( tweetMinute );
				
				if (tweetText.length > 112) {
				    tweetText = tweetText.substring(0,112) + '...';
				}
				
			var tweet = encodeURI(tweetText);
			
			$(this).attr('target', '_blank').attr('href', 'https://twitter.com/intent/tweet?text='+tweet+'&amp;url=http%3A%2F%2Fwww.publico.pt%2F25anos%2Fum-dia-normal%23!'+ tweetHash);
			});
	}


	// YT quality changes
	function onPlayerQualityChange(event) {
		if( event.data == 'hd1080' ) {
			$videoTimelineControls.find('.video-timeline-controls-quality')
				.removeClass('sd');
		} else {
			$videoTimelineControls.find('.video-timeline-controls-quality')
				.addClass('sd');
		}

		$('body').removeClass('buffering');
		$videoTimelineControls.find('.video-timeline-controls-quality').removeClass('requesting');
		videoQualityRequest = 0;
	}

	// YT error
	function onPlayerError(event) {
		// $('body').addClass('error');
	}

	function onPlayerStateChange(event) {

		if (event.data == YT.PlayerState.CUED) {
		
			$('#video-intro').find('.loader span').show();
			
			// Set volume
			event.target.setVolume(100);

			if (window.location.hash.length > 0 && window.location.hash.indexOf('!') == 1 && (window.location.hash.length === 6 || window.location.hash.length === 7) ) {
				var hashId = window.location.hash,
					hashHour = hashId.substring(hashId.lastIndexOf("!")+1,hashId.lastIndexOf("h")),
					hashMinutes = hashId.substring(hashId.lastIndexOf("h")+1,hashId.lastIndexOf("h")+3),
					hashTime = ( parseInt( hashHour ) * 60 ) + parseInt( hashMinutes );

				hashed = true;
				changeVideo( hashTime );

				if( isMobile.any() ) {
					$('#video-intro').fadeOut('slow');
					$('html').addClass('loaded');
				}
			} else {
				// Check for errors...
				if( !isMobile.any() ) {
					event.target.seekTo( elapsdeHourlySeconds + 2 );
				} else {
					$('#video-intro').fadeOut('slow');
					$('html').addClass('loaded');
				}
			}
		}

		// Stop clock if players stops...
		if (event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.BUFFERING || event.data == -1) {
			// Only stop clock if video is already playing, to avoid recursion 
			if( clockCounting == 1 ) {
				clock.stop();
			}
		}

		// Toggle play pause icon
		if (event.data == YT.PlayerState.PAUSED) {
			$videoTimelineControls.find('.video-timeline-controls-play')
				.addClass('paused');

			$('body').addClass('paused');
		}

		// ... and start clock when player starts
		if (event.data == YT.PlayerState.PLAYING) {
			// If initial setup, strat clock and hide stuff
			if( videoFirstPlay == 0 ) {
				$('#video-intro').fadeOut('slow');
				$('html').addClass('loaded')
			}

			if( videoFirstPlay == 0 && hashed == false) {
				clock.setTime( elapsedDailySeconds );
			}

			// Hide overlay and pause button
			$('body').removeClass('buffering').addClass('videoloaded')

			// Hide overlay and pause button
			setTimeout(function(){
				$('body').removeClass('paused');
			}, 200);

			$videoTimelineControls.find('.video-timeline-controls-play')
				.removeClass('paused');

			// Start clock if not chaning hour manually
			clock.start();

			// Seek video if on mobile
			if( videoFirstPlay == 0 && isMobile.any() ) {
				player.pauseVideo();
				player.seekTo( elapsdeHourlySeconds + 2 );
				player.playVideo();
			}
			
			// Tell everyone we're no longer paused
			videoPaused = 0;

			// Tell everyeon we're playing 
			videoFirstPlay = 1;
		}
	}
 
	// Append thumbs
	var thumbs1 = document.createElement("link");
	thumbs1.href = "http://static.publico.pt/files/publico25anos/css/thumbs1.css?v2";
	thumbs1.type = "text/css";
	thumbs1.rel = "stylesheet";
	document.getElementsByTagName("head")[0].appendChild(thumbs1);

	var thumbs2 = document.createElement("link");
	thumbs2.href = "http://static.publico.pt/files/publico25anos/css/thumbs2.css?v2";
	thumbs2.type = "text/css";
	thumbs2.rel = "stylesheet";
	document.getElementsByTagName("head")[0].appendChild(thumbs2);

	var thumbs3 = document.createElement("link");
	thumbs3.href = "http://static.publico.pt/files/publico25anos/css/thumbs3.css?v2";
	thumbs3.type = "text/css";
	thumbs3.rel = "stylesheet";
	document.getElementsByTagName("head")[0].appendChild(thumbs3);

	var thumbs4 = document.createElement("link");
	thumbs4.href = "http://static.publico.pt/files/publico25anos/css/thumbs4.css?v2";
	thumbs4.type = "text/css";
	thumbs4.rel = "stylesheet";
	document.getElementsByTagName("head")[0].appendChild(thumbs4);

});