$(document).ready(function(){
  
  var currentPosition = 0;
  var currentPosition2 = 0;
  var currentPosition3 = 0;
  var currentPosition4 = 0;
  var slideWidth = 350;
  var slideWidthBig = 590;
  var slides = $('.slide');  
  var slides2 = $('.slide2'); 
  var slides3 = $('.slide3'); 
  var slidesBig = $('.slidebig');
  var numberOfSlides = slides.length;  
  var numberOfSlides2 = slides2.length;  
  var numberOfSlides3 = slides3.length;  
  var numberOfSlidesBig = slidesBig.length; 

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');
  $('#slidesContainer2').css('overflow', 'hidden');
  $('#slidesContainer3').css('overflow', 'hidden');
  $('#slidesContainerBig').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
  slides2
    .wrapAll('<div id="slideInner2"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
  slides3
    .wrapAll('<div id="slideInner3"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
  slidesBig
    .wrapAll('<div id="slideInnerBig"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidthBig
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideInner2').css('width', slideWidth * numberOfSlides2);
  $('#slideInner3').css('width', slideWidth * numberOfSlides3);
  $('#slideInnerBig').css('width', slideWidthBig * numberOfSlidesBig);
  
  // Hide left arrow control on first load
  manageControls(currentPosition, 0);  
  manageControls(currentPosition2, 2);  
  manageControls(currentPosition3, 3);
  manageControls(currentPosition4, 4);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition, 0);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });  
  $('.control2')
    .bind('click', function(){
    // Determine new position
	currentPosition2 = ($(this).attr('id')=='rightControl2') ? currentPosition2+1 : currentPosition2-1;
    
	// Hide / show controls
    manageControls(currentPosition2, 2);
    // Move slideInner using margin-left
    $('#slideInner2').animate({
      'marginLeft' : slideWidth*(-currentPosition2)
    });
  });  
  $('.control3')
    .bind('click', function(){
    // Determine new position
	currentPosition3 = ($(this).attr('id')=='rightControl3') ? currentPosition3+1 : currentPosition3-1;
    
	// Hide / show controls
    manageControls(currentPosition3, 3);
    // Move slideInner using margin-left
    $('#slideInner3').animate({
      'marginLeft' : slideWidth*(-currentPosition3)
    });
  });
  $('.controlBig')
    .bind('click', function(){
    // Determine new position
	currentPosition4 = ($(this).attr('id')=='rightControlBig') ? currentPosition4+1 : currentPosition4-1;
    
	// Hide / show controls
    manageControls(currentPosition4, 4);
    // Move slideInner using margin-left
    $('#slideInnerBig').animate({
      'marginLeft' : slideWidthBig*(-currentPosition4)
    });
  });  

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position, valor){
	 if(valor==0){
		// Hide left arrow if position is first slide
		if(position==0){ 
			$('#leftControl').hide() 
		} 
		else{ 
			$('#leftControl').show()
		}
		// Hide right arrow if position is last slide
		if(position==numberOfSlides-1){ 
			$('#rightControl').hide() 
		} 
		else{ 
			$('#rightControl').show() 
		}
	}
	else if(valor==2){
		// Hide left arrow if position is first slide
		if(position==0){ 
			$('#leftControl2').hide() 
		} 
		else{ 
			$('#leftControl2').show() 
		}
		// Hide right arrow if position is last slide
		if(position==numberOfSlides2-1){ 
			$('#rightControl2').hide() 
		} 
		else{ 
			$('#rightControl2').show() 
		}
	}
	else if (valor==3){
		// Hide left arrow if position is first slide
		if(position==0){ 
			$('#leftControl3').hide() 
		} 
		else{ 
			$('#leftControl3').show() 
		}
		// Hide right arrow if position is last slide
		if(position==numberOfSlides3-1){ 
			$('#rightControl3').hide() 
		} 
		else{ 
			$('#rightControl3').show() 
		}
	} else if (valor==4){ {
		// Hide left arrow if position is first slide
		if(position==0){ 
			$('#leftControlBig').hide() 
		} 
		else{ 
			$('#leftControlBig').show()  
		}
		// Hide right arrow if position is last slide
		if(position==numberOfSlidesBig-1){ 
			$('#rightControlBig').hide() 
		} 
		else{ 
			$('#rightControlBig').show() 
		}
	}
	
	}
  }	
  
});

function tabNews(id){
	var tabVer = document.getElementById('tabVer') ? document.getElementById('tabVer'): false;
	var tabAnteriores = document.getElementById('tabAnteriores') ? document.getElementById('tabAnteriores'):false;
	var tabMejores = document.getElementById('tabMejores') ? document.getElementById('tabMejores'):false;
	
	var boxVer = document.getElementById('modulo_lateral_ver')?  document.getElementById('modulo_lateral_ver'): false;
	var boxAnteriores = document.getElementById('modulo_lateral_anteriores')?  document.getElementById('modulo_lateral_anteriores'):false;
	var boxMejores = document.getElementById('modulo_lateral_mejores')?  document.getElementById('modulo_lateral_mejores'):false;
	
	if(tabVer != false)
		tabVer.className = "seccion_index_ver_tituloOff";
	if(tabAnteriores != false)
		tabAnteriores.className = "seccion_index_ver_tituloOff";
	if(tabMejores != false)
		tabMejores.className = "seccion_index_ver_tituloOff";
	
	if(boxVer != false)
		boxVer.style.display = "none";
	if(boxAnteriores != false)
		boxAnteriores.style.display = "none";
	if(boxMejores != false)
		boxMejores.style.display = "none";
	
	document.getElementById(id).className = "seccion_index_ver_titulo";
	
	if ( id == 'tabVer' ){
		boxVer.style.display = "block";
	}else if (id == 'tabAnteriores'){
		boxAnteriores.style.display = "block";
	}else if (id == 'tabMejores'){
		boxMejores.style.display = "block";
	}
	
	
	
	
	
	
}