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; 
    max-width: 62px; /* Adjust to fit the combined width of two buttons plus gap */
}

#graphPaperForm {
    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 !important;  
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    background-color: transparent; /* This is ignored even with !important */
    cursor: pointer;
    flex: 1 1 auto; 
    max-height: 30px; /* Ensures the button height doesn’t exceed 30px */
}

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

button:focus {
    outline: none;
}

/* Flexbox layout for non-form buttons */
.non-form-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 62px;
    align-items: center; /* Prevent flexbox shrinking */
}

#shortcutButton {
    height: 36px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 3px;  /* Adjust space above */
    margin-bottom: 2px;  /* Adjust space below */
}
#shortcutButton img {
    height: 36px !important; /* Ensure the image does not shrink */
}
</style>
<style>
/* Tooltips  */  
.tooltip {
	position: absolute;
	background-color: lightyellow;
	color: black;
	padding: 5px;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1000;
	display: none; /* Hide by default */ 
	font-size: 12px; /* Change the font size */
	font-family: Arial, sans-serif; 
}

.tooltip::before {
    content: '';
    position: absolute;
    top: -8px; /* Adjust based on the size of the triangle */
    left: 0px; /* Adjust based on desired position */
    border-width: 0 5px 10px 0px; /* Create a triangle pointing up */
    border-style: solid;
    border-color: transparent transparent lightyellow transparent; /* Only the bottom part is visible */
}

.hidden {
	display: none;
}

#toolbar-container {
  display: flex;
  flex-direction: column;
  gap:1px;
  height: 100%;
  width: 66px
  min-width: 66px;
  max-width: 66px;
}

.toolbar {
  display: flex; 
  flex-direction: column;
  flex: 1; /* Make the toolbar grow to fill the available space */
  align-items: center;
  background-color: lightblue;  
  height: 100%;  /* this makes it extend to the bottom of the window */  
  width: 66px;  
  gap: 1px;
  min-width: 66px;
  max-width: 66px;
}

</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" >
	<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="#hzoomin"></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" id="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" value="directionField" id="directionField" class="svg-button"> <svg width="30" height="30"><use href="#directionfield"></use></svg></button>
		<button type="submit" name="circularAspect" value="circularAspect" id="circularAspectCopy" class="svg-button"> <svg width="30" height="30"><use href="#circularAspect"></use></svg></button>			
		<button type="submit" name="draw" value="draw" id="drawsvg-button" 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="jumpsButton" class="svg-button" onclick="showJumps()"><svg width="62" height="20"><use href="#jumps"></use></button>
		<button id="remarksButton" class="svg-button" onclick="displayAuthorCommentary(400)"><svg width="62" height="20"><use href="#remarksText"></use></button>
		<!--  400 is the maximum width of split SVG lines (lines in AuthorCommentary are split) --> 
	</div>
	
	<div style="display: flex; flex-direction: row;" class="non-form-buttons">
		<!-- Hidden form for submitting the graphPaperIndex -->
		<form id="graphPaperForm" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
			<input type="hidden" name="graphPaperIndexFieldName" id="graphPaperIndexField" value="0">

			<!-- Button to display the current graph paper sample -->
			<button type="submit" name="graphPaperIndexButton" id="graphPaperButton" class="svg-button"     
			    onclick="document.getElementById('graphPaperIndexField').value = graphPaperIndex;">
			    <div id="graphPaperDisplay">
			        <?php include("GraphPaperSamples.svg"); ?>
			    </div>
			</button>		
		</form>

		<!-- Buttons for changing graphPaperIndex -->
		<div style="display: flex; flex-direction: column; gap:2px" class="non-form-buttons">
			<button onclick="changeGraphPaperIndex(1)" class="svg-button" id="nextgraphpaper" aria-label="Next Graph Paper" >
				<svg width="26" height="13">
					<!-- Background -->
						<rect width="30" height="13" fill="rgb(0,0,128)" />
						<polygon points="6,10 20,10 13,3" fill="white"/>
				</svg>
			</button>
			<button onclick="changeGraphPaperIndex(-1)" class="svg-button" id="previousgraphpaper" aria-label="Previous Graph Paper">
				<svg width="26" height="13">
					<!-- Background -->
					<rect width="30" height="13" fill="rgb(0,0,128)" />
					<polygon points="6,3 20,3 13,10" fill="white"/>
				</svg>
			</button>
		</div>	
	</div>
   <!-- Shortcut Button (Link Styled as a Button) -->
     <a href="https://www.mathxpert.org" id="shortcutButton" class="svg-button" target="_blank">
         <img src="./images/MathXpertLink.png" width="62" height="36" alt="MathXpert">
     </a>
</div>
<!-- Tooltip container -->
<div id="tooltip-container" class="tooltip"></div>