/*
$("#IntroGif").on("click", function(){
	$("#IntroGif").hide();
	$("#todo-o-conteudo").show();
	$("#video1landscape").trigger('play');
});
*/


function mediaSize() {
	/* Set the matchMedia */
	if (window.matchMedia('(orientation: portrait) and (max-width: 720px)').matches) {
		/* Changes when we reach the min-width  */

		$("#IntroGif").on("click", function(){
			$("#IntroGif").hide();
			$("#todo-o-conteudo").show();
			$("#video1portrait").trigger('play');
			$("#video1landscape").trigger('pause');
			console.log('matchMedia : true');
		});

	} else {
		/* Reset for CSS changes – Still need a better way to do this! */

		$("#IntroGif").on("click", function(){
			$("#IntroGif").hide();
			$("#todo-o-conteudo").show();
			$("#video1landscape").trigger('play');
			$("#video1portrait").trigger('pause');
			console.log('matchMedia : false');
		});
	}
}
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);


/**
 * Video Module
 *
 * Instatiate like this: VideoModule.init();
 */
var VideoModule = (function() {
	// constants
	var ON_SCROLL_BEHAVIOUR = 0;
	var ON_HOVER_BEHAVIOUR  = 1;

	var _video 		    = $('#omeuvideo1', '#omeuvideo2');
	var _playVideoBtn   = $('#playVideo');
	var _unmuteVideoBtn = $('#unmuteVideo');

	// default is on scroll behaviour
	var _behaviour = ON_SCROLL_BEHAVIOUR;

	var hover = function hoverVideo() {
		console.log('Hover video.');
		// start video on document ready
		if (_video[0].paused) {
			console.log('Video is paused. Trying to play it.');
			var playPromise = _video[0].play();

			if (playPromise !== undefined) {
			  playPromise.then(function() {
			    // Automatic playback started!
			    if (_video[0].muted) {
			    	setTimeout(function() { 
			    		//_video[0].muted = false; 

			    		if (_video[0].paused) {
			    			_playVideoBtn.show();
			    		}
			    		
			    	}, 500);
			    }
			  }).catch(function(error) {
			    // Automatic playback failed.
			    console.log(error.message);
			    _playVideoBtn.show();
			  });
			}
			
			_playVideoBtn.hide();		
		}
	};

	var pause = function pauseVideo() {
		console.log('Pause video.');
		_video[0].pause();
		_playVideoBtn.show();
	};

	var scrollHandler = function(e) {
		if (_video.isInViewport()) {
			if(_video[0].paused) {
				console.log('On viewport : playing video');
				_video[0].play();
				_playVideoBtn.hide();
				_video.attr('is-playing', true);
			}
		} else {
			console.log('Out viewport');
			
			if (!_video[0].paused) {
				console.log('Out viewport : pausing video');
				_video[0].pause();
				_playVideoBtn.show();	
				_video.attr('is-playing', false);
			}
		}
	};

	/**
	 * Call this method to init Video Module
	 */
	var init = function() {
		$.fn.isInViewport = function() {
		  var elementTop 	 = $(this).offset().top;
		  var elementBottom  = elementTop + $(this).outerHeight();
		  var viewportTop 	 = $(window).scrollTop();
		  var viewportBottom = viewportTop + $(window).height();

		  return elementBottom > viewportTop && elementTop < viewportBottom;
		};

		if (_behaviour == ON_SCROLL_BEHAVIOUR) {
			$(window).on('resize scroll', scrollHandler);
		} else if (_behaviour == ON_HOVER_BEHAVIOUR) {
			$(window).off("scroll", scrollHandler);
			_video.on("mouseover", function() { VideoModule.hover(); });
    		_video.on("mouseout", function() { VideoModule.pause(); });
		}
		
		// on click video, play it and hide button
		_playVideoBtn.on('click', function(e) {
			_video[0].play();
			_video[0].muted = false;
			$(this).hide();

			return false;
		});

		_playVideoBtn.show();

		_unmuteVideoBtn.click(function(e) {
			console.log('Unmuting video...');
			$(this).hide();
			_video[0].muted = false;
		});

		return this;
	};

	/**
	 * Call this method before init() if you want to change default behaviour 
	 */
	var setBehaviour = function(b) {
		if (b === ON_SCROLL_BEHAVIOUR) {
			_behaviour = ON_SCROLL_BEHAVIOUR;
		} else if (b === ON_HOVER_BEHAVIOUR) {
			_behaviour = ON_HOVER_BEHAVIOUR;
		}

		return this;
	}

	var getOnScrollBehaviour = function() {
		return ON_SCROLL_BEHAVIOUR;
	}

	var getOnHoverBehaviour = function() {
		return ON_HOVER_BEHAVIOUR;
	}

	return {
		init: init,
		hover: hover,
		pause: pause,
		setBehaviour: setBehaviour
	}
})();




$(window).scroll(function() {
    $('video').each(function() {
        if ($(this).visible(true)) {
            $(this)[0].play();
        } else {
            $(this)[0].pause();
        }
    })
});