$( function() {
  var x = $('#letters').text();
  var letters = x.split("");

// hide all the box contents, save them in a string, then an array
  var box = $.map(letters, function(n) {
    var lower = n.toLowerCase();
    if (n == "*") {
      return '<li class="null"></li>';
    } else if (lower == n) {
      return '<li>' + n +'</li>';
    } else {
      return '<li class="num">' + n + '</li>';
    }
  });
  $('#boxxx').html('<ul class="boxes">' + box.join("") + '</ul>');
  $('.boxes li').text('');

// count through the .num items, number the clue boxes
  $('.num').each( function(i) {
    $(this).attr('title', i + 1);
    $('<em>' + (i + 1) + '</em>').prependTo(this);
  });

// show and hide the letters saved in x on button click
  $('#showClues').toggle( function() {
    var box = $.map(letters, function(n) {
      var lower = n.toLowerCase();
      if (n == "*") {
        return '<li class="null"></li>';
      } else if (lower == n) {
        return '<li>' + n +'</li>';
      } else {
        return '<li class="num">' + n + '</li>';
      }
    });
    $('#boxxx').html('<ul class="boxes">' + box.join("") + '</ul>');
    $('.num').css('background', '#faeaea');
    $('#showClues').text('Great, thanks. Now please go back.');
  }, function() {
    $('.num').css('background', '#ffffff')
    $('.boxes li').text('');
// count through the .num items, number the clue boxes
    $('.num').each( function(i) {
      $(this).attr('title', i + 1);
      $('<em>' + (i + 1) + '</em>').prependTo(this);
    });
    $('#showClues').text('I suck. Show me the answers.');
  });

});