﻿        function mySlider() {
            var currentPosition = 0;
            var slideWidth = 642;
            var slides = $('.slide');
            var numberOfSlides = slides.length;
            //rotation speed and timer    
            var speed = 8000;
            var run = setInterval('rotate()', speed);

            // Remove scrollbar in JS
            $('#slidesContainer').css('overflow', 'hidden');

            // Wrap all .slides with #slideInner div
            // Float left to display horizontally, readjust .slides width
            slides.wrapAll('<div id="slideInner"></div>').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"></span>').append('<span class="control" id="rightControl"></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) % numberOfSlides : ((currentPosition == 0) ?
                                                                           numberOfSlides - 1 : currentPosition - 1);
                // Hide / show controls
                manageControls(currentPosition);
                // Move slideInner using margin-left
                if (currentPosition == 0) {
                    $('#slideInner').animate({ 'marginLeft': slideWidth * (-currentPosition) }, 1);
                }
                else {
                    $('#slideInner').animate({ 'marginLeft': slideWidth * (-currentPosition) });
                }
            });

            // manageControls: Hides and shows controls depending on currentPosition
            function manageControls(position) {
                $('#leftControl').show()
                $('#rightControl').show()
            }

        }

        function rotate() {
            $('#rightControl').click();
        }

        

