text: var canvas = document.getElementById('nokey'),
      can_w = parseInt(canvas.getAttribute('width')),
      can_h = parseInt(canvas.getAttribute('height')),
      ctx = canvas.getContext('2d');
  
  // console.log(typeof can_w);
  
  var ball = {
          x: 0,
          y: 0,
          vx: 0,
          vy: 0,
          r: 0,
          alpha: 1,
          phase: 0
      },
      ball_color = {
          r: 207,
          g: 255,
          b: 4
      },
      R = 2,
      balls = [],
      alpha_f = 0.03,
      alpha_phase = 0,
  
  // Line
      link_line_width = 0.8,
      dis_limit = 260,
      add_mouse_point = true,
      mouse_in = false,
      mouse_ball = {
          x: 0,
          y: 0,
          vx: 0,
          vy: 0,
          r: 0,
          type: 'mouse'
      };
  
  // Random speed
  function getRandomSpeed(pos){
      var  min = -1,
          max = 1;
      switch(pos){
          case 'top':
              return [randomNumFrom(min, max), randomNumFrom(0.1, max)];
              break;
          case 'right':
              return [randomNumFrom(min, -0.1), randomNumFrom(min, max)];
              break;
          case 'bottom':
              return [randomNumFrom(min, max), randomNumFrom(min, -0.1)];
              break;
          case 'left':
              return [randomNumFrom(0.1, max), randomNumFrom(min, max)];
              break;
          default:
              return;
              break;
      }
  }
  function randomArrayItem(arr){
      return arr[Math.floor(Math.random() * arr.length)];
  }
  function randomNumFrom(min, max){
      return Math.random()*(max - min) + min;
  }
  console.log(randomNumFrom(0, 10));
  // Random Ball
  function getRandomBall(){
      var pos = randomArrayItem(['top', 'right', 'bottom', 'left']);
      switch(pos){
          case 'top':
              return {
                  x: randomSidePos(can_w),
                  y: -R,
                  vx: getRandomSpeed('top')[0],
                  vy: getRandomSpeed('top')[1],
                  r: R,
                  alpha: 1,
                  phase: randomNumFrom(0, 10)
              }
              break;
          case 'right':
              return {
                  x: can_w + R,
                  y: randomSidePos(can_h),
                  vx: getRandomSpeed('right')[0],
                  vy: getRandomSpeed('right')[1],
                  r: R,
                  alpha: 1,
                  phase: randomNumFrom(0, 10)
              }
              break;
          case 'bottom':
              return {
                  x: randomSidePos(can_w),
                  y: can_h + R,
                  vx: getRandomSpeed('bottom')[0],
                  vy: getRandomSpeed('bottom')[1],
                  r: R,
                  alpha: 1,
                  phase: randomNumFrom(0, 10)
              }
              break;
          case 'left':
              return {
                  x: -R,
                  y: randomSidePos(can_h),
                  vx: getRandomSpeed('left')[0],
                  vy: getRandomSpeed('left')[1],
                  r: R,
                  alpha: 1,
                  phase: randomNumFrom(0, 10)
              }
              break;
      }
  }
  function randomSidePos(length){
      return Math.ceil(Math.random() * length);
  }
  
  // Draw Ball
  function renderBalls(){
      Array.prototype.forEach.call(balls, function(b){
          if(!b.hasOwnProperty('type')){
              ctx.fillStyle = 'rgba('+ball_color.r+','+ball_color.g+','+ball_color.b+','+b.alpha+')';
              ctx.beginPath();
              ctx.arc(b.x, b.y, R, 0, Math.PI*2, true);
              ctx.closePath();
              ctx.fill();
          }
      });
  }
  
  // Update balls
  function updateBalls(){
      var new_balls = [];
      Array.prototype.forEach.call(balls, function(b){
          b.x += b.vx;
          b.y += b.vy;
  
          if(b.x > -(50) && b.x < (can_w+50) && b.y > -(50) && b.y < (can_h+50)){
              new_balls.push(b);
          }
  
          // alpha change
          b.phase += alpha_f;
          b.alpha = Math.abs(Math.cos(b.phase));
          // console.log(b.alpha);
      });
  
      balls = new_balls.slice(0);
  }
  
  // loop alpha
  function loopAlphaInf(){
  
  }
  
  // Draw lines
  function renderLines(){
      var fraction, alpha;
      for (var i = 0; i < balls.length; i++) {
          for (var j = i + 1; j < balls.length; j++) {
  
              fraction = getDisOf(balls[i], balls[j]) / dis_limit;
  
              if(fraction < 1){
                  alpha = (1 - fraction).toString();
  
                  ctx.strokeStyle = 'rgba(150,150,150,'+alpha+')';
                  ctx.lineWidth = link_line_width;
  
                  ctx.beginPath();
                  ctx.moveTo(balls[i].x, balls[i].y);
                  ctx.lineTo(balls[j].x, balls[j].y);
                  ctx.stroke();
                  ctx.closePath();
              }
          }
      }
  }
  
  // calculate distance between two points
  function getDisOf(b1, b2){
      var  delta_x = Math.abs(b1.x - b2.x),
          delta_y = Math.abs(b1.y - b2.y);
  
      return Math.sqrt(delta_x*delta_x + delta_y*delta_y);
  }
  
  // add balls if there a little balls
  function addBallIfy(){
      if(balls.length < 20){
          balls.push(getRandomBall());
      }
  }
  
  // Render
  function render(){
      ctx.clearRect(0, 0, can_w, can_h);
  
      renderBalls();
  
      renderLines();
  
      updateBalls();
  
      addBallIfy();
  
      window.requestAnimationFrame(render);
  }
  
  // Init Balls
  function initBalls(num){
      for(var i = 1; i <= num; i++){
          balls.push({
              x: randomSidePos(can_w),
              y: randomSidePos(can_h),
              vx: getRandomSpeed('top')[0],
              vy: getRandomSpeed('top')[1],
              r: R,
              alpha: 1,
              phase: randomNumFrom(0, 10)
          });
      }
  }
  // Init Canvas
  function initCanvas(){
      canvas.setAttribute('width', window.innerWidth);
      canvas.setAttribute('height', window.innerHeight);
  
      can_w = parseInt(canvas.getAttribute('width'));
      can_h = parseInt(canvas.getAttribute('height'));
  }
  window.addEventListener('resize', function(e){
      console.log('Window Resize...');
      initCanvas();
  });
  
  function goMovie(){
      initCanvas();
      initBalls(30);
      window.requestAnimationFrame(render);
  }
  goMovie();
  
  // Mouse effect
  canvas.addEventListener('mouseenter', function(){
      console.log('mouseenter');
      mouse_in = true;
      balls.push(mouse_ball);
  });
  canvas.addEventListener('mouseleave', function(){
      console.log('mouseleave');
      mouse_in = false;
      var new_balls = [];
      Array.prototype.forEach.call(balls, function(b){
          if(!b.hasOwnProperty('type')){
              new_balls.push(b);
          }
      });
      balls = new_balls.slice(0);
  });
  canvas.addEventListener('mousemove', function(e){
      var e = e || window.event;
      mouse_ball.x = e.pageX;
      mouse_ball.y = e.pageY;
      // console.log(mouse_ball);
  });
  