<%
' (SS,23/06/11) new BTU Calculator
' (SS,02/09/14) modified for Cast Iron Radiator Centre and Bootstrap

Sub ShowPage_btucalculator
%>
<script type="text/JavaScript">
// 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 = ""
  
  ShowPageTitle "BTU Calculator"
%>
<div id="other-heading2">
<h1 class="h1-to-h2-size">Calculate your room's BTU requirement</h1>
</div>

<div id="other-pages2">

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

  
  <div class="row">
        

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

  <div class="panel panel-default">
  
    <div class="panel-heading">1. <b>Enter Room Details</b></div>
    
    <div class="panel-body">
    
      <label for="RoomType">Room Type</label>  
      <select class="form-control" 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 class="checkbox">
        <label>
          <input type="checkbox" value="checked" name="DoubleGlazed" id="DoubleGlazed" onclick="btuCalculate()" />
          Are the windows double glazed?
        </label>
      </div>      
      
      <div class="checkbox">
        <label>
          <input type="checkbox" value="checked" name="NorthFacing" id="NorthFacing" onclick="btuCalculate()" />
          Is the room north facing?
        </label>  
      </div>

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

      <div class="checkbox">  
        <label>
          <input type="checkbox" value="checked" name="NewBuild" id="NewBuild" onclick="btuCalculate()" />
          Has it cavity wall insulation?
        </label>  
      </div>
      
    </div>
    
  </div> 
  
</div>  
    
    
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">       
    
 <div class="panel panel-default">
  
    <div class="panel-heading">2. <b>Enter Room Dimensions</b></div>
    
    <div class="panel-body">
      <div class="btu-calc-subtitle">  
        Metres (m) or Feet (ft)
      </div>
    
      <div class="btu-calc-content-col">
          
        <div class="form-group">
          <label for="mLength">Length (m)</label>
          <input type="text" class="form-control" name="mLength" id="mLength" size="10" maxlength="20" onkeyup="btuSetOtherDimension(this.value, 'ft', 'ftLength')" placeholder="Length (m)" /> 
        </div>  
          
        <div class="form-group">
          <label for="mWidth">Width (m)</label>
          <input type="text" class="form-control" name="mWidth" id="mWidth" size="10" maxlength="20" onkeyup="btuSetOtherDimension(this.value, 'ft', 'ftWidth')" placeholder="Width (m)" />
        </div>

        <div class="form-group">
          <label for="mHeight">Height (m)</label>
          <input type="text" class="form-control" name="mHeight" id="mHeight" size="10" maxlength="20" onkeyup="btuSetOtherDimension(this.value, 'ft', 'ftHeight')" placeholder="Height (m)" />
        </div>
      </div>
      
      <div class="btu-calc-content-col">
      
        <div class="form-group">
          <label for="ftLength">Length (ft)</label><br />
          <input type="text" class="form-control" name="ftLength" id="ftLength" size="10" maxlength="20" onkeyup="btuSetOtherDimension(this.value, 'm', 'mLength')" placeholder="Length (ft)" />
        </div>

        <div class="form-group">
          <label for="ftWidth">Width (ft)</label><br />
          <input type="text" class="form-control" name="ftWidth" id="ftWidth" size="10" maxlength="20" onkeyup="btuSetOtherDimension(this.value, 'm', 'mWidth')" placeholder="Width (ft)" />
        </div>

        <div class="form-group">
          <label for="ftHeight">Height (ft)</label><br />
          <input type="text" class="form-control" name="ftHeight" id="ftHeight" size="10" maxlength="20" onkeyup="btuSetOtherDimension(this.value, 'm', 'mHeight')" placeholder="Height (ft)" />
        </div>
      </div>
   
    </div>
    
  </div>  

</div>    
 
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">   
 
  <div class="panel panel-default">

    <div class="panel-heading">3. <b>Your BTU Calculation</b></div>

    <div class="panel-body">    
      <p>Please enter the room details and dimensions in metres or feet. Your BTU requirement will appear below.</p>        

      <fieldset disabled>
        <div class="form-group">
          <input style="color: green" type="text" id="calculatedBTU" class="form-control" placeholder="Calculated BTU" />
        </div>
        <div class="form-group">
          <input style="color: green" type="text" id="calculatedWatts" class="form-control" placeholder="Calculated Watts" />
        </div>        
      </fieldset>
      
      <div id="btu-error-message"></div>
      <div id="btu-view-suitable"></div>
            
    </div>
    
  </div>

</div>  

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

<div class="btu-calc-info">
<%=GetPageContent("BTUCalculator", "")%>
</div>

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

%>