$(function(){
	
	scrollVideos();
})

function scrollVideos(){
	
	$('.wraperVideos:first').css("margin-top", "-55px");
	
	var videoId = $('.firstVideo').attr('id');
	
	initVideo(videoId, 0);
	
		
	//seteo el ancho del overview porque el plugin no lo hace
	//trabaja con uno fijo, asi que lo hago dinamico segun el contenido desde aca.
	
	$('.overview').each(function(){
		
		var url = $(this).parent('div').children('a.seeAllurl').attr('href');
		
		var overview = $(this);
		
		var overviewWidth = overview.width();
		
		var totalWidth = 0;
		
		var videosCount = 0;
		
		$.get(url, function(data){
			
			overview.append($(data).find('.wrapThumb'));
			
			videosCount = $(data).find('.wrapThumb').length;
			
			overview.children('div.wrapThumb').each(function(i){
			
				var id = $(this).attr('id');
				
				$(this).click(function(){
					
					$('html:not(:animated),body:not(:animated)').animate({scrollTop: 0}, 800);
					
					initVideo(id, 1);
				});
				
				//aplico opacity a las imagenes
				$(this).children('img').fadeTo(50, 0.6);
				
				$(this).hover(
					
					function(){
						
						$(this).children('img').fadeTo(300, 1);
						$(this).children('p').css('color', '#8e0e13');
					},
					function(){
						
						$(this).children('img').fadeTo(300, 0.6);
						$(this).children('p').css('color', '#888888');
				});
				
				totalWidth += $(this).width() + 15; //los 15 son del margen derecho
				
				if((i+1) == videosCount){
					
					$(this).css('margin-right', 0); //quito los 15 del ultimo margen
					totalWidth -= 15; //quito los 15 del ultimo margen
					
					if(totalWidth > overviewWidth){
			
						overview.width(totalWidth);
					}
				}
			});
		});		
	});
	
	
	$('.overview').ajaxStop(function(){
		
		var oScrolls = $('.wraperVideos');
		
		if(oScrolls.length > 0){
			oScrolls.tinyscrollbar({ 
				axis: 'x',
				size: 942,
				sizethumb: 252 
			});
		}		
	});
}


function initVideo(videoId, autoPlay){
    
	$('#videoContainer').html('<iframe width="560" height="300" src="https://www.youtube.com/embed/' + videoId + '?rel=0&amp;wmode=transparent&amp;autoplay=' + autoPlay + '" frameborder="0" allowtransparency="true" allowfullscreen></iframe>');
}