<div class="container">
  <!-- search bar -->
  <div class="text-center">
    <h1 style="margin:3%;"><i><b>Wiki Search</b></i></h1>
<input type="text" id="search-bar" size="2" style="width: 60%;"/>
    <h6>Press enter to submit</h6>
    <div>-</div>
    <div class="row">
      <div class="col-4"></div>
    <div class="col-4 random-button text- center" ><span onclick="randomWiki()"><i class="fa fa-random" aria-hidden="true"></i></span></div>
    <div class="col-4"></div>
    </div>
    <div><h6>Click for a random page<h6>
      </div>
      <div>-</div>
  </div>
    <!-- search results -->
  <div class="search-container"> </div>
    <!-- credits -->
  <div class="credits text-center"><a href="https://www.freecodecamp.com/astreet1211" target="_blank">Created by Adam Street</a></div>
</div>

body {
  background-color: black;
  background-image: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/diagmonds.png");
  color: white;
  font: Ubuntu;
  font-size: 25px;
}
input:focus {outline:0;}

/* search animation */
.search-box-search {
  animation: pop-down 1s;
}

#search-bar{
  border-radius:30px;
  border-bottom:thick solid grey;
  margin-bottom:1%;
  padding-left: 20px;
  box-sizing: border-box;
}

/* random button */
.random-button{
  background-color: rgba(255, 255, 255, 0.1);
  border: thick  solid rgba(0, 0, 0, 0.1);
  font-size:250%;
  border-radius:50px;
  margin-bottom:1%;
}
/* random animation */
.random-button:hover{
  animation: bounce 0.3s;
}

/* search result */
.result-box {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 2%;
  margin: 1%;
  border: thick solid rgba(0, 0, 0, 0.1);
  border-radius:30px;
}
.result-title {
  color: white;
  border-bottom: thin solid white;
}
/* result animation */
.result-box:hover {
  background-color: rgba(255, 255, 255, 0.3);
  animation: bounce 0.3s;
}
.result-box-intro {
  animation: scale-in 1s;
}

.fa-meh-o{
  animation:spin 3s linear infinite;
}

.fa-random{
  animation:random-spin 3s infinite;
}

/* animatons */
@keyframes bounce {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.95, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes scale-in {
  0% {
    transform: scale(0, 0);
    opacity:0;
  }
  100% {
    transform: scale(1, 1);
    opacity:1;
  }
}
@keyframes pop-down {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.8, 0.8);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
    
  }
  100% {
    transform: rotate(359deg);
  }
}

@keyframes random-spin {
  0% {
    transform: rotate(0deg);
    
  }
  50% {
    transform: rotate(0deg);
    
  }
  100% {
    transform: rotate(359deg);
  }
}

//------------------------------------------------------------------
// Programmer: Adam Street 
// Contact: streetdev.info@gmail.com
// Date: 6/22/17
//
// Description: This code uses the wikipedia api to search wikipedia for the inputed text .
//It will then create div elements to display retrieved info. 
//You can click on the div to load the wiki page in a new window.
//------------------------------------------------------------------

$(document).ready(function() {

  //used to store wiki titles for loading url
var titleList = [];
  
// selects seatch bar on load ****DISABLE THIS BEFORE WORKING ON SCRIPT****
var input = $("#search-bar");
input.focus();
input.select();

//search wiki for input on enter press
$("#search-bar").keyup(function(event) {
  if (event.keyCode == 13) {
    searchWiki();
    // Removes input text
    input.val("");
    //enable intro animation
    $("#search-bar").toggleClass("search-box-search");
    setTimeout(disableIntroAnimation, 1000);
    function disableIntroAnimation() {
      $("#search-bar").toggleClass("search-box-search");
    }
  }
});
});
function searchWiki() {
  titleList= [];
  var searchText = $("#search-bar").val();
  
  //if input bar is blank get random page
  if(searchText.length === 0){
    randomWiki();
  }
  
  var api =
    "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&callback=?&srsearch=";
  var url = api + searchText;
  $.getJSON(url, function(json) {
    var query = json["query"];
    var searchResults = query["search"];
    var resultAmmount = searchResults.length;
    $(".search-container").empty();
    if (resultAmmount > 0) {
      for (var i = 0; i < resultAmmount; i++) {
        var unit = searchResults[i];
        var title = unit["title"];
        titleList.push(title);
        var snippet = unit["snippet"];
        var titleHTML = '<p class="result-title">' + title + "</p>";
        var contentHTML = "<p>" + snippet + "</p>";
        $(".search-container").append(
          '<div class="result-box" onclick="loadWiki(' + i + ')">' +
            titleHTML +
            contentHTML +
            "</div>"
        );
      }
    } else {
      $(".search-container").append(
        
        '<div class="result-box"><div><i class="fa fa-meh-o fa-3x" aria-hidden="true"></i></div><div>No results found</div></div>'
      );
    }
    //enable intro animation
    $(".result-box").toggleClass("result-box-intro");
    //disable intro animation after finished playing
    setTimeout(disableIntroAnimation, 1000);
    function disableIntroAnimation() {
      $(".result-box").toggleClass("result-box-intro");
    }
  });
} 
function loadWiki(index) {
  window.open("https://en.wikipedia.org/wiki/ " + titleList[index]);
}
function randomWiki(){
    var url = 'https://en.wikipedia.org/wiki/Special:Random';
    window.open(url , '_blank');
}