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>
    It’s called Solar Sibiling and and it's an homage to the Tumblr practice of web weaving, where collages of media excerpts are curated around a common theme. This project reimagines that by transforming user comments from TikTok videos about sibling relationships into poems. These poems capture a collective sense of despair and comfort in shared experiences. "Solar Sibling" celebrates the vulnerabilities nurtured in online communities and invites anonymous contributions reflecting the complexities of sibling relationships.
    <br><br>
    ada
    <br><br>
    p.s.<br><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";
    });
});