(function() {

    var width, height, largeheader, canvas, ctx, points, target, animateheader = true;

    // main
    initheader();
    initanimation();
    addlisteners();

    function initheader() {
        width = window.innerwidth;
        height = window.innerheight;
        target = {x: width/2, y: height/2};

        largeheader = document.getelementbyid('large-header');
        largeheader.style.height = height+'px';

        canvas = document.getelementbyid('demo-canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getcontext('2d');

        // create points
        points = [];
        for(var x = 0; x < width; x = x + width/20) {
            for(var y = 0; y < height; y = y + height/20) {
                var px = x + math.random()*width/20;
                var py = y + math.random()*height/20;
                var p = {x: px, originx: px, y: py, originy: py };
                points.push(p);
            }
        }

        // for each point find the 5 closest points
        for(var i = 0; i < points.length; i++) {
            var closest = [];
            var p1 = points[i];
            for(var j = 0; j < points.length; j++) {
                var p2 = points[j]
                if(!(p1 == p2)) {
                    var placed = false;
                    for(var k = 0; k < 5; k++) {
                        if(!placed) {
                            if(closest[k] == undefined) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }

                    for(var k = 0; k < 5; k++) {
                        if(!placed) {
                            if(getdistance(p1, p2) < getdistance(p1, closest[k])) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }
                }
            }
            p1.closest = closest;
        }

        // assign a circle to each point
        for(var i in points) {
            var c = new circle(points[i], 2+math.random()*2, 'rgba(255,255,255,0.3)');
            points[i].circle = c;
        }
    }

    // event handling
    function addlisteners() {
        if(!('ontouchstart' in window)) {
            window.addeventlistener('mousemove', mousemove);
        }
        window.addeventlistener('scroll', scrollcheck);
        window.addeventlistener('resize', resize);
    }

    function mousemove(e) {
        var posx = posy = 0;
        if (e.pagex || e.pagey) {
            posx = e.pagex;
            posy = e.pagey;
        }
        else if (e.clientx || e.clienty)    {
            posx = e.clientx + document.body.scrollleft + document.documentelement.scrollleft;
            posy = e.clienty + document.body.scrolltop + document.documentelement.scrolltop;
        }
        target.x = posx;
        target.y = posy;
    }

    function scrollcheck() {
        if(document.body.scrolltop > height) animateheader = false;
        else animateheader = true;
    }

    function resize() {
        width = window.innerwidth;
        height = window.innerheight;
        largeheader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

    // animation
    function initanimation() {
        animate();
        for(var i in points) {
            shiftpoint(points[i]);
        }
    }

    function animate() {
        if(animateheader) {
            ctx.clearrect(0,0,width,height);
            for(var i in points) {
                // detect points in range
                if(math.abs(getdistance(target, points[i])) < 4000) {
                    points[i].active = 0.3;
                    points[i].circle.active = 0.6;
                } else if(math.abs(getdistance(target, points[i])) < 20000) {
                    points[i].active = 0.1;
                    points[i].circle.active = 0.3;
                } else if(math.abs(getdistance(target, points[i])) < 40000) {
                    points[i].active = 0.02;
                    points[i].circle.active = 0.1;
                } else {
                    points[i].active = 0;
                    points[i].circle.active = 0;
                }

                drawlines(points[i]);
                points[i].circle.draw();
            }
        }
        requestanimationframe(animate);
    }

    function shiftpoint(p) {
        tweenlite.to(p, 1+1*math.random(), {x:p.originx-50+math.random()*100,
            y: p.originy-50+math.random()*100, ease:circ.easeinout,
            oncomplete: function() {
                shiftpoint(p);
            }});
    }

    // canvas manipulation
    function drawlines(p) {
        if(!p.active) return;
        for(var i in p.closest) {
            ctx.beginpath();
            ctx.moveto(p.x, p.y);
            ctx.lineto(p.closest[i].x, p.closest[i].y);
            ctx.strokestyle = 'rgba(156,217,249,'+ p.active+')';
            ctx.stroke();
        }
    }

    function circle(pos,rad,color) {
        var _this = this;

        // constructor
        (function() {
            _this.pos = pos || null;
            _this.radius = rad || null;
            _this.color = color || null;
        })();

        this.draw = function() {
            if(!_this.active) return;
            ctx.beginpath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * math.pi, false);
            ctx.fillstyle = 'rgba(156,217,249,'+ _this.active+')';
            ctx.fill();
        };
    }

    // util
    function getdistance(p1, p2) {
        return math.pow(p1.x - p2.x, 2) + math.pow(p1.y - p2.y, 2);
    }
    
})();