//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
  $('#slidestripContainer').show();
  	
  var currentPosition = 0;
  var slideWidth = 300;
  var slideHeight = 195;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // verwijder scrollbar in JS
  $('#slidestripContainer').css({	'overflow': 'hidden', 
  									'width': slideWidth
  								});

  // Verberg linker pijl control op first load
  manageControls(currentPosition);

  // Creeër eventlisteners for .controls buttons
  $('.control')
    .bind('click', function(){
		// Stop de loop
		clearInterval(sliderLoopId);
		
		var oldCurrentPosition = currentPosition;
		// Bepaal nieuwe positie
		  var move = true;
		  if($(this).attr('id')=='downControl')  {
			  	if(oldCurrentPosition == (numberOfSlides-1)){
					move = false;
				}
				currentPosition = currentPosition+1;
		  } else {
			  if(oldCurrentPosition == 0){
				  move = false;
			  }
			  currentPosition = currentPosition-1;
		  }
		
		if(move) {	
		
			moveSlider(currentPosition);
			//$('.current').html(currentPosition+1)
			// Verberg / Toon pijlen (controls)
			manageControls(currentPosition);
			// Verschuif slideInner using margin-left
			
		}else{
			currentPosition = oldCurrentPosition;
		}
	});
	
  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
	// stel huidige positie in.  
	$('.current').html(position+1) 
	 
	// verberg liker pijl als position eerste slide is
	if(position==0){ 
		$('#upControl').fadeTo(0, 0) 
	}else{ 
		$('#upControl').fadeTo(0, 1) 
	}
	// verber rechter pijl als position laatste slide is
	if(position==numberOfSlides-1){ 
		$('#downControl').fadeTo(0, 0)
	} else{ 
		$('#downControl').fadeTo(0, 1)
	}
 }
 
 function moveSlider(newPosition){
	$('#slideInner').stop();
	$('#slideInner').animate({
		'marginLeft' : slideWidth*(-newPosition)
	}, 1500);
 }
 
 // Stel een loopje in
 
 function sliderLoop (){
	// numberOfSlides 
	// currentPosition
	if(currentPosition < (numberOfSlides-1)) {
		currentPosition = currentPosition+1
	} else {
		currentPosition = 0;
	}
	
	moveSlider(currentPosition);
	manageControls(currentPosition)
	
 }
 var sliderLoopId = setInterval(sliderLoop, 5000);

 

});