/**
   * More at: http://hakim.se/experiments/
   * Twitter: @hakimel
   */
  
  var SCREEN_WIDTH = window.innerWidth;
  var SCREEN_HEIGHT = window.innerHeight;
  
  var RADIUS = 70;
  
  var RADIUS_SCALE = 2;
  var RADIUS_SCALE_MIN = 2.5;
  var RADIUS_SCALE_MAX = 4;
  
  var QUANTITY = 100;

  var canvas;
  var context;
  var particles;
  
  var mouseX = SCREEN_WIDTH * 0.5;
  var mouseY = SCREEN_HEIGHT * 0.5;
  var mouseIsDown = false;
  
//Load the image object in JS, then apply to canvas onload
var myImage = new Image();
myImage.onload = function() {
//context2.drawImage(myImage, 30, 15, 130, 130);
}
myImage.src = "http://cuddlephish.com/images/Cuddlephish%20Bubble%2008-20-10%2050%25.png";


//This is the Main Function
window.onload = function()
{
  var canvas = document.getElementById('world');
  if (! canvas || ! canvas.getContext ) {return false;}
  else
  {
  init();
  }
}

  function init() {

    canvas = document.getElementById( 'world' );
    
      context = canvas.getContext('2d');
      context2 = canvas.getContext('2d');
      context2.drawImage(myImage, 30, 15, 130, 130);
         
      // Register event listeners
      document.addEventListener('mousemove', documentMouseMoveHandler, false);
      document.addEventListener('mousedown', documentMouseDownHandler, false);
      document.addEventListener('mouseup', documentMouseUpHandler, false);
      document.addEventListener('touchstart', documentTouchStartHandler, false);
      document.addEventListener('touchmove', documentTouchMoveHandler, false);
      window.addEventListener('resize', windowResizeHandler, false);
      
      createParticles();
      
      windowResizeHandler();
      
      setInterval( loop, 1000 / 60 );
  
  }

  function createParticles() {
    particles = [];
    
    for (var i = 0; i < QUANTITY; i++) {
      var particle = {
        size: 1,
        position: { x: mouseX, y: mouseY },
        offset: { x: 0, y: 0 },
        shift: { x: mouseX, y: mouseY },
        speed: 0.01+Math.random()*0.04,
        targetSize: 1,
        fillColor: '#' + (Math.random() * 0x404040 + 0xaaaaaa | 0).toString(16),
        orbit: RADIUS*.5 + (RADIUS * .5 * Math.random())
      };
      
      particles.push( particle );
    }
  }

  function documentMouseMoveHandler(event) {
    mouseX = event.clientX - (window.innerWidth - SCREEN_WIDTH) * .5;
    mouseY = event.clientY - (window.innerHeight - SCREEN_HEIGHT) * .5;
  }
  
  function documentMouseDownHandler(event) {
    mouseIsDown = true;
  }
  
  function documentMouseUpHandler(event) {
    mouseIsDown = false;
  }

  function documentTouchStartHandler(event) {
    if(event.touches.length == 1) {
      event.preventDefault();

      mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;;
      mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;
    }
  }
  
  function documentTouchMoveHandler(event) {
    if(event.touches.length == 1) {
      event.preventDefault();

      mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;;
      mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;
    }
  }
  
  function windowResizeHandler() {
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;
    
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
  }

  function loop() {
    
    if( mouseIsDown ) {
      RADIUS_SCALE += ( RADIUS_SCALE_MAX - RADIUS_SCALE ) * (0.02);
    }
    else {
      RADIUS_SCALE -= ( RADIUS_SCALE - RADIUS_SCALE_MIN ) * (0.02);
    }
    
    RADIUS_SCALE = Math.min( RADIUS_SCALE, RADIUS_SCALE_MAX );
    
    context.fillStyle = 'rgba(0,0,0,0.05)';
       context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context2.drawImage(myImage, SCREEN_WIDTH *.5 - 100, SCREEN_HEIGHT *.5 - 105, 200, 200);
    
    for (i = 0, len = particles.length; i < len; i++) {
      var particle = particles[i];
      
      var lp = { x: particle.position.x, y: particle.position.y };
      
      // Rotation
      particle.offset.x += particle.speed;
      particle.offset.y += particle.speed;
      
      // Follow mouse with some lag
      particle.shift.x += ( mouseX - particle.shift.x) * (particle.speed);
      particle.shift.y += ( mouseY - particle.shift.y) * (particle.speed);
      
      // Apply position
      particle.position.x = particle.shift.x + Math.cos(i + particle.offset.x) * (particle.orbit*RADIUS_SCALE);
      particle.position.y = particle.shift.y + Math.sin(i + particle.offset.y) * (particle.orbit*RADIUS_SCALE);
      
      // Limit to screen bounds
      particle.position.x = Math.max( Math.min( particle.position.x, SCREEN_WIDTH ), 0 );
      particle.position.y = Math.max( Math.min( particle.position.y, SCREEN_HEIGHT ), 0 );
      
      particle.size += ( particle.targetSize - particle.size ) * 0.05;
      
      if( Math.round( particle.size ) == Math.round( particle.targetSize ) ) {
        particle.targetSize = 1 + Math.random() * 7;
      }
      
      context.beginPath();
      context.fillStyle = particle.fillColor;
      context.strokeStyle = particle.fillColor;
      context.lineWidth = particle.size;
      context.moveTo(lp.x, lp.y);
      context.lineTo(particle.position.x, particle.position.y);
      context.stroke();
      context.arc(particle.position.x, particle.position.y, particle.size/2, 0, Math.PI*2, true);
      context.fill();
    }
  }