// Init vars
    var $mainCont, cv, ctx, osCv, osCtx, windowSize, mouse, gradient;
    var particles = [];
    var ribbonDistance = 150;
    var particlesNB = 250;


    // Constructeur scene
    function Scene() {}

    Scene.prototype.resize = function() {
        windowSize = {
            w: window.innerWidth,
            h: window.innerHeight
        };

        cv.width = windowSize.w;
        cv.height = windowSize.h;
        osCv.width = windowSize.w;
        osCv.height = windowSize.h;

    };

    // Init scene
    Scene.prototype.init = function() {

        // Création et initialisation du canvas
        this.createOffScreenCanvas();

        // Récupération du conteneur principal
        $mainCont = document.getElementById('main-container');
        // Récupération de la balise canvas
        cv = document.getElementById('canvas');
        // Déclaration du contexte : 2d
        ctx = cv.getContext('2d');


        // Position du curseur de base
        mouse = {
            x: window.innerWidth/2,
            y: window.innerHeight/2
        };

        // On associe l'évenement onresize à resize
        window.onresize = this.resize;
        // On associe le mouvement de la souris sur le canvas à onMouseMove
        canvas.onmousemove = onMouseMove;
        
        this.resize();

        makeParticles();

        draw();
    };

    // Création des canvas offscreen pour une meilleure perf
    Scene.prototype.createOffScreenCanvas = function() {
        // Canvas du contexte
        osCv = document.createElement('canvas');
        osCtx = osCv.getContext('2d');


    };


    Scene.prototype.render = function() {
        ctx.clearRect(0, 0, cv.width, cv.height);
        //osCtx.clearRect(0, 0, osCv.width, osCv.height);
        drawParticles();
        ctx.drawImage(osCv, 0, 0, windowSize.w, windowSize.h, 0, 0, windowSize.w, windowSize.h);

    };

    function draw() {
        requestAnimationFrame(draw);
        scene.render();
    }

    function onMouseMove(e) {
        mouse.x = e.pageX;
        mouse.y = e.pageY;
    }

    // Constructeur Particle
    function Particle() {
        //location sur le canvas
        this.location = {x: Math.random()*windowSize.w, y: Math.random()*windowSize.h};
        //radius - 0
        this.radius = 0;
        //vitesse
        this.speed = 3;
        // angle de direction
        this.angle = Math.random()*360;
        //couleurs
        var a = Math.random();

        this.colors = ["rgba(214, 187, 209,"+a+")", "rgba(173, 126, 145, "+a+")", "#836982", "rgba(131, 105, 130, "+a+")", "rgba(46, 40, 47, "+a+")"];

        this.color = this.colors[Math.floor(Math.random() * this.colors.length)]



    };

    function createParticle() {
        new Particle() 
    }

    function makeParticles() {

        // On crée les particules
        for(var i = 0; i < particlesNB; i++)
        {
            particles.push( new Particle());
        }
    }

    function drawParticles() {
        //on repaint le bg en réduidant l'opacité
        osCtx.globalCompositeOperation = "source-over";
        osCtx.fillStyle = "rgba(1, 20, 41, 0.008)";
        osCtx.fillRect(0, 0, windowSize.w, windowSize.h);
        osCtx.globalCompositeOperation = "lighter";



        
        for(var i = 0; i < particles.length; i++)
        {
            var p = particles[i];
            osCtx.fillStyle = "white";
            osCtx.fillRect(p.location.x, p.location.y, p.radius, p.radius);

            distX = p.location.x - mouse.x;
            distY = p.location.y - mouse.y;

            mouseDist = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2));
            
            // On bouge les particules
            // Effet bandeau
            // Si le curseur est proche
            if (mouseDist <= 100) {
                for(var n = 0; n < particles.length; n++)
                {
                    var p2 = particles[n];
                    // calcul de la distance entre 2 particules
                    var yd = p2.location.y - p.location.y;
                    var xd = p2.location.x - p.location.x;
                    var distance = xd*xd + yd*yd;
                    var angle = Math.atan2(distY, distX);
                    var dirX = Math.cos(angle) * distance - distX;
                    var dirY = Math.sin(angle) * distance - dirY;
                
                    // dessine un ligne entre les particules
                    if(distance < ribbonDistance*ribbonDistance)
                    {
                        osCtx.beginPath();          
                        osCtx.lineWidth = 1;
                        osCtx.moveTo(p.location.x, p.location.y);
                        osCtx.lineTo(p2.location.x, p2.location.y);
                        //osCtx.lineTo(mouse.x, mouse.y);
                        osCtx.strokeStyle = p.color;
                        osCtx.stroke();
                        //The ribbons appear now.
                    }
                    
                }

                  p.location.x = p.location.x - p.speed*2*Math.cos(angle);
                  p.location.y = p.location.y - p.speed*2*Math.sin(angle);



            }

            

            if (mouseDist >= 100) {
            p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180);
            p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180);
            }
            
            // Quand la particule arrive au bord de la fenetre 
            if(p.location.x < 0) p.location.x = windowSize.w;
            if(p.location.x > windowSize.w) p.location.x = 0;
            if(p.location.y < 0) p.location.y = windowSize.h;
            if(p.location.y > windowSize.h) p.location.y = 0;
        }
    };

    // On init la scene
    var scene = new Scene();
    window.onload = scene.init.bind(scene);