// set first image as current, previous as nothing, next as next
// get left position of all 3
// disable the 'previous' button
//
// on clicking the previous or next buttons
// move gallery to corresponding left position
// set the new current, next, and previous (only one of these will be new)
// enable/disable the appropriate buttons depending on whether there are previous or next images
$(document).ready( function() {
        
        var $currentImage = '';
        var $galleryImages = $('#galleryImages');
        //$galleryImages.css('opacity',0);
        // hide the 'next' until all images have been loaded
        $('#nextImageButton').hide();

        function handleNavigationButtonShowingAndHiding() {

            var hasNext = $currentImage.next().size() > 0 ? true : false;
            var hasPrevious = $currentImage.prev().size() > 0 ? true : false;

            $nextImageButton = $('#nextImageButton');
            $previousImageButton = $('#previousImageButton');

            if ( hasNext ) {
                $nextImageButton.show();
            }
            else {
                $nextImageButton.hide();
            }

            if ( hasPrevious ) {
                $previousImageButton.show();
            }
            else {
                $previousImageButton.hide();
            }

        }
        
        function calculateImageOffset($currentImage, $newImage) {
            var currentImageLeft = $currentImage.position().left;
            var currentImageWidth = $currentImage.innerWidth();
            var currentImageCenter = currentImageLeft + currentImageWidth/2;

            var newImageLeft = $newImage.position().left;
            var newImageWidth = $newImage.innerWidth();
            var newImageCenter = newImageLeft + newImageWidth/2;

            var imageOffset = newImageCenter - currentImageCenter;

            return imageOffset;
        }

        // Initialize the gallery
            // set the width of the image container to the sum of the width of all the images
        function initializeGallery() {
            var totalImageWidth = 0;
            $galleryImages.find('img').each( function() {
                $img = $(this);
                widthIncludingMargin = $img.outerWidth(true);
                totalImageWidth += widthIncludingMargin;

                var imageFile = $img.attr('src');

            });
            $galleryImages.css('width',totalImageWidth);

                // start the gallery in the correct position (first image centered)
            var galleryWidth = $('#gallery').innerWidth();
            var galleryCenter = galleryWidth/2;

            var $firstImage = $galleryImages.find('img:first')
            var firstImageLeft = $firstImage.position().left;
            var firstImageWidth = $firstImage.innerWidth();
            var firstImageCenter = firstImageLeft + firstImageWidth/2;

            var firstImageOffset = galleryCenter - firstImageCenter;

            //$galleryImages.animate( { left: '+='+firstImageOffset }, 1000 );
            $galleryImages.hide();
            $galleryImages.css( { left: firstImageOffset } );
            $galleryImages.fadeIn(500);

            $currentImage = $firstImage;

            handleNavigationButtonShowingAndHiding();
        }

        $(window).load( function() { initializeGallery(); });
        //setTimeout(initializeGallery, 500);  // timeout because webkit appears to fire the onload event before the images are loaded, leading to an incorrect calculation of image width

        // Gallery navigation
        $('#nextImageButton').click( function(e) {
            e.preventDefault();

            var $nextImage = $currentImage.next();
            var navigationOffset = calculateImageOffset($currentImage, $nextImage );
            $currentImage = $nextImage;
            handleNavigationButtonShowingAndHiding();

            $galleryImages.animate( { left: '-='+navigationOffset }, 1000 );
        });
        $('#previousImageButton').click( function(e) {
            e.preventDefault();

            var $previousImage = $currentImage.prev();
            var navigationOffset = calculateImageOffset($currentImage, $previousImage );
            $currentImage = $previousImage;
            handleNavigationButtonShowingAndHiding();

            $galleryImages.animate( { left: '-='+navigationOffset }, 1000 );
        });

        // External links
        $('.externalLink').click( function(e) {
            e.preventDefault();

            var $a = $(this);
            var url = $a.attr('href');

            window.open(url);
        });

});