$(function() {
  $('#word').each(function(index, elem) {
    $.getJSON(
      'http://ksenia.causa-arcana.com/api/words/' + $(elem).data('id'),
      function(data) {
        var primary_form   = data['primary_form']
        var part_of_speech = data['part_of_speech']
        var commentary     = data['commentary']

        var translations = []
        data['translations'].forEach(function(item) {
          var commentary = ''
          if (item['commentary']) {
            commentary = ' (' + item['commentary'] + ')'
          }
          translations.push(
            '<li>' + item['translation'] + commentary + '</li>'
          )
        })

        var examples = []
        data['examples'].forEach(function(item) {
          examples.push('<li>' + item[0] + ' &mdash; ' + item[1] + '</li>')
        })

        $('#primary-form').text(primary_form)
        $('#part-of-speech').text(part_of_speech)

        if (commentary) {
          $('#commentary-data').text(commentary)
          $('#commentary').removeClass('invisible')
        }

        if (translations.length > 0) {
          $('#translations-data').html('<ol>' + translations.join('') + '</ol>')
          $('#translations').removeClass('invisible')
        }

        if (examples.length > 0) {
          $('#examples-data').html('<ul>' + examples.join('') + '</ul>')
          $('#examples').removeClass('invisible')
        }
      },
    )
  })
})