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