$(document).ready(inicia);


function inicia() {
  
  $('#fade').hide();
  $('#fade').fadeIn(800);
  
  $('#ralla').css({opacity:"0"});
  
  menu();
  proyectos();
  proyectoDetalle();
  
}


function menu(){
	
	
	$("#1").hover(
      function () {	
		$('#ralla').stop().animate({left: "0px", opacity:"1"}, 200);
      }, 
      function () {
		$("#ralla").stop().animate({ left: "0px", opacity:"0"}, 200);
      }
    );
	
	$("#2").hover(
      function () {	
		$('#ralla').stop().animate({left: "90px", opacity:"1"}, 200);
      }, 
      function () {
		$("#ralla").stop().animate({ left: "0px", opacity:"0"}, 200);
      }
    );
		
	$("#3").hover(
      function () {	
		$('#ralla').stop().animate({left: "180px", opacity:"1"}, 200);
      }, 
      function () {
		$("#ralla").stop().animate({ left: "0px", opacity:"0"}, 200);
      }
    );
			
	$("#4").hover(
      function () {	
		$('#ralla').stop().animate({left: "270px", opacity:"1"}, 200);
      }, 
      function () {
		$("#ralla").stop().animate({ left: "0px", opacity:"0"}, 200);
      }
    );
	
}



function proyectos(){
	
	
	$("#contenedor1_izq").hover(
      function () {	
		$('#fondo1').stop().animate({top: "-3px"}, 100);
		$('h4', this).css({ color:"#333"});
      }, 
      function () {
		$("#fondo1").stop().animate({ top: "22px"}, 100);
		$('h4', this).css({ color:"#CCC"});
      }
    );
	
		$("#contenedor2_izq").hover(
      function () {	
		$('#fondo2').stop().animate({top: "-3px"}, 100);
		$('h4', this).css({ color:"#333"});
      }, 
      function () {
		$("#fondo2").stop().animate({ top: "22px"}, 100);
		$('h4', this).css({ color:"#CCC"});
      }
    );
		
		$("#contenedor3_izq").hover(
      function () {	
		$('#fondo5').stop().animate({top: "-3px"}, 100);
		$('h4', this).css({ color:"#333"});
      }, 
      function () {
		$("#fondo5").stop().animate({ top: "22px"}, 100);
		$('h4', this).css({ color:"#CCC"});
      }
    );
		
		$("#contenedor1_der").hover(
      function () {	
		$('#fondo3').stop().animate({top: "-3px"}, 100);
		$('h4', this).css({ color:"#333"});
      }, 
      function () {
		$("#fondo3").stop().animate({ top: "22px"}, 100);
		$('h4', this).css({ color:"#CCC"});
      }
    );
	
		$("#contenedor2_der").hover(
      function () {	
		$('#fondo4').stop().animate({top: "-3px"}, 100);
		$('h4', this).css({ color:"#333"});
      }, 
      function () {
		$("#fondo4").stop().animate({ top: "22px"}, 100);
		$('h4', this).css({ color:"#CCC"});
      }
    );

	$("#contenedor1").hover(
      function () {	
		$('#fondo1a').stop().animate({top: "-3px"}, 100);
		$('h4', this).css({ color:"#333"});
      }, 
      function () {
		$("#fondo1a").stop().animate({ top: "22px"}, 100);
		$('h4', this).css({ color:"#CCC"});
      }
    );
	
	$("#contenedor2").hover(
      function () {	
		$('#fondo2a').stop().animate({top: "-3px"}, 100);
		$('h4', this).css({ color:"#333"});
      }, 
      function () {
		$("#fondo2a").stop().animate({ top: "22px"}, 100);
		$('h4', this).css({ color:"#CCC"});
      }
    );
	
	$("#contenedor3").hover(
      function () {	
		$('#fondo3a').stop().animate({top: "-3px"}, 100);
		$('h4', this).css({ color:"#333"});
      }, 
      function () {
		$("#fondo3a").stop().animate({ top: "22px"}, 100);
		$('h4', this).css({ color:"#CCC"});
      }
    );
	
	
}





/*proyectoDetalle*/



function proyectoDetalle(){
  var posicionActual = 0;
  var anchoSlide = 640;
  var slides = $('.slide');
  var numeroDeSlides = slides.length;


  // Ancho de #carrusel igual al total de el ancho de todas las slides
  $('#carrusel').css('width', anchoSlide * numeroDeSlides);

  
  // Esconde la flecha izquierda
  manageControls(posicionActual);

  // Crea event listeners para .controls en click
  $('.control')
    .bind('click', function(){
    // Determina nueva posicion
	posicionActual = ($(this).attr('id')=='flechaGder') ? posicionActual+1 : posicionActual-1;
    
	// esconde / enseņa flechas
    manageControls(posicionActual);
    // Mueve carrusel usando margin-left
    $('#carrusel').animate({
      'marginLeft' : anchoSlide*(-posicionActual)
    });
  });

  // manageControls: Esconde/Enseņa las flechas dependiendo de posicionActual 
  function manageControls(position){
    // Esconde la flecha izqierda si la posicion es la primera slide
	if(position==0){ $('#flechaGizq').hide() } else{ $('#flechaGizq').show() }
	// Esconde la flecha izqierda si la posicion es la ultima slide
    if(position==numeroDeSlides-1){ $('#flechaGder').hide() } else{ $('#flechaGder').show() }
  }	
}