// -----------------
// 基本設定
// -----------------
var W = window.innerWidth;
var H = window.innerHeight;
var cv = null;
var bubbleNum = 100; // bubbleの数
var maxBubbleRadius = 50; // bubbleのサイズ
var colorCodeNum = 1; // カラーコード番号

// -----------------
// 自作関数
// -----------------
// ランダムで-1か1を返す
function randomSign(){
  return Math.round( Math.random());
}
// カラーコードを返す
function colorCode(colorCodeNum, num){
  var colorCode1 = [
    "#394a51", // color1: bg-color
    "#7fa99b", // color2
    "#fdc57b", // color3
    "#fbf2d5" // color4
  ];
  var colorCode2 = [
    "#434343",// color1: bg-color
    "#a64452",// color2
    "#f7c873",// color3
    "#f8f8f8" // color4
  ];
  if(colorCodeNum == 1)
    return colorCode1[num];
  else if(colorCodeNum == 2)
    return colorCode2[num];
}
// ランダムなカラーコードを返す
function randomColor(colorCodeNum){
  return colorCode(colorCodeNum, Math.round(Math.random()*2)+1);
}

// -----------------
// main
// -----------------
function canvasSupport(){
  return ( cv && cv.getContext );
}

// 起動時に1度だけ行う処理
function init(){
  cv = document.getElementById("cv");
  if( !canvasSupport() ) return; // サポートしてないならここでreturn
  cv.width = W;
  cv.height = H;
  var context = cv.getContext("2d");
  main(context);
}

function main(context){
  var bubbles = [];
  for( var i = 0; i < bubbleNum; i++ ) {
    var bb = new bubble();
    bubbles.push(bb);
  }

  draw();
  setInterval(draw,24);

  function draw() {
    context.fillStyle = colorCode(colorCodeNum, 0);
    context.fillRect(0,0,W,H);
    
    for( var i = 0; i < bubbles.length; i++ ) {
      var grad = context.createRadialGradient(bubbles[i].x, bubbles[i].y, 0, bubbles[i].x, bubbles[i].y, bubbles[i].radius);
      grad.addColorStop(0, bubbles[i].color);
      context.beginPath();
      context.fillStyle = grad;
      
      context.arc(bubbles[i].x, bubbles[i].y, bubbles[i].radius, 0, Math.PI * 2 ,false);
      
      context.fill();
      bubbles[i].move();
    }
  }
}

function bubble() {
  this.x = Math.random() * W;
  this.y = Math.random() * H;
  this.vx = 0;
  // this.vx = Math.random() * 5 + 1*randomSign();
  this.vy = Math.random() * 5 * -1;
  this.radius = Math.random() * maxBubbleRadius;
  this.color = randomColor(colorCodeNum);
}

bubble.prototype.move = function() {
  this.x += this.vx;
  this.y += this.vy;

  if( this.y < -maxBubbleRadius*2 ) this.y = H + maxBubbleRadius*2;
}

window.onload = function() {
  init();
}