$(document).ready(function(){
var currentPosition = 0;
var newPosition = 3;
var slideWidth = 390;
var slides = $('.slide');
var numberOfSlides = $('#slidesContainer .slide').size();
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', '');
// Wrap all .slides with #slideInner div
slides.wrapAll('<div id="slideInner"></div>').css({'float' : 'left','width' : slideWidth});
// Float left to display horizontally, readjust .slides width
// 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
// Create event listeners for .controls clicks

var dir = "next";
var animate = function()
{
$('#slideInner').animate({'marginLeft' : -(slideWidth*currentPosition)});
}
var next = function()
{
if (currentPosition < (numberOfSlides-1))
{
currentPosition = currentPosition +1;
animate();
}
else if (currentPosition == (numberOfSlides-1))
{
currentPosition = 0;
animate();
}
};
var prev = function()
{
if (currentPosition > 0)
{
currentPosition = currentPosition -1;
animate();
}
else if (currentPosition == 0)
{
currentPosition = (numberOfSlides-1);
animate();
}
};
var autoanimate = function()
{
    if (dir === "prev")
    {
        prev();
    }
    else
    {
        next();
    };
};
$("#leftControl").click(function()
{
prev();
dir = "prev";
});
$("#rightControl").click(function()
{
next();
dir = "next";
});

setInterval(autoanimate, 9000);
});