var demo = $("#demo");

var vw = window.innerWidth;
var vh = window.innerHeight;

var bubbles = [];
var ballCache = [];

var colors = ["red", "green", "blue"];
var colorStep = 255 / 3;

for (var i = 0; i < 50; i++) {
  bubbles.push(createBubble(35));
}

for (var i = 0; i < 100; i++) {
  var color = colors[random(2)];
  ballCache.push(createBall(color, 20));
}

launchBall();

function launchBall() {
  
  if (ballCache.length) {
    var ball = ballCache.shift();
    ball.launch();
  }
  
  TweenLite.delayedCall(random(20) / 100, launchBall);
}

function createBall(color, radius) {
  
  var element = $('<div class="msgBubble bubble ' + color + 'Bubble"/>').appendTo(demo); 
  
  TweenLite.set(element, { 
    autoAlpha: 0, 
    width: radius, 
    height: radius,
    xPercent: -50,
    yPercent: -50,
    y: -50, 
  });
  
  var pos = element[0]._gsTransform;
  
  var tl = new TimelineMax({
    paused: true,
    onUpdate: checkHit,
    onComplete: recycle
  });
      
  // API
  var ball = {
    element: element,
    launch: launch    
  };
    
  function checkHit() {
        
    var len = bubbles.length;
    
    for (var i = 0; i < len; i++) {
      
      var bubble = bubbles[i];
      
      if (!bubble.active) continue;
            
      var dx = pos.x - bubble.position.x;
      var dy = pos.y - bubble.position.y;
      
      var distSq = dx * dx + dy * dy;
      
      var minDist = (bubble.radius - radius) * (bubble.radius - radius);
      
      if (distSq <= minDist) {
        tl.pause();
        bubble.shiftColor(color);
        TweenLite.to(element, 0.5, { autoAlpha: 0, scale: 0, onComplete: recycle });
        break;
      }      
    }    
  }
    
  function recycle() {    
    tl.pause(0).clear();
    ballCache.push(ball);
  }
  
  function launch() {
        
    tl.set(element, { autoAlpha: 1, x: random(vw), scale: 1 })
      .to(element, random(1, 2.5), { x: random(vw), y: vh + 50 })
      .play();
  }
  
  return ball;
}

function createBubble(radius) {
  
  var element = $('<div class="bubble audienceBubble"/>').appendTo(demo);
  
  TweenLite.set(element, { 
    width: radius,
    height: radius,
    xPercent: -50,
    yPercent: -50,
    x: random(50, vw - 50), 
    y: random(vh - 350, vh - 50) 
  });
  
  // API
  var ball = {
    element: element,
    red: 255,
    green: 255,
    blue: 255,
    active: true,
    position: element[0]._gsTransform,
    radius: radius,
    shiftColor: shiftColor
  };
    
  function shiftColor(color) {
        
    ball[color] = Math.max(ball[color] - colorStep, 0);    
    var rgb = [ball.red, ball.green, ball.blue];   
    
    // Hide if rgb is black
    if (rgb[0] <= 0 && rgb[1] <= 0 && rgb[2] <= 0) {
      ball.active = false;
      TweenLite.set(element, { autoAlpha: 0, scale: 0 });
      TweenLite.delayedCall(random(3), respawn);
    } else {
      TweenLite.set(element, { backgroundColor: "rgb(" + rgb + ")" });
    }
  }
    
  function respawn() {
       
    ball.red = ball.green = ball.blue = 255;
    ball.active = true;
    
    TweenLite.set(element, { 
      backgroundColor: "#fff",
      x: random(50, vw - 50), 
      y: random(vh - 350, vh - 50) 
    });
    
    TweenLite.to(element, 0.5, { autoAlpha: 1, scale: 1 });
  }
  
  return ball;  
}

function random(min, max) {
  if (max == null) { max = min; min = 0; }
  return Math.floor(Math.random() * (1 + max - min) + min);
}

// var colors = ["red", "green", "blue"],
//     demo = $("#demo"),
//     startY = -50,
//     endY = 500,
//     tl = new TimelineMax();

// function randomNumber(min, max){
//   return Math.floor(Math.random() * (1 + max - min) + min);
// }

// function createMessageBalls() {
//   for (var i = 0; i < 50; i++) {
//     var colorIndex = randomNumber(0,2),
//         color = colors[colorIndex],
//         bubble = $('<div class="msgBubble bubble ' + color + 'Bubble"/>').appendTo(demo); 
    
//     tl.set(bubble, {x:randomNumber(80, 530), y:startY}, 0) 
//     tl.to(bubble, 4, {y:endY, x:randomNumber(0, 730), onUpdate:checkHit, repeatDelay:Math.random()*2, repeat:300}, Math.random() * 2)
//   }
// }

// function createAudienceBalls() {
//   for (var i = 0; i < 8; i++) {
//     var bubble = $('<div class="bubble audienceBubble"/>').appendTo(demo);
//     tl.set(bubble, {x:randomNumber(20, 630), y:randomNumber(320, 430)}, 0)
//   }
// }

// function checkHit() {
//   var audienceBubbles = $(".audienceBubble");
//   var msgBubbles = $(".msgBubble");

//   audienceBubbles.each(function(audienceBubble) {
//     msgBubbles.each(function(msgBubble) {
//       if (Draggable.hitTest($(msgBubble), $(audienceBubble))) {
//         $(msgBubble).addClass("highlight");
//       } else {
//         $(msgBubble).removeClass("highlight");
//       }
//     });
//   });
// }

// function execute() {
//   createAudienceBalls();
//   createMessageBalls();
// }

// execute();