script.js

const buttons = document.querySelectorAll('.sort-btn');
const sizeSlider=document.getElementById("size-slider");
const barContainer = document.getElementById("bar-container");
const speedSlider = document.getElementById("speed-slider");
const generateBtn = document.querySelector("#generate-btn");
const startbtn = document.querySelector("#start-btn");
const stopbtn = document.querySelector("#stop-btn");


let isStart=false;
let isPaused = false;
let i=0;
let j=0;
let speed = 50;
let array=[];  
let numBars=30;
let isSorting = false;  // to avoid multiple clicks
let selectedAlgo = null;

//generate btn
  generateBtn.addEventListener("click", () => {
    if (isSorting) return; // prevent new array during sorting

    //reset all state flags and loop indices
    isPaused = false;
    isSorting = false;
    i=0;
    j=0;
    selectedAlgo = null;

    //remove active button styling
    buttons.forEach(btn =>{
      btn.classList.remove('bg-blue-600','text-white');
    });
    generateArray();
  });


//Array generator  
  function generateArray(){
    array=[];
    barContainer.innerHTML="";

    for(let i=0;i<numBars;i++){
      let value=Math.floor(Math.random()*300)+20;
      array.push(value);
      
      const bar = document.createElement("div");
      bar.style.width = "5px";
      bar.classList.add("bar");
      bar.style.backgroundColor = "#3b82f6";
      bar.style.margin = "0 2px";
      bar.style.display = "inline-block";
      bar.style.height = `${value}px`;

    // Create tooltip
    const tooltip = document.createElement("span");
    tooltip.innerText = value;
    tooltip.className =
      "absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-1.5 py-0.5 text-xs text-white bg-[#1f2937] rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50 whitespace-nowrap";

    // Wrap the bar in a group
    const wrapper = document.createElement("div");
    wrapper.className = "group relative";
    bar.appendChild(tooltip);
    wrapper.appendChild(bar);
    barContainer.appendChild(wrapper);


    }
  } 
  generateArray(); //initial array
  

//array size handler
  sizeSlider.addEventListener("input",()=>{
    if(isSorting) return;
    numBars=parseInt(sizeSlider.value);
    generateArray();
  })

//speed handler
  speedSlider.addEventListener("input" , ()=>{
    speed = parseInt(speedSlider.value);
  });

//start btn
  startbtn.addEventListener("click" , async ()=>{
    if(isSorting || !selectedAlgo) return;

    isSorting = true;
    isPaused = false;

    if(selectedAlgo.includes("bubble sort")) await bubbleSort();
    else if (selectedAlgo.includes("selection sort")) await selectionSort();
    else if (selectedAlgo.includes("insertion sort")) await insertionSort();
    else if (selectedAlgo.includes("merge sort")) await mergeSort();

    isSorting = false;

  })

   buttons.forEach(button => {
    button.addEventListener('click', async () => {
      if(isSorting) return; // block double click
      

      //active button styling
      buttons.forEach(btn => {
      btn.classList.remove('bg-blue-600', 'text-white');});
      button.classList.add('bg-blue-600', 'text-white');

      selectedAlgo = button.textContent.toLowerCase();
      
    });
  });

  stopbtn.addEventListener("click", () => {
    isPaused = true;
  });


//delay helper
  function sleep(ms){
    return new Promise(resolve  => setTimeout(resolve,ms));
  }

  function getDelay(){
    return 200-speed; 
  }

//Bubble Sort
  async function bubbleSort() {
    const bars = document.getElementsByClassName("bar");
    for(;i<array.length-1;i++){
      for(;j<array.length-i-1;j++){

        if(isPaused){
          isSorting  = false;
          return;
        }
        bars[j].style.backgroundColor="pink";
        bars[j+1].style.backgroundColor="pink";

        if(array[j]>array[j+1]){
          await sleep(getDelay());

          //swap value;

          let temp = array[j];
          array[j] = array[j+1];
          array[j+1] = temp;

          bars[j].style.height = `${array[j]}px`;
          bars[j+1].style.height = `${array[j+1]}px`;
        }

        await sleep(getDelay());
        bars[j].style.backgroundColor = "#3b82f6";
        bars[j+1].style.backgroundColor = "#3b82f6";
      }
      bars[array.length-i-1].style.backgroundColor = "green";
      j=0 //reset inner loop
    }
    bars[0].style.backgroundColor = "green";
    i=0;
    j=0;
    isSorting=false;
  }

  let k = 0;
  let l=k+1;
  
  async function selectionSort() {
    const bars = document.getElementsByClassName("bar");

    for (; k < array.length; k++) {
      if(isPaused){
        isSorting  = false;
        return;
      }
      let minIndex = k;
      bars[minIndex].style.backgroundColor = "orange"; // mark current min

      l=k+1;
      for (; l < array.length; l++) {
        if(isPaused){
          isSorting  = false;
          return;
        }

        bars[l].style.backgroundColor = "pink"; // mark current comparison
        await sleep(getDelay());

        if (array[l] < array[minIndex]) {
          bars[minIndex].style.backgroundColor = "#3b82f6"; // reset old min color
          minIndex = l;
          bars[minIndex].style.backgroundColor = "orange"; // new min
        } else {
          bars[l].style.backgroundColor = "#3b82f6"; // not smaller
        }
      }

      if (minIndex !== k) {
      // swap
        let temp = array[k];
        array[k] = array[minIndex];
        array[minIndex] = temp;

        bars[k].style.height = `${array[k]}px`;
        bars[minIndex].style.height = `${array[minIndex]}px`;
      }

      bars[minIndex].style.backgroundColor = "#3b82f6"; // reset min bar
      bars[k].style.backgroundColor = "green"; // sorted part
    }
    k=0;
    l=k+1;
    isSorting = false;
  }

let m = 1;
let n = m;

async function insertionSort() {
  const bars = document.getElementsByClassName("bar");

  for (; m < array.length; m++) {
    if (isPaused) {
      isSorting = false;
      return;
    }

    let key = array[m];
    n = m - 1;

    bars[m].style.backgroundColor = "orange";

    while (n >= 0 && array[n] > key) {
      if (isPaused) {
        isSorting = false;
        return;
      }

      array[n + 1] = array[n];
      bars[n + 1].style.height = `${array[n + 1]}px`;
      bars[n].style.backgroundColor = "pink";

      await sleep(getDelay());

      bars[n].style.backgroundColor = "#3b82f6";
      n--;
    }

    array[n + 1] = key;
    bars[n + 1].style.height = `${key}px`;

    for (let p = 0; p <= m; p++) {
      bars[p].style.backgroundColor = "green";
    }
  }

  m = 1;
  n = m;
  isSorting = false;
}


let currSize = 1;
let leftStart = 0;

async function mergeSort() {
  const bars = document.getElementsByClassName("bar");

  for (; currSize < array.length; currSize *= 2) {
    for (; leftStart < array.length - 1; leftStart += 2 * currSize) {
      if (isPaused) {
        isSorting = false;
        return;
      }

      let mid = Math.min(leftStart + currSize - 1, array.length - 1);
      let rightEnd = Math.min(leftStart + 2 * currSize - 1, array.length - 1);

      await merge(leftStart, mid, rightEnd, bars);
    }
    leftStart = 0; // reset after each level
  }

  for (let i = 0; i < array.length; i++) {
    bars[i].style.backgroundColor = "green";
  }

  currSize = 1;
  leftStart = 0;
  isSorting = false;
}

async function merge(l, m, r, bars) {
  let left = array.slice(l, m + 1);
  let right = array.slice(m + 1, r + 1);

  let i = 0, j = 0, k = l;

  while (i < left.length && j < right.length) {
    if (isPaused) {
      isSorting = false;
      return;
    }

    bars[k].style.backgroundColor = "pink";
    await sleep(getDelay());

    if (left[i] <= right[j]) {
      array[k] = left[i];
      i++;
    } else {
      array[k] = right[j];
      j++;
    }

    bars[k].style.height = `${array[k]}px`;
    bars[k].style.backgroundColor = "#3b82f6";
    k++;
  }

  while (i < left.length) {
    if (isPaused) {
      isSorting = false;
      return;
    }

    array[k] = left[i];
    bars[k].style.height = `${array[k]}px`;
    bars[k].style.backgroundColor = "#3b82f6";
    i++;
    k++;
    await sleep(getDelay());
  }

  while (j < right.length) {
    if (isPaused) {
      isSorting = false;
      return;
    }

    array[k] = right[j];
    bars[k].style.height = `${array[k]}px`;
    bars[k].style.backgroundColor = "#3b82f6";
    j++;
    k++;
    await sleep(getDelay());
  }
}


const complexityBtn = document.getElementById("complexity-btn");
const modal = document.getElementById("complexity-modal");
const closeModal = document.getElementById("close-modal");
const mainContent = document.getElementById("main-content");
const complexityContent = document.getElementById("complexity-content");

const complexities = {
  "bubble sort": {
    time: "Best: O(n) | Avg: O(n²) | Worst: O(n²)",
    space: "Space: O(1)"
  },
  "selection sort": {
    time: "Best: O(n²) | Avg: O(n²) | Worst: O(n²)",
    space: "Space: O(1)"
  },
  "insertion sort": {
    time: "Best: O(n) | Avg: O(n²) | Worst: O(n²)",
    space: "Space: O(1)"
  },
  "merge sort": {
    time: "Best: O(n log n) | Avg: O(n log n) | Worst: O(n log n)",
    space: "Space: O(n)"
  }
};

complexityBtn.addEventListener("click", () => {
  if (!selectedAlgo) {
    alert("Please select a sorting algorithm first.");
    return;
  }

  // Fade out main content
  mainContent.classList.add("blur-xs");

  // Inject complexities
  const algo = selectedAlgo.toLowerCase();
  const data = complexities[algo] || { time: "Unknown", space: "Unknown" };
  complexityContent.innerHTML = `
    <p class="mb-2"><strong>Time Complexity:</strong><br>${data.time}</p>
    <p><strong>Space Complexity:</strong><br>${data.space}</p>
  `;

  // Show modal
  modal.classList.remove("hidden");
  modal.classList.add("flex");
});

closeModal.addEventListener("click", () => {
  modal.classList.remove("flex");
  modal.classList.add("hidden");
  mainContent.classList.remove("blur-xs");
});




// import html2canvas from "html2canvas";

const startBtn = document.getElementById("startRecording");
const stopBtn = document.getElementById("stopRecording");
const visualization = document.getElementById("visualizationArea");

let captureInterval;
let recorder;
let chunks = [];
let tempCanvas;
let tempCtx;

startBtn.addEventListener("click", async () => {
  chunks = [];

  alert("recording started");

  // Create a canvas that will be captured
  tempCanvas = document.createElement("canvas");
  tempCanvas.width = visualization.offsetWidth;
  tempCanvas.height = visualization.offsetHeight;
  tempCtx = tempCanvas.getContext("2d");

  const stream = tempCanvas.captureStream(15); // 15 FPS
  recorder = new MediaRecorder(stream);

  recorder.ondataavailable = (e) => {
    console.log("Data available", e.data.size);
    if (e.data.size > 0) chunks.push(e.data);
  };

  recorder.onstop = () => {
    const blob = new Blob(chunks, { type: "video/webm" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "sorting-visualization.webm";
    a.click();
  };

  

  recorder.start();

  // Repeatedly capture screenshots and draw to tempCanvas
  captureInterval = setInterval(() => {
    html2canvas(visualization).then((canvas) => {
      tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
      tempCtx.drawImage(canvas, 0, 0);
    });
  }, 1000 / 15);

  startBtn.disabled = true;
  stopBtn.disabled = false;
});

stopBtn.addEventListener("click", () => {
  alert("downloading")
  clearInterval(captureInterval);
  recorder.stop();
  startBtn.disabled = false;
  stopBtn.disabled = true;
});




window.addEventListener('DOMContentLoaded', () => {
  const sizeSlider = document.getElementById("size-slider");

  const updateSliderMax = () => {
    const width = window.innerWidth;

    if (width < 640) { // small screen
      sizeSlider.max = 30;
      if (+sizeSlider.value > 30) sizeSlider.value = 30;
    } else if (width < 768) { // medium screen
      sizeSlider.max = 60;
    } else if (width < 1024) { // large screen
      sizeSlider.max = 100;
    } else {
      sizeSlider.max = 150; // extra large screen
    }
  };

  // Initial run
  updateSliderMax();

  // Update on resize
  window.addEventListener("resize", updateSliderMax);
});