// ======= PROJECT INFO OVERLAY =======

​

var $overlay = $("<div id='overlay'>" +

                "<button class='close-button btn btn-default'><svg class='icon icon-plus'><use xlink:href='#icon-plus'></use></svg></button>" +

                "<div class='container'><div class='row'>" +

                "<div class='overlay-project-info col-sm-5 col-md-3'></div>" +

                "<div class='overlay-images col-sm-7 col-md-9'></div>" +

                "</div></div></div>");

​

var $prevButton = $("<br><button class='prev-button btn btn-default'>Previous</button>");

var $nextButton = $("<button class='next-button btn btn-default'>Next</button>");

​

function appendImages(imageSet, altSet){

     for (var i = 0; i < imageSet.length; i++){

        var images = "<img src='" + imageSet[i] + "' alt='" + altSet + "'>";

        $(".overlay-images").append(images);

    }

}

​

function getCurrentProject(current){

    currentLink = $(current);

    currentImages = $(current).data('images').split(',');

    currentAlt = $(current).children('img').attr('alt');

    currentInfo = $(current).next().html();

}

​

function getNextProject(){

    // If last 'recent project' go to first 'additional project'

    if  (currentLink.hasClass('last-recent')){

        nextLink = currentLink.parents('.recent-projects-wrapper').nextAll('.additional-projects-wrapper').find('.project-link');

    } 

    // If last 'additional project' loop back to first 'recent project'

    else if (currentLink.hasClass('last-additional')) {

        nextLink = currentLink.closest('.additional-projects-wrapper').prevAll('.recent-projects-wrapper').find('.project-link');

    } 

    // Otherwise go to next project

    else {

        nextLink = currentLink.parents('[class*="-project"]').next().find('.project-link');

    }

    nextImages = nextLink.data('images').split(',');

    nextAlt = nextLink.children('img').attr('alt');

    nextInfo = nextLink.next().html();

}

​

$('.project-link').click(function (event) {

    event.preventDefault();

    getCurrentProject(this);

    // Add overlay object to body

    $("body").append($overlay);

    // Add each image to the overlay

    appendImages(currentImages, currentAlt);

    // Add project info to overlay

    $(".overlay-project-info").html(currentInfo);

    // Add buttons to overlay

    $(".overlay-project-info").append($prevButton);

    $(".overlay-project-info").append($nextButton);

    // Remove main scrollbars

    $("body").css("overflow", "hidden");

    // Show overlay

    $overlay.slideDown(1000);

    // Close overlay and remove from DOM

    $('.close-button').click(function () {

        $('body').css('overflow-y', 'scroll');

        $overlay.slideUp(1000, function(){

            $('.overlay-images img').remove();

            $overlay.remove();

        });

    });

    $('.next-button').click(function(){

        getNextProject();

        $('.overlay-images img').remove();

        // Add each image to the overlay

        appendImages(nextImages, nextAlt);

       // Add project info to overlay

       $(".overlay-project-info").html(nextInfo);

        // Add buttons to overlay

        $(".overlay-project-info").append($prevButton);

        $(".overlay-project-info").append($nextButton);

    });

});