var pixies_count = 2210;
var colors = [];
var default_colors = ['#CFCFCF', '#7C7C7C', '#EEEEEE', '#2B2B2B', '#F5F5F5', '#FFF'];

function get_input() {
  var custom_colors = [];
  var input_elms = $('.colors input[type=text]');
  for (i = 0; i < input_elms.length; i++) {
    if ($(input_elms[i]).val().length > 0) {
      custom_colors.push($(input_elms[i]).val());
    } 
  }

  return custom_colors;
}

function set_color_array() {
  var custom_colors = get_input();
  console.log(custom_colors);
  if (custom_colors.length == 6) {
    colors = custom_colors;
  }
  else {
    colors = default_colors;
  }
  
  // Append pixies now
  append_pixies(colors);
}

function append_pixies(_cols) {
  $('.output .boxes').html('');  // remove the old one's first
  var all_pixies = [];
  for (i = 0; i < pixies_count; i++) {
    var color = _cols[getRandomInt(0, 5)];
    var s = (1.5 + (0.1 * i))
    var animDelay = ("animation-delay:"+ (s) +"s;") + ("-webkit-animation-delay:"+ (s) +"s;") + ("-moz-animation-delay:"+ (s) +"s");
    var pixie = "<div class='pixie' style='background-color:"+ (color) +";" + (animDelay) + ";'></div>";
    
    all_pixies.push(pixie);
  }
  
  $('.output .boxes').append(all_pixies.join("\n"));
  
} 

$(document).ready(function(){
  set_color_array(get_input());
  $('#apply').on('click', function(e){
    set_color_array(get_input());
    e.preventDefault();
  });
});


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