function slideshow() {
	var currentPosition = 0;
	var slideWidth = 300;
	var slides = $('.slide');
	var numberOfSlides = slides.length;
	
	// remove scrollbar in JS
	$('#slidesContainer').css('overflow', 'hidden');
	$('#slidesContainer').css('width', slideWidth);
	
	// wrap all .slides with #slideInner div
	slides.wrapAll('<div id="slideInner"><'+'/div>');
	// float left to display horizontally, readjust .slides width
	slides.css('float', 'left');
	slides.css('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('<span class="control" id="leftControl"><'+'/span>')
	$('#slideshow').append('<span class="control" id="rightControl"><'+'/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)});
	});
	
	// 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() }
	}
}