// Esperamos a la carga de la página para empezar...
$(document).ready(function() { 
 
	// declaramos slider como objeto javascript...
	var slider = {};
	var sliderDots = {};
 
	// Declarando el id para buscar el elemento "ul": 
	slider.initQuery = '#slideFotos';
 
	// declarando variables iniciales...
	slider.slider = $( slider.initQuery + " ul,ul"+slider.initQuery); // seleccionamos el "ul" con jquery
	slider.slides = slider.slider.find('li'); // seleccionamos cada uno de sus "li"
	slider.number = slider.slides.length; // Contamos el numero de "li" y por tanto slides que tenemos
	slider.actual = 0; // marcado para saber que slide estamos viendo, actualmente la primera, o sea la 0
	slider.height = 0; // altura del slider... luego la calcularemos
	slider.width = 0; // anchura del slider... luego la calcularemos
	
	// botones inferiores
	sliderDots = $("#slideItems ul"); // seleccionamos el "ul" con jquery
	sliderDots.items = sliderDots.find('li'); // seleccionamos cada uno de sus "li"
	sliderDots.number = sliderDots.items.length; // Contamos el numero de "li" y por tanto slides que tenemos
 	//console.log(sliderDots.number);
	
	// buscando ancho y alto de <li> máximos para calcular altura y anchura del slider...
	for(i=0;i<slider.number;i++){
  		var w = $(slider.slides[i]).width();
  		var h = $(slider.slides[i]).height()-1;
  		slider.height = ( h > slider.height  ) ?  h : slider.height;	
  		slider.width = ( w > slider.width  ) ? w : slider.width;
		
		//Asigno titulos
		var titulo = $(slider.slides[i]).attr('title');
		$(sliderDots.items[i]).find('a').attr('title',titulo);
	}
 
	// formateando el css del <ul> contenedor, la caja del slider...
	slider.slider.css({
  		overflow: "hidden",
  		width: slider.width,  
  		height: slider.height,
  		position: 'relative'
	});
 
	// colocando en posicion absoluta todos los <li> del slider, para poder ir haciendo las transiciones...
	for (var i=0;i<slider.number;i++){
  		var sl = $(slider.slides[i]);
  		sl.attr('class',sl.attr('class') + " slider-slide-"+i);
  		sl.css({
			position : 'absolute',
			left : slider.width * i	
		});
	}
 
// funcion para moverse a un slide concreto...
slider.go = function (where) {
  if (where == 'next')
  {
    slider.actual = ( slider.actual < slider.number-1) ? slider.actual*1 + 1 : 0;
  }
  else if (where == 'prev')
  {
    slider.actual = ( slider.actual > 0) ? slider.actual - 1 : slider.number-1;
  }
  else
  {
    slider.actual = where;
  }
  //console.log(slider.actual);
  
  // Cambio clase en item activo
  $(sliderDots.items).find('a').removeClass("select");
  $(sliderDots.items[slider.actual]).find('a').addClass("select");
 
  for (var i=0;i<slider.number;i++)
  {
    var sl = $(slider.slides[i]);
    sl.animate({
       left : slider.width * (i - slider.actual)
    },1000);
  }
};
 
// creando botones de siguiente y anterior...
//$(slider.initQuery).append("<a href='#next' class='slider-prev'>Anterior</a><a href='#next' class='slider-next'>Siguiente</a>");
 
// asignando el evento a los botones de siguiente y anterior...
$("#slideBtnNext").click(function () {
  slider.go('next');
  return false;	
});
$("#slideBtnPrev").click(function () {
  slider.go('prev');
  return false;	
});


$("#slideItems ul li a").click(function () {
  slider.go( $(this).attr('rel') );
  return false;	
});
 
 
});