/*******************************************IMAGE GALLERY*******************************************/

/*******Filtering*******/

// init Isotope
var $grid = $('.img-grid').isotope({
    itemSelector: '.img-container',
    //layoutMode: 'fitRows',
});

// filter functions
var filterFns = {
    // show if number is greater than 50
    numberGreaterThan50: function () {

    },
};

// bind filter button click
$('#filter-btn').on('click', 'button', function () {
    var filterValue = $(this).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[filterValue] || filterValue;
    $grid.isotope({filter: filterValue});
});

// change is-checked class on buttons
$('.button-group').each(function (i, buttonGroup) {
    var $buttonGroup = $(buttonGroup);
    $buttonGroup.on('click', 'button', function () {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $(this).addClass('is-checked');
    });
});


/*******************************************CAROUSEL IN MY CLIENTS*******************************************/

$(document).ready(function () {
    $('.loop').owlCarousel({
        center: true,
        items: 1,
        loop: true,
        margin: 10,
        responsive: {
            600: {
                items: 1
            }
        }
    });
});

/*******************************************SCROLL MAGIC*******************************************/

/*******Scroll for the links*******/
var controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
    triggerElement: "#hero",
    duration: $("#hero").height()
}).setClassToggle("#hero-link", "active").addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#about",
    duration: $("#about").height() + 100
}).setClassToggle("#about-link", "active").addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#competences",
    duration: $("#competences").height()
}).setClassToggle("#competences-link", "active").addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#engagement",
    duration: $("#engagement").height()
}).setClassToggle("#engagement-link", "active").addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#experiences",
    duration: $("#experiences").height()
}).setClassToggle("#experiences-link", "active").addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#projets",
    duration: $("#experiences").height()
}).setClassToggle("#projets-link", "active").addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#contact",
    duration: $("#contact").height()
}).setClassToggle("#contact-link", "active").addTo(controller);

/*******Other Scroll Magic Elements*******/

$(document).ready(function () {

    var controller2 = new ScrollMagic.Controller();

    //The about paragraph
    var about_scene = new ScrollMagic.Scene({
        triggerElement: '.about-text',
        triggerHook: .7
    })
        .setClassToggle('.about-text', 'about-text-animate')
        .reverse(false)
        .addTo(controller2);


    //Progress bars
    var progress_bar_scene = new ScrollMagic.Scene({

        triggerElement: '.about-resume',
        triggerHook: .7,

    })
        .setClassToggle('.inner-percent', 'inner-percent-animate')
        .reverse(false)
        .addTo(controller);

    //Icons in Services
    var about_scene = new ScrollMagic.Scene({
        triggerElement: '.trigger',
        triggerHook: .7
    })
        .setClassToggle('.icon', 'service-icon-animate')
        .reverse(false)
        .addTo(controller2);

});

/*******************************************MOBILE NAV*******************************************/
$('.mobile-toggle').click(function () {
    if ($('#main-header').hasClass('open-nav')) {
        $('#main-header').removeClass('open-nav');
    } else {
        $('#main-header').addClass('open-nav');
    }
});

/*******************************************NAV SCROLL*******************************************/
$('nav a').click(function (event) {
    var id = $(this).attr("href");
    var offset = 70;
    var target = $(id).offset().top - offset;
    $('html, body').animate({
        scrollTop: target
    }, 500);
    event.preventDefault();
});

/*******************************************PRELOAD*******************************************/
var overlay = document.getElementById("preload-overlay");

window.addEventListener('load', function () {
    overlay.style.display = "none";
})

function launchModale(id) {
    $(id).modal('show');
}