function random(min, max) {
  if(max){
    return Math.random() * (max - min) + min;
  } else {
    return Math.random() * min;
  }
}

var Particle = function(radius, speed, scale){
  this.radius = radius;
  this.speed = speed;
  this.scale = scale;
}

var Main = function(){
  var viewWidth
  var viewHeight;
  var canvas;
  var context;
  var particles;
  var mouse;
  var count;

  function init(){
    viewWidth = window.innerWidth;
    viewHeight = window.innerHeight;
    
    mouse = {x:0, y:0};
    count = 0;

    particles = [];
    canvas = document.createElement('canvas');
    context = canvas.getContext("2d");
    document.body.appendChild(canvas);

    for(var i=0; i < 120; i++){
      var particle  = new Particle(random(100, 400), random(20, 90), random(.2, 1));
      particle.x = random(-200, 200);
      particle.y = random(-200, 200);
      particles.push(particle);
    }

    addEvents();
    loop();
  }


  function loop(){
    context.fillStyle = "#1C1C1C";
    context.fillRect(0, 0, viewWidth, viewHeight);
   
    context.translate(viewWidth/2, viewHeight/2);
    
 
    var magnitude = 100;
    if(mouse.x !== 0  || mouse.y !== 0){
      magnitude = Math.sqrt(Math.pow(mouse.x , 2) + Math.pow(mouse.y, 2));
      magnitude = Math.min(500, Math.max(50, magnitude));
    }
    
    for(var i=0; i < particles.length; i++){
      context.save(); 
      var particle = particles[i];
      var ang = i * (Math.PI * 2/particles.length) + count/100;
      var x = Math.cos(ang) * particle._radius;
      var y = Math.sin(ang) * particle._radius;
      
      context.translate(x,  y);
      context.scale(particle.scale,particle.scale);
      context.rotate(ang + Math.PI/2);
      
      if(i%2){
        context.fillStyle = "#999";
      }else{
        context.fillStyle = "#1C1C1C";
        context.lineWidth = 1;
        context.strokeStyle =  "#999";
      }
      
      context.beginPath();
      context.moveTo(0, 0 - 20);
      context.lineTo(0 + 25, 0 + 20);
      context.lineTo(0 - 25, 0 + 20);
      context.lineTo(0 + 0, 0 - 20);
      context.closePath();
      context.fill();
      context.stroke();
    
      
      
     
      
      particle._radius = 40 + Math.abs(Math.sin(count/particle.speed)*particle.radius * magnitude/100);
      

      context.restore();
    }
  
   
    context.translate(-viewWidth/2, -viewHeight/2);
  
    requestAnimationFrame(loop);
    count++;
  }

  function resize(){
    viewWidth = window.innerWidth;
    viewHeight = window.innerHeight;
    canvas.width = viewWidth;
    canvas.height = viewHeight;
  }
  
   function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: viewWidth/2 - ( evt.clientX - rect.left),
      y: viewHeight/2 -  (evt.clientY - rect.top)
    };
  }

  function addEvents(){
    window.onresize = resize;
    
    canvas.addEventListener('mousemove', function(evt) {
      mouse = getMousePos(canvas, evt);
    }, false);
    
    resize();
  }
  
  return {
    init:init
  }
  
}();

Main.init();