$(document).ready(function(){

	var currentPosition = 0;

	var slideWidth = 970;

	var slides = $('.slide');

	var numberOfSlides = slides.length;
	
	var intervalo = 10000; //Intervalo entre imagenes en milisegundos

	var velocidad = 1000; //Velocidad de paso de cada imagen en milisegundos

	var tempo;	//Variable para recoger el setTimeout para pararlo

	
	// Remove scrollbar in JS

	$('#slidesContainer').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

		});



	// Set #slideInner width equal to total width of all slides

	$('#slideInner').css('width', slideWidth * numberOfSlides);



	// Insert controls in the DOM

	$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>')
		.append('<span class="control" id="rightControl">Clicking moves right</span>');



	// Hide left arrow control on first load

	manageControls(currentPosition);
	
	// 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);

		// Move slideInner using margin-left

		$('#slideInner').animate({

			'marginLeft' : slideWidth*(-currentPosition)
	
		},velocidad);

	});


  // manageControls: Hides and Shows controls depending on currentPosition

	function auto_slider(){

		// Determine new position
		if((numberOfSlides-1)==currentPosition){
			currentPosition = 0;
		}else{
			currentPosition = currentPosition+1;
		}

		// Hide / show controls

		manageControls(currentPosition);

		// Move slideInner using margin-left

		$('#slideInner').animate({

		  'marginLeft' : slideWidth*(-currentPosition)

		},velocidad);

		tempo = window.setTimeout(auto_slider,intervalo);
	}

	function manageControls(position){

		// 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() }

	}
	
	tempo = window.setTimeout(auto_slider,intervalo);

	// Create event listeners for .slider mouseout
	
	$('#slider').bind('mouseout', function(){

		tempo = window.setTimeout(auto_slider,intervalo);

	});	
	
	// Create event listeners for .slider mouseover

	$('#slider').bind('mouseover', function(){

		clearTimeout(tempo);

	});
	
});