// JavaScript Document

$(document).ready(function(){
  var currentPosition = 0;
var slideWidth = 600;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideSpeed = 300;
var slideChangeSpeed = 13000;

// 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 left and right arrow 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;

clearInterval(autoSlide);

// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').stop(true, true).animate({
'marginLeft' : slideWidth*(-currentPosition)
}, slideSpeed);
});

// 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() }
}

// Auto slide function
var autoSlide = 0;

autoSlide = setInterval(function() {
if(currentPosition==numberOfSlides-1){ currentPosition = 0 } else{ currentPosition = currentPosition+1 }

// Hide / show controls
manageControls(currentPosition);

$('#slideInner').stop(true, true).animate({
'marginLeft' : slideWidth*(-currentPosition)
}, slideSpeed);

}, slideChangeSpeed);

});