<header class="container-fluid">
  <div class="container text-center" id="searchBox">
    <h1>wiki viewer</h1>
    <div class="form col-xs-12">   
        <input class="col-xs-9" id="searchBar" type="text" placeholder="search"/>
        <span class="glyphicon glyphicon-search col-xs-1" data-toggle="tooltip" title="Search"></span>
        <span class="glyphicon bar col-xs-1" id="submit"><b>|</b></span>
        <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><span class="glyphicon glyphicon-random col-xs-1"  data-toggle="tooltip" title="Random topic"></span></a>
      </div>
    </div>
  </div>  
</header>
<div id="mainBody" class="container text-center">
  <ul id="results">
  </ul>
</div>
<footer class="text-center">
  
</footer>

body{
  background: #eee;
  letter-spacing: 2px;
  min-height: 101vh;
}

a:hover, a:active{
  text-decoration: none;
}

input[type="text"], select{ 
    outline: none;
}

.col-xs-1{
  padding:0;
}

h1{
  font-family: 'Arvo', sans-serif;
  color:#E35865;
}

header.container-fluid{
  margin: 0;
  background-color: #39404A;
  box-shadow: 0 0px 3px 3px rgba(0,0,0,.4);
  height: 100vh;
  min-height: 150px;
}

.container{
  max-width: 720px;
  margin: auto;
  padding: 0 50px;
}

ul{
  padding: 0;
}

li{
  letter-spacing: 0;
  padding: 30px;
  list-style: none;
  min-height: 200px;
  background: #fff;
  margin: 50px auto;
  text-align: left;
  -webkit-transition: box-shadow .2s ease-out .2s;
  -moz-transition: box-shadow .2s ease-out .2s;
  -o-transition: box-shadow .2s ease-out .2s;
  transition: box-shadow .2s ease-out .2s;
  word-spacing: 2px;
}

li > h3{
  margin-top:0;
  color: #E35865;
  line-height: 2;
}

li > p{
  color: #666;
  line-height: 2;
}

input{
  padding:0;
  border-radius: 0;
  border: none;
  font-size: 20px;
  color: #bbb;
  background:none;
  letter-spacing: 1px;
  word-spacing: 10px;
  font-family: 'Arvo', sans-serif;
  padding: 0;
  line-height: 25px;
}

#searchBox{
  padding-top: 40vh;
}

button{
  background: none;
  border: none;
}

.form{
  padding: 10px 0;
  padding-right: 15px;
  border: 3px solid #E35865;
  
}

.form.col-xs-12{
  padding-left: 0;
}

.glyphicon{
  color: #E35865;
  font-size: 20px;
  line-height: 25px;
}

.glyphicon-search{
  cursor: pointer;

}

.glyphicon-search:hover{

}

.bar{
  vertical-align: super;
  font-weight: 700;
  font-size: 22px;
  font-family: 'Montserrat', sans-serif;
}


li:hover{
  box-shadow: 0 0 15px 15px rgba(0,0,0,.1);
}

::-webkit-input-placeholder {
  color: #bbb;
  opacity: 1;
}

:-moz-placeholder { /* Firefox 18- */
  color: #bbb;
  opacity: 1;
}

::-moz-placeholder {  /* Firefox 19+ */
  color: #bbb;
  opacity: 1;
}

:-ms-input-placeholder {  
  color: #bbb;
  opacity: 1;
}

#mainBody{
  font-family: 'Montserrat', sans-serif;
}

/*********media query starts ***********/

@media screen and (max-width: 420px){
  #searchBar,.glyphicon{
    font-size: 16px;
  } 
  
  h1{
    font-size: 28px;
  } 
}

$(document).ready(function(){
  var keyword = "";
  var resultArea = $("#results");
  var searchBar = $("#searchBar");
  var searchButton = $(".glyphicon-search");
  var searchUrl = "https://en.wikipedia.org/w/api.php";
  var displayResults = function(){
    $.ajax({
      url: searchUrl,
      dataType: 'jsonp',
      data: {
        action: 'query',
        format: 'json',
        generator: 'search',
          gsrsearch: keyword,
          gsrnamespace: 0,
          gsrlimit: 10,
        prop:'extracts|pageimages',
          exchars: 200,
          exlimit: 'max',
          explaintext: true,
          exintro: true,
          piprop: 'thumbnail',
          pilimit: 'max',
          pithumbsize: 200
      },
      success: function(json){
        var results = json.query.pages;
        $.map(results, function(result){
          var link = "http://en.wikipedia.org/?curid="+result.pageid;
          var elem1 = $('<a>');
          elem1.attr("href",link);
          elem1.attr("target","_blank");
          var elem2 = $('<li>');
          elem2.append($('<h3>').text(result.title));
          //if(result.thumbnail) elem.append($('<img>').attr('width',150).attr('src',result.thumbnail.source));
          elem2.append($('<p>').text(result.extract));
          elem1.append(elem2);
          resultArea.append(elem1);
        });
        $("footer").append("<p>----x--------x----</p>");
      }
    });   
  };
 /* 
  searchBar.autocomplete({
        source: function (request, response) {
            $.ajax({
                url: searchUrl,
                dataType: 'jsonp',
                data: {
                    'action': "opensearch",
                    'format': "json",
                    'search': request.term
                },
                success: function (data) {
                    response(data[1]);
                }
            });
        }
    });
  */
  searchButton.click(function(){
    keyword = searchBar.val();
    resultArea.empty();
    $("footer").empty();
    displayResults(); 
    $("#searchBox").animate({'padding-top':"0"}, 600);
    $(".container-fluid").animate({height:"30vh"}, 600);
  });
  
  searchBar.keypress(function(e){
      if(e.keyCode==13)
      $(searchButton).click();
  });

});