$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 682;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // 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 left and right arrow controls in the DOM
  //$('#slideshow')
	//.prepend('<div class="control" id="leftControl"> <img src="afbeeldingen/control_left.png" /></div>')
    //.append('<div class="control" id="rightControl"> <img src="afbeeldingen/control_right.png" /></div>');
	//.prepend('<span class="control" id="leftControl">Move left</span>')
    //.append('<span class="control" id="rightControl">Move 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)
		});
    });

  // manageControls: Hides and shows controls depending on currentPosition
  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() }
    }
	
	//Rotation  and Timing Event
	rotateSwitch = function()
	{
		play = setInterval(function()
		{ //Set timer - this will repeat itself every 5 seconds
			// Hide / show controls
			//manageControls(currentPosition);
			// Move slideInner using margin-left
			if (currentPosition < numberOfSlides-1)
			{
				currentPosition = currentPosition + 1;
			}
			else
			{	
				currentPosition = 0;
			}
			$('#slideInner').animate(
			{
				'marginLeft' : slideWidth*(-currentPosition)
			});
		}, 5000);		//Timer speed in milliseconds (7 seconds)
	};
	rotateSwitch(); //Run function on launch
  });