// <!-- Custom Cursor -->

var cursor = document.querySelector('.cursor');
var cursorinner = document.querySelector('.cursor2');
var a = document.querySelectorAll('a');

document.addEventListener('mousemove', function (e) {
    var x = e.clientX;
    var y = e.clientY;
    cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
});

document.addEventListener('mousemove', function (e) {
    var x = e.clientX;
    var y = e.clientY;
    cursorinner.style.left = x + 'px';
    cursorinner.style.top = y + 'px';
});

document.addEventListener('mousedown', function () {
    cursor.classList.add('click');
    cursorinner.classList.add('cursorinnerhover')
});

document.addEventListener('mouseup', function () {
    cursor.classList.remove('click')
    cursorinner.classList.remove('cursorinnerhover')
});

//  Service Slider 

// new ScrollMagic.Scene({
//     triggerElement: ".service-slider-wrapper",
//     offset: t - 500 + "px",
//     duration: $(".casestudies-main").innerHeight() + 500,
//     triggerHook: .5
// })

var controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
    triggerElement: ".service-slider-wrapper",
    offset: 0,
    duration: "" + 1.1 * $(".service-slider-wrapper").innerHeight(),
    triggerHook: 0
})
    .setPin(".service-slider-wrapper")
    // .setClassToggle('.service-slider-wrapper', 'show')
   
    // .addIndicators()
    .addTo(controller)

new ScrollMagic.Scene({
    triggerElement: ".service-slider-wrapper",
    triggerHook: 0,
    duration: $(".service-slider-wrapper").innerHeight() - 1200,
    offset: -200
})
    .setClassToggle('.service-slider-wrapper , .box1 .slider-content span.slide-heading, .box1 .slider-content h4, .box1 .slider-content a, .box1 .slider-content h3, .box1 .slider-content p, .box1 .slider-content .logo-icon, .box1 .slider-content, .box1 .slider-content img.logo-icon-2', 'show')
    // .addIndicators()
    .addTo(controller);


new ScrollMagic.Scene({
    triggerElement: ".service-slider-wrapper",
    triggerHook: 0,
    duration: $(".service-slider-wrapper").innerHeight() - 1200,
    offset: $(".service-slider-wrapper").innerHeight() - 1400
})
    .setClassToggle('.service-slider-wrapper, .box2 .slider-content span.slide-heading-2, .box2 .slider-content h4, .box2 .slider-content a, .box2 .slider-content h3, .box2 .slider-content p, .box2 .slider-content .logo-icon, .box2 .slider-content,  .box2 .slider-content img.logo-icon-2', 'show')
    // .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: ".service-slider-wrapper",
    triggerHook: 0,
    duration: $(".service-slider-wrapper").innerHeight() - 1400,
    offset: $(".service-slider-wrapper").innerHeight() 
})
    .setClassToggle('.service-slider-wrapper, .box3 .slider-content span.slide-heading, .box3 .slider-content h4, .box3 .slider-content a, .box3 .slider-content h3, .box3 .slider-content p, .box3 .slider-content .logo-icon, .box3 .slider-content,  .box3 .slider-content img.logo-icon-2', 'show')
    // .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: ".service-slider-wrapper",
    triggerHook: 0,
    duration: $(".service-slider-wrapper").innerHeight() - 1400,
    offset: $(".service-slider-wrapper").innerHeight() * 1.46
})
    .setClassToggle('.service-slider-wrapper, .box4 .slider-content span.slide-heading-2, .box4 .slider-content h4, .box4 .slider-content a, .box4 .slider-content h3, .box4 .slider-content p, .box4 .slider-content .logo-icon, .box4 .slider-content,  .box4 .slider-content img.logo-icon-2', 'show')
    // .addIndicators()
    .addTo(controller);

// <!-- Text Looping -->

var t;
function cycleText() {
    var $active = $('#text-cycler .is-active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#text-cycler span:first');
    $next.css('z-index', 2);
    $active.show(function () {
        $active.css('z-index', 1).show().removeClass('is-active');
        $next.css('z-index', 3).addClass('is-active');
    });
}
$('#text-cycler span').mouseover(function () {
    $('#text-cycler').addClass('is-hover');
    t = setInterval('cycleText()', 300);
})

$('#text-cycler span').mouseout(function () {
    $('#text-cycler').removeClass('is-hover');
    // $('#text-cycler span:first').addClass('is-active');
    clearInterval(t)
})



function cycleImages() {
    var $active = $('#cycler .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
    $next.css('z-index', 2);//move the next image up the pile
    $active.show(function () {//fade out the top image
        $active.css('z-index', 1).show().removeClass('active');//reset the z-index and unhide the image
        $next.css('z-index', 3).addClass('active');//make the next image the top one
    });
}

$(document).ready(function () {
    // run every 7s
    setInterval('cycleImages()', 80);
})



$(".landing__text__hover span").hover(
    function () {
        $('body').addClass('landing-text-hover');
    },
    function () {
        $('body').removeClass('landing-text-hover');
    }
);



// Industries Slick Slider
jQuery('.industries-slider').slick({
    dots: false,
    infinite: true,
    arrows: true,
    speed: 300,
    // autoplay: true,
    // autoplaySpeed: 2000,
    slidesToShow: 4,
    slidesToScroll: 1,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ]
});

// $(".defaultOpenLocation").trigger('click');


document.getElementById("defaultOpen").click();
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("defaultOpenLocation").click();
function openLocationTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("location-tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("location-tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}




// When the user scrolls the page, execute myFunction 
window.onscroll = function () { myFunction() };
function myFunction() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 50;
    document.getElementById("myBar").style.width = scrolled + "%";
}

$('.featured-work-slider').slick({
    // centerMode: true,
    //   centerPadding: '60px',
    dots: true,
    infinite: true,
    arrows: true,
    slidesToShow: 3,
    // autoplay: true,
    // autoplaySpeed: 2000,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 3
            }
        },
        {
            breakpoint: 480,
            settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 1
            }
        }
    ]
});

// Counters
// Add event on document ready
$(document).ready(function () {
    // Add event on document scroll
    $(window).scroll(function () {

        // Cycle through each counter
        $(".count").each(function () {

            // Check if counter is visible
            if ($(this).isOnScreen()) {

                // Start counter
                startCounter($(this));

            } else {

                // Check if it has only just become non-visible
                if ($(this).hasClass("notVisible") == false) {

                    // Stop animation
                    $(this).stop();

                    // Add nonVisible class
                    $(this).addClass("notVisible");

                    // This stops the user very briefly seeing the previous number before the counter restarts
                    $(this).text("0");

                }

            }
        });
    });
});


$.fn.isOnScreen = function () {

    var win = $(window);
    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };

    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));


};


//Run counter, separate function so we can call it from multiple places
function startCounter(counterElement) {

    // Check if it has only just become visible on this scroll
    if (counterElement.hasClass("notVisible")) {

        // Remove notVisible class
        counterElement.removeClass("notVisible");

        // Run your counter animation
        counterElement.prop('Counter', 0).animate({
            Counter: counterElement.attr("counter-lim")
        }, {
            duration: 4000,
            easing: 'swing',
            step: function (now) {
                counterElement.text(Math.ceil(now).toLocaleString());
            }
        });
    }
}


// On page load check if counter is visible
$('.count').each(function () {

    // Add notVisible class to all counters
    // It is removed within startCounter()
    $(this).addClass("notVisible");

    // Check if element is visible on page load
    if ($(this).isOnScreen() === true) {

        // If visible, start counter
        startCounter($(this));

    }

});

//   Scroll Hide
jQuery(document).ready(function () {
    jQuery(window).scroll(function () {
        if (jQuery('body').height() <= (jQuery(window).height() + jQuery(window).scrollTop())) {
            jQuery('.scroll-icon').hide();
        } else {
            jQuery('.scroll-icon').show();
        }
    });
});


// Sticky Header
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.header').outerHeight();

$(window).scroll(function (event) {
    didScroll = true;
});

setInterval(function () {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if (Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight) {
        // Scroll Down
        $('.header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if (st + $(window).height() < $(document).height()) {
            $('.header').removeClass('nav-up').addClass('nav-down');
        }
        if (st == 0) {
            $('.header').removeClass('nav-down');
        }
    }
    lastScrollTop = st;
}

// Wrap every letter in a span
// var textWrapper = document.querySelector('.ml12');
// textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

// var element_position = $('.service-slider-wrapper').offset().top;

// $(window).on('scroll', function() {
//     var y_scroll_pos = window.pageYOffset;
//     var scroll_pos_test = element_position;
//     var count = 0;

//     if(y_scroll_pos > scroll_pos_test && count == 0) {
//         count ++;
//         anime.timeline({loop: false})
//         .add({
//           targets: '.ml12 .letter',
//           translateX: [40,0],
//           translateZ: 0,
//           opacity: [0,1],
//           easing: "easeOutExpo",
//           duration: 1200,
//           delay: (el, i) => 80 + 50 * i
//         })
//     }
// });