window.HELPERS = {
	animationPos: {
		"arriba-izquierda": ['fadeInLeft', 'fadeOutLeft'],
		"arriba-derecha": ['fadeInRight', 'fadeOutRight'],
		"centro-izquierda": ['fadeInLeft', 'fadeOutLeft'],
		"centro-derecha": ['fadeInRight', 'fadeOutRight'],
		"abajo-izquierda": ['fadeInLeft', 'fadeOutLeft'],
		"abajo-derecha": ['fadeInRight', 'fadeOutRight']
	},
	showPoint: function (pointData, timelineData) {
		pointData.posicion = pointData.posicion || "arriba-derecha";
		var template = 'extra-'+pointData.tipo;
		var animatedClass = HELPERS.animationPos[pointData.posicion];

		if (!HELPERS.tmpls[template]) {
			template = 'showInfo';
		}

		pointData.$element = $($.trim(Mustache.render(HELPERS.tmpls[template], pointData))).addClass('animated '+ animatedClass[0]);
		timelineData.$container.append(pointData.$element);

		if (HELPERS.scriptsPoints[pointData.tipo]) {
			HELPERS.scriptsPoints[pointData.tipo](video, pointData);
		}
		pointData.$element.find('a[target="_blank"]').click(function () {
			video.pause();
		});

		setTimeout(function () {
			pointData.$element.removeClass('animated '+ animatedClass[0]);
		}, 2000);
	},
	hidePoint: function (pointData, timelineData) {
		pointData.$element.on('mouseleave', function () {
			var animatedClass = HELPERS.animationPos[pointData.posicion];
			pointData.$element.removeClass(animatedClass[0]).addClass(animatedClass[1]);

			setTimeout(function () {
				pointData.$element.remove();
			}, 2000);
		});
		
		if (!pointData.$element.data('hovering')) {
			pointData.$element.trigger('mouseleave');
		}
	},
	scriptsPoints: {
		video_interno: function (mainVideo, pointData) {
			var subvideo = $.media(pointData.$element.find('video'));
			var $btn = pointData.$element.find('.extra-btn');
			var $layer = pointData.$element.find('.video-div');

			var time = mainVideo.time();

			$layer.click(function () {
				time = mainVideo.time();
				
				mainVideo.pause();

				if ($media.support('multiInstances')) {
					mainVideo.disableTimeline('extras');
				}
				
				subvideo.controls(true).play();
				$layer.remove();
			});

			mainVideo.data('secondaryVideo', subvideo);
			
			$btn.click(function () {
				subvideo.pause();
				mainVideo.enableTimeline('extras').seek(time).play();
				pointData.$element.fadeOut('normal');
			});

			subvideo.ended(function () {
				$btn.click();
			});

		},
		little_bb: function (mainVideo, pointData) {
			pointData.$element.find('a.fancybox').click(function () {
				var src = $(this).attr('href');
				console.log(src);
				var $lbb = $('#little_black_book a[href="' + src + '"]').click();

				return false;
			});
		}
	},
	startChapter: function (pointData, timelineData) {
		var index = pointData.chapterNum - 1;
		var $current = timelineData.$chapters.eq(index);
		
		timelineData.$chapters.removeClass('viewed');
		
		if (index > 0) {
			timelineData.$chapters.slice(0, index).addClass('viewed')
		}
		
		timelineData.$chapters.removeClass('selected').find('.progress').css('width', '100%');
		$current.addClass('selected');

		var capitulo = DATA.capitulos[pointData.chapterNum];
		var offset = capitulo.in_capitulo.toSeconds();
			
		this.data('chapterPiece', {
			offset: offset,
			duration: (capitulo.out_capitulo.toSeconds() - offset),
			$target: $current.find('.progress')
		});
	},
	showPicto: function (pointData, timelineData) {
		var picto = 'web/templates/img/pictos/' + pointData.picto;

		pointData.$picto = $($.trim(Mustache.render(HELPERS.tmpls.picto, {
			src: picto,
			texto: pointData.texto
		}))).appendTo(timelineData.$pictos).attr('class', 'animated fadeInDown');
	},
	hidePicto: function (pointData, timelineData) {
		pointData.$picto.removeClass('fadeInDown').addClass('fadeOutUp');

		setTimeout(function () {
			pointData.$picto.remove();
		}, 1000);

	},
	showTextPicto: function () {
		$('#pictos p').show().addClass('animated fadeIn');
	},
	tmpls: {}
};

var video;

$(document).ready(function () {
	video = $.media('#main-video');

	isHD(function () {
		var src = video.source();
		video.source(src.replace('_pequeno.', '_grande.'));

		var hash = document.location.hash;
		
		if (hash) {
			video.seek(hash.substr(1)).play();
		}
	});

	//Garda todas as plantillas
	$('script[type="text/mustache"]').each(function () {
		var id = $(this).data('tmpl');
		HELPERS.tmpls[id] = this.text;
	});

	//Crea o timeline
	video.createTimeline('extras', {
		data: {
			$container: $('#main-video-container')
		}
	});

	//Carga os puntos no timeline e activao
	var points = [];

	for (var i = DATA.extras.length - 1; i >= 0; i--) {
		var data = DATA.extras[i];
		data.hd = window.HD;

		points.push({
			time: [data['in'], data['out']],
			data: data,
			fn: HELPERS.showPoint,
			fn_out: HELPERS.hidePoint
		});
	}

	video.addTimelinePoints('extras', points);
	video.enableTimeline('extras');

	//Carga a info dos nove capítulos
	var points = [];
	var $chapters =  $('#main-video-chapters > li');

	$.each(DATA.capitulos, function (i, value) {
		points.push({
			time: [value.in_capitulo, value.out_capitulo],
			data: {
				chapterNum: parseInt(value.numero_capitulo)
			},
			fn: HELPERS.startChapter
		});

		//Pictos
		var time = value.in_picto.toSeconds();

		for (var total = parseInt(value.numero_pictos), p = 1; p <= total; p++) {
			points.push({
				time: [time, value.out_picto],
				data: {
					picto: 'picto-' + i + '-' + p + '.png',
					texto: value.picto_textos[p-1]
				},
				fn: HELPERS.showPicto,
				fn_out: HELPERS.hidePicto
			});

			time += 1;
		};

		var timeTexts = value.out_picto.toSeconds() - 7;

		points.push({
			time: [timeTexts, value.out_picto],
			fn: HELPERS.showTextPicto
		});
	});

	video.createTimeline('chapters', {
		enabled: true,
		data: {
			$chapters: $chapters,
			$pictos: $('#pictos')
		},
		points: points
	});

	//UI
	
	//Botón play/pause
	var $playPause = $('#main-video-playpause');

	$playPause.on('click', function () {
		video.playPause();
	});
	
	video.ready(function () {
		//Slider
		var $slider = $('#main-video-slider > div');

		$slider.slider({
			min: 0,
			max: video.duration(),
			range: 'min',
			stop: function (event, ui) {
				$slider.data('dragging', false);
				video.seek(ui.value);
			},
			start: function (event, ui) {
				$slider.data('dragging', true);
			}
		});

		//Tempo
		var $video_time = $('#main-video-time');
		var duration = video.duration().secondsTo('mm:ss');

		video.time(function () {
			var time = this.time();
			var chapterPiece = this.data('chapterPiece');

			$video_time.html(time.secondsTo('mm:ss') + ' / ' + duration);
			
			if (!$slider.data('dragging')) {
				$slider.slider('value', time);
			}

			if (chapterPiece) {
				var pieceTime = time - chapterPiece.offset;
				var percent = 100 - ((pieceTime * 100) / chapterPiece.duration);

				if (percent > 100) {
					percent = 100;
				}

				chapterPiece.$target.css('width', percent + '%');
			}
		});
	});

	video.play(function () {
		$playPause.addClass('playing');

		var secondaryVideo = this.data('secondaryVideo');
		
		if (secondaryVideo) {
			secondaryVideo.pause();
		}
	});

	video.pause(function () {
		$playPause.removeClass('playing');
	});

	video.trigger('timeupdate');

	//Chapters
	$chapters.click(function () {
		var capitulo = DATA.capitulos[$(this).index() + 1];

		if (capitulo) {
			video.seek(capitulo.in_capitulo).play();
		}
	});

	//Little Black book
	$galeria = $('#little_black_book a');
	$galeria.fancybox({
		maxWidth:'90%',
		maxHeight:'75%',
		beforeShow: function () {
			if (!video.data('playOnClose') && video.playing()) {
				video.data('playOnClose', true);
			}

			video.pause();
		},
		afterClose: function () {
			console.log('adios');
			if (video.data('playOnClose')) {
				video.play();
			}
			video.data('playOnClose', false);
		},
		afterLoad: function (current, previous) {
			var capitulo = current.index + 1;
			var html = $.trim(Mustache.render(HELPERS.tmpls.lbb_btn_ir, {
				capitulo: capitulo,
				titulo: DATA.capitulos[capitulo].lbb_titulo
			}));

			var $btn = $('.fancybox-btn-ir').html(html);

			$btn.find('strong, span').click(function () {
				if (DATA.capitulos[capitulo]) {
					video.seek(DATA.capitulos[capitulo].in_capitulo).play();
					$.fancybox.close();
				}
			});
		},
		tpl: {
			wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-intro">Little Black Book es el diario personal que empieza escribir Lisa Pram durante un período de gran incertidumbre. Incluye textos, dibujos y fotografías que dedica a sus hijas. El documental Cromosoma Cinco está basado en esta pieza íntima. A continuación te mostramos algunos extractos que cada uno te llevará al capítulo correspondiente.</div><div class="fancybox-inner"><div class="fancybox-btn-ir"></div></div></div></div></div>',
			image    : '<img class="fancybox-image" src="{href}" alt="" />',
			iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" allowtransparency="true"></iframe>',
			error    : '<p class="fancybox-error">Esta página no se pudo cargar.<br/>Por favor, intentalo más tarde.</p>',
			closeBtn : '<a title="Cerrar" class="fancybox-item fancybox-close" href="javascript:;"></a>',
			next     : '<a title="Siguente" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
			prev     : '<a title="Anterior" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
		},
		padding: 1,
		helpers: {
			title: null
		}
	});

	$('#open-little_black_book').click(function () {
		$galeria.first().click();
	});

	//Manten os extras visibles on mouseover
	$('#main-video-container').on('mouseenter', 'article', function () {
		$(this).data('hovering', true);
	}).on('mouseleave', 'article', function () {
		$(this).data('hovering', false);
	});

	//Ir a un punto concreto do vídeo
	$(window).on('hashchange', function () {
		var hash = document.location.hash;
		
		if (hash) {
			video.seek(hash.substr(1)).play();
		}
	}).trigger('hashchange');

	//Eliminar scroll horizontal
	$('body').css('overflow-x', 'hidden');

	//Tamaños pequenos
	addToMediaQuery(100, function () {
		video.disableTimeline('chapters');
		video.disableTimeline('extras');
		video.controls(true);
		$('#main-video-controllers').hide();
		$('#open-little_black_book').hide();
		$('#aviso-navegadores').show();
	});
	addToMediaQuery(700, function () {
		video.enableTimeline('chapters');
		video.enableTimeline('extras');
		video.controls(false);
		$('#main-video-controllers').show();
		$('#open-little_black_book').show();
		$('#aviso-navegadores').hide();
	});
});