/*
  Pen by DonKarlssonSan
  Works on my Machine(TM) in Chrome and
  Opera.
  Sluggish animation in IE and FF.
  Sluggish in Safari and Chrome on my
  iPhone 6.
  
  Try it in Full Page mode, then
  make the browser full screen (F11
  in Chrome).
*/

(function() {
  var numberOfStars = 3200;
  var delayFactor = 16;
  var w; // Width
  var h; // Height
  var r; // Radius of death circle
  
  function addStar(delay) {
    // The direction of the star
    var alpha = Math.random() * Math.PI * 2;
    var x = Math.round(Math.cos(alpha) * r + w/2);
    var y = Math.round(Math.sin(alpha) * r + h/2);

    var div = document.createElement("div");
    // Start position
    div.style.left = w/2 + "px";
    div.style.top = h/2 + "px";
    document.body.appendChild(div);
    
    // Set end position after added to
    // the DOM so that we get a
    // transition animation.
    setTimeout(function() {
      div.style.left = x + "px";
      div.style.top = y + "px";
      div.style.width = "10px";
      div.style.height = "10px";
      div.style.color = "white";
    }, delay);
  }
  
  function removeStars() {
    var stars = document.querySelectorAll("div");
    for(var index = 0; index < stars.length; ++index){
      var star = stars[index];
      if (star) {
        star.parentNode.removeChild(star);
      }
    }
  }
  
  function restart() {
    w = window.innerWidth;
    h = window.innerHeight;
    // The radius of a circle touching
    // all four corners of the available
    // screen. Pythagora's Theorem.
    // 10 added to be out of sight for
    // sure.
    // See pen details for more info on
    // the math:
    // http://codepen.io/DonKarlssonSan/details/XJvmOL/
    r = Math.sqrt(w*w + h*h)/2 + 10;
    removeStars();
    for(var i = 0; i < numberOfStars; ++i) {
      addStar(i * delayFactor);
    }
  }
  document.getElementById("restart").addEventListener("click", restart);

  window.onload = restart;
  window.onresize = restart;
})();

/*
  Could probably be done with a CSS
  keyframe animation instead. That way we
  don't need as many divs. We can reuse
  them and make the animation infinite 
  (animation-iteration-count). Next
  time...
*/