var query, title, article;

$(document).ready(function() {

  function wikipedia() {
     $('.wiki-articles').empty();
  
    $.ajax({
      url: 'https://en.wikipedia.org/w/api.php?action=query&format=json&prop=pageimages%7Cpageterms%7Cinfo%7Cextracts&generator=prefixsearch&redirects=1&formatversion=2&piprop=thumbnail&pithumbsize=300&pilimit=10&wbptterms=description&inprop=url&exsentences=3&exlimit=20&exintro=1&explaintext=1&exsectionformat=wiki&gpslimit=10&callback=?&gpssearch=' + query + '',
      dataType: "jsonp",

      success: function(data) {
      //gives a number of query results
        var articleNum = data.query.pages.length;
        for (var i = 0; i < articleNum; i++) {
          title = data.query.pages[i].title;  //assign values to variables
          if(!data.query.pages[i].thumbnail) {
            thumbnail = 'https://www.google.rs/logos/doodles/2017/carmen-mirandas-108th-birthday-6367640367923200-hp.jpg';
          }else{
          thumbnail = data.query.pages[i].thumbnail.source;
          };
          if(!data.query.pages[i].terms){
            description = 'No description avaliable for this article';
          }else{
            description = data.query.pages[i].terms.description;
          };
          extract = data.query.pages[i].extract;
          fullurl = data.query.pages[i].fullurl;
          
           //constructor of wiki articles
    var Article = function(title, thumbnail, description, extract, fullurl) {
    this.title = title;
    this.thumbnail = thumbnail;
    this.description = description;
    this.extract = extract;
    this.fullurl = fullurl;
  }
    console.log(fullurl);
          article = new Article(title, thumbnail, description,extract, fullurl); //make object with variables declared
          console.log(article); 
          function appendArticles(){ //make divs and populate them with with content of object
          
          $('.wiki-articles').append('<div class=\'title\'>'+article['title']+'</div>');
          $('.wiki-articles').append('<div class=\'thumbnail\'><img src=\''+article['thumbnail']+'\'</div>');
          $('.wiki-articles').append('<div class=\'extract\'>'+article['extract']+'</div>');
          $('.wiki-articles').append('<div class=\'description\'><span>Description </span>'+article['description']+'</div>');
          $('.wiki-articles').append('<div class=\'fullurl\'> If you want to read whole article <a href=\''+article['fullurl']+'\'> click here</a></div>');
          }
appendArticles();
        }

    
      }
    })
    console.log("success");

  }
  //take input and assign it to query variable which gets asigned to api call
  $('.material-icons').on('click', function() {
    query = document.getElementById('text').value;
    console.log(query);
    wikipedia();
  });
  $.fn.pressEnter = function(fn) {
  return this.each(function() {
    $(this).off('enterPress');
    $(this).on('enterPress', fn);
    $(this).keypress(function(e) {
      if (e.keyCode == 13) {
        $(this).trigger("enterPress");
      }
    });
  });
};
  $('#text').pressEnter(function () {
   query = document.getElementById('text').value;
    wikipedia();
});
console.log(article);

});