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

<section class="content-wrapper" data-heading="position" data-heading="Heading" id="heading">
	<div class="page-title">
		<h1>
			Heading Input
		</h1>
		<p>
			Calibration for heading sources. The Input selected when OK/Apply is pressed will be used for internal computation.
		</p>
	</div>
	
	<div class="middle-wrapper box box-top">
		<div class="flex-row">
			<div class="flex-half">
				<div class="flex-heading">
					<h2>Select Input:</h2>
				</div>
				<div class="flex-input" id="input-select-container">
				</div>
			</div>
			<div class="flex-half">
				<div class="flex-heading">
					<h2>Input Name:</h2>
				</div>
				<div class="flex-input">
					<input type="text" id="input-name">
				</div>
			</div>
		</div>
	</div>
	
	<div class="middle-wrapper box box-stack">
		<div class="flex-row">
			<div class="flex-half">
				<div class="flex-heading">
					<h2>Input Source:</h2>
				</div>
				<div class="flex-input">
					<select id="input-type-select">
					</select>
				</div>
			</div>
			<div class="flex-half">
		
			</div>
		</div>
		<div class="flex-row">
			<div class="flex-half">
				<div class="flex-heading">
				
				</div>
			</div>
			<div class="flex-half">

			</div>
		</div>
	</div>
	
	<div class="middle-wrapper box box-bottom">
		<div class="flex-row" id="source-select" name="input-configuration">
			<div hidden id="fastnet-config">
				<p>
					Fastnet inputs should be configured <a href="fastnet.php">here.</a>
				</p>
			</div>
			
			<div id="source-config-container" hidden>
				<!--Source Configuration-->
			</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>
	
	<div class="top-wrapper box">
		<div class="flex-row">
			<div class="flex-heading">
				<h2>Variation</h2>
			</div>
			<div class="flex-field">
				<div class="field-container" id="variation"
					data-field="<?php echo fieldEnum::MagneticVariation;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
		</div>
		<div class="flex-row">
			<div class="flex-heading">
				<h2>Raw Heading</h2>
			</div>
			<div class="flex-field">
				<div class="field-container" id="headingTrue"
					data-field="<?php echo fieldEnum::Heading_True;?>">
					&nbsp;
				</div>
			</div>
			<div class="flex-field">
				<div class="field-container" id="headingMag"
					data-field="<?php echo fieldEnum::Heading_Magnetic;?>">
					&nbsp;
				</div>
			</div>
		</div>
		<div class="flex-row">
			<div class="flex-half">
				<div class="flex-heading">
					<h2>Calibration Offset</h2>
				</div>
				<div class="flex-input input-unit">
					<input type="number" id="offset" value="" step=0.1>
					<span>&deg;</span>
				</div>
				<a class="button button-gray button-medium" id="compass-calibration">Compass Corrections</a>
			</div>
		</div>
	</div>

	<div class="top-wrapper box">
		<div class="flex-row">
			<div class="flex-heading">
				<h2>Offset Applied</h2>
			</div>
			<div class="flex-field">
				<div class="field-container" id="headingOffsetTrue"
					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>
        <div class="flex-row">
			<div class="flex-half">
				<div class="flex-heading">
					<h2>System Heading</h2>
				</div>
				<div class="flex-field">
					<div class="field-container" id="systemHeadingTrue"
						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="flex-field">
					<div class="field-container" id="systemHeadingMag"
						data-field="<?php echo fieldEnum::Calc_Heading_Mag;?>"
						data-sender="<?php echo PROCESSOR_ID;?>"
						data-instance="<?php echo PROCESSOR_INSTANCE;?>">
						&nbsp;
					</div>
				</div>
			</div>
			<div class="flex-half" id="cog-row">
				<div class="flex-heading" id="cog-heading">
					<h2>CoG</h2>
				</div>
				<div class="flex-field">
					<div class="field-container" id="cog-true" data-field="<?php echo fieldEnum::GPS_COG_TRUE;?>"
						data-sender="Damping" data-instance="0">
						&nbsp;
					</div>
				</div>
				<div class="flex-field">
					<div class="field-container" id="cog-mag" data-field="<?php echo fieldEnum::GPS_COG_MAG;?>"
						data-sender="Damping" data-instance="0">
						&nbsp;
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<script type="text/javascript" src="js/atp.data-sources.js?v=<?php echo VERSION_NUMBER;?>" defer></script>
<script type="text/javascript" src="js/atp.heading.js" defer></script>
<script>
$(document).ready(function() {
	
	var model = new HeadingModel();
	var controller = new HeadingController(model);
	var view = new HeadingView(controller);
});
</script>

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