var OWC = {
  _makeHintButton: function makeHintButton(hints) {
    var hintButtonContainer = $('<div class="hint-button"></div>');
    var hintButton = $('<span></span>');
    hintButton.text($('#msg-show-first-hint').text());
    hintButton.click(
      function() {
        hints.find('p:hidden:first').fadeIn();
        if (hints.find('p:hidden').length)
          $(this).text($('#msg-show-another-hint').text());
        else
          $(this).text($('#msg-no-more-hints').text());
      });
    hintButtonContainer.append(hintButton);
    return hintButtonContainer;
  },

  load: function load(id) {
    var challenge = $('#challenge-' + id);
    var content = challenge.find('.content').clone();
    var current = $('#current-challenge');
    current.empty();

    var headerText = $('#msg-header').text().replace('{id}', id);
    current.append($('<h1></h1>').text(headerText));
    document.title = headerText;

    current.append(content);

    var hints = $('<div class="hints"></div>');
    hints.append(challenge.find('.hints').clone());
    hints.find('p').hide();
    current.append(this._makeHintButton(hints));
    current.append(hints);

    var validatorCode = challenge.find('.validator').text();

    var validate = eval('(' + validatorCode + ')');

    function maybeDisplaySuccess() {
      if (validate(current)) {
        var success = $('<div id="success"></div>');
        success.text($('#msg-success').text());
        success.wrapInner('<h1></h1>');
        success.hide();
        current.children().addClass('completed');
        current.append(success);
        success.slideDown('slow');
        window.clearInterval(intervalId);
      }
    }
    var intervalId = window.setInterval(maybeDisplaySuccess, 100);

    current.fadeIn();
  }
};

$(window).ready(
  function() {
    OWC.load(1);
  });