$(function(){
  var $kind;
  var $level;
  var $goal;
  var $g;
  var $score;
  $('.opt').click(function() {
    $kind = $(this).attr('id');
    $level = 1;
    $goal = 5;
    $g = 0;
    $score = 0;
    $initGame($kind);
  });
  $('.board-right').on('click', '.piece', function() {
    $('.error').removeClass('shown');
    $('.selected').removeClass('selected');
    $(this).toggleClass('selected');
  });
  $('.game-screen').on('click', '#submit', function() {
    if ($('.selected').length) {
      if ($('.selected').attr('id') === 'comp') {
        $g++;
        $score += 16;
        if ($g === $goal) {
          $g = 0;
          $goal = ($goal + 5 > 25) ? 25 : $goal + 5;
          $level++;
        }
        $compBoard($level);
        $compDisplay($goal, $g, $score);
      }
      else {
        $('.selected').removeClass('selected');
        $('.error').text('Sorry, not quite.').addClass('shown');
      }
    }
    else {
      $('.error').text('You need to select one of the dots on the right!').addClass('shown');
    }
  });
  
  $('#back').click(function(){
    $('.game-screen').removeClass('shown');
  });
  $('button.info').click(function(){
    $(this).closest('.game-opt').next('.info').addClass('shown');
  });
  $('.got-it').click(function(){
    $('div.info').removeClass('shown');
  });
});

var $genRand = function(max, min) {
  return ~~(Math.random() * (max - min + 1) + min);
};

var $genCompColors = function(difficulty) {
  var $lV = (180 - (20 + (difficulty * 10)))/2;
  var $h = $genRand(360, 0);
  var $hues = [];
  var $s = $genRand(60, 40);
  $s = ", " + $s.toString() + "%, " + $s.toString() + "%)";
  
  $hues.push($h);
  $h = $h + 180 > 360 ? ($h + 180 - 360) : ($h + 180);
  $hues.push($h);
  $h = $genRand((Math.max($hues[0], $hues[1]) - $lV), (Math.min($hues[0], $hues[1]) + $lV));
  $hues.push($h);
  $h = Math.max($hues[0], $hues[1]) + $lV;
  $h = $h > 360 ? $h - 360 : $h;
  $hues.push($h);
  
  var i = 0;
  while(i < $hues.length) {
    $hues[i] = 'hsl(' + $hues[i].toString() + $s;
    i++;
  }
  return $hues;
};

var $genCompPieces = function(arr) {
  var $positions = ['top: 135px; right: 120px;', 'top: 215px; right: 200px;', 'top: 305px; right: 120px;'];
  
  while (arr.length) {
    if (arr.length === 2) {
      $('.board-right').append(
        '<div id="comp" class="piece" style="background-color: ' + arr.pop() + '; ' + 
        $positions.splice(
          Math.floor(Math.random() * $positions.length), 1
        ) + '"></div>'
      );
    }
    else if (arr.length === 1) {
      $('.board-left').append('<div id="base" class="piece" style="background-color: ' + arr.pop() + ';"></div>');
    }
    else {
      $('.board-right').append(
        '<div class="piece" style="background-color: ' + arr.pop() + '; ' + 
        $positions.splice(
          Math.floor(Math.random() * $positions.length), 1
        ) + '"></div>'
      );
    }
  }
};

var $compBoard = function(level) {
  $('.board-left').empty();
  $('.board-right').empty();
  if (level % 2 === 0) {
    $genCompPieces($genCompColors(level));
  }
  else {
    $genCompPieces($genCompColors(level - 1));
  }
  $('h2.level').text(level.toString());
};

var $compDisplay = function(goal, g, score) {
  $('.goal').text(g.toString() + '/' + goal.toString());
  $('.score').text(score.toString());
};

var $initGame = function(kind) {
  var $k = kind;
  $('.game-screen').addClass('shown');
  $('.board-left').empty();
  $('.board-right').empty();
  if ($k === 'complementary') {
    $compBoard(1);
  }
  $('h1.game-type').text($k.charAt(0).toUpperCase() + $k.slice(1));
  $('h2.level').text('1');
  $compDisplay(5, 0, 0);
};