$(function () {
    // ANIMATED CANVAS
    var space;

    function floatySpace() {
        var colors = [
            "#FF3F8E", "#04C2C9", "#2E55C1"
        ];

        space = new CanvasSpace()
            .setup({
                bgcolor: "#252934"
            });
        var form = new Form(space);

        // Elements
        var pts = [];
        var center = space.size.$divide(1.8);
        var angle = -(window.innerWidth * 0.5);
        var count = window.innerWidth * 0.05;
        if (count > 150) count = 150;
        var line = new Line(0, angle).to(space.size.x, 0);
        var mouse = center.clone();

        var r = Math.min(space.size.x, space.size.y) * 1;
        for (var i = 0; i < count; i++) {
            var p = new Vector(Math.random() * r - Math.random() * r, Math.random() * r - Math.random() * r);
            p.moveBy(center).rotate2D(i * Math.PI / count, center);
            p.brightness = 0.1;
            pts.push(p);
        }

        // Canvas
        space.add({
            animate: function (time, fps, context) {

                for (var i = 0; i < pts.length; i++) {
                    // rotate the points slowly
                    var pt = pts[i];

                    pt.rotate2D(Const.one_degree / 20, center);
                    form.stroke(false).fill(colors[i % 3]).point(pt, 1);

                    // get line from pt to the mouse line
                    var ln = new Line(pt).to(line.getPerpendicularFromPoint(pt));

                    // opacity of line derived from distance to the line
                    var opacity = Math.min(0.8, 1 - Math.abs(line.getDistanceFromPoint(pt)) / r);
                    var distFromMouse = Math.abs(ln.getDistanceFromPoint(mouse));

                    if (distFromMouse < 50) {
                        if (pts[i].brightness < 0.3) pts[i].brightness += 0.015
                    } else {
                        if (pts[i].brightness > 0.1) pts[i].brightness -= 0.01
                    }

                    var color = "rgba(255,255,255," + pts[i].brightness + ")";
                    form.stroke(color).fill(true).line(ln);
                }
            },

            onMouseAction: function (type, x, y, evt) {
                if (type == "move") {
                    mouse.set(x, y);
                }
            },

            onTouchAction: function (type, x, y, evt) {
                this.onMouseAction(type, x, y);
            }
        });

        space.bindMouse();
        space.play();
    }

    floatySpace();

    $(window).resize(function () {
        space.removeAll();
        $('canvas').remove();
        floatySpace();
    });

    var isMobile;
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        isMobile = true;

        // Mobile height fix
        $('.height-fix').each(function () {
            var h = $(this).height();
            $(this).height(h)
        })
    }

    // RESIZE RESETS
    $(window).resize(function () {
        posFilterBar($('.filter').first());
    });

    // Sticky Nav on Mobile
    if (isMobile) {
        $('nav').addClass('fixed');
    } else {
        $('nav').addClass('desk');
    }


    // NAV POSITION
    var navPos = $('nav').position().top;
    var lastPos = 0;
    var lockTimer;

    $(window).on('scroll', function () {

        var pos = $(window).scrollTop();
        var pos2 = pos + 50;
        var scrollBottom = pos + $(window).height();

        if (!isMobile) {
            if (pos >= navPos + $('nav').height() && lastPos < pos) {
                $('nav').addClass('fixed');
            }
            if (pos < navPos && lastPos > pos) {
                $('nav').removeClass('fixed');
            }
            lastPos = pos;
        }

        // Link Highlighting
        if (pos2 > $('#home').offset().top) {
            highlightLink('home');
        }
        if (pos2 > $('#about').offset().top) {
            highlightLink('about');
        }
        if (pos2 > $('#educations').offset().top) {
            highlightLink('educations');
        }
        if (pos2 > $('#experience').offset().top) {
            highlightLink('experience');
        }
        if (pos2 > $('#projects').offset().top) {
            highlightLink('projects');
        }
        if (pos2 > $('#contact').offset().top ||
            pos + $(window).height() === $(document).height()) {
            highlightLink('contact');
        }
    });

    function highlightLink(anchor) {
        $('nav .active').removeClass('active');
        $("nav").find('[dest="' + anchor + '"]').addClass('active');
    }


    // EVENT HANDLERS
    $('.nav-link').click(function () {
        var anchor = $(this).attr("dest");
        $('.link-wrap').removeClass('visible');

        $('nav span').removeClass('active');
        $("nav").find('[dest="' + anchor + '"]').addClass('active');

        $('html, body').animate({
            scrollTop: $('#' + anchor).offset().top
        }, 400);
    });

    $('.mdi-menu').click(function () {
        $('.link-wrap').toggleClass('visible');
    });


    posFilterBar($('.filter').first());

    $('.filter').click(function () {
        posFilterBar(this);
    });

    function posFilterBar(elem) {
        var origin = $(elem).parent().offset().left;
        var pos = $(elem).offset().left;
        $('.float-bar').css({
            left: pos - origin,
            width: $(elem).innerWidth()
        });
        $('.float-bar .row').css('left', (pos - origin) * -1);
    }

// GALLERY
    $('#gallery').mixItUp({});

    function mixClear() {
        setTimeout(function () {
            $('#gallery').removeClass('waypoint')
        }, 2000);
    }

// SCROLL ANIMATIONS
    function onScrollInit(items, elemTrigger) {
        var offset = $(window).height() / 1.1;
        items.each(function () {
            var elem = $(this),
                animationClass = elem.attr('data-animation'),
                animationDelay = elem.attr('data-delay');

            elem.css({
                '-webkit-animation-delay': animationDelay,
                '-moz-animation-delay': animationDelay,
                'animation-delay': animationDelay
            });

            var trigger = (elemTrigger) ? trigger : elem;

            trigger.waypoint(function () {
                elem.addClass('animated').addClass(animationClass);
                if (elem.get(0).id === 'gallery') mixClear(); //OPTIONAL
            }, {
                triggerOnce: true,
                offset: offset
            });
        });
    }

    setTimeout(function () {
        onScrollInit($('.waypoint'))
    }, 10);

// CONTACT FORM
    $(function () {
        $("#contact-form").submit(function (e) {
            e.preventDefault();
            var href = $(this).attr("action");
            $.ajax({
                type: "POST",
                dataType: "json",
                url: href,
                data: $(this).serialize()
            }).done(function (response) {
                // OPEN POPUP
                $('body').css({
                    overflow: "hidden"
                });
                $('.popup').fadeIn(200);
                $('#contact-form').find("input[type=text], input[type=email], textarea").val("");
            }).fail(function (response) {
                alert("An error occured: " + response.message);
            });
        });
    });

// CLOSE POPUP
    $('#close').click(function () {
        $('body').css({
            overflow: "initial"
        });
        $('.popup').fadeOut(100);
    });
    $('.popup').on('click', function (e) {
        $('body').css({
            overflow: "initial"
        });
        $('.popup').fadeOut(100);
    });

//FOOTNOTE
    $('.footnote').html("CÉDRIC GOFFIN <span class=\"highlight\">&copy;" + new Date().getFullYear() + "</span>")

});