Sindbad~EG File Manager

function supportsSlider(graphtypeNumber, parameterName){
	// graphtypeNumber is a value from mainchoice.h
	let integerNames = ["n","N","m","M","k","K"]
	if(integerNames.includes(parameterName))
		return false;
	let slidertypes = [0,1,2,5,6,7]
		 // ORDINARY, COMPARE_SAME, COMPARE_DIFFERENT, PARAMETRIC, POLAR_CIRCULAR, POLAR
	return slidertypes.includes(graphtypeNumber);
}

function makeParameterSlider(index, parameters, parentElement) {
    // Create the slider container
    const sliderContainer = document.createElement('div');
    sliderContainer.style.width = '61px';
    sliderContainer.style.height = '24px';
    sliderContainer.style.backgroundColor = 'rgb(0,0,128)';
    sliderContainer.style.display = 'flex';
    sliderContainer.style.alignItems = 'center';
    sliderContainer.style.justifyContent = 'center';
    sliderContainer.style.border = 'none';
    sliderContainer.style.margin = '-1px 0 0 0';
    sliderContainer.style.padding = '0';

    // Create the slider
    const slider = document.createElement('input');
    slider.type = 'range';
    const parameter = parameters[index];
    slider.min = parameter.rangemin;
    slider.max = parameter.rangemax;
    slider.step = (slider.max - slider.min) / 50.0;
    slider.value = parameter.value;
    slider.id = `parameterSlider${index}`;
	 console.log("slider run: ", slider.min, slider.max);
	 console.log("slider step:", slider.step);
	 

    // Match button styles
    slider.style.width = '55px';
    slider.style.height = '5px';
    slider.style.border = 'none';
    slider.style.appearance = 'none';
    slider.style.cursor = 'pointer';
    slider.style.margin = '0';
    slider.style.padding = '0';
    slider.style.background = 'white';
    slider.style.borderRadius = '3px';
    slider.style.outline = 'none';

    // Slider Change Handling
    slider.addEventListener('input', (event) => {
        let value = parseFloat(event.target.value);
        let oldValue = parameters[index].value;
        console.log(`Slider ${index} moved. Value: ${value}, OldValue: ${oldValue}`);
        applySliderChange(index, value);
    });

    // Handle Slider Activation (Switching Parameter)
    slider.addEventListener('pointerdown', () => handleParameterSwitch(index));

    // Send updateParameters when user releases the mouse
    slider.addEventListener('pointerup', () => {
        let value = parameters[index].value;
        let parametersString = parameters.map(param => `${param.name}#${param.value}#${param.increment}#${param.index}`).join(';');
        const windowHeight = window.innerHeight;
		  const svgContainer = document.getElementById('svgContainer');
		  const graphwidth = svgContainer.getBoundingClientRect().width;
        let messageParameter = `${graphwidth}+${windowHeight}+${parametersString}`;
        // graphwidth is a global Javasscript variable 
        sendMessageToEngine("updateParameters", messageParameter)
            .then(response => console.log("Engine Response:", response))
            .catch(error => console.error("Error updating parameter in Engine:", error));
    });
	 
	// add an event listener so Tooltips works 
	slider.addEventListener('mouseenter', showTooltip);
	slider.addEventListener('mouseleave', hideTooltip);

    // Append the slider to its container and then to the parent element
    sliderContainer.appendChild(slider);
    parentElement.appendChild(sliderContainer);
}


function applySliderChange(index, value) {
	let oldValue = parameters[index].value;
	if (value === oldValue) return; // No change

	parameters[index].value = value;
	let oldValueStr = oldValue.toFixed(4);
	let valueStr = value.toFixed(4);

	// Hide old paths, show new ones
	document.querySelectorAll(`[param="${oldValueStr}"]`).forEach(el => el.style.display = "none");
	//  document.querySelectorAll(`[param="${valueStr}"]`).forEach(el => el.style.display = "block");
	 
	 document.querySelectorAll(`[param="${valueStr}"]`).forEach(el => {
		// console.log(`Making visible: ${el.getAttribute("param")}`, el);
		el.style.display = "block";
	});

	// Move the titles
	// Loop through all possible title elements (up to title5)
	for (let i = 0; i < 6; i++) {
		let titleId = `title${i}-${valueStr}`;
		let titleElement = document.getElementById(titleId);
		let draggableTitle = document.getElementById(`draggableTitle${i}`);
		let originalTitle = document.getElementById(`title${i}`);
		if (titleElement && draggableTitle) {
			if (originalTitle) {
				originalTitle.style.display = "none";
			}
			draggableTitle.style.display = "block";
			moveSvgElementToContainer(titleId, `draggableTitle${i}`);
		}
	 }
}

function enableSlider(index) {
    let slider = document.getElementById("parameterSlider" + index);  
    if (slider) {
        console.log("Enabling slider interaction for:", slider.id);
            // Simulate fresh pointerup
        slider.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));   
     }
}

// Handle Parameter Switch
function handleParameterSwitch(index) {
	console.log("in handleParameterSwitch with ", index, activeParameter);
	if (index === activeParameter) {
		 return;
	 }
    activeParameter = index;

    console.log(`Switching active parameter to ${index}, submitting form to PHP_SELF.`);

    // Create a hidden form
    let form = document.createElement("form");
    form.method = "POST";
    form.action = window.location.href; // Submits to PHP_SELF

    // Create the hidden input field
    let input = document.createElement("input");
    input.type = "hidden";
    input.name = "newActiveParameter";
    input.value = index;

    // Append input to form and form to body
    form.appendChild(input);
    document.body.appendChild(form);
	 
	 // synthetic pointerup that will be received by the old page,
	 // so it will release its capture of mouse events.
	
	 let slider = document.getElementById("parameterSlider" + activeParameter);
    if (slider) {
          console.log("Releasing pointer capture before submitting form...");
          slider.releasePointerCapture(1); // Explicitly release pointer capture
          slider.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
      }
    
    // Submit the form
    form.submit();
    // here we need to enable the slider in the reloaded page
	  setTimeout(() => enableSlider(index), 100);
	 
}