$(document).ready(function(){
    /* Gallery interactivity */
    // Targeting the main picture. */
    var bigPicture = $('#big-picture img');
    // Targeting the main picture caption. */
    var bigPictureCaption = $('#big-picture figcaption');
    
    // When a picture is clicked it shows in the main frame, becoming larger.
    $('#nav-picture img').click( function(){
        // Targets the clicked element.
        var currentImage = $(this);
        // Targets figcaptions of clicked element.
        var currentImageCaption = $(this).next('figcaption').text();
        
        // Fades out image and caption.
        bigPicture.fadeOut(10);
        bigPictureCaption.fadeOut();
        
        // Changes the image path and alt attribute to chosen.
        bigPicture.attr('src', currentImage.attr('src'));
        bigPicture.attr('alt', currentImage.attr('alt'));
        
        // Fades in image and caption.
        bigPicture.fadeIn('slow');
        bigPictureCaption.fadeIn('slow');
        
        // Set's the caption text to match the picture on the main frame.
        bigPictureCaption.text(currentImageCaption);
        
        // Scroll back to the main frame automatically.
        $('html, body').animate({
        scrollTop: $('#big-picture').offset().top
        }, 500);
    });
    
    /* Ask server for php script in order to query database for summaries. */
    $('#schedule a').click( function(){
        /* Getting film identifier from schedule.php */
        var id = $(this).attr('data-film-id');
        
        /* Making ajax call using the post method. */
        $.post('fetch.php', {id: id}, function(data) {
            $('#summary p').fadeOut(10);
            $('#summary p').text(data);
            $('#summary p').fadeIn();
        }); // Ajax call using post method.
        
        
        // Scroll back to summary if necessary.
        $('html, body').animate({
        scrollTop: $('#summary').offset().top
        }, 500);
    });
}); // document.ready