#container
  header#header.grid.cols-6
    section#proj-heading
      h1 Wikipedia Viewer Application
    details#proj-details
      summary Project Info
      section#details-body.grid.cols-2.rows-2
        .details-column
        .details-column
  main#app
    #app-con.flex-c
      section#search.flex-c
        h2
          i.fa.fa-wikipedia-w.item-icon
          | ikipedia Viewer
        #search-bar
          input#search-input(autocomplete='off' autofocus='' placeholder='Search The Wikipedia...' type='search')
          button#search-btn(type='button')
            i.fa.fa-search
        a#random(href='https://en.wikipedia.org/wiki/Special:Random' target='_blank') Random Article
      section#results-con.flex-c
  footer#footer
    p
      | Last Updated:
      time(datetime='2017-05-03')  03/05/2017
      | &nbsp | &nbsp
      a(href='https://codepen.io/U-ways/' target='_blank')
        i.fa.fa-codepen(aria-hidden='true')
        | U-ways

/* Color Scheme
================================================================================
Main Colors:
#c5dec2 - #95a893
#3e5050 - #3a4949
#263331 - #333

Matching R&G:
#549042 - #8e0000
*//* App
==============================================================================*/
#app-con {
  margin-top: 10px;
  justify-content: flex-start;
  align-content: flex-start;
}

/* Search Section
==============================================================================*/
#search {
  width: 90vw;
  max-width: 1320px;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  margin: 25vh 0 1% 0;
} #search h2 {
  color: #c5dec2;
  margin: 0 0 2px -10px;
  font-size: 1.6em;
} #search h2 i {
  font-size: 1.4em;
  font-style: italic;
}

.ceremony {
  margin: 0 0 1% 0 !important;
  transition: margin 1.5s ease;
}

/* Search-bar
============================================*/
#search-bar {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

/* Input bar
============================================*/
#search-bar input[type=search] {
  outline: none;
  border: none;
  width: 100%;
  height: 50px;
  background-color: #c5dec2;
  color: #3b4c4c;
  font-size: 1.5em;
  padding-left: 15px;
  border-radius: 5px;
  float: left;
}

#search-bar input[type=search]:focus {
  background: rgba(190, 214, 187, 0.87);
} #search-bar input[type=search]::-webkit-input-placeholder {
  color: #405353;
} #search-bar input[type=search]:-ms-input-placeholder {
  color: #405353;
}

/* Search button
============================================*/
#search-btn {
  border-top-right-radius: 4.5px;
  border-bottom-right-radius: 4.5px;
  font-size: 1.5em;
  height: 50px;
  width: 55px;
  margin-left: -55px;
  transition: all .55s ease;
  outline: none;
  border: none;
  background: #324141;
  color: #c5dec2;
}

#search-btn:hover {
  background: #293535;
}


/* Random Link
============================================*/
#random {
  display: block;
  padding-top: 5px;
  padding-left: 3px;
  color: #c5dec2;
}

#random:hover,
#random:focus {
  color: #c5dec2;
  text-decoration: none;
  text-shadow: 0px 1px 8px #969696;
}


/* Results Container
==============================================================================*/
#results-con {
}

/* Random Heading
==============================================================================*/
#results-heading {
  width: 90vw;
  max-width: 1320px;
  margin-bottom: .5%;
  color: #bed6bb;
  font-weight: 100;
  animation: fadeIn 2s;
  animation-timing-function: ease-out;
}

/* Result-list
==============================================================================*/
#result-list {
  width: 85vw;
  max-width: 1250px;
}

/* Result List Item
============================================*/
.result-list-item {
  width: inherit;
  max-width: inherit;
  height: calc(2vh + 30px);
  margin-top: .5%;
  margin-bottom: .5%;
  text-align: left;
  border-radius: 3px;
  border: 1px solid transparent;
  animation: fadeIn 2s;
  animation-timing-function: ease-out;
  transition:background 1s ease;
}

.result-list-item:hover {
  border: 1px solid #a8bda5;
}

.result-list-item:hover,
.result-list-item:focus {
  background: #263331;
  text-shadow: 0px 1px 8px #969696;
  transition: all 1s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to   {
    opacity: 1;
  }
}


/* Items Components
============================================*/
.item-link {
  height: inherit;
  color: #bed6bb;
  text-decoration: none;
  justify-content: flex-start;
  padding: 0 25px 0 15px;
  outline-color: #bed6bb;
}

.title-link:hover,
.item-link:focus {
  text-decoration: none;
  background: #263331;
  text-shadow: 0px 1px 8px #969696;
  transition: all 1.2s ease;
}

.item-icon {
  font-size: 1em;
  font-weight: bold;
}

.item-title {
  margin: 0 0 0 15px;
  font-weight: bold;
  font-size: 1em;
  width: auto;
  white-space: nowrap;
}

.item-description {
  color: #9eb9a6;
  font-size: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: auto;
}

/* Network Error
==============================================================================*/
#NetworkErr {
  position: absolute;
  text-align: center;
  top: 45%; bottom: 0;
  text-transform: capitalize;
  color: #273432;
  animation: fadeIn 1s;
}

/* jshint esversion:6 */
const searchSection = document.querySelector('#search');
const searchBtn     = document.querySelector('#search-btn');
const searchInput   = document.querySelector('#search-input');
const resultsCon    = document.querySelector('#results-con');

const keypressHandler = (key) => {
  /** 13 === Enter Keycode **/
  if (key.keyCode === 13) { ceremony(); }
};

/* Add listeners for initial search animation
==============================================================================*/
searchBtn.addEventListener("click", ceremony);
searchInput.addEventListener('keypress', keypressHandler);

/* Remove animation listeners & set normal eventListeners for getting results
==============================================================================*/
function ceremony() {
  searchBtn.removeEventListener("click", ceremony);
  searchInput.removeEventListener('keypress', keypressHandler);
  searchSection.classList.add("ceremony");

  function eventListeners() {
    searchBtn.addEventListener("click", getResults);
    searchInput.addEventListener('keypress', (key) => {
      if (key.keyCode === 13) { getResults(); }}
    );
    getResults();
  }
  /** 1.8s delay to match my animation **/
  window.setTimeout(eventListeners, 1800);
}

/* Get results as JSON using XHR.
==============================================================================*/
function getResults() {
  let keyword = encodeURIComponent(searchInput.value.trim());
  let url     = `https://en.wikipedia.org/w/api.php?action=opensearch&limit=15&format=json&search=${keyword}&origin=*`;

  xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.setRequestHeader('Api-User-Agent', 'Header_doest_work_._Update_your_MediaWiki_API_doc_.'); // Include this so Wiki developers can see it. https://www.mediawiki.org/wiki/API:Main_page#Identifying_your_client
  xhr.onerror = () => getScriptJsonp(keyword);
  xhr.onload  = () => resultsHandler(JSON.parse(xhr.response));
  xhr.send(null);
}

/* Display results.
==============================================================================*/
function resultsHandler(response) {
  /** Clean up from previous queries **/
  let results = '';
  resultsCon.innerHTML = '';
  searchInput.value    = '';

  if (response[1].length !== 0) {
    resultsCon.innerHTML += `<h2 id="results-heading">Wikipedia Articles For: <i>${response[0]}</i></h2>`;
    resultsCon.innerHTML += `<ul id="result-list"></ul>`;
    let ul = document.querySelector('#result-list');

    response[1].forEach(
      (item, index) =>
        /** Push all elements inside results first. (To load all at once) **/
        results += component(item, index, response)
    );

    ul.innerHTML += results;
  } else {
    resultsCon.innerHTML =
    `<h2 id="results-heading">No Resutls Found For: ${response[0]}</h2>`; // Add animation and style
  }
}

function component(item, index, results) {
  return `
    <li class="result-list-item flex-r">
      <a class="item-link flex-r" href="${results[3][index]}" target="_blank">
        <i class="fa fa-wikipedia-w item-icon" aria-hidden="true"></i>
        <h3 class="item-title">${results[1][index]}</h3>
        <p class="item-description"><b>:</b> ${results[2][index]}</p>
      </a>
    </li>`;
}

/* JSONP script technique as a CROS error handler.
==============================================================================*/
function getScriptJsonp(keyword) {
  let script = document.createElement('script');
  let url    = `https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=${keyword}` + '&callback=wikiJsonpCb';
  /**
  * Create a window's proparty method with a simillar name to the requested function from
  * the Wiki server (wikiJsonpCb) to be used as a callback. This method cleans up the
  * JSONP mess and passes the data to cb.
  */
  window.wikiJsonpCb = response => {
    // Cleaning as we no longer need those elements.
    delete window.wikiJsonpCb;
    document.body.removeChild(script);
    resultsHandler(response); // NOTE: MB try to make resultsHandler handle this one as well...
  };
  /**
  * Set script src to the 'url' + Request a callback to 'wikiJsonpCb'. (JSONP technique)
  * When script is set to the body, the server will return a call to 'wikiJsonpCb' with the API query result as a passed argument (JSONP technique)
  * window.wikiJsonpCb will handle the rest afterwards.
  */
  script.src = url;
  script.onerror = connectionErr;
  document.body.appendChild(script);
}

/* Connection error handler.
==============================================================================*/
function connectionErr() {
  resultsCon.innerHTML = '<h2 id="NetworkErr">Unable to connect to the intrenet, Please check your network connection</h2>';
}

/* Adding project Details
==============================================================================*/
addProjDetails(0, 'Project Overview', 'This is a Wikipedia viewer application. Consider it something similar to the google search engine, it uses the Wikimedia API to search through the Wikipedia entries, then it displays a sum of the results with a brief description for each title.');
addProjDetails(0, 'Techniques/Technologies', 'This project had no complex components. AJAX was used for better client-side interactivity, and HTML and CSS was used for structure and presentation. I added some decent on search, hover, and display animation for a better UX.');

addProjDetails(1, 'Hurdles encountered', 'The Wikimedia API (the core for my search engine) had some outdated and misleading documentation. So I had a bit of trouble following the instruction provided, as they were incorrect.');
addProjDetails(1, 'Future implementations', 'I am interested into integrating caching functionality to the application. So if the user searched a keyword before, it should not request it again form the server. Instead, it should use the cached results for a faster and more efficient processing.');