// Interesting fact! These are not more colorful when moving, that is an optical illusion.

// requestAnimFrame() As explained by Mr Irish: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    window.oRequestAnimationFrame      ||
    window.msRequestAnimationFrame     ||
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();

var starfield = (function() {
  // Variables - a quantity which during a calculation is assumed to vary or be capable of varying in value
  var stars = [],
      star_density = 25,
      velocity = {x:0, y: 0},
      star_colors = ["rgba(0,0,0,.5)", "#ffe9c4", "#d4fbff"],
      stars_bg = "rgba(0,0,0,.5)",
      frame,
      star_canvas,
      star_context,
      viewport_width,
      viewport_height; 

  function initialize() {
    // Make canvas
    star_canvas = document.createElement('canvas');
    star_context = star_canvas.getContext('2d');

    // Get viewport size and resize canvas
    resize_canvas();
       
    // Draw all the stars, I decided stars come in units of 10 
    for (var i = 0; i < (star_density*10); i++) {
      var rad = Math.random() * 2;
      create_star(rad);
      // twice as many small stars as big
      var rad = Math.random();
      create_star(rad);
      create_star(rad);
    }
   
    // Put the canvas on the page
    document.body.appendChild(star_canvas);
    
    // When you press keys stuff happens 
    document.addEventListener('keydown', function(e) {
      e = e || window.event;
      // We add to the existing velocity, this dampens the speed changes and makes changing directions more gradual just like flying a real spaceship... I imagine
      if (e.keyCode == 39) {
        velocity = {
          x: velocity.x -5, 
          y: velocity.y
        };
      }
      if (e.keyCode == 37) {
        velocity = {
          x: velocity.x +5, 
          y: velocity.y
        };
      }
      if (e.keyCode == 40) {
        velocity = {
          x: velocity.x, 
          y: velocity.y -5
        };
      }
      if (e.keyCode == 38) {
        velocity = {
          x: velocity.x,
          y: velocity.y +5
        };
      }
    }, false);
    
    // Drawing our first frame starts the drawing loop
    draw_frame();

    function clear_canvas() {
      // Each frame the canvas is painted wiht semi transparent black - this gives the trail effect behind moving stars
      star_context.fillStyle=stars_bg;
      star_context.fillRect(0, 0, viewport_width, viewport_height);
      
    }

    function draw_star() {
      var s = stars.length;
      // for every star
      while(s--) {
        var star = stars[s];
        // update individual stars position
        star.update();
        // render the star to the canvas
        star.render(star_context);
      }
    }


    function create_star(rad) {
      // I don't really need a function for create_star, but reads better and easy to expand upon
      stars.push(new star(rad));
    }

    function draw_frame() {
      clear_canvas();
      // The infinate loop!
      frame = requestAnimFrame(draw_frame);
      draw_star();
    }

  }

  function resize_canvas(){
    viewport_width = window.innerWidth;
    viewport_height = window.innerHeight;
    star_canvas.width = viewport_width;
    star_canvas.height = viewport_height;
  }


  var star = function(rad) {
    
    this.alpha    = Math.round((Math.random() * 100 - 70) + 70); // Random brightness
    this.radius = rad || Math.random() * 2; // Radius
    this.color    = star_colors[Math.round(Math.random() * star_colors.length)]; // Random color from array

    this.pos = {
      // Initial random position
      x: Math.random() * viewport_width, 
      y: Math.random() * viewport_height
    };


  };

  star.prototype = {

    update: function() {

      // Depending on the radius the star will move at a differnt speed (slower where a greater perception of depth) 
      // Yes! 3 is a magic number :)
      this.pos.y += velocity.y === 0 ? velocity.y : (velocity.y / (3 - this.radius));
      this.pos.x += velocity.x === 0 ? velocity.x : (velocity.x / (3 - this.radius));
      
      // Keep the stars on the canvas
      if(this.pos.y > viewport_height){
        this.pos.y = 0;        
      } else if(this.pos.y < 0){
        this.pos.y = viewport_height;
      }
      // Keep the stars on the canvas in a different direction
      if(this.pos.x > viewport_width){
        this.pos.x = 0;        
      } else if(this.pos.x < 0){
        this.pos.x = viewport_width;        
      }
      // Dampen the velocity, ie slow down when you stop telling it to move
      velocity.x = velocity.x /1.00005;
      velocity.y = velocity.y /1.00005;
    },

    render: function(context) {
      // Draw the star at its current position
      var x = Math.round(this.pos.x),
          y = Math.round(this.pos.y);

      context.save();
      context.globalCompositeOperation = 'lighter';
      context.globalAlpha = this.alpha;      
      context.fillStyle = this.color;
      context.beginPath();
      context.moveTo(x, y);
      context.arc(x, y, this.radius, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();
      context.restore();
    }

  };
  
  return {
    // Always kick things off with a really cool function name!
    lets_roll: initialize
  };
  
})();

starfield.lets_roll();