/**
 * entry_HOMEPAGE.js
 *
 * Module for loading styles and scripts related to the home page only
 *
 */

var $ = require( "jquery" ); // require jQuery

require("./homepage.scss");

// Wait for the DOM to be ready before loading in JSON
document.addEventListener( "DOMContentLoaded", function( event ) {

  /*
   * ==================================================================
   * FIND THE FIRST TEN POSTS IN THE WP REST API AND PLACE THEM ON THE
   * HOME PAGE ON A CERTAIN WAY
   * ==================================================================
   */

  /*
   * Grab the first 10 single posts from the WordPress API & sort them 
   * by date.
   */
  var getPostsAPI = "/wp-json/posts?filter[orderby]=date&filter[posts_per_page]=10";

  /*
   * Load in post content with $.getJSON()
   * Refer to the content as "posts" inside the $.getJSON call
   */
  $.getJSON( getPostsAPI ).done( function( posts ) {
    
    // var reference to <section id="all-articles" /> on the home page
    var articleSection = document.getElementById( "all-articles" ),
        
        // Create document fragment to batch-load content onto the page
        sectionDocFragment = document.createDocumentFragment();

    for( var key in posts ) {

      // jQuery-style single var pattern
      var postImage, postLink, postTitle, postExcerpt,
          articlePost = document.createElement( "article" ),
          articleHeader = document.createElement( "h2" ),
          articleExcerpt = document.createElement( "p" ),
          articleLink = document.createElement( "a" ),
          articleImage = document.createElement( "img" );
          imageDiv = document.createElement( "div" );

      // Each <article> tag gets the "homepage-post-snippet" class
      articlePost.setAttribute("class", "homepage-post-snippet");

      /*
       * SET UP SINGLE BLOG POST IMAGES!!!!
       * The first 10 blog posts MUST have a Featured Image or the site
       * will crash.
       */
      postImage = posts[key].featured_image["source"];

      // Add styles and s "src" attribute to the image 
      $( articleImage ).attr({
        "src": postImage,
        "class": "post-pic post-pic-border"
      });

      // Load post image in a <div>
      imageDiv.appendChild( articleImage ); 

      // Load the <div> with an image in the <article>
      articlePost.appendChild( imageDiv ); 



      // SET UP SINGLE BLOG LINK & HEADER!!!!

      // Get post title link
      postLink = posts[key].link;

      // Get post title copy
      postTitle = posts[key].title;

      // Set the article link's "href" to be the post link
      $(articleLink).attr({
        "href": postLink,
        class: "post-link"
      }); 

      // Load post title copy in the <a> tag
      articleLink.innerHTML = postTitle;

      // Load link into the post header
      articleHeader.appendChild( articleLink ); 
      
      // Load post header in the <article>
      articlePost.appendChild( articleHeader ); 
      


      // SET UP SINGLE BLOG POST EXCERPT!!!!
      
      // Get post excerpt copy
      postExcerpt = posts[key].excerpt;

      // Load post excerpt copy in the <p> tag
      articleExcerpt.innerHTML = postExcerpt;

      // Load post title copy in the <article>
      articlePost.appendChild( articleExcerpt );

      // Load <article> with the title & excerpt into the doc fragment
      sectionDocFragment.appendChild( articlePost );

      var postCategory = posts[key].terms["category"];

      for (var key in postCategory) {
        console.log(postCategory[key].slug);
      }

    } // end for...in loop

    // Exit loop, load the doc fragment into the "all-articles" element
    articleSection.appendChild( sectionDocFragment );

  }); // end $.getJSON()

}); // end addEventListener
@@ -737,17 +737,17 @@
 _page%5D=1
-0
+1
 %22;%0A%0A  /*
@@ -1670,24 +1670,63 @@
 ( %22div%22 );%0A%0A
+      if( posts%5Bkey%5D == posts%5B0%5D ) %7B%0A  
       // Eac
@@ -1782,24 +1782,26 @@
 class%0A      
+  
 articlePost.
@@ -1813,16 +1813,17 @@
 tribute(
+ 
 %22class%22,
@@ -1824,16 +1824,22 @@
 lass%22, %22
+first-
 homepage
@@ -1852,19 +1852,192 @@
 snippet%22
+ 
 );%0A
+      %7D else %7B%0A        // Each %3Carticle%3E tag gets the %22homepage-post-snippet%22 class%0A        articlePost.setAttribute( %22class%22, %22homepage-post-snippet%22 );        %0A      %7D%0A%0A%0A
 %0A      /
@@ -3204,16 +3204,80 @@
 %0A      %0A
+      articleHeader.setAttribute(%22class%22, %22post-link-homepage%22);
 %0A%0A      
@@ -3711,24 +3711,27 @@
 st );%0A%0A     
+ //
  var postCat
@@ -3774,16 +3774,19 @@
 ;%0A%0A     
+ //
  for (va
@@ -3811,24 +3811,27 @@
 ory) %7B%0A     
+ //
    console.l
@@ -3859,24 +3859,27 @@
 slug);%0A     
+ //
  %7D%0A%0A    %7D //

update "webpack/entry_HOMEPAGE.js" (see message) -update getPostsAPI variable -build a conditional check for the first post in the JSON object -comment out category check, for now