'use strict';
var context = new AudioContext(), source = undefined, sound = undefined, audio = new Audio(), current_animation;
function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function connectToSong (url, dimensions){
  if(sound !== undefined){
    source.stop();
    audio = new Audio();
    context = new AudioContext();
    clearTimeout(current_animation);
  }
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function() {
    createSound(context, xhr, url, dimensions);
      document.getElementById('loading').className = 'hide';
  };
  xhr.send();
}
function createSound (context, xhr, song_url, dimensions){
  source = context.createBufferSource();
  context.decodeAudioData(xhr.response, function(buffer) {
    source.buffer = buffer;
    source.connect(context.destination);
    addPlayListener(audio, context, song_url, buffer, dimensions);
  });
}
function addPlayListener(audio, context, song_url, buffer, dimensions){
  audio.addEventListener('canplay', function() {
    sound = context.createMediaElementSource(audio);
    sound.connect(context.destination);
    createAnalyser(audio, sound, context, buffer);
    createPeriodicWave(dimensions, context, buffer);
  });
  audio.src = song_url;
}
function createAnalyser(audio, sound, context, buffer){
  var analyser = context.createAnalyser();
  sound.connect(analyser);
  analyser.fftSize = 256;
  var buffer_length = analyser.frequencyBinCount;
  var frequency_data = new Uint8Array(buffer_length);
  source.start(0);
}
function drawBars(canvas_ctx, analyser, data, buffer_length){
  var draw_visual = requestAnimationFrame(function(){
    drawBars(canvas_ctx, analyser, data, buffer_length)
  });
  analyser.getByteFrequencyData(data);
  canvas_ctx.fillStyle = 'rgb(0, 0, 0)';
  canvas_ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
  var bar_width = (window.innerWidth / buffer_length) * 2.5;
  var bar_height;
  var x = 0;
  for(var i = 0; i < buffer_length; i++) {
    var bar_height = data[i];
    canvas_ctx.fillStyle = 'rgb(' + (bar_height+100) + ',50,50)';
    canvas_ctx.fillRect(x,window.innerHeight-bar_height/2,bar_width,bar_height);
    x += bar_width + 1;
  }
}
function createPeriodicWave (dimensions, context, buffer){
  var current_time = 0;
  var left_channel = buffer.getChannelData(0); // Float32Array describing left channel    
  var right_channel = buffer.getChannelData(1);
  var song_length = buffer.duration;
  var width = dimensions.width;
  var height = dimensions.height;
  var totallength = left_channel.length;
  var heights = [];
  var counter = (left_channel.length/song_length)/16;
  for (var i = 0; i < left_channel.length; i++) {
    if (i%counter===0){
      var audio_buff_key = Math.floor(i);
      var y = (left_channel[audio_buff_key] * height) / 2;
      heights.push(y);
    }
  }
  for (var i = 0; i<5; i++){
    moveBall(document.getElementById('ball'), context, heights, current_time, song_length, dimensions);
  }
}

function moveBall(elm, context, data, current_time, song_length, dimensions){
  var interval = ((song_length/data.length)*1000);
  if (context.currentTime <= song_length){
    current_animation = setTimeout(function(){
      var color = null;
      var percent = ((data[current_time] * 100) / (dimensions.height/2));
      var sign = Math.sign(data[current_time]);
      var ruler = 0;
      if (sign === 1){
        ruler = ((data[current_time] + (dimensions.height/2))-20);
      } else if (sign === -1){
        ruler = ((data[current_time] + (dimensions.height/2))+20);
      } else {
        ruler = (dimensions.height/2) - 20;
      }
      if(percent <= -66.8) {
        color = 'red';
      } else if(percent > -66.8 && percent <= -33.4) {
        color = 'orange';
      } else if(percent > -33.4 && percent <= 0) {
        color = 'yellow';
      } else if(percent > 0 && percent <= 33.4) {
        color = 'green';
      } else if(percent > 33.4 && percent <= 66.8) {
        color = 'blue';
      } else {
        color = 'purple';
      }
      elm.classList = 'b'+color;
      elm.style.transitionDuration = Math.abs(ruler)/1000 + 's';
      elm.style.top = ruler + 'px';
      setTimeout(function(){
        particles.glow(((dimensions.width/2)+20), (ruler+20), ('b'+color));
      }, interval);
      setTimeout(function(){
        particles.glow(((dimensions.width/2)+20), (ruler+20), ('b'+color));
      }, (interval+83.33));
      setTimeout(function(){
        particles.glow(((dimensions.width/2)+20), (ruler+20), ('b'+color));
      }, (interval+166.66));
      current_time++;
      moveBall(elm, context, data, current_time, song_length, dimensions);
    }, interval);
  }
}
var particles = {
  glow: function(elX, elY, color_name){
    var glowEl = document.createElement('div');
    glowEl.className = 'glow ' + color_name;
    var size = rand(2,5);
    glowEl.style.width = size + 'px';
    glowEl.style.height = size + 'px';
    glowEl.style.left = rand(elX-30, elX-20) +'px';
    glowEl.style.top = rand(elY - 5, elY + 5) +'px';
    glowEl.style.opacity = '1';
    document.body.appendChild(glowEl);
    particles.glowAnimate(glowEl, elX, elY);
  },
  glowAnimate: function(el, elX, elY){
    if(el.style.opacity <=0){
      var elm = el;
      el.parentNode.removeChild(elm);
      return false;
    } else {
      el.style.opacity = (Number(el.style.opacity) - 0.1).toString();
      el.style.top = (parseInt(el.style.top)+rand(-20, 20)) + 'px';
      el.style.left = (parseInt(el.style.left)-rand(30,50))+'px';
    }
    setTimeout(function(){
      return particles.glowAnimate(el);
     }, 60);
  }
}

window.onload = function(){
  var canvas = document.getElementById('stage');
  var dimensions = {
    height: window.innerHeight,
    width: window.innerWidth
  }
  var list_items = document.querySelectorAll('#songlist > li');
  document.getElementById('ball').style.top = ((dimensions.height/2)-20) + 'px'; 
  for (var i = 0; i < list_items.length; i++){
    var li = list_items[i]
    li.addEventListener('click', function(e){       document.getElementById('loading').className = '';
      var track_properties = e.target.dataset;
      var song_url = 'https://s3.amazonaws.com/codepen-audio/'+track_properties.artist+'--'+track_properties.song+'.mp3';
      connectToSong(song_url, dimensions);
    });
  }
}