$(document).ready(function(){
    var currentPosition = 0;
    var slideWidth = 789;
    var titleHeight = 30;
    var slides = $('.itemslide');
    var numberOfSlides = slides.length;

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

    var controls = $('.control');
    $(controls[0]).addClass('activeControl');

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

    // Set #titles width equal to total width of all slides
    $('#titleInner').css('height', titleHeight * numberOfSlides);

    // Create event listeners for .controls clicks
    $('#slideshow .control')
    .bind('click', function(){
        controls.removeClass("activeControl");
        $(this).addClass("activeControl");
        currentPosition = this.innerHTML - 1;

        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft' : -slideWidth*(currentPosition)
        });

        // Move titles using margin-left
        $('#titleInner').animate({
            'marginTop' : -titleHeight*(currentPosition)
        });

    });
});