$(document).ready(function(){
        var currentPosition = 0;
        var slideWidth = 688;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        var maxSlides = 0;
        $('.slide').each(function(){
            maxSlides += 1;            
        });
        maxSlides-=1;
        

        // 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 controls in the DOM
        $('#slideshow')
        .prepend('<span class="control" id="leftControl"></span>')
        .append('<span class="control" id="rightControl"></span>');

        // Hide left arrow control on first load
        manageControls(currentPosition);


        // Create event listeners for .contr clicks
        var curr = 0;
        $('.ads .contr .inner').children().each(function(){
            $(this).attr('index',curr);
            $(this).bind('click', function(){
                $('.ads .contr .item').removeClass('curr');
                $(this).addClass('curr');
                // Determine new position
                currentPosition = Number($(this).attr('index'));
                // Hide / show controls
                manageControls(currentPosition);
                // Move slideInner using margin-left
                $('#slideInner').animate({
                    'marginLeft' : slideWidth*(-currentPosition)
                });
            })
            curr += 1;
        });


        // Auto switching slide 
        function autoSwitch(){
            // Determine new position            
            if (currentPosition == maxSlides){
                currentPosition=0;
            }
            else {
                currentPosition = currentPosition+1;
            }
            // Add special class to current .contr item
            $('.ads .contr .item').removeClass('curr');
            $('.ads .contr .item[index="'+currentPosition+'"]').addClass('curr');
            // Hide / show controls
            manageControls(currentPosition);            
            // Move slideInner using margin-left
            $('#slideInner').animate({
                'marginLeft' : slideWidth*(-currentPosition)
            });
        }
        setInterval(autoSwitch,4000);

        // Create event listeners for .controls clicks
        $('.control').bind('click', function(){
            // Determine new position
            currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
            // Add special class to current .contr item
            $('.ads .contr .item').removeClass('curr');
            $('.ads .contr .item[index="'+currentPosition+'"]').addClass('curr');
            // Hide / show controls
            manageControls(currentPosition);
            // Move slideInner using margin-left
            $('#slideInner').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){
                $('#leftControl').hide()
            } else{
                $('#leftControl').show()
            }
            // Hide right arrow if position is last slide
            if(position==numberOfSlides-1){
                $('#rightControl').hide()
            } else{
                $('#rightControl').show()
            }
        }
    });