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

<section class="content-wrapper" data-heading="speed" data-subheading="Heel" id="heelCorrections">
	<div class="page-title">
		<h1>
			Advanced Speed Calibration
		</h1>
		<p>
			The base calibration of the speed log is for 10kts of boat speed. If all of the entries in the table below are left at 0% then the base value will be used for all speeds and all heel angles.
			Entering a percentage value will result in a boat speed increased/decreased by that percentage from the base level. Linear interpolation is used inside the table bounds and then constant value
			outside the table bounds. When no heel is available, then the 0&deg; row is used.
		</p>
		<p id="pulse-warning" class="warning-paragraph" hidden>
			Note: Heel correction is only valid for pulse-based inputs, you must select a different input.
		</p>
		<p id="sog-warning" class="warning-paragraph" hidden>
			Note: Heel correction is only valid for pulse-based inputs, it cannot be used with Boat Speed set to SOG.
		</p>
	</div>
	
	<!--Correction Container-->
	<div id="correction-container" hidden>
		<div class="box top-wrapper">
			<fieldset>
				<legend><h2>Advanced Calibration</h2></legend>
				<!--Correction Table-->
				<table id="heel-table" hidden>
					<tr>
						<th>Boat Speed</th>
						<th>&le;5kt</th>
						<th>10kt</th>
						<th>15kt</th>
						<th>20kt</th>
						<th>&ge;25kt</th>
					</tr>
					<tr>
						<th>Heel Angle</th>
					</tr>
				</table>
			</fieldset>
		</div>
	</div>
	
	<!--Buttons-->
	<div class="button-box" id="button-container">
		<div class="box">
			<div class="flex-row" style="flex:1;justify-content:center;">
				<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 id="reset-button" class="float-right" hidden>
				<a class="button button-gray button-medium float-right">Reset all to 0%</a>
			</div>
		</div>
	</div>
	
	<!--Data Fields-->
	<div class="box" id="field-container">
		<div class="flex-row">
			<div class="flex-third">
				<div class="flex-heading">
					<h2 id="raw-input-heading">Pulse Frequency</h2>
				</div>
				<div class="flex-field">
					<div class="field-container" id="raw-bspd" data-field="<?php echo fieldEnum::Log_PulseFreq;?>"
							data-sender="<?php echo PROCESSOR_ID;?>" title="Raw sensor pulse frequency."
							data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
			</div>
			<div class="flex-third">
				<div class="flex-heading">
					<h2>Base Calibration</h2>
				</div>
				<div class="flex-field" style="margin-left:10px;">
					<div id="base-field"></div>
				</div>
			</div>
			<div class="flex-third">
				<div class="flex-heading">
					<h2>Base Boat Speed</h2>
				</div>
				<div class="flex-field" style="margin-left:10px;">
					<div class="field-container" data-field="<?php echo fieldEnum::Base_Boat_Speed;?>"
						id="base-bspd" data-sender="<?php echo PROCESSOR_ID;?>" title="Boat speed before correction."
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
			</div>
		</div>
		<div class="flex-row">
			<div class="flex-third">
				<div class="flex-heading">
					<h2>Heel</h2>
				</div>
				<div class="flex-field">
					<div class="field-container" data-field="<?php echo fieldEnum::Heel_Angle_Deg;?>"
						id="heel" data-sender="Damping" title="Heel angle."
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
			</div>
			<div class="flex-third">
				<div class="flex-heading">
					<h2>% Correction</h2>
				</div>
				<div class="flex-field" style="margin-left:10px;">
					<div class="field-container" data-field="<?php echo fieldEnum::Advanced_Heel_Calibration;?>"
						id="advanced-cal" data-sender="<?php echo PROCESSOR_ID;?>" title="Correction applied."
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
			</div>
			<div class="flex-third">
				<div class="flex-heading">
					<h2>Boat Speed</h2>
				</div>
				<div class="flex-field" style="margin-left:10px;">
					<div class="field-container" data-field="<?php echo fieldEnum::Calc_BSP_kts;?>"
						id="bspd" data-sender="<?php echo PROCESSOR_ID;?>" title="Corrected boat speed."
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
			</div>
		</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.correction-model.js" defer></script>
<script type="text/javascript" src="js/atp.speed-correction-controller.js" defer></script>
<script type="text/javascript" src="js/atp.speed-correction-view.js" defer></script>
<script>
$(document).ready(function() {
	//Extra check for old database format: Remove when confident no longer needed
	readSection("HeelSpeedCorrection").done(function(result) {
		if (result != '[]') {
            var databaseArray = new Array();
            $.each(JSON.parse(result), function(key, value) {
                databaseArray.push(
                    {section: 'HeelSpeedCorrection:0', key: key, value: value}
                );
            });
            writeToDatabase(databaseArray, "SpeedLog");
            deleteSection("HeelSpeedCorrection").done(function() {
				location.reload(false);
			});
        }
	});

	var url = new URL(window.location.href);

	var model = new SpeedCorrectionModel(url.searchParams.get("src"));
	var controller = new SpeedCorrectionController(model);
	var view = new SpeedCorrectionView(controller);
});
</script>

<?php require_once "footer.php";?>