/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/*==========================================================
    YOUR SITE.JS
    Desktop Window Manager
==========================================================*/

const windows = document.querySelectorAll(".window");
const navButtons = document.querySelectorAll("nav button");

let highestZ = 10;

/*==============================
Bring window to front
==============================*/

function focusWindow(win){

    highestZ++;

    win.style.zIndex = highestZ;

    windows.forEach(w=>{
        w.classList.remove("active");
    });

    win.classList.add("active");

}

/*==============================
Draggable Windows
==============================*/

/*==============================
Draggable Windows
==============================*/

windows.forEach(win => {

    const bar = win.querySelector(".titlebar");

    if (!bar) return;

    let dragging = false;

    let offsetX = 0;
    let offsetY = 0;

    bar.addEventListener("mousedown", e => {

        dragging = true;

        focusWindow(win);

        const rect = win.getBoundingClientRect();

        offsetX = e.clientX - rect.left;
        offsetY = e.clientY - rect.top;

        win.style.position = "fixed";

        document.body.style.userSelect = "none";

    });

    document.addEventListener("mousemove", e => {

        if (!dragging) return;

        win.style.left = (e.clientX - offsetX) + "px";
        win.style.top = (e.clientY - offsetY) + "px";

    });

    document.addEventListener("mouseup", () => {

        dragging = false;

        document.body.style.userSelect = "";

    });

});
/*==============================
Window Focus
==============================*/

windows.forEach(win=>{

    win.addEventListener("mousedown",()=>{

        focusWindow(win);

    });

});

/*==============================
Minimize Buttons
==============================*/

document.querySelectorAll(".minimize").forEach(button=>{

    button.addEventListener("click",()=>{

        const win = button.closest(".window");

        win.classList.toggle("minimized");

    });

});

/*==============================
Navigation Buttons
==============================*/

navButtons.forEach(button=>{

    button.addEventListener("click",()=>{

        const target = document.getElementById(button.dataset.window);

        if(!target) return;

        target.classList.remove("minimized");

        focusWindow(target);

        if(window.innerWidth>1200){

            target.style.transform="scale(1.03)";

            setTimeout(()=>{

                target.style.transform="";

            },180);

        }

    });

});

/*==============================
ESC closes active minimize
==============================*/

document.addEventListener("keydown",e=>{

    if(e.key==="Escape"){

        document.querySelector(".window.active")
        ?.classList.add("minimized");

    }

});

/*==============================
Double click titlebar restores
==============================*/

document.querySelectorAll(".titlebar").forEach(bar=>{

    bar.addEventListener("dblclick",()=>{

        bar.parentElement.classList.toggle("minimized");

    });

});

/*==============================
Random window order on load
==============================*/

windows.forEach(win=>{

    highestZ++;

    win.style.zIndex=highestZ;

});

focusWindow(document.getElementById("about"));
body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

/*==========================================================
    MUSIC PLAYER
==========================================================*/

const playlist = [

{
    title:"Dreaming in Pixels",
    artist:"Unknown Artist",
    src:"music/song1.mp3",
    cover:"images/cover.png"
},

{
    title:"Crystal Rain",
    artist:"Unknown Artist",
    src:"music/song2.mp3",
    cover:"images/cover.png"
},

{
    title:"Late Night Websurfing",
    artist:"Unknown Artist",
    src:"music/song3.mp3",
    cover:"images/cover.png"
}

];

const audio = document.getElementById("audio");
const playBtn = document.getElementById("play");
const nextBtn = document.getElementById("next");
const prevBtn = document.getElementById("prev");

const title = document.getElementById("title");
const artist = document.getElementById("artist");
const cover = document.getElementById("cover");

const progress = document.querySelector(".progress");
const bar = document.getElementById("bar");

const volume = document.getElementById("volume");

const statusSong = document.getElementById("songName");

let currentSong = 0;

let playing = false;

/*==============================
Load Song
==============================*/

function loadSong(index){

    const song = playlist[index];

    audio.src = song.src;

    title.textContent = song.title;

    artist.textContent = song.artist;

    cover.src = song.cover;

    statusSong.textContent = song.title;

}

loadSong(currentSong);

/*==============================
Play
==============================*/

function playSong(){

    audio.play();

    playing = true;

    playBtn.textContent = "⏸";

}

/*==============================
Pause
==============================*/

function pauseSong(){

    audio.pause();

    playing = false;

    playBtn.textContent = "▶";

}

/*==============================
Play Button
==============================*/

playBtn.addEventListener("click",()=>{

    if(playing){

        pauseSong();

    }else{

        playSong();

    }

});

/*==============================
Next
==============================*/

nextBtn.addEventListener("click",()=>{

    currentSong++;

    if(currentSong>=playlist.length){

        currentSong=0;

    }

    loadSong(currentSong);

    playSong();

});

/*==============================
Previous
==============================*/

prevBtn.addEventListener("click",()=>{

    currentSong--;

    if(currentSong<0){

        currentSong=playlist.length-1;

    }

    loadSong(currentSong);

    playSong();

});

/*==============================
Auto Next
==============================*/

audio.addEventListener("ended",()=>{

    currentSong++;

    if(currentSong>=playlist.length){

        currentSong=0;

    }

    loadSong(currentSong);

    playSong();

});

/*==============================
Volume
==============================*/

volume.addEventListener("input",()=>{

    audio.volume = volume.value/100;

});

audio.volume = 1;

/*==============================
Progress Bar
==============================*/

audio.addEventListener("timeupdate",()=>{

    if(!audio.duration) return;

    const percent =

        (audio.currentTime/audio.duration)*100;

    bar.style.width = percent+"%";

});

/*==============================
Seek
==============================*/

progress.addEventListener("click",(e)=>{

    const rect = progress.getBoundingClientRect();

    const x = e.clientX-rect.left;

    const percent = x/rect.width;

    audio.currentTime = percent*audio.duration;

});

/*==============================
Keyboard Controls
==============================*/

document.addEventListener("keydown",(e)=>{

    if(e.target.tagName==="INPUT") return;

    switch(e.code){

        case "Space":

            e.preventDefault();

            if(playing){

                pauseSong();

            }else{

                playSong();

            }

        break;

        case "ArrowRight":

            nextBtn.click();

        break;

        case "ArrowLeft":

            prevBtn.click();

        break;

    }

});

/*==========================================================
    DIGITAL CLOCK
==========================================================*/

const clock = document.getElementById("clock");

function updateClock(){

    const now = new Date();

    clock.innerHTML = now.toLocaleTimeString();

}

setInterval(updateClock,1000);

updateClock();
/*=========================
BOOT SCREEN
=========================*/

const boot=document.getElementById("bootScreen");

const fill=document.getElementById("loadingFill");

let percent=0;

const bootInterval=setInterval(()=>{

percent+=2;

fill.style.width=percent+"%";

if(percent>=100){

clearInterval(bootInterval);

setTimeout(()=>{

boot.style.opacity="0";

setTimeout(()=>{

boot.remove();

},900);

},300);

}

},30);

/*=========================
TASK CLOCK
=========================*/

const taskClock=document.getElementById("taskClock");

setInterval(()=>{

taskClock.innerHTML=new Date().toLocaleTimeString([],{

hour:"2-digit",

minute:"2-digit"

});

},1000);

/*=========================
DESKTOP ICONS
=========================*/

document.querySelectorAll(".icon").forEach(icon=>{

icon.addEventListener("dblclick",()=>{

const id=icon.dataset.window;

const win=document.getElementById(id);

if(!win) return;

win.classList.remove("minimized");

focusWindow(win);

});

});

/*=========================
VISITOR COUNTER
=========================*/

let visits=localStorage.getItem("visits");

if(!visits){

visits=1;

}else{

visits=parseInt(visits)+1;

}

localStorage.setItem("visits",visits);

console.log("Visitor Count:",visits);

/*=========================
THEMES
=========================*/

const themes={

blue:["#8fd6ff","#12263f"],

pink:["#ff9cd6","#552045"],

green:["#9ef7c0","#18362a"],

purple:["#c8b4ff","#271844"]

};

window.setTheme=function(name){

if(!themes[name]) return;

document.documentElement.style.setProperty("--blue",themes[name][0]);

document.documentElement.style.setProperty("--dark",themes[name][1]);

}