<?php require_once "atp.header.php"; ?>
	
<section class="content-wrapper" data-heading="position" id="compass-correction">
	<!--Heading-->
	<div class="page-title">
		<h1>Compass Calibration</h1>
		<p>
            This page allows for fine-grained control of heading offsets.<br>
            The <em>Fixed</em> offset is intended to compensate for installation alignment.
            The <em>Variable</em> offset is calculated from the table below using linear interpolation.<br>
            The heading value used for interpolation depends on the <em>Compass Type</em> of the input.
		</p>
	</div>

    <!--Heel-->
    <div class="box top-wrapper heel-grid">
        <h2>Heel</h2>
        <div class="flex-field">
            <div class="field-container" id="heel"
                data-field="<?php echo fieldEnum::Heel_Angle_Deg;?>"
                data-sender="Damping">
                &nbsp;
            </div>
        </div>
        <div class="tooltip-wrapper">
            <h2>Use Heel for correction?</h2>
            <div class="tooltip" tooltip-position="left">
                <p>
                    If unticked then the 0&deg; Heel row is used for calibration.
                </p>
            </div>
        </div>
        <input type="checkbox" id="heel-correction">
    </div>

	<!--Correction Table-->
	<div class="box top-wrapper">
		<div id="compass-correction-container"></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>

    <!--Live Data-->
	<div class="box bottom-wrapper" id="live-data-grid">
		<h2>Raw Heading</h2>
        <div class="flex-field">
            <div class="field-container" id="raw-compass-true"
                data-field="<?php echo fieldEnum::Heading_True;?>"
                data-sender="<?php echo PROCESSOR_ID;?>" 
				data-instance="<?php echo PROCESSOR_INSTANCE;?>">
                &nbsp;
            </div>
        </div>
        <div class="tooltip-wrapper">
            <h2>Fixed Offset</h2>
            <div class="tooltip">
                <p>
                    Fixed heading offset.
                    Compensates for mis-alignment between the compass and the axis of the boat.
                </p>
            </div>
        </div>
        <input id="fixed-offset" class="correction-base" type="number" disabled>
        <h2>Corrected Heading</h2>
        <div class="flex-field">
            <div class="field-container" id="corr-compass-true"
                data-field="<?php echo fieldEnum::Calc_Heading_True;?>"
                data-sender="<?php echo PROCESSOR_ID;?>" 
				data-instance="<?php echo PROCESSOR_INSTANCE;?>">
                &nbsp;
            </div>
        </div>
        <div class="spacer"></div>
        <div class="flex-field">
            <div class="field-container" id="raw-compass-mag"
                data-field="<?php echo fieldEnum::Heading_Magnetic;?>"
                data-sender="<?php echo PROCESSOR_ID;?>" 
				data-instance="<?php echo PROCESSOR_INSTANCE;?>">
                &nbsp;
            </div>
        </div>
        <div class="tooltip-wrapper">
            <h2>Variable Offset</h2>
            <div class="tooltip">
                <p>
                    Interpolated offset based on user values from calibration grid.
                </p>
            </div>
        </div>
        <div class="flex-field">
            <div class="field-container" id="variable-offset"
                data-field="<?php echo fieldEnum::Calc_Heading_Heel_Offset;?>"
                data-sender="<?php echo PROCESSOR_ID;?>" 
				data-instance="<?php echo PROCESSOR_INSTANCE;?>">
                &nbsp;
            </div>
        </div>
        <div class="spacer"></div>
        <div class="flex-field">
            <div class="field-container" id="corr-compass-mag"
                data-field="<?php echo fieldEnum::Calc_Heading_Mag;?>"
                data-sender="<?php echo PROCESSOR_ID;?>" 
				data-instance="<?php echo PROCESSOR_INSTANCE;?>">
                &nbsp;
            </div>
        </div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="tooltip-wrapper">
            <h2>Applied Offset</h2>
            <div class="tooltip">
                <p>
                    Fixed Offset + Variable Offset.
                </p>
            </div>
        </div>
        <div class="flex-field">
            <div class="field-container" id="applied-offset"
                data-field="<?php echo fieldEnum::Calc_Heading_Total_Offset;?>"
                data-sender="<?php echo PROCESSOR_ID;?>" 
				data-instance="<?php echo PROCESSOR_INSTANCE;?>">
                &nbsp;
            </div>
        </div>
	</div>

</section>

<script type="text/javascript" src="/js/atp.compass-correction.js" defer></script>
<script>
$(document).ready(function() {
    var url = new URL(window.location.href);

	var model = new CompassCorrectionModel(url.searchParams.get("src"));
	var controller = new CompassCorrectionController(model);
	var view = new CompassCorrectionView(controller);
});
</script>

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