var rocket;

var width = window.innerWidth;
var height = window.innerHeight;

var canvas = document.getElementById('c');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');

var mouse = {};
var rockets = [];
var points = [];

mouse.x = width / 2;
mouse.y = height / 2;

function Rocket(x, y, maxSpeed, width, color) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.color = color;
  this.maxSpeed = maxSpeed;

  this.active = true;

  this.physx = function () {
    this.x = mouse.x;
    this.y = mouse.y;
    
    if (this.y > canvas.height) this.kill();
    if (this.y < 0) this.kill();
    if (this.x > canvas.width) this.kill();
    if (this.x < 0) this.kill();
  };

  this.kill = function () {
    rockets.splice( rockets.indexOf( this ), 1 );
    this.active = false;
  };

  this.draw = function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.width, 0, Math.PI * 2, true);
    ctx.fillStyle = this.color;
    ctx.lineWidth = this.width;

    ctx.fill();
  };
};

function Point(x, y, speedY, width, color) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.color = color;
  this.alpha = Math.random(); 
  this.speedY = speedY; 
  this.speedX = (Math.random() * 2) - 1;

  this.active = true;

  this.physx = function () {
    this.y += this.speedY;
    this.x += this.speedX;
    
    this.speedX -= (Math.random() * 2);

    if (this.alpha > 0.01) {
    	this.alpha -= 0.01;
    }
    
    if (this.y > canvas.height) this.kill();
    if (this.y < 0) this.kill();
    if (this.x > canvas.width) this.kill();
    if (this.x < 0) this.kill();
  };

  this.kill = function () {
    points.splice( points.indexOf( this ), 1 );
    this.active = false;
  };

  this.draw = function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.width, 0, Math.PI * 2, true);
    ctx.fillStyle = this.color;
    ctx.lineWidth = this.width;

    // fade out
    ctx.save();
    ctx.globalAlpha = this.alpha;
    ctx.fill();
    ctx.restore();
  };
};

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
  /*
  Add new points
  */
  for (var i = 0; i < 10; i++) {
    var posX = rocket.x + Math.random() * 10;
    var posY = rocket.y + Math.random() * 10;

    points.push(new Point(posX, posY, (Math.random() * 2) - 1, 5, 'yellow'));
  }

  /*
  Draw Points
  */
  for (var i in points) {
    if (points[i].active) {
      points[i].draw();
      points[i].physx();
    }
  }
  
  /*
  Draw Rockets
  */
  for (var i in rockets) {
    if (rockets[i].active) {
      rockets[i].draw();
      rockets[i].physx();
    }
  }

  // Start again
  requestAnimationFrame(draw);
}

rocket = new Rocket(width / 2, height / 2, 20, 20, 'red');
rockets.push(rocket);

draw();

$(document).mousemove(function (e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
});