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

<section name="leeway" class="content-wrapper" data-heading="speed" id="leeway">
	<!--Heading-->
	<div class="page-title">
		<h1>
			Leeway
		</h1>
		<p>
			Leeway is calculated as &Kappa; &times; Heel/(Boat Speed)<sup>2</sup>, with &Kappa;
			defined below. The range of values is likely to be 2 - 10 for race yachts up to 
			30 - 40 for some superyachts.
		</p>
	</div>
	
	<!--Leeway Input-->
	<div class="box top-wrapper">
		<div class="flex-row">
			<div class="flex-heading">
				<h2>Leeway Coefficient &Kappa;</h2>
			</div>
			<input type="number" id="leewayCoeff">
		</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>

	<!--Leeway Calculation Fields-->
	<div class="box">
		<div class="leeway-calculation-grid">
			<h2>Boat Speed</h2>
			<div class="flex-field">
				<div class="field-container" id="boatSpeed" title="Boat Speed"
					data-field="<?php echo fieldEnum::Calc_BSP_kts;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
			<h2>Heel Angle</h2>
			<div class="flex-field">
				<div class="field-container" id="heelAngle" title="Heel Angle"
					data-field="<?php echo fieldEnum::Heel_Angle_Deg;?>"
					data-sender="Damping" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
			<h2>Leeway</h2>
			<div class="flex-field">
				<div class="field-container" id="leewayCalc1"
					title="&Kappa; &times; Heel/(Boat Speed)&sup2;"
					data-field="<?php echo fieldEnum::Calc_Leeway;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
			<h2>AWA</h2>
			<div class="flex-field">
				<div class="field-container" id="AWA" title="Apparent Wind Angle"
					data-field="<?php echo fieldEnum::Calc_AWA_Degrees;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
			<h2>Tack</h2>
			<div class="flex-field">
				<div class="field-container" id="tack" title="Sailing Tack"
					data-field="<?php echo fieldEnum::Calc_Tack;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
			<h2>Signed Leeway</h2>
			<div class="flex-field">
				<div class="field-container" id="signedLeeway" title="Signed Leeway"
					data-field="<?php echo fieldEnum::Calc_Sgn_Leeway;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
		</div>
	</div>

	<!--Course Calculation Fields-->
	<div class="box top-wrapper">
		<div class="course-calculation-grid">
			<h2>Heading</h2>
			<h2>+</h2>
			<h2>Signed Leeway</h2>
			<h2>=</h2>
			<h2>Course</h2>
			<div class="flex-field">
				<div class="field-container" id="headingTrue" title="Heading (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></div>
			<div class="flex-field">
				<div class="field-container" id="leewayCalc2" title="Signed Leeway" 
					data-field="<?php echo fieldEnum::Calc_Sgn_Leeway;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
			<div></div>
			<div class="flex-field">
				<div class="field-container" id="courseTrue" title="Course (True)"
					data-field="<?php echo fieldEnum::Calc_Course_Deg_T;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
			<div class="flex-field">
				<div class="field-container" id="headingMag" title="Heading (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></div>
			<div></div>
			<div></div>
			<div class="flex-field">
				<div class="field-container" id="courseMag" title="Course (Mag)"
					data-field="<?php echo fieldEnum::Calc_Course_Deg_M;?>"
					data-sender="<?php echo PROCESSOR_ID;?>" 
					data-instance="<?php echo PROCESSOR_INSTANCE;?>">
					&nbsp;
				</div>
			</div>
		</div>
	</div>
</section>

<script type="text/javascript" src="js/atp.leeway.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script>
$(document).ready(function() {
	let model = new LeewayModel();
	let controller = new LeewayController(model);
	let view = new LeewayView(controller);
});
</script>

<?php require_once "footer.php"?>
