function initializeLiveArticle() {
  initializeLiveArticle.called = true;
  var el = document.getElementById("live-article-indicator");
  var articleEl = document.getElementById("article-show-container");
  if (el && articleEl && articleEl.dataset.live == "true") {
    el.innerHTML = "";
  }
  window.fetch("/live_articles")
  .then(function(response){
    response.json().then(function(article){
      checkForOnPage(article);
      if(localStorageTest() === true){
        if (localStorage.getItem("exited_live_article_alert") == article.path) {
          return;
        }
      }
      if( article.path && window.location.href.indexOf(article.path) == -1 && window.location.href.indexOf("/live") == -1) {
        el.innerHTML = liveIndicator(article);
        document.getElementById("live-exit-button").onclick = function(event){
          event.preventDefault();
          el.innerHTML = "";
          event.target.innerHTML = "";
          if(localStorageTest() === true){
            localStorage.setItem("exited_live_article_alert", article.path);
          }
        }
        el.onclick = function(){
          setTimeout(function(){
            if (document.getElementById("live-article-indicator-inner")){
              fadeOutElement(document.getElementById("live-article-indicator-inner"));
              fadeOutElement(document.getElementById("live-exit-button"));
            }
          },20)
        }
      }
    });
  })
}

function liveIndicator(article) {
  var tagsHTML = article.tag_list.map(function(t){return "<span class='live-tag'>#"+t+"</span>"}).join(" ")
  return '<a href="#" class="live-exit-button" id="live-exit-button"><%=image_tag("/assets/cancel.svg")%></a>\
          <a href="'+article.path+'" class="live-link" id="live-link"><div class="live-article-indicator-inner" id="live-article-indicator-inner">\
            <div class="live-pre-header"><span class="pulsating-circle"></span>Live Now</div>\
            <div class="live-article-title">'+article.title+'</div>\
            <div class="live-user"><img src="'+article.user.profile_pic+'" />'+article.user.name+'</div>\
            <div class="live-tags">'+tagsHTML+'</div>\
          </div></a>'
}

function fadeOutElement(fadeTarget) {
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity < 0.1) {
            clearInterval(fadeEffect);
        } else {
            fadeTarget.style.opacity -= 0.1;
        }
    },25);
}

function checkForOnPage(article){
  if (InstantClick == undefined){
    return
  }
  InstantClick.on('change', function() {
    if( article.path && window.location.href.indexOf(article.path) > -1) {
      if (document.getElementById("live-article-indicator-inner")){
        fadeOutElement(document.getElementById("live-article-indicator-inner"));
        fadeOutElement(document.getElementById("live-exit-button"));
      }
    }
  });
}