// ============================================================
// RSS TICKER TAPE INCLUDE FILE
// To change the feed: edit RSS_FEED_URL below.
// To change number of headlines shown: edit MAX_ITEMS.
// To change scroll speed: edit SCROLL_SPEED (higher = slower).
// ============================================================

var RSS_FEED_URL = "https://aestheticamagazine.com/feed";
var MAX_ITEMS    = 8;
var SCROLL_SPEED = "40s";
var TICKER_LABEL = "Arts & Culture";

// ============================================================
// DO NOT EDIT BELOW THIS LINE
// ============================================================

var tickerCSS = [
  '<style>',
  '.rss-ticker-outer{width:100%;background:#1a1a1a;border-top:2px solid #c8a84b;border-bottom:2px solid #c8a84b;overflow:hidden;}',
  '.rss-ticker-wrap{display:flex;align-items:center;height:44px;}',
  '.rss-ticker-label{display:inline-flex;align-items:center;background:#c8a84b;color:#1a1a1a;font-family:Arial Narrow,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:0 16px;height:44px;white-space:nowrap;flex-shrink:0;}',
  '.rss-ticker-track-outer{overflow:hidden;flex:1;}',
  '.rss-ticker-track{display:flex;align-items:center;white-space:nowrap;animation:rss-ticker-scroll ' + SCROLL_SPEED + ' linear infinite;}',
  '.rss-ticker-track:hover{animation-play-state:paused;}',
  '.rss-ticker-item{display:inline-flex;align-items:center;gap:10px;padding-right:56px;}',
  '.rss-ticker-item a{color:#f0e8d0;text-decoration:none;font-family:Arial Narrow,Arial,sans-serif;font-size:14px;letter-spacing:.03em;transition:color .2s ease;}',
  '.rss-ticker-item a:hover{color:#c8a84b;text-decoration:underline;}',
  '.rss-ticker-sep{display:inline-block;width:5px;height:5px;background:#c8a84b;border-radius:50%;flex-shrink:0;margin:0 4px;}',
  '.rss-ticker-loading{color:#888;font-family:Arial,sans-serif;font-size:13px;padding:0 20px;}',
  '@keyframes rss-ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}',
  '</style>'
].join('');

var tickerHTML = [
  '<div class="rss-ticker-outer">',
    '<div class="rss-ticker-wrap">',
      '<div class="rss-ticker-label">' + TICKER_LABEL + '<\/div>',
      '<div class="rss-ticker-track-outer">',
        '<div class="rss-ticker-track" id="rss-ticker-track">',
          '<span class="rss-ticker-loading">Loading latest stories&hellip;<\/span>',
        '<\/div>',
      '<\/div>',
    '<\/div>',
  '<\/div>'
].join('');

document.write(tickerCSS + tickerHTML);

(function () {
  function loadFeed() {
var apiURL = "https://api.rss2json.com/v1/api.json?rss_url=" +
             encodeURIComponent(RSS_FEED_URL) +   "&api_key=doeq4osu2ggvyywsve9jjwjte22lhgk9871figvc&count=" + MAX_ITEMS;

    var xhr = new XMLHttpRequest();
    xhr.open("GET", apiURL, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4) return;
      var track = document.getElementById("rss-ticker-track");
      if (!track) return;

      if (xhr.status === 200) {
        try {
          var data = JSON.parse(xhr.responseText);
          if (data.status === "ok" && data.items && data.items.length > 0) {
            var items = data.items.slice(0, MAX_ITEMS);
            var html = "";
            // Build twice for seamless loop
            for (var i = 0; i < 2; i++) {
              for (var j = 0; j < items.length; j++) {
                html += '<span class="rss-ticker-item">' +
                        '<span class="rss-ticker-sep" aria-hidden="true"><\/span>' +
                        '<a href="' + items[j].link + '" target="_blank" rel="noopener noreferrer">' +
                        items[j].title +
                        '<\/a><\/span>';
              }
            }
            track.innerHTML = html;
          } else {
            track.innerHTML = '<span class="rss-ticker-loading">No stories available.<\/span>';
          }
        } catch (e) {
          track.innerHTML = '<span class="rss-ticker-loading">Could not load feed.<\/span>';
        }
      } else {
        track.innerHTML = '<span class="rss-ticker-loading">Could not load feed.<\/span>';
      }
    };
    xhr.send();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", loadFeed);
  } else {
    loadFeed();
  }
})();

document.close();