Sindbad~EG File Manager

<!-- toolbar.php, defines the Graph Toolbar for Web MathXpert -->
<!-- This file is meant to be included in GraphDoc.php and GetProblem.php,
and it must also be included in SymbolProc.php to make the graph button work. -->

<style>
/* Flexbox layout for the form buttons */
#myForm {
    display: flex;
    flex-wrap: wrap;
    gap: 2px; /* Adjust gap as needed */
    max-width: 62px; /* Adjust to fit the combined width of two buttons plus gap */
}

.svg-button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    flex: 1 1 30px; /* Ensure buttons take up equal space */
}

.svg-button.draw {
    flex: 1 1 100%; /* Ensure the Draw button spans the full width */
    width: 62px;
}

/* buttons that are not inside the form */
button:not(.svg-button) {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

button:focus {
    outline: none;
}

/* Flexbox layout for non-form buttons */
.non-form-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 2px; /* Adjust gap as needed */
    max-width: 62px; /* Adjust to fit the combined width of two buttons plus gap */
}
</style>
<style>
/* Tooltips  */  
.tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 1000;
    display: none; /* Hide by default */
}


      .hidden {
          display: none;
      }
  </style>

<svg width="0" height="0">
<defs>
  <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
    <polygon points="0 0, 6 3, 0 6" fill="white" />
  </marker>
</defs>
</svg>

<div style="display:none;">
    <?php include 'ButtonDefinitions.svg'; ?>
</div>


<div class="toolbar" id="toolbar" style="display: inline-block; flex-direction: column; align-items: center;">
	<form id="myForm" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
		<input type="hidden" name="action" id="formAction" value="">
		<input type="hidden" name="selectedRectangleField" id="selectedRectangleField" value="">
		<input type="hidden" name="mouseFunctionField" id="mouseFunctionField" value="">
		<button type="submit" name="horizontalzoomout" value="horizontalzoomout"  id="horizontalzoomout" class="svg-button"><svg width="30" height="30"><use href="#hzoomout"></use></svg></button>
		<button type="submit" name="horizontalzoomin" value="horizontalzoomin" id="horizontalzoomin" class="svg-button"><svg width="30" height="30"><use href="#shadowODE2Input1ID"></use></svg></button>
		<button type="submit" name="verticalzoomout" value="verticalzoomout"id="verticalzoomout" class="svg-button"><svg width="30" height="30"><use href="#vzoomout"></use></svg></button>
		<button type="submit" name="verticalzoomin" value="verticalzoomin" id="verticalzoomin"  class="svg-button"><svg width="30" height="30"><use href="#vzoomin"></use></svg></button>
		<button type="submit" name="doublezoomin" value="doublezoomin" d="doublezoomin" class="svg-button"><svg width="30" height="30"><use href="#zoomin"></use></svg></button>
		<button type="submit" name="doublezoomout" value="doublezoomout" id="doublezoomout" class="svg-button"><svg width="30" height="30"><use href="#zoomout"></use></svg></button>
		<button type="submit" name="directionField" name="directionField" id="directionField" class="svg-button"> <svg width="60" height="30"><use href="#directionfield"></use></svg></button>
		<button type="submit" name="draw" id="draw" class="svg-button"> <svg width="60" height="30"><use href="#draw"></use></svg></button>
	</form>
	 <div class="non-form-buttons">
		<button id="select1Button" class="svg-button" onclick="turnOnSelectRectangle()"><svg width="30" height="30"><use href="#select1"></use></svg></button>
		<button id="select2Button" class="svg-button" onclick="turnOnSelectCenteredRectangle()"><svg width="30" height="30"><use href="#select2"></use></svg></button>
		<button id="pointSlopeButton" class="svg-button" onclick="turnOnPointSlope()"><svg width="30" height="30"><use href="#pointslope"></use></svg></button>
		<button id="dragButton" class="svg-button" onclick="turnOnMouseScroll()"><svg width="30" height="30"><use href="#drag"></use></svg></button>
		<button id="assumptionsButton"class="svg-button"  onclick="showAssumptions()"><svg width="62" height="20"><use href="#assumptions"></use></svg></button>
		<button id="singularitiesButton" class="svg-button" onclick="showSingularities()"><svg width="62" height="20"><use href="#singularities"></use></svg></button>
		<button id="jumpButton" class="svg-button" onclick="showJumps()"><svg width="62" height="20"><use href="#jumps"></button>
		<button id="remarkButton" class="svg-button" onclick="displayAuthorCommentary(400)"><svg width="62" height="20"><use href="#remarks"></button>
		<!--  400 is the maximum width of split SVG lines --> 
	</div>
</div>

<!-- Tooltip container -->
<div id="tooltip-container" class="tooltip"></div>

<script>
	document.addEventListener('DOMContentLoaded', function() {
	const tooltipButtons = document.querySelectorAll('.svg-button'); 
	const tooltipContainer = document.getElementById('tooltip-container'); // Ensure tooltipContainer is defined
	tooltipButtons.forEach(button => {
		button.addEventListener('mouseenter', showTooltip);
		button.addEventListener('mouseleave', hideTooltip);
		});

   function showTooltip(event) { 
	console.log("in showTooltip with ", event.target.id);
	const buttonId = event.target.id;
	const tooltipId = `tooltip-${buttonId}`;
	const svgElement = document.getElementById(tooltipId);
	const tooltipText = svgElement.querySelector('text').textContent; 
	tooltipContainer.textContent = tooltipText;
	const rect = event.target.getBoundingClientRect();
	tooltipContainer.style.left = `${rect.left + (rect.width - tooltipContainer.offsetWidth) / 2}px`;
	tooltipContainer.style.top = `${rect.top - tooltipContainer.offsetHeight - 10}px`;
	tooltipContainer.style.display = 'block'; 
	const rect2 = event.target.getBoundingClientRect();
	tooltip.style.left = `${rect2.left + (rect2.width / 2) - (tooltip.offsetWidth / 2)}px`;
	tooltip.style.top = `${rect2.top - tooltip.offsetHeight - 5}px`;
	}

	function hideTooltip() {
		tooltipContainer.style.display = 'none'; 
		}
	});
   </script>