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

<section data-heading="b&g" class="content-wrapper" id="bg-prop">
	<!--Heading-->
	<div class="page-title">
		<h1>
			B&G Proprietary Calibrations
		</h1>
		<p></p>
	</div>
	
	<!--Precision Compass-->
	<div class="box top-wrapper">
		<fieldset id="compass-swing-container">
			<legend><h2>B&G Compass Swing</h2></legend>
			<div class="flex-row">
				<div>
					<div class="flex-heading"><h2>Select Compass:</h2></div>
					<select id="compass-select">
						<option disabled selected value>No Compass Detected</option>
					</select>
				</div>
				<a class="button button-gray button-medium" id="compass-swing">Swing Compass</a>
			</div>
		</fieldset>
	</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>

<!--Compass Swing Modal-->
<section class="modal" name="modal-compass-swing" id="compass-swing-modal">
	<div class="modal-content">
		<div class="modal-title-container">
			<div class="modal-title" id="modal-title">
				<h1>B&G Compass Swing</h1>
			</div>
			<span class="modal-close">&times;</span>
		</div>
		
		<form action="" method="post" class="modal-body" onkeypress="return event.keyCode!= 13;" id="modal-container">
			<div id="progress-bar">
				<span id="progress-complete">Compass Swing Complete: Can be used normally</span>
			</div>
			<div id="swing-status-container">
				<div class="box top-wrapper">
					<div class="flex-row" id="swing-status-row">
						<div>
							<h2>Heading:</h2>
							<div class="field-container" id="heading-true" title="Heading (True)."
								data-field="<?php echo fieldEnum::Heading_True?>"
								data-sender="Canbus" data-instance="">
								&nbsp;
							</div>
							<div class="field-container" id="heading-mag" title="Heading (Magnetic)."
								data-field="<?php echo fieldEnum::Heading_Magnetic?>"
								data-sender="Canbus" data-instance="">
								&nbsp;
							</div>
						</div>
						<div>
							<h2>Rate of Turn:</h2>
							<div class="field-container" id="compass-turn-rate" title="Compass rate of turn."
								data-field="<?php echo fieldEnum::Compass_Turn_Rate?>"
								data-sender="Canbus" data-instance="">
								&nbsp;
							</div>
						</div>
						<div>
							<h2>Progress:</h2>
							<div class="field-container" id="compass-swing-prog" title="Compass swing progress."
								data-field="<?php echo fieldEnum::Compass_Swing_Prog?>"
								data-sender="Canbus" data-instance="">
								&nbsp;
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box top-wrapper">
				<div class="flex-row">
					<a class="button button-gray button-medium" id="start-swing">Start Swing</a>
					<a class="button button-gray button-medium" id="stop-swing">Cancel Swing</a>
				</div>
			</div>
		</form>
	</div>
</section>

<script type="text/javascript" src="/js/modalHandler.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script type="text/javascript" src="/js/atp.bg-proprietary.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script>
	$(document).ready(function() {
		var model = new BGModel();
		var controller = new BGController(model);
		var view = new BGView(controller);
	});
</script>

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