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

<section data-heading="wind" class="content-wrapper" id="wind-select"> 
	<!--Heading-->
	<div class="page-title">
		<h1>Wind Input Selection</h1>
		<p>
            Allows for manual or automatic selection between two wind sensors. If the manual button is selected, the associated
            sensor will be used throughout the system. If Heel Angle or Apparent Wind Angle are selected as the switching criteria
            then the sensor used is dependent on the current tack, with a user defined dead band to prevent	rapid switching between sensors.
            If True Wind Angle is selected as the switching criteria then the sensor used is dependent on the current point of sail.
        </p>
    </div>

    <!--Radio Buttons-->
	<div class="flex-row">
		<div id="radio-container-1" class="radio-container" hidden>
			<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>Upwind</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>Downwind</h2></label>
				</div>
			</div>
		</div>
		<div id="radio-container-2" class="radio-container" hidden>
			<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>Upwind</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>Downwind</h2></label>
				</div>
			</div>
		</div>
	</div>
    
    <!--Sensor Containers-->
	<div class="flex-row">
		<div class="sensor-details" id="sensor-container-1" hidden>
			<fieldset>
				<legend><h2 id="sensor-number-1">Wind 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">MAWA:</div>
					<div class="field-container" id="sensor-field-1-awa" title="Sensor one apparent wind angle."
						data-sender="<?php echo PROCESSOR_ID;?>"
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
				<div class="flex-row">
					<div class="flex-heading">MAWS:</div>
					<div class="field-container" id="sensor-field-1-aws" title="Sensor one apparent wind speed."
						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" hidden>
			<fieldset>
				<legend><h2 id="sensor-number-2">Wind 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">MAWA:</div>
					<div class="field-container" id="sensor-field-2-awa" title="Sensor two apparent wind angle."
						data-sender="<?php echo PROCESSOR_ID;?>"
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
				<div class="flex-row">
					<div class="flex-heading">MAWS:</div>
					<div class="field-container" id="sensor-field-2-aws" title="Sensor two apparent wind speed."
						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" hidden>
			<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">MAWA:</div>
					<div class="field-container" id="active-sensor-field-awa" title="Active sensor apparent wind angle."
						data-sender="<?php echo PROCESSOR_ID;?>"
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
                </div>
                <div class="flex-row">
					<div class="flex-heading">MAWS:</div>
					<div class="field-container" id="active-sensor-field-aws" title="Active sensor apparent wind speed."
						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" hidden>
		<div class="box box-top">
			<div class="flex-row">
				<div class="criteria-container">
					<h2>Switching Criteria:</h2>
					<select id="criteria-select">
                        <option value="wind">Apparent Wind Angle</option>
                        <option value="heel">Heel Angle</option>
						<option value="twa">True Wind 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" hidden>
					<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 id="wind-container" hidden>
					<div class="flex-row">
						<h2>Apparent Wind Angle</h2>
						<div class="field-container" data-field="<?php echo fieldEnum::Calc_AWA_Degrees;?>"
							data-sender="<?php echo PROCESSOR_ID;?>" title="Apparent wind angle." id="awa"
							data-instance="<?php echo PROCESSOR_INSTANCE;?>">&nbsp;</div>
					</div>
                </div>
                <div id="true-wind-container" hidden>
                    <div class="flex-row">
                        <h2>True Wind Angle</h2>
                        <div class="field-container" data-field="<?php echo fieldEnum::Calc_TWWA_Deg;?>"
							data-sender="<?php echo PROCESSOR_ID;?>" title="True wind angle." id="twa"
							data-instance="<?php echo PROCESSOR_INSTANCE;?>">&nbsp;</div>
                    </div>
                </div>
				<div id="tack-container" hidden>
					<div class="flex-row">
						<h2>Sailing Tack</h2>
						<div class="field-container" data-field="<?php echo fieldEnum::Calc_Tack?>"
							data-sender="<?php echo PROCESSOR_ID;?>" title="Sailing tack." id="tack"
							data-instance="<?php echo PROCESSOR_INSTANCE;?>">
							&nbsp;
						</div>
					</div>
                </div>
                <div id="pos-container" hidden>
                    <div class="flex-row">
                        <h2>Point of Sail</h2>
                        <div class="field-container" data-field="<?php echo fieldEnum::Calc_PointOfSail?>"
							data-sender="<?php echo PROCESSOR_ID;?>" title="Point of sail." id="pos"
							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 WindSensorSelectModel();
	var controller = new SensorSelectController(model);
	var view = new WindSensorSelectView(controller);
});
</script>

<?php require_once "footer.php"?>
