/**
 * @author AngelinaJ0lie
 */
$(document).ready(function(){
                var currentPosition = 0;
                var slideWidth = 961;
                var slides = $('.slide');
                var numberOfSlides = slides.length;
                // 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">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;
                    // 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()
                    }
                }
            });