$(document).ready(function(){
	var currentPosition = 0;
	var slideWidth = 71;
	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);

	// 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')=='right-button') ? currentPosition+1 : currentPosition-1;
	
		// Hide / show controls
		manageControls(currentPosition);
		
		// Move slideInner using margin-left
		$('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)}, 250);
	});

  // manageControls: Hides and shows controls depending on currentPosition
	function manageControls(position){
		// Hide left arrow if position is first slide
		if (position == 0) {
			$('#left-button').hide();
		} else { 
			$('#left-button').show();
		}
		
		// Hide right arrow if position is last slide
		if (position == numberOfSlides-3) { 
			$('#right-button').hide();
		} else { 
			$('#right-button').show();
		}
		
		if (numberOfSlides < 3) {
			$('#left-button').hide();
			$('#right-button').hide();
		}
    }
});