// funções Java Script ( MEDIA GROUP com base em HTML DOMContentLoader)

(function( window, document, mediagroup ) { //janela, grupo, documento MediaGrupo, sincronização do grupo

	var requestAnimFrame = (function( window ) {
		var suffix = "equestAnimationFrame",
			rAF = [ "r", "webkitR", "mozR", "msR", "oR" ].filter(function( val ) {
				return val + suffix in window;
			})[ 0 ] + suffix;

		return window[ rAF ]	|| function( callback, element ) {
			window.setTimeout(function() {
				callback( +new Date() );
			}, 1000 / 60);
		};
	})( window );

	// Converte o DOMContentLoader num Array (Matriz)

	Array.from = function( arrayish ) {
		return [].slice.call( arrayish );
	};

	function mediaGroupSync( controller, slaves ) { // identifica os filhos "slaves" e sincronização

		if ( slaves.length ) {
			slaves.forEach(function( slave ) {
				if ( slave.currentTime !== controller.currentTime ) {
					slave.currentTime = controller.currentTime;
				}
			});
		}

		requestAnimFrame(function() {
			mediaGroupSync( controller, slaves );
		});
	}

	function mediaGroupListeners( controller, slaves, callback ) {

		// var events = [ "play", "pause" ];
		//
		// Associar eventos em todos os elementos escravos
		// events.forEach(function( type, i ) {
		//
		//  Define eventos dos Ouvintes "filhos" para o elemento controlador pai
		// controller.addEventListener( type, function() {
		//
		//   var evt = document.createEvent( "Events" );
		//
		//   evt.initEvent(
		//     type, true, true, window
		//   );
		//
		//   Delega eventos para escravos "filhos"
		//   slaves.forEach(function( slave ) {
		//     slave.dispatchEvent( evt );
		//   });
		// });
		//
		// if ( (i + 1) === events.length ) {
		//     callback();
		// }
		// });

		callback();
	}

	function mediaGroup( group, elements ) { // função de Grupo e elementos

		var controller, slaves,
			ready = 0;

		// Pega no elemento controlador único
		controller = elements.filter(function( elem ) {
			return !!elem.controls || elem.getAttribute("controls", true);
		})[ 0 ];

		//  filtro para todos os elementos que irão
		//  ser controlados pelo elemento controlador unico
		slaves = elements.filter(function( elem ) {
			return !elem.controls;
		});

		if ( !controller ) {
			return;
		}

		// verifica que os elementos não são mainpulados "canplay"
		function canPlay() {

			if ( ++ready === elements.length ) {

				// Agora é seguro reproduzir o vídeo, remove os controlos
				elements.forEach(function( elem ) {
					elem.removeEventListener( "canplay", canPlay, false );
				});

				mediaGroupListeners( controller, elements, function() {
					mediaGroupSync( controller, slaves );
				});
			}
		}

		// Integra todos os elementos no conjunto MediaGroup
		// adiciona "canplay" aos filhos e garante que estão com tempos correctos
		// procura elemento de midia se ainda não foi encontrado

		elements.forEach(function( elem ) {

			// Define o elemento real IDL Propriedade "mediaGroup"
			elem.mediaGroup = elem.getAttribute( mediagroup );

			elem.addEventListener( "canplay", canPlay, false );
		});
	}

	function mediaGroupSetup( selector ) {
		// Declare referências
		// NodeList de todos os elementos com "MediaGroup" atribuidos
		// elements: `nodelist` como matriz verdadeira
		// filtereds: objeto cujas propriedades tem valor de atributo numa `MediaGroup`
		//            Com os valores que são matrizes de elementos correspondentes
		// mediagroups: matriz única de cada nome MediaGroup
		var nodelist = document.querySelectorAll( selector || "[" + mediagroup + "]" ),
			elements = Array.from( nodelist ),
			filtereds = {},
			mediagroups;

			// Condição, somente se nenhum "mediaGroup" existir
			elements = elements.filter(function( elem ) {
				return !elem.mediaGroup;
			});

			// Filtro por GroupName "retornará True ou False"
			mediagroups = elements.map(function( elem ) {
				return elem.getAttribute( mediagroup );
			}).filter(function( val, i, array ) {
				if ( !filtereds[ val ] ) {
					filtereds[ val ] = elements.filter(function( elem ) {
						return elem.getAttribute( mediagroup ) === val;
					});
					return true;
				}
				return false;
			});

		// Captura todos os nomes MediaGroup recolhidos
		// Chama todos os MediaGroup() com o nome de grupo e respectivos parametros
			mediagroups.forEach(function( group ) {
			mediaGroup( group, filtereds[ group ] );
		});
	}

	// Faz escuta para eventos com alteração
	[ "DOMNodeInserted", "DOMAttrModified" ].forEach(function( mutation ) {

		document.addEventListener( mutation, function( event ) {

			// Detecta se existe recursos para apoio MediaGroup
			// se é TRUE volta e não faz nada.
			if ( "mediaGroup" in document.createElement("video") ) {
				return;
			}

			var element = event.target,
			valid = [ "AUDIO", "VIDEO" ].some(function( val ) {
				return element.nodeName === val;
			});

			if ( valid && !element.mediaGroup &&
					(element.controls || element.getAttribute("controls") === "true") ) {

				window.setTimeout(function() {
					mediaGroupSetup( "[" + mediagroup + "='" + element.getAttribute( mediagroup ) + "']" );
				}, 100 );
			}
		});
	});

	// Cria automaticamente defenições para o MediaGroup quando o "DOM" está pronto
	document.addEventListener( "DOMContentLoaded", function() {

		// Detect o apoio MediaGroup
		// Se não existe, não faz nada.
		if ( "mediaGroup" in document.createElement("video") ) {
			return;
		}

		mediaGroupSetup();

	}, false );

	// Garantia para que novos elementos adicionados, sejam reconhecidos pelo "MediaGroup"

})( this, this.document, "mediagroup" );