async function getdata(){
    let response = await fetch('data.json');
    console.log(response);
    let data = await response.json();
     console.log("data:", data);


   var post1 = document.getElementById("post1");
    post1.querySelector(".like-count").innerHTML = data["post1"];


   var post2 = document.getElementById("post2");
    post2.querySelector(".like-count").innerHTML = data["post2"];


   var post3 = document.getElementById("post3");
    post3.querySelector(".like-count").innerHTML = data["post3"];


   var post4 = document.getElementById("post4");
    post4.querySelector(".like-count").innerHTML = data["post4"];


   var post5 = document.getElementById("post5");
    post5.querySelector(".like-count").innerHTML = data["post5"];


   var post6 = document.getElementById("post6");
    post6.querySelector(".like-count").innerHTML = data["post6"];
}

getdata();

//write

async function writeData(post_number){
    var url = './write.php?post='+ post_number;
    let response = await fetch(url);
    console.log(response);
    console.log(response.text());
    getdata();
}

document.addEventListener("DOMContentLoaded", function() {
    var form = document.getElementById("user-form");
    var orb = document.getElementById("orb");
    var submitButton = document.getElementById("submitButton"); 
    var messageDiv = document.getElementById("message-div");

    submitButton.addEventListener("click", function(event) { 
        event.preventDefault(); 
        orb.style.transform = "scale(6,6)";
        orb.style.backgroundColor = "#e26d3f";
    });

    orb.addEventListener("transitionend", function() {
        messageDiv.style.display = "block";
    });
});

async function writePost(){
    var post = document.getElementById('username2').value;
    var name = document.getElementById('user-message2').value;
    console.log(post,name);
    var url = './writepost.php?post='+ post + '&name=' + name;
    let response = await fetch(url);
    console.log(response);
    console.log(response.text());
}

function openLetter() {
    $('#letterContents').html(` <p id = "letterContents">
    Hi. I made you this website. 
    <br><br>
  This is the first act of this play, Solar Sibling. It reimagines user comments from TikTok videos about sibling relationships. To do this, I have taken the feelings behind the comments, found where they met my own, and used our shared words to write poems. Solar Sibling celebrates the vulnerabilities nurtured in online communities and invites you to share anonymously on the complexities of sibling relationships. Once you have whispered your sibling feelings to me, they will stay with me and I will never use nor share them.
    <br><br>
    ada
    <br><br>
    p.s.<br>
    If you see yourself, what you have told me or posted online reflected too closely for comfort do not hesitate to reach out to me at 0backplaces@gmail.com`)
    $('.letterBox').toggle()
  }

  function closeLetter() {
	$('.letterBox').hide()
}

document.addEventListener('DOMContentLoaded', (event) => {
    const about = document.getElementById('about');

    about.addEventListener('mouseover', (event) => {
        event.target.src = '../photos/open-crow.png';

    });

    about.addEventListener('mouseout', (event) => {
        event.target.src = '../photos/closed-crow.png';
    });

    const home = document.getElementById('home');

    home.addEventListener('mouseover', (event) => {
        event.target.src = '../photos/home-open.png';
    });

    home.addEventListener('mouseout', (event) => {
        event.target.src = '../photos/home-closed.png';
    });
});


//audio
document.addEventListener("DOMContentLoaded", function() {
    const audioElement = document.getElementById('background-audio');
    const muteButton = document.getElementById('mute-btn');
    
    // Set initial mute state from localStorage
    let isMuted = localStorage.getItem('mute') === 'true';
    audioElement.muted = isMuted;
    muteButton.textContent = isMuted ? "SOUND ON" : "MUTE";

    // Start audio playback on user interaction
    const startAudio = () => {
        audioElement.play();
        document.removeEventListener('click', startAudio);
    };

    document.addEventListener('click', startAudio);

    muteButton.addEventListener('click', function() {
        isMuted = !isMuted;
        audioElement.muted = isMuted;
        localStorage.setItem('mute', isMuted);
        muteButton.textContent = isMuted ? "SOUND ON" : "MUTE";
    });
});