<script type="text/javascript">
    
  //////////////////////////////////////////////////////////////////////////////////
  // A demonstration of a Canvas nebula effect
  // (c) 2010 by R Cecco. <http://www.professorcloud.com>
  // MIT License
  //
  // Please retain this copyright header in all versions of the software if
  // using significant parts of it
  //////////////////////////////////////////////////////////////////////////////////
  $(document).ready(function(){
      // shim layer with setTimeout fallback
      window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                function( callback ){
                  window.setTimeout(callback, 1000 / 60);
                };
      })();
      (function ($) {
              // The canvas element we are drawing into.
              var $canvas = $('#canvas');
              var $canvas2 = $('#canvas2');
              var $canvas3 = $('#canvas3');
              var ctx2 = $canvas2[0].getContext('2d');
              var ctx = $canvas[0].getContext('2d');
              var w = $canvas[0].width, h = $canvas[0].height;
              var w = window.innerWidth, h = window.innerHeight;
              var img = new Image();
  
              // A puff.
              var Puff = function(p) {
                  // var amtX = (window.innerWidth / 2);
                  // var amtY = (window.innerHeight / 2);
                  var opacity,
                      sy = (Math.random()*285)>>0,
                      sx = (Math.random()*285)>>0;
  
                  this.p = p;
  
                  this.move = function(timeFac) {
                      p = this.p + 0.3 * timeFac;
                      opacity = (Math.sin(p*0.05)*0.5);
                      if(opacity <0) {
                          p = opacity = 0;
                          sy = (Math.random()*285)>>0;
                          sx = (Math.random()*285)>>0;
                      }
                      this.p = p;
                      ctx.globalAlpha = opacity;
                      ctx.drawImage($canvas3[0], sy+p, sy+p, 285-(p*2),285-(p*2), 0,0, w, h);
                  };
              };
  
              var puffs = [];
              var sortPuff = function(p1,p2) { return p1.p-p2.p; };
              puffs.push( new Puff(0) );
              puffs.push( new Puff(20) );
              puffs.push( new Puff(40) );
  
              var newTime, oldTime = 0, timeFac;
  
              var loop = function() {
                  newTime = new Date().getTime();
                  if(oldTime === 0 ) {
                      oldTime=newTime;
                  }
                  timeFac = (newTime-oldTime) * 0.1;
                  if(timeFac>3) {timeFac=3;}
                  oldTime = newTime;
                  puffs.sort(sortPuff);
  
                  for(var i=0;i<puffs.length;i++)
                  {
                      puffs[i].move(timeFac/7.5);
                  }
                  ctx2.drawImage( $canvas[0] ,0,0, 570,570);
                  requestAnimFrame(loop);
              };
              // Turns out Chrome is much faster doing bitmap work if the bitmap is in an existing canvas rather
              // than an IMG, VIDEO etc. So draw the big nebula image into canvas3
              var $canvas3 = $('#canvas3');
              var ctx3 = $canvas3[0].getContext('2d');
              $(img).bind('load',null, function() {  ctx3.drawImage(img, 0,0, 570,570);  loop(); });
              img.src = '{{ site.baseurl }}/assets/img/nebula.jpg';
  
      })(jQuery);
  });
  </script>