<?php require_once "atp.header.php"; ?>

<section data-heading="depth" class="content-wrapper" id="depth-select">
    <!--Heading-->
	<div class="page-title">
		<h1>
			Depth Input Selection
		</h1>
		<p>
			Allows for manual or automatic selection between two depth sensors. If the manual button is selected, the associated
			sensor will be used throughout the system. If automatic selection is used, the active sensor depends on the switching
			criteria. A dead band value is used to prevent rapid switching between sensors.
		</p>
    </div>
    
    <!--Radio Buttons-->
	<div class="flex-row">
		<div id="radio-container-1" class="radio-container">
			<div>
				<div>
					<input type="radio" id="manual-select-1" name="manual-select" value="1" data-sensor="1">
					<label for="manual-select-1"><h2>Manual</h2></label>
				</div>
				<div>
					<input type="radio" id="port-select-1" name="switching-select-1" value="port" data-sensor="1">
					<label for="port-select-1"><h2>Heel Port</h2></label>
				</div>
				<div>
					<input type="radio" id="stbd-select-1" name="switching-select-1" value="stbd" data-sensor="1">
					<label for="stbd-select-1"><h2>Heel STBD</h2></label>
				</div>
			</div>
		</div>
		<div id="radio-container-2" class="radio-container">
			<div>
				<div>
					<input type="radio" id="manual-select-2" name="manual-select" value="2" data-sensor="2">
					<label for="manual-select-2"><h2>Manual</h2></label>
				</div>
				<div>
					<input type="radio" id="port-select-2" name="switching-select-2" value="port" data-sensor="2">
					<label for="port-select-2"><h2>Heel Port</h2></label>
				</div>
				<div>
					<input type="radio" id="stbd-select-2" name="switching-select-2" value="stbd" data-sensor="2">
					<label for="stbd-select-2"><h2>Heel STBD</h2></label>
				</div>
			</div>
		</div>
    </div>
    
    <!--Sensor Containers-->
	<div class="flex-row">
		<div class="sensor-details" id="sensor-container-1">
			<fieldset>
				<legend><h2 id="sensor-number-1">Depth Input 1</h2></legend>
				<div class="flex-row">
					<div class="flex-heading">Sensor Name:</div>
					<div id="sensor-name-1"></div>
				</div>
				<div class="flex-row">
					<div class="flex-heading">Depth:</div>
					<div class="field-container" id="sensor-field-1" title="Sensor one DEPTH."
						data-sender="<?php echo PROCESSOR_ID;?>"
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
			</fieldset>
		</div>
		<div class="sensor-details" id="sensor-container-2">
			<fieldset>
				<legend><h2 id="sensor-number-2">Depth Input 2</h2></legend>
				<div class="flex-row">
					<div class="flex-heading">Sensor Name:</div>
					<div id="sensor-name-2"></div>
				</div>
				<div class="flex-row">
					<div class="flex-heading">Depth:</div>
					<div class="field-container" id="sensor-field-2" title="Sensor two DEPTH."
						data-sender="<?php echo PROCESSOR_ID;?>"
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
			</fieldset>
		</div>
    </div>
    
    <!--Active Sensor Container-->
	<div class="flex-row">
		<canvas id="arrow-1" class="active-arrow"></canvas>
		<div id="active-sensor-container" class="active-sensor" >
			<fieldset>
				<legend><h2 id="active-sensor-number">Active Input</h2></legend>
				<div class="flex-row">
					<div class="flex-heading">Sensor Name:</div>
					<div id="active-sensor-name"></div>
				</div>
				<div class="flex-row">
					<div class="flex-heading">Sensor Source:</div>
					<div id="active-sensor-source"></div>
				</div>
				<div class="flex-row">
					<div class="flex-heading">Depth:</div>
					<div class="field-container" id="active-sensor-field" title="Active sensor DEPTH."
						data-sender="<?php echo PROCESSOR_ID;?>"
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
			</fieldset>
		</div>
		<canvas id="arrow-2" class="active-arrow"></canvas>
    </div>
    
    <!--Switching Criteria-->
	<div id="switching-container">
		<div class="box box-top">
			<div class="flex-row">
				<div class="criteria-container">
					<h2>Switching Criteria:</h2>
					<select id="criteria-select">
						<option value="heel">Heel Angle</option>
					</select>
				</div>
				<div class="hysteresis-container">
					<h2>with Dead Band of: </h2>
					<div class="input-unit">
						<input type="number" id="hysteresis" step=0.1>
						<span>&nbsp;&deg;</span>
					</div>
				</div>
			</div>
		</div>
		<div class="box box-bottom">
			<div class="flex-row">
				<div id="heel-container">
					<div class="flex-row">
						<h2>Heel Angle</h2>
						<div class="field-container" data-field="<?php echo fieldEnum::Heel_Angle_Deg;?>"
							data-sender="damping" title="Heel angle." id="heel"
							data-instance="<?php echo PROCESSOR_INSTANCE;?>">
							&nbsp;
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
    
	<!--Buttons-->
	<div class="button-box" id="button-container">
		<div class="box">
			<a id="ok-button" class="button button-gray button-medium">OK</a>
			<a id="cancel-button" class="button button-gray button-medium">Cancel</a>
			<a id="apply-button" class="button button-gray button-medium">Apply</a>
		</div>
	</div>

</section>
<script type="text/javascript" src="js/utils.string.js" defer></script>
<script type="text/javascript" src="js/atp.data-sources.js" defer></script>
<script type="text/javascript" src="js/atp.sensor-model.js" defer></script>
<script type="text/javascript" src="js/atp.sensor-select-model.js" defer></script>
<script type="text/javascript" src="js/atp.sensor-select-controller.js" defer></script>
<script type="text/javascript" src="js/atp.sensor-select-view.js" defer></script>
<script>
$(document).ready(function() {
	var model = new DepthSensorSelectModel();
	var controller = new SensorSelectController(model);
	var view = new DepthSensorSelectView(controller);
});
</script>

<?php require_once "footer.php"?>
