<?php require_once 'header.php'; ?>

	<div id="main-content-outer">
		<div id="divCenter">	
			<div id="divTitle"><?php /* for debugging later, this is required to exist for app to function, it is hardcoded into the js. Will revise on code rewrite */ ?>
				<?php /* <p id="txtAppTitle">App Title</p> */ ?>
				<div id="txtCaseTitle"></div>
			</div>

			<div id="showCasesList" style="display: none;">
				
			</div>

			<div id="divDisplayContent">
				<!-- All the display information goes here -->
				
				<?php echo renderCaseSelector(); ?>
			</div>
			<div id="divCaseLog2">
				<button type="button" id="btnSaveCaseLog" style="visibility: hidden;">Save Case Log</button>
				<p id="txtSavedCaseLog" style="visibility: hidden;">Case Log saved.</p>
			</div>
			
			<div id="divImageHolder">
				<img id="imgPatient" src="app/images/blank.jpg" alt="Patient Image">
				<img id="imgBagVent" src="app/images/airbag.jpg" alt="Bag and Ventilator Image">
			</div>
			
			<div class="flow-group">
				<div class="flowmeter-container">
					<div id="flowmeter" class="flowmeter">
					    <div class="flowmeter-top"></div>
					    <div class="flowmeter-tube">
							<div class="flowmeter-inner-tube"></div>
							<div class="flowmeter-bobbin-outer">
								<div id="bobbin" class="flowmeter-bobbin"></div>
							</div><!-- close flowmeter-bobbin-out -->
							<div class="flowmeter-markings">
								<div class="flowmeter-integers">
									<div class="flowmeter-mark"><span></span>20<span></span></div>
									<div class="flowmeter-mark"><span></span>10<span></span></div>
									<div class="flowmeter-mark"><span></span>5<span></span></div>
									<div class="flowmeter-mark"><span></span>2<span></span></div>
									<div class="flowmeter-mark"><span></span>1<span></span></div>
									<div class="flowmeter-mark"><span></span>0<span></span></div>
								</div><!-- close flowmeter-integers -->
							</div><!-- close flowmeter-markings -->
						</div><!-- close flowmeter-tube -->
						<div class="flowmeter-bottom"></div>
					</div><!-- close flowmeter -->
				</div><!-- close flowmeter-container -->
				
				<div id="divGases">
					<div id="divN2O"></div>
					<div id="divAir"></div>
					<div id="divO2"></div>
				</div><!-- close divGases -->
			
				<div id="divVapWrapper">
					<div id="divVaporizer"></div>
					<select name="selVaporizer" id="selVaporizer">
						<option value="Desflurane">Desflurane</option>
						<option value="Halothane">Halothane</option>
						<option value="Isoflurane">Isoflurane</option>
						<option value="Sevoflurane" selected="selected">Sevoflurane</option> /* was */
					</select>
				</div><!-- close divVapWrapper -->
			</div><!-- close flow-group -->
		</div><!-- close divCenter -->
		
        <div class="monitor-container">
            <div class="monitor-frame">
                <!-- was div class="screen-effect"></div -->
                <!-- was div class="scanline"></div -->
                <div class="bevel">
                    <div class="bevel-left"></div>
                    <div class="bevel-top"></div>
                    <div class="bevel-corner-bl"></div>
                    <div class="bevel-corner-br"></div>
                    <div class="bevel-corner-tr"></div>
                    <div class="bevel-corner-tl"></div>
                </div>
                <div class="screen-content">
					<div id="divLeftMonitor">    
						<fieldset id="fieldsetEcg">
							<legend>ECG</legend>
							<p id="txtHr"></p>
							<p id="txtII"></p>
							<p id="txtV5"></p>
							<!-- button id="btnPlaySound">Sound: Off</button    was removed -->
						</fieldset>

						<fieldset id="fieldsetP1">
							<legend id="txtP1">NBP</legend>
							<div id="divP1sdm">
								<span id="txtS-D"></span>
								<button id="btnGo">Go</button>
								<span id="txtMin"></span>
								<span id="txtM"></span>
								<br />
								<p id="pMean"></p>
							</div>
							<div id="divP1single">
								<span id="txtP1single"></span>
							</div>
						</fieldset>

						<fieldset id="fieldsetSpo2">
							<legend>SpO2</legend>
							<span id="txtSpo2Sat"></span>
							<span id="txtSpo2Hr"></span>
							<br />
							<span id="txtSpo2signal"></span>
						</fieldset>

						<fieldset id="fieldsetAgm">
							<legend>AGM</legend>
							<table id="tableAgm">
								<tr>
								<td></td>
								<td>O2</td>
								<td>CO2</td>
								<td id="txtVap">ISF</td> 
								</tr>
								<tr>
								<td>I</td>
								<td id="txtI-O2"></td>
								<td id="txtEtCO2" rowspan="2"></td>
								<td id="txtI-Vap"></td>
								</tr>
								<tr>
								<td>E</td>
								<td id="txtE-O2"></td>
								<td id="txtE-Vap"></td>
								</tr>
							</table>
						</fieldset>
						
						<fieldset id="fieldsetAwp">
							<legend>AWP</legend> <!-- was Airway Pressure -->
							<table id="tableAwp">
								<tr>
								<td id="lblPip">PIP</td>
								<td id="lblPeep">PEEP</td>
								</tr>
								<tr>
								<td id="txtPip"></td>
								<td id="txtPeep"></td>
								</tr>
							</table>
						</fieldset>
						
						<fieldset id="fieldsetSpiro">
							<legend>Spirometer</legend>
							<table id="tableSpiro">
								<tr>
								<td id="lblTv">TV</td>
								<td id="lblRr">RR</td>
								</tr>
								<tr>
								<td id="txtTv"></td>
								<td id="txtRr"></td>
								</tr>
							</table>
						</fieldset>
					</div><!-- end divLeftMonitor -->
						

					<div id="divRightMonitor">    
						<canvas id="canvasHemo" width="484px" height="510px"></canvas>   <!-- combined canvases -->
						<fieldset id="fieldsetTemp">
							<legend>Temperature</legend>
							<span id="txtTemperature"></span>
						</fieldset>
					</div><!-- end divRightMonitor -->
								
					<?php /* old version with image **************
					<div id="divFlowmeter">
					<img id="imgFlowmeter" src="app/images/flowmeter.jpg" alt="Flowmeter Image" />
					<img id="imgBobbin" src="app/images/bobbin.jpg" alt="Bobbin Image" />
					</div> */ ?>

                </div><!-- end screen-content -->
            </div><!-- end monitor-frame -->
        </div><!-- end monitor-container -->
	</div><!-- end main-content-outer -->
</div><!-- end divFullScreen -->

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