<%

' (SS,23/06/11) new BTU Calculator
' (SS,02/09/14) modified for Cast Iron Radiator Centre and Bootstrap
' (SS,21/2/24) modified to work differently in modal mode i.e. title, breadcrumbs and buttons
' (SS,22/2/24) added class "fontsize16" to prevent zoom in on iOS devices (later removed and used css setting for input[type="number"]), remove the text before calculation in modal, added style="padding-bottom: 5px" (default is 10px)
' (SS,22/2/24) many other improvements for mobile devices, including fitting onto a screen, numeric key pad on measurement entry, placeholder names including Calculated BTU/Watts to ? BTU/Watts
' (SS,23/5/24) replaced panel with card for Bootstrap 5, form-control to form-select
' (SS,04/6/24) set default height to 2.4m 7.87ft
' (SS,19/12/24) removed action="" fropm form (BTU calc modal) also removed size="5" maxlength="20" from all input type "number", not applicable 
' (SS,19/12/24) removed type="text/JavaScript" from script to keep W3C validator happy, it complains about inputmode="decimal" nmot being compatible with some browsers but kept anyway

Sub ShowPage_btucalculator
%>
<script>
// Convert either metres or feet to other dimension
// AValue is value for current input
// ADimension is either "m" or "ft" to set metres or feet
// AInputToSet is where the calculated value will go
function btuSetOtherDimension(AValue, ADimensions, AInputToSet) {
  var LNewValue;
  var LInput = document.getElementById(AInputToSet);
  
  // if valid floating point number then calculate, else set to blank
  if (parseFloat(AValue) == AValue) {
    // convert feet to metres
    if (ADimensions == 'm')
      LNewValue = AValue * 12 * 2.54 / 100;
    else // else metres to feet
      LNewValue = AValue * 100.0 / 2.54 / 12; 
  }
  else
    LNewValue = '';

  // if blank then set to blank, else set rounded value
  // typeof used because == will convert '' to 0, or 0 to ''
  if (typeof AValue == 'string' && AValue == '')
    LInput.value = '';
  else
    LInput.value = Math.round(LNewValue * 100) / 100; // set value, round to 2 dp  
    
  btuCalculate();  
}

// returns value from given input id, 0 is return if value isn't valid float
function btuGetValue(AID) {
  var LValue = document.getElementById(AID).value;
  if (parseFloat(LValue) == LValue)
    return LValue
  else
    return 0;
}

function btuGetCheckboxChecked(AID) {
  return document.getElementById(AID).checked;
}

function btuSetErrorMessage(AMessage) {
  document.getElementById('btu-error-message').innerHTML = AMessage;
  // blink the error message
  // uses /common/javascript/jquery.blink/jquery.blink.js
  if (AMessage != '') $("#btu-error-message").blink({maxBlinks: 3, blinkPeriod: 250});  
}

// do the calculation multiplying room volume in cubic metres by value for room type and by adjustment for checkboxes
// onchange event wasn't always firing in IE 8, onclick event was fine
function btuCalculate() {
  var LLength = btuGetValue('ftLength'); 
  var LWidth = btuGetValue('ftWidth'); 
  var LHeight = btuGetValue('ftHeight');
  var LRoomType = btuGetValue('RoomType');
  var LBTU = LLength * LWidth * LHeight * LRoomType;  
  // adjustments
  if (btuGetCheckboxChecked('DoubleGlazed')) LBTU = LBTU * 0.90;
  if (btuGetCheckboxChecked('NorthFacing')) LBTU = LBTU * 1.15;
  if (btuGetCheckboxChecked('FrenchWindows')) LBTU = LBTU * 1.20;
  if (btuGetCheckboxChecked('Exposed')) LBTU = LBTU * 1.10;
  if (btuGetCheckboxChecked('NewBuild')) LBTU = LBTU * 0.80;

  var LError = true;
  if (LRoomType == 0)
    btuSetErrorMessage('Please select Room Type');
  else if (LLength == 0)
    btuSetErrorMessage('Please enter Length');
  else if (LWidth == 0)
    btuSetErrorMessage('Please enter Width');
  else if (LHeight == 0)
    btuSetErrorMessage('Please enter Height');
  else {
    btuSetErrorMessage(''); // clear error message
    LError = false;
  }
  
  // if error, i.e. missing values, then blank the values, else set the values
  if (LError) {
    //document.getElementById('BTU').innerHTML = '';
    //document.getElementById('watts').innerHTML = '';    
    // (SS,3/9/14) replaced above with following
    $('#calculatedBTU').val('');
    $('#calculatedWatts').val('');
    $('#calculatedBTU').css('font-weight', 'normal');
    $('#calculatedWatts').css('font-weight', 'normal');
    
    document.getElementById('btu-view-suitable').innerHTML = '';
  }
  else {
    //document.getElementById('BTU').innerHTML = Math.round(LBTU);
    // (SS,3/9/14) replaced above with following
    //$('#calculatedBTU').val('<b>' + Math.round(LBTU).toString() + ' BTU</b>');
    $('#calculatedBTU').css('font-weight', 'bold');
    $('#calculatedBTU').val(Math.round(LBTU).toString() + ' BTU');
    // convert BTU to kW
    //document.getElementById('watts').innerHTML = Math.round(LBTU * 0.2930711);
    // (SS,3/9/14) replaced above with following
    $('#calculatedWatts').css('font-weight', 'bold');
    $('#calculatedWatts').val(Math.round(LBTU * 0.2930711).toString() + ' Watts');
    
   // document.getElementById('btu-view-suitable').innerHTML = '<a href="products.asp?cmd=search&attributeid=2&min=' + Math.round(LBTU * 0.9) + '&max=' + Math.round(LBTU * 1.1) + '">View radiators within 10% of BTU</a>';
   //document.getElementById('btu-view-suitable').innerHTML = '<font color="black"><u>View radiators within 10% of BTU</u></font>';
  }
}

window.onload = btuCalculate; // on ensure it's run when back button is pressed

</script>

<%

  Dim LErrorMessage
  LErrorMessage = ""
  
  ' (SS,21/2/24) flag to check if in modal mode i.e on product page
  Dim LIsModal
  LIsModal = GetPageName = ""
  
  ' (SS,5/12/19) added 2nd paramater, and "" as 3rd and removed separate other-heading2 div
  ' (SS,21/2/24) only if not modal 
  If Not LIsModal Then
    ShowPageTitle "BTU Calculator", "Calculate your room's BTU requirement", ""
  End If
  
   ' (SS,4/6/24) set default height to 2.4m 7.87ft
  
%>

<div id="other-pages2">

<form action="" method="post" name="BTU Calculator">

  
  <div class="row">
        

        
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">           

  <div class="card">
  
    <div class="card-header hidden-xs"><b>Room Type</b></div>
    
    <div class="card-body">
    
      <div class="form-group">
        <!--<label for="RoomType">Room Type</label>-->
        <select class="form-select mb-3" name="RoomType" id="RoomType" onchange="btuCalculate()" onkeyup="btuCalculate()">
          <option value="0">Please select...</option>
          <option value="5.01">Bathroom</option>
          <option value="4">Bedroom</option>
          <option value="6.65">Conservatory</option>
          <option value="4.99">Dining Room</option>    
          <option value="5" selected>Lounge</option>
          <option value="2.99">Hallway</option>    
          <option value="3.01">Kitchen</option>
          <option value="3">Utility Room</option>
        </select>
      </div>
     
      <div class="form-check">        
        <input class="form-check-input" type="checkbox" value="checked" name="DoubleGlazed" id="DoubleGlazed" onclick="btuCalculate()">
        <label class="form-check-label" for="DoubleGlazed">
          Are the windows double glazed?
        </label>
      </div>      
      
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="checked" name="NorthFacing" id="NorthFacing" onclick="btuCalculate()">
        <label class="form-check-label" for="NorthFacing">          
          Is the room north facing?
        </label>  
      </div>

      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="checked" name="FrenchWindows" id="FrenchWindows" onclick="btuCalculate()">
        <label class="form-check-label" for="FrenchWindows">           
          Does it have French windows?
        </label>  
      </div>
      
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="checked" name="Exposed" id="Exposed" onclick="btuCalculate()">
        <label class="form-check-label" for="Exposed">
          Has it 2 or more outside walls?        
        </label>  
      </div>

      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="checked" name="NewBuild" id="NewBuild" onclick="btuCalculate()">
        <label class="form-check-label" for="Exposed">
          Has it cavity wall insulation?
        </label>
      </div>
      
    </div>
    
  </div> 
  
</div>  
    
    
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">       
    
 <div class="card">
  
    <div class="card-header hidden-xs"><b>Room Dimensions</b></div>
   
    <div class="card-body">
    <!--
      <div class="btu-calc-subtitle">  
        Metres (m) or Feet (ft)
      </div>
    -->
    
      <div class="row g-1">
      
        <div class="col">
          <div class="mb-3">
            <label for="mLength" class="form-label">Length</label>
            <input type="number" inputmode="decimal" step="0.1" tabindex="1" min="0" max="100" class="form-control" name="mLength" id="mLength" oninput="btuSetOtherDimension(this.value, 'ft', 'ftLength')" placeholder="metres"> 
          </div>
          <input type="number" inputmode="decimal" step="0.1" tabindex="4" min="0" max="100" class="form-control" name="ftLength" id="ftLength" oninput="btuSetOtherDimension(this.value, 'm', 'mLength')" placeholder="feet">
        </div>
        
        <div class="col">
          <div class="mb-3">
            <label for="mWidth" class="form-label">Width</label>
            <input type="number" inputmode="decimal" step="0.1" tabindex="2" min="0" max="100" class="form-control" name="mWidth" id="mWidth" oninput="btuSetOtherDimension(this.value, 'ft', 'ftWidth')" placeholder="metres">
          </div>
          <input type="number" inputmode="decimal" step="0.1" tabindex="5" min="0" max="100" class="form-control" name="ftWidth" id="ftWidth" oninput="btuSetOtherDimension(this.value, 'm', 'mWidth')" placeholder="feet">
        </div>
        
        <div class="col">
          <div class="mb-3">
            <label for="mHeight" class="form-label">Height</label>
            <input type="number" inputmode="decimal" step="0.1" tabindex="3" min="0" max="100" class="form-control" name="mHeight" id="mHeight" oninput="btuSetOtherDimension(this.value, 'ft', 'ftHeight')" placeholder="metres" value="2.4">
          </div>
          <input type="number" inputmode="decimal" step="0.1" tabindex="6" min="0" max="100" class="form-control" name="ftHeight" id="ftHeight" oninput="btuSetOtherDimension(this.value, 'm', 'mHeight')" placeholder="feet" value="7.87">
        </div>

      </div> <!-- row -->
   
      <div class="mt-3" id="btu-error-message"></div>
   
    </div>
    
  </div>  

</div>    
 
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">   
 
  <div class="card">

    <div class="card-header hidden-xs"><b>Your BTU Calculation <%=CustomGetDeltaLabel%></b></div>

    <div class="card-body">
<%If False And Not LIsModal Then ' removed %>
      <p>Please enter the room details and dimensions in metres or feet. Your BTU requirement will appear below.</p>
<%End If%>
      <fieldset disabled>
      <div class="row">
        <div class="form-group col-xs-6" style="margin-bottom: 10px">
          <input style="color: green; text-align: center" type="text" id="calculatedBTU" class="form-control" placeholder="? BTU" />
        </div>
        <div class="form-group col-xs-6" style="margin-bottom: 10px">
          <input style="color: green; text-align: center" type="text" id="calculatedWatts" class="form-control" placeholder="? Watts" />
        </div>        
      </div>
      </fieldset>
      
      <div id="btu-view-suitable"></div>
            
    </div>
    
  </div>

</div>  

  </div> <!-- row -->
      
</form>

<%
' (SS,21/2/24) only if not modal 
If Not LIsModal Then%>
<div class="btu-calc-info mt-3">
<%=GetPageContent("BTUCalculator", "")%>
</div>
<%End If%>

</div> <!-- end #other-pages2 -->
<%
End Sub

' (SS,29/2/24)
' === SPECIAL COMPACT MODAL VERSION ===

' (SS,24/2/24) special compact modal version
' (SS,10/5/24) Bootstrap 5 version
Sub ShowBTUCalculatorModal
%>
  <div class="modal fade" id="modal-content-btucalc" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 350px; margin: auto;">
      <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title"><i class="fa-regular fa-calculator"></i> &nbsp;Your heat requirement</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
<%

  ShowBTUCalculatorModalMain
  
%>

        </div>
               
        <div class="modal-footer">
         <!-- <button type="button" class="btn btn-secondary">Clear</button> -->
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
        </div>        
        
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

<%
  AddScript "ScriptBTUCalc"

End Sub

' === SPECIAL COMPACT MODAL VERSION 2 ===
Sub ShowBTUCalculatorModalMain
%>
<script>
// Convert either metres or feet to other dimension
// AValue is value for current input
// ADimension is either "m" or "ft" to set metres or feet
// AInputToSet is where the calculated value will go
function btuSetOtherDimension(AValue, ADimensions, AInputToSet) {
  var LNewValue;
  var LInput = document.getElementById(AInputToSet);
  
  // if valid floating point number then calculate, else set to blank
  if (parseFloat(AValue) == AValue) {
    // convert feet to metres
    if (ADimensions == 'm')
      LNewValue = AValue * 12 * 2.54 / 100;
    else // else metres to feet
      LNewValue = AValue * 100.0 / 2.54 / 12; 
  }
  else
    LNewValue = '';

  // if blank then set to blank, else set rounded value
  // typeof used because == will convert '' to 0, or 0 to ''
  if (typeof AValue == 'string' && AValue == '')
    LInput.value = '';
  else
    LInput.value = Math.round(LNewValue * 100) / 100; // set value, round to 2 dp  
    
  btuCalculate();  
}

// returns value from given input id, 0 is return if value isn't valid float
function btuGetValue(AID) {
  var LValue = document.getElementById(AID).value;
  if (parseFloat(LValue) == LValue)
    return LValue
  else
    return 0;
}

function btuGetCheckboxChecked(AID) {
  return document.getElementById(AID).checked;
}

function btuSetErrorMessage(AMessage) {
  document.getElementById('btu-error-message').innerHTML = AMessage;
  // blink the error message
  // uses /common/javascript/jquery.blink/jquery.blink.js
  //if (AMessage != '') $("#btu-error-message").blink({maxBlinks: 3, blinkPeriod: 250});  
}

// do the calculation multiplying room volume in cubic metres by value for room type and by adjustment for checkboxes
// onchange event wasn't always firing in IE 8, onclick event was fine
function btuCalculate() {
  var LLength = btuGetValue('ftLength'); 
  var LWidth = btuGetValue('ftWidth'); 
  var LHeight = btuGetValue('ftHeight');
  var LRoomType = btuGetValue('RoomType');
  var LBTU = LLength * LWidth * LHeight * LRoomType;  
  // adjustments
  if (btuGetCheckboxChecked('DoubleGlazed')) LBTU = LBTU * 0.90;
  if (btuGetCheckboxChecked('NorthFacing')) LBTU = LBTU * 1.15;
  if (btuGetCheckboxChecked('FrenchWindows')) LBTU = LBTU * 1.20;
  if (btuGetCheckboxChecked('Exposed')) LBTU = LBTU * 1.10;
  if (btuGetCheckboxChecked('NewBuild')) LBTU = LBTU * 0.80;

  var LError = true;
  if (LRoomType == 0)
    btuSetErrorMessage('Please select Room Type');
  else if (LLength == 0) {
    btuSetErrorMessage('Please enter Length');
    /*
     if (! document.getElementById('mLength').checkValidity() ) {
      document.getElementById('mLength').reportValidity()
     }
    */
  }
  else if (LWidth == 0)
    btuSetErrorMessage('Please enter Width');
  else if (LHeight == 0)
    btuSetErrorMessage('Please enter Height');
  else {
    btuSetErrorMessage(''); // clear error message
    LError = false;
  }
  
  $('#calculatedBTU').removeClass('text-bg-secondary').removeClass('text-bg-danger').removeClass('fw-normal').removeClass('fw-bold');
  $('#calculatedWatts').removeClass('text-bg-secondary').removeClass('text-bg-danger').removeClass('fw-normal').removeClass('fw-bold');
  // if error, i.e. missing values, then blank the values, else set the values
  if (LError) {
    //document.getElementById('BTU').innerHTML = '';
    //document.getElementById('watts').innerHTML = '';    
    // (SS,3/9/14) replaced above with following
    /*
    $('#calculatedBTU').val('');
    $('#calculatedWatts').val('');
    */
    $('#calculatedBTU').text('? BTU');
    $('#calculatedWatts').text('? Watts');
    $('#calculatedBTU').css('font-weight', 'normal');
    $('#calculatedWatts').css('font-weight', 'normal');
    
    $('#calculatedBTU').addClass('text-bg-secondary')
    $('#calculatedWatts').addClass('text-bg-secondary')
    
    //document.getElementById('btu-view-suitable').innerHTML = '';
  }
  else {
    //document.getElementById('BTU').innerHTML = Math.round(LBTU);
    // (SS,3/9/14) replaced above with following
    //$('#calculatedBTU').val('<b>' + Math.round(LBTU).toString() + ' BTU</b>');
   // $('#calculatedBTU').css('font-weight', 'bold');
    $('#calculatedBTU').addClass('text-bg-danger').addClass('fw-bold');
   // $('#calculatedBTU').val(Math.round(LBTU).toString() + ' BTU');
    $('#calculatedBTU').text(Math.round(LBTU).toString() + ' BTU');
    // convert BTU to kW
    //document.getElementById('watts').innerHTML = Math.round(LBTU * 0.2930711);
    // (SS,3/9/14) replaced above with following
 //   $('#calculatedWatts').css('font-weight', 'bold');
    $('#calculatedWatts').addClass('text-bg-danger').addClass('fw-bold');
    //$('#calculatedWatts').val(Math.round(LBTU * 0.2930711).toString() + ' Watts');
    $('#calculatedWatts').text(Math.round(LBTU * 0.2930711).toString() + ' Watts');
    
   // document.getElementById('btu-view-suitable').innerHTML = '<a href="products.asp?cmd=search&attributeid=2&min=' + Math.round(LBTU * 0.9) + '&max=' + Math.round(LBTU * 1.1) + '">View radiators within 10% of BTU</a>';
   //document.getElementById('btu-view-suitable').innerHTML = '<font color="black"><u>View radiators within 10% of BTU</u></font>';
  }
}

// window.onload = btuCalculate; // to ensure it's run when back button is pressed

</script>

<%

  Dim LErrorMessage
  LErrorMessage = ""
  
  ' (SS,21/2/24) flag to check if in modal mode i.e on product page
  Dim LIsModal
  LIsModal = GetPageName = ""
  
  ' (SS,5/12/19) added 2nd paramater, and "" as 3rd and removed separate other-heading2 div
  ' (SS,21/2/24) only if not modal 
  If Not LIsModal Then
    ShowPageTitle "BTU Calculator", "Calculate your room's BTU requirement", ""
  End If
  
  ' (SS,4/6/24) set default height to 2.4m 7.87ft
  ' (SS,19/12/24) removed action="" to keep W3C validator happy
%>
<form method="post" name="BTU Calculator" class="mb-0">

      <div class="form-floating">
        <select class="form-select mb-3" name="RoomType" id="RoomType" onchange="btuCalculate()" onkeyup="btuCalculate()">
          <option value="0">Please select...</option>
          <option value="5.01">Bathroom</option>
          <option value="4">Bedroom</option>
          <option value="6.65">Conservatory</option>
          <option value="4.99">Dining Room</option>    
          <option value="5" selected>Lounge</option>
          <option value="2.99">Hallway</option>    
          <option value="3.01">Kitchen</option>
          <option value="3">Utility Room</option>
        </select>
        <label for="RoomType">Room type</label>
      </div>

      
      <div class="row my-1 g-0">
     
        <div class="col">     
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="checked" id="DoubleGlazed" onclick="btuCalculate()">
            <label class="form-check-label" for="DoubleGlazed">
              Double glazed
            </label>
          </div>
        </div>

        <div class="col">   
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="checked" id="FrenchWindows" onclick="btuCalculate()">
            <label class="form-check-label" for="FrenchWindows">
              French windows
            </label>
          </div>
        </div>

      </div>
      
      <div class="row my-1 g-0">
     
        <div class="col">     
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="checked" id="NorthFacing" onclick="btuCalculate()">
            <label class="form-check-label" for="NorthFacing">
              North facing
            </label>
          </div>
        </div>

        <div class="col">   
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="checked" id="Exposed" onclick="btuCalculate()">
            <label class="form-check-label" for="Exposed">
              2+ outside walls
            </label>
          </div>
        </div>

      </div>        
    
      <div class="row my-1">
     
        <div class="col">   
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="checked" id="NewBuild" onclick="btuCalculate()">
            <label class="form-check-label" for="NewBuild">
              Cavity wall insulation
            </label>
          </div>
        </div>

      </div>
      
      <div class="row mt-2 mb-1">

        <div class="col-auto">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="units" id="unitsMetres" value="metres" onclick="$('#btu-metres').removeClass('d-none'); $('#btu-feet').addClass('d-none');" checked>     
          <label class="form-check-label" for="unitsMetres">Metres</label>
        </div>        
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="units" id="unitsFeet" value="feet" onclick="$('#btu-feet').removeClass('d-none'); $('#btu-metres').addClass('d-none');">      
            <label class="form-check-label" for="unitsFeet">Feet</label>
          </div>
        </div>
        <div class="col-auto mx-0 px-0 pt-1">
          <div id="btu-error-message" class="text-danger" style="font-size: 14px"></div>
        </div>
      </div>
      
      <div class="row g-2" id="btu-metres">
        <div class="col">
          <div class="form-floating">
            <input type="number" inputmode="decimal" step="0.1" tabindex="1" min="0" max="100" class="form-control" name="mLength" id="mLength" oninput="btuSetOtherDimension(this.value, 'ft', 'ftLength')"> 
            <label for="mLength">Length (m)</label>
          </div>
        </div>
        <div class="col">
          <div class="form-floating">
            <input type="number" inputmode="decimal" step="0.1" tabindex="2" min="0" max="100" class="form-control" name="mWidth" id="mWidth" oninput="btuSetOtherDimension(this.value, 'ft', 'ftWidth')">
            <label for="mWidth">Width (m)</label>
          </div>
        </div>
        <div class="col">
          <div class="form-floating">
            <input type="number" inputmode="decimal" step="0.1" tabindex="3" min="0" max="100" class="form-control" name="mHeight" id="mHeight" oninput="btuSetOtherDimension(this.value, 'ft', 'ftHeight')" value="2.4">
            <label for="mHeight">Height (m)</label>
          </div>
        </div>        
      </div>
      
      <div class="row g-2 d-none" id="btu-feet">
        <div class="col">
          <div class="form-floating">
            <input type="number" inputmode="decimal" step="0.1" tabindex="4" min="0" max="100" class="form-control" name="ftLength" id="ftLength" oninput="btuSetOtherDimension(this.value, 'm', 'mLength')"> 
            <label for="ftLength">Length (ft)</label>
          </div>            
        </div>
        <div class="col">
          <div class="form-floating">
            <input type="number" inputmode="decimal" step="0.1" tabindex="5" min="0" max="100" class="form-control" name="ftWidth" id="ftWidth" oninput="btuSetOtherDimension(this.value, 'm', 'mWidth')">
            <label for="ftWidth">Width (ft)</label>
          </div>                
        </div>
        <div class="col">
          <div class="form-floating">
            <input type="number" inputmode="decimal" step="0.1" tabindex="6" min="0" max="100" class="form-control" name="ftHeight" id="ftHeight" oninput="btuSetOtherDimension(this.value, 'm', 'mHeight')" value="7.87">
            <label for="ftHeight">Height (ft)</label>
          </div>                
        </div>        
      </div>
 
      <div class="row g-2 mt-1">
        <div class="col-6" >
          <!--<input type="text" id="calculatedBTU" class="form-control text-success text-center" placeholder="? BTU" disabled>-->
          <span style="width: 155px;" class="badge text-bg-secondary fs-5 fw-normal" id="calculatedBTU">? BTU</span>
        </div>
        <div class="col-6">
          <!--<input type="text" id="calculatedWatts" class="form-control text-success text-center" placeholder="? Watts" disabled>-->
          <span style="width: 155px" class="badge text-bg-secondary fs-5 fw-normal" id="calculatedWatts">? Watts</span>
        </div>        
      </div>
  
      
</form>

<%
End Sub

' === END SPECIAL COMPACT MODAL VERSION ===

%>