var myArticles = [];
var currentOffset = 0;

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    console.log("contentitems: "+myObj.contentlist.contentitems.length);
    myArticles = myObj.contentlist.contentitems;
    console.log(myArticles);
    document.getElementsByClassName("feed-articles")[0].innerHTML = "";
    document.getElementsByClassName("feed-articles")[0].appendChild(buildPrimaryCard(myArticles[0]));
    currentOffset = 1;
    if (myArticles.length > 1) {
      document.getElementsByClassName("feed-articles")[0].appendChild(buildTopCard(myArticles[1]));
      currentOffset += 1;
    }
    if (myArticles.length > 2) {
      document.getElementsByClassName("feed-articles")[0].appendChild(buildTopCard(myArticles[2]));
      currentOffset += 1;
    }
    if (myArticles.length > 3) {displayArticles(currentOffset);}
    document.getElementsByClassName('advanceButtonHolder')[0].className = "advanceButtonHolder";
    fadeImages();
  }
};

function displayArticles(offset) {
  if (myArticles.length >= offset+9) {
    for (i=offset;i<(offset+9);i++) {
      console.log(myArticles[i].title);
      document.getElementsByClassName("feed-articles")[0].appendChild(buildArticleCard(myArticles[i]));
    }
    currentOffset += 9;
  } else if (currentOffset < myArticles.length) {
    for (i=offset;i<(myArticles.length);i++) {
      console.log(myArticles[i].title);
      document.getElementsByClassName("feed-articles")[0].appendChild(buildArticleCard(myArticles[i]));
    }
    currentOffset = myArticles.length
    console.log("reached the end...");
    document.getElementsByClassName('advanceButtonHolder')[0].className = "advanceButtonHolder hidden";
  }
}

function fadeImages() {
  let currentImages = document.getElementsByClassName('imageMediaItem');
  setTimeout(function() {
    for (i=0;i<=(currentImages.length - 1);i++) {
      console.log(currentImages[i]);
      currentImages[i].className = "imageMediaItem shown";
    }        
  }, 170);
}

function buildPrimaryCard(cardInfo) {
  var newCard = document.createElement('div');
  newCard.className = "primaryTopStory feedLink";
  newCard.setAttribute('data-url',cardInfo.url);

  var figure = document.createElement('figure');
  figure.className = "imageMedia";
  var spacer = document.createElement('div');
  spacer.className = "imageSpacer";
  figure.appendChild(spacer);

  var figureImage = document.createElement('img');
  figureImage.className = "imageMediaItem";
  if (cardInfo.headlineimage.derivatives["16x9_940"]) {
    figureImage.src = cardInfo.headlineimage.derivatives["16x9_940"].fileurl;
  } else if (cardInfo.headlineimage.derivatives["16x9_780"]) {
    figureImage.src = cardInfo.headlineimage.derivatives["16x9_780"].fileurl;
  } else if (cardInfo.headlineimage.derivatives["16x9_620"]) {
    figureImage.src = cardInfo.headlineimage.derivatives["16x9_620"].fileurl;
  } else {
    figureImage.src = cardInfo.headlineimage.originalimage.fileurl;
  }
  figureImage.alt = cardInfo.headlineimage.title;
  figure.appendChild(figureImage);

  var content = document.createElement('div');
  content.className = "contentArea";

  var itemLabel = document.createElement('span');
  itemLabel.className = "itemLabel";
  itemLabel.innerHTML = cardInfo.flag;
  content.appendChild(itemLabel);

  var title = document.createElement('h3');
  title.innerHTML = cardInfo.headline;
  content.appendChild(title);

  var body = document.createElement('p');
  body.innerHTML = cardInfo.description;
  content.appendChild(body);

  var departmentItem = document.createElement('span');
  departmentItem.className = "departmentItem";
  var deparmentsCount = cardInfo.departments.length;
  if (deparmentsCount > 0) {
    departmentItem.innerHTML = cardInfo.departments[cardInfo.departments.length - 1].label;
    content.appendChild(departmentItem);
  }

  newCard.appendChild(figure);
  newCard.appendChild(content);

  newCard.onclick = function() { window.location.href = cardInfo.url; };
  return newCard
}


function buildTopCard(cardInfo) {
  var newCard = document.createElement('div');
  newCard.className = "topStory feedLink";
  newCard.setAttribute('data-url',cardInfo.url);

  var figure = document.createElement('figure');
  figure.className = "imageMedia";
  var spacer = document.createElement('div');
  spacer.className = "imageSpacer";
  figure.appendChild(spacer);

  var figureImage = document.createElement('img');
  figureImage.className = "imageMediaItem";
  if (cardInfo.headlineimage.derivatives["16x9_780"]) {
    figureImage.src = cardInfo.headlineimage.derivatives["16x9_780"].fileurl;
  } else if (cardInfo.headlineimage.derivatives["16x9_620"]) {
    figureImage.src = cardInfo.headlineimage.derivatives["16x9_620"].fileurl;
  } else {
    figureImage.src = cardInfo.headlineimage.originalimage.fileurl;
  }
  figure.appendChild(figureImage);

  var content = document.createElement('div');
  content.className = "contentArea";
  var title = document.createElement('h3');
  title.innerHTML = cardInfo.headline;
  content.appendChild(title);

  var itemLabel = document.createElement('span');
  itemLabel.className = "itemLabel";
  itemLabel.innerHTML = cardInfo.flag;
  content.appendChild(itemLabel);

  var departmentItem = document.createElement('span');
  departmentItem.className = "departmentItem";
  var deparmentsCount = cardInfo.departments.length;
  if (deparmentsCount > 0) {
    departmentItem.innerHTML = cardInfo.departments[cardInfo.departments.length - 1].label;
    content.appendChild(departmentItem);
  }


  newCard.appendChild(figure);
  newCard.appendChild(content);

  newCard.onclick = function() { window.location.href = cardInfo.url; };
  return newCard    
}


function buildArticleCard(cardInfo) {
  var newCard = document.createElement('div');
  newCard.className = "articleCard feedLink";
  newCard.setAttribute('data-url',cardInfo.url);

  var figure = document.createElement('figure');
  figure.className = "imageMedia";
  var spacer = document.createElement('div');
  spacer.className = "imageSpacer";
  figure.appendChild(spacer);

  var figureImage = document.createElement('img');
  figureImage.className = "imageMediaItem";
  if (cardInfo.headlineimage.derivatives["16x9_620"]) {
    figureImage.src = cardInfo.headlineimage.derivatives["16x9_620"].fileurl;
  } else if (cardInfo.headlineimage.derivatives["16x9_460"]) {
    figureImage.src = cardInfo.headlineimage.derivatives["16x9_460"].fileurl;
  } else if (cardInfo.headlineimage.derivatives["16x9_300"]) {
    figureImage.src = cardInfo.headlineimage.derivatives["16x9_300"].fileurl;
  } else {
    figureImage.src = cardInfo.headlineimage.originalimage.fileurl;
  }
  figure.appendChild(figureImage);

  var content = document.createElement('div');
  content.className = "contentArea";

  var itemLabel = document.createElement('span');
  itemLabel.className = "itemLabel";
  itemLabel.innerHTML = cardInfo.flag;
  content.appendChild(itemLabel);

  var title = document.createElement('h3');
  title.innerHTML = cardInfo.headline;
  content.appendChild(title);

  var departmentItem = document.createElement('span');
  departmentItem.className = "departmentItem";
  var deparmentsCount = cardInfo.departments.length;
  if (deparmentsCount > 0) {
    departmentItem.innerHTML = cardInfo.departments[cardInfo.departments.length - 1].label;
    content.appendChild(departmentItem);
  }

  newCard.appendChild(figure);
  newCard.appendChild(content);
  
  newCard.onclick = function() { window.location.href = cardInfo.url; };
  return newCard
}

function cardClicked(sender) {
  console.log("card clicked: "+sender.getAttribute('data-url'));
}

function loadMoreArticles() {
  console.log("load more articles");
  console.log(currentOffset);
  if (currentOffset < myArticles.length) {
    console.log("load more...");
    displayArticles(currentOffset);
    fadeImages();
  }
}

if (jsonURL && (jsonURL != "")) {
  console.log("loading feed: "+jsonURL)
  xmlhttp.open("GET", jsonURL, true);
  xmlhttp.send();
}