let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle');

console.log("source buttons : ", btnList)

let displayWindow = document.querySelector('#posterWindow');

let displayContainer = document.querySelector('#posterContainer');

let closeBtn = document.querySelector('#posterCloseBtn');

closeBtn.addEventListener('click', () => {
  displayWindow.style.visibility  = 'collapse';
  displayContainer.replaceChildren();
})

async function getPoster(src){
  let res = await fetch(src);
  if (res.ok){
    let html_text = await res.text()
    let html = new DOMParser().parseFromString(html_text, "text/html");
      return html
  } else{
    console.log('error 333');
      return
  }
}

let eventList = [];

if( btnList.length > 0 ){
  for (let btn of btnList ){
    let link = btn.children[0];
    link.style.pointerEvents = 'none';

    console.log(link.href);
    
    let posterPage = await getPoster(link.href);

    //console.log('selected poster: ', posterPage)

    let styleList = Array.from(posterPage.querySelectorAll('head > style'));
    //console.log(styleList)

    styleList.splice(0,1);
    //console.log(styleList)

    eventList.push(
      {
        content: posterPage,
        stylesheet: styleList,
        sourceBtn: btn
      }
    );
  }
}

console.log(eventList);

if (eventList.length > 0){
  for (let obj of eventList){
    let btn = obj.sourceBtn;
    let content = obj.content;
    for (let style of obj.stylesheet){
      document.head.append(style);
    }
    obj.sourceBtn.addEventListener( 'click', () => {
      displayWindow.style.visibility = 'visible';
      displayContainer.replaceChildren(obj.content.querySelector('main'));
    })
  }
}