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

// Remove scrollbar in JS
$('#slideshow').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides.wrapAll('<div class="slide-box"></div>')
// Float left to display horizontally, readjust .slides width
.css({
	'float' : 'left',
	'width' : slideWidth
});

// Set .slide-box width equal to total width of all slides
$('.slide-box').css('width', slideWidth * numberOfSlides);

// Insert left and right arrow controls in the DOM
$('#slideshow-box')
	.prepend('<span class="control" id="control-left">Move left</span>')
	.append('<span class="control" id="control-right">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')=='control-right')
	? currentPosition+1 : currentPosition-1;

	// Hide / show controls
		manageControls(currentPosition);
	// Move slide-box using margin-left
		$('.slide-box').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){ $('#control-left').hide() }
	else{ $('#control-left').show() }
	// Hide right arrow if position is last slide
	if(position==numberOfSlides-1){ $('#control-right').hide() }
	else{ $('#control-right').show() }
	}
function rotateBanner(){
		if(currentPosition==numberOfSlides-1){currentPosition=0}else{currentPosition=currentPosition+1};
		manageControls(currentPosition);
		$('.slide-box').animate({
			'marginLeft' : slideWidth*(-currentPosition)
		});
	}
	setInterval(rotateBanner,4000);
});