script.js

//Implementation drag and drop functionality
let selected = null;
let offsetX = 0;
let offsetY = 0;

function grabber(event) {
  if (event.target.id === "doodle-canvas") return; //Stopping the grabbing function for the canvas
  selected = event.currentTarget;
  offsetX = event.clientX - selected.offsetLeft;
  offsetY = event.clientY - selected.offsetTop;
  document.addEventListener("mousemove", mover, true);
  document.addEventListener("mouseup", dropper, true);
}

function mover(event) {
  if (!selected) return;
  selected.style.left = event.clientX - offsetX + "px";
  selected.style.top = event.clientY - offsetY + "px";
}

function dropper(event) {
  document.removeEventListener("mousemove", mover, true);
  document.removeEventListener("mouseup", dropper, true);
  selected = null;
}

// Implementation of timer functionality
const timerDisplay = document.getElementById("timer-display");
const startButton = document.getElementById("start-timer");
const resetButton = document.getElementById("reset-timer");
const pauseButton = document.getElementById("pause-timer");
let countdownInterval = null;

//Make sure all buttons are functional
startButton.addEventListener("click", startTimer);
pauseButton.addEventListener("click", pauseTimer);
resetButton.addEventListener("click", resetTimer);

let totalTime = 25 * 60; // 25 minutes in seconds

function startTimer(){
  if(countdownInterval) return; // Prevent multiple intervals
  countdownInterval = setInterval(() => {
    if (totalTime <= 0) {
      clearInterval(countdownInterval);
      countdownInterval = null;
      timerDisplay.textContent = "Done!";
      const originalTitle = document.title;
      document.title = "Pomodoro complete!";
      setTimeout(() => { document.title = originalTitle; }, 10000);
      return;
    }
    totalTime--;
    const minutes = Math.floor(totalTime / 60);
    const seconds = totalTime % 60;
    timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  }, 1000);
}
function pauseTimer(){
  clearInterval(countdownInterval);
  countdownInterval = null;
}

function resetTimer(){
  clearInterval(countdownInterval);
  countdownInterval = null;
  totalTime = 25 * 60;
  timerDisplay.textContent = "25:00";
}

//Start of the doodle functionality
let isDrawing = false;
let x = 0;
let y = 0;
const colorPicker = document.getElementById('doodle-color');
let color = colorPicker.value;

colorPicker.addEventListener('input', (e) => {
  color = e.target.value;
});

const myCanvas = document.getElementById('doodle-canvas');
const context = myCanvas.getContext('2d');

// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.

// Add the event listeners for mousedown, mousemove, and mouseup
myCanvas.addEventListener('mousedown', e => {
  x = e.offsetX;
  y = e.offsetY;
  isDrawing = true;
});

myCanvas.addEventListener('mousemove', e => {
  if (isDrawing === true) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = e.offsetX;
    y = e.offsetY;
  }
});

window.addEventListener('mouseup', e => {
  if (isDrawing === true) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = 0;
    y = 0;
    isDrawing = false;
  }
});

function drawLine(context, x1, y1, x2, y2) {
  context.beginPath();
  context.strokeStyle = color; //update the color
  context.lineWidth = 1;
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
  context.closePath();
}

//Clearing the canvas
document.getElementById('clear-doodle').addEventListener('click', () => {
  context.clearRect(0, 0, myCanvas.width, myCanvas.height);
});

// Implementation of hiding and displaying sections
function hideAndShow(sectionID){
    const activeSection = document.getElementById(sectionID);
    if(activeSection.classList.contains("active")){
        activeSection.classList.remove("active");
    } else {
      activeSection.classList.add("active");
    }
}

//Implementaion of To-Do list functionality
const taskInput = document.getElementById("new-task");
const taskList = document.getElementById("task-list");
const addTaskBtn = document.getElementById("add-task");

// Load tasks from localStorage when page loads
let tasks = JSON.parse(localStorage.getItem("tasks") || "[]");

// Function to save tasks to localStorage
function saveTasks() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

// Function to create a task card element
function createTaskCard(text) {
  const card = document.createElement("div");
  card.classList.add("task-card");

  const p = document.createElement("p");
  p.textContent = text;
  card.appendChild(p);

  // Click: line-through → fade → delete
  card.addEventListener("click", () => {
    card.style.textDecoration = "line-through";

    setTimeout(() => {
      card.classList.add("fade-out");
    }, 150);

    setTimeout(() => {
      card.remove();

      // Remove from tasks array and update localStorage
      tasks = tasks.filter(t => t !== text);
      saveTasks();
    }, 500);
  });

  return card;
}

// Function to render all tasks
function renderTasks() {
  taskList.innerHTML = "";
  tasks.forEach(taskText => {
    const card = createTaskCard(taskText);
    taskList.appendChild(card);
  });
}

// Add new task
addTaskBtn.addEventListener("click", () => {
  const text = taskInput.value.trim();
  if (text === "") return;

  tasks.push(text);       // Add to array
  saveTasks();            // Save to localStorage

  const card = createTaskCard(text);
  taskList.appendChild(card);

  taskInput.value = "";
});

// Initial render
renderTasks();

// --- YOUTUBE BG FEATURE ---
const youtubeFrame = document.getElementById("youtube-bg");
const bgSelect = document.getElementById("background-select");

const backgrounds = { //Video IDs retrieved from youtube
    forest: "qRTVg8HHzUo", 
    beach: "Nep1qytq9JM",
    mountain: "zFiqZMTmolY",
    city: "eXsAyB1nUFg" 
};

// Function to build the embed URL correctly
function getEmbedUrl(videoId) {
    return `https://www.youtube.com/embed/${videoId}?autoplay=1&mute=1&controls=0&showinfo=0&rel=0&loop=1&start=15&playlist=${videoId}`;
}

// Set default background (Mountain) on load
if(youtubeFrame) {
    youtubeFrame.src = getEmbedUrl(backgrounds.mountain);
}

// Event Listener for Dropdown
if (bgSelect && youtubeFrame) {
    bgSelect.addEventListener("change", (e) => {
        const selected = e.target.value;
        if (backgrounds[selected]) {
            youtubeFrame.src = getEmbedUrl(backgrounds[selected]);
        }
    });
}

// --- END OF YOUTUBE BG FEATURE ---

//Adding goal for today feature
const goalInput = document.getElementById("session-goal-input");

function renderGoal(container, goalText) {
  container.replaceChildren();
  const h3 = document.createElement("h3");
  const u = document.createElement("u");
  u.textContent = ` Focus: ${goalText} `;
  h3.appendChild(u);
  container.appendChild(h3);
}

goalInput.addEventListener("keypress", function(e){
  if (e.key == "Enter"){
    const goalText = this.value.trim();
    if (goalText === "") return;
    renderGoal(this.parentElement, goalText);
    localStorage.setItem("sessionGoal", goalText);
  }
});

// Load saved goal on page load
window.addEventListener("load", () => {
  const savedGoal = localStorage.getItem("sessionGoal");
  if (savedGoal) {
    renderGoal(document.getElementById("goal-container"), savedGoal);
  }
});

// Navigation bar event listeners
document.getElementById("nav-timer").addEventListener("click", () => hideAndShow("timer-section"));
document.getElementById("nav-todo").addEventListener("click", () => hideAndShow("todo-section"));
// document.getElementById("nav-home").addEventListener("click", () => hideAndShow("home-section"));
document.getElementById("nav-music").addEventListener("click", () => hideAndShow("music-section"));
document.getElementById("nav-doodle").addEventListener("click", () => hideAndShow("doodle-section"));
document.getElementById("nav-settings").addEventListener("click", () => hideAndShow("settings-section"));
document.getElementById("phrases-settings").addEventListener("click", () => hideAndShow("motivationalPhrases"));