jQuery(document).ready(function(){
	  var currentPosition = 0;
	  var slideWidth = 1100;
	  var slides = jQuery('.slide');
	  var numberOfSlides = slides.length;

	  // Remove scrollbar in JS
	  jQuery('#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
	  jQuery('#slideInner').css('width', slideWidth * numberOfSlides);

	  // Insert controls in the DOM
	  jQuery('#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
	  jQuery('.control')
		.bind('click', function(){
		// Determine new position
		currentPosition = (jQuery(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
		
		moveToPosition(currentPosition);
	  });
	  
	  // Create event listeners for .controlMenu clicks
	  jQuery('.controlMenu')
		.bind('click', function(){
		// Determine new position
		currentPosition = Number(jQuery(this).attr('id').split("-")[1]);
		
		jQuery('.controlMenu').removeClass("active");
		jQuery(this).addClass("active");
		
		moveToPosition(currentPosition);
		return false;
	  });
	  
	  jQuery('#slide-0').addClass("active");
	  
	  function moveToPosition(position){
	  // Hide / show controls
		manageControls(position);
		
		// Move slideInner using margin-left
		jQuery('#slideInner').animate({
		  'marginLeft' : slideWidth*(-position)
		});
	  }
	  
	  // manageControls: Hides and Shows controls depending on currentPosition
	  function manageControls(position){
	  	// Active control menu
		jQuery('.controlMenu').removeClass("active");
		jQuery('#slide-'+position).addClass("active");
		
		// Hide left arrow if position is first slide
		if(position==0){ jQuery('#leftControl').hide() } else{ jQuery('#leftControl').show() }
		// Hide right arrow if position is last slide
		if(position==numberOfSlides-1){ jQuery('#rightControl').hide() } else{ jQuery('#rightControl').show() }
	  }	
	});
