/* -----------------------------------------------------------------------

	Marcelogreco.com - Thumbnail para vídeos.

	Author: Thiago Carvalho <thiago.carvalho at teadigital.com.br>

	Faz o thumbnail dos vídeos alternar imagens ao passar o mouse sobre ele.
	
	Requer:
		mootools 1.2 (mootools.js)
		
----------------------------------------------------------------------- */

function v_debug(x) {
	//console.log(x);
}

v_debug('funcionando...');


var VideoThumbnail = new Class({
	
	options: {
		image_container : 'div',
		preview_images : [],
		no_fade: false,
		preview_fade_in_time : 100,
		preview_fade_out_time : 800,
		preview_interval : 2000
	},
	
	initialize: function(options) {
		v_debug(options.image_container);
		this.container = $(options.image_container);
		this.container.addEvent('mouseover', function() {
			v_debug('!! mouseover');
			this.start();
			return true;
		}.bind(this));
		this.container.addEvent('mouseout', function() {
			v_debug('!! mouseout');
			this.stop();
			return true;
		}.bind(this));

		this.images = options.preview_images;
		this.fadeInTime = options.preview_fade_in_time;
		this.fadeOutTime = options.preview_fade_out_time;
		this.interval = options.preview_interval;

		this.rewind_on_stop = options.rewind_on_stop;
		this.no_fade = options.no_fade;
		
		this.container.set('twin', this.fadeInTime);
		
		this.currentIndex = 0;
		this.container.setStyle('background-image', 'url("' + this.currentImage() + '")');
	},
	
	start: function() {
		v_debug('start()...' + this.container.id);
		
		$clear(this.stopping);
		if(this.running) {
			v_debug('this.running: ' + this.running);
			return;
		}
		
		this.switchToNextImage();
		$clear(this.running);
		this.running = this.switchToNextImage.periodical(this.interval,this);
	},
	
	stop: function() {
		v_debug('stop()...' + this.container.id);
		this.stopping = function() {
			$clear(this.running);
			this.running = undefined;
			
			if(this.rewind_on_stop == true) {
				this.currentIndex = -1;
				this.switchToNextImage();
			}
		}.delay(50,this);
	},
	
	switchToNextImage: function() {
		v_debug('switchToNextImage()...' + this.interval);
		
		var container = this.container;
		var nextImage = this.nextImage();
		
		if(this.no_fade == true) {
			container.setStyles({
				'background-image' : 'url(' + nextImage + ')',
				'background-repeat' : 'no-repeat'
			});
		}
		else {
			var fxIn = new Fx.Tween(container,{
				duration: this.fadeInTime,
				onStart: function(){
					container.setStyles({
						'background-image' : 'url(' + nextImage + ')',
						'background-repeat' : 'no-repeat'
					});
				}
			});
			
			var fxOut = new Fx.Tween(container,{
				duration: this.fadeOutTime,
				onComplete: function() {
					fxIn.start('opacity', 0.1, 1);
				}
			});
			
			fxOut.start('opacity',1,0.1);
		}
	},
	
	currentImage: function() {
		v_debug('currentImage()...');
		return this.images[this.currentIndex];
	},
	
	nextImage: function() {
		v_debug('nextImage()...');
		this.currentIndex = (this.currentIndex+1)%this.images.length;
		return this.images[this.currentIndex];
	}
});


/*
 * Funções relativas aos vídeos da página.
 */


function mostra_video(n) {
	var fundo = $('video_fundo');
	var video = $('ver_video_'+n);
	
	var fx = new Fx.Tween(fundo,{
		duration: 500,
		onStart: function() {
			fundo.setStyle('display', 'block');
		},
		onComplete: function() {
			video.setStyle('display', 'block');
			escuta_esc();
		}
	});
	fx.start('opacity',0,0.93);
}

function escuta_esc() {
	$(document).addEvent('keydown', function(e) {
		// se pressionou o ESC
		if(e.key == 'esc') {
			fecha_video();
			$(document).removeEvent('keydown');
		}
	});
}

function fecha_video() {
	var fundo = $('video_fundo');
	var fx = new Fx.Tween(fundo,{
		duration: 500,
		onStart: function() {
			$('ver_video_1').setStyle('display','none');
			$('ver_video_2').setStyle('display','none');
			$('ver_video_3').setStyle('display','none');
			$('ver_video_4').setStyle('display','none');
			$('ver_video_5').setStyle('display','none');
			$('ver_video_6').setStyle('display','none');
		},
		onComplete: function() {
			fundo.setStyle('display', 'none');
		}
	});
	fx.start('opacity',0.93,0);
}

document.addEvent('domready', function() {
	$('fecha_video_btn').addEvent('click', fecha_video);
});