amikoreh/index.html Secret

## readme.txt

We recommend that you utilize the iFrame embedded version of this calculator. For the instructions here: https://www.rucwest.org/portal/member-resources/using-ruc-calculator/

If you’d prefer to utilize the manual code download method, please read the following notes.

Notes:
	•	After downloading code, copy the HTML from the index.html file into the area of the website where you would like to feature the calculator.
	•	The calculator is utilizing Bootstrap (v3.3.7) stylesheet and JavaScript. If you are already using Bootstrap on your website, you can remove those two resources. However, if you are not, you will likely need to load Bootstrap on your website to utilize the calculator as currently designed.
	•	Much like including Bootstrap in the calculator, you will need to load jQuery on you website in order to make the calculator function. If you are already loading jQuery on your site, you may be able to remove that resource. If you are not, you will need to keep the jQuery resource. We recommend using the latest stable release of jQuery v1, v2, or v3.
	•	If the calendar needs to be updated, you can manually change the values used in the calculations.  Look ‘// // START -- Variable that can be updated -- START // //’ (around line 602).
	•	Otherwise, if the calculator needs to be updated, please contact RUC West with the new gas tax and/or RUC tax information for your state.

## index.html
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="HandheldFriendly" content="True">
<meta name="copyright" content="&copy; 2016 PRR Inc., Ami Koreh, for WRUCC (RUCWEST)">

<title>Road Charge Calculator | RUC West</title>

<!-- SEO -->
<meta name="robots" content="noodp"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Road Charge Calculator | RUC West" />
<meta property="og:url" content="https://www.rucwest.org/" />
<meta property="og:site_name" content="RUC West" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Road Charge Calculator | RUC West" />
<!-- / SEO . -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type='text/javascript' src='https://use.fontawesome.com/9658a4e006.js'></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<style type="text/css">
.section.white-bg {
    width: 100%;
}
.section.white-bg strong {
    color: #558F3E;
}
form#ruc-calc-form .form-control {
    border: 1px solid #000;
}
form#ruc-calc-form label.error {
    display: block;
    position: absolute;
    top: 35px;
    color: #EA3F3F;
}
.rucwest-calc {
    color: #1e3948;
    background-color: rgba(245, 245, 245, 0.5);
    border-color: #d3e0e9;
    margin-top: 22px;
    border: 1px solid rgba(30, 57, 72, 0.3);
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.rucwest-calc-box {
    margin-bottom: 20px;
    margin-top: 10px;
}
#ruc-calc-form h4 {
    margin-bottom: 3px;
}
#totalPrice {
    min-height: 125px;
}
.rucwest-calc .input-group-addon {
    border: 1px solid #000;
}
.rucwest-calc a#findmpglink {
  text-decoration: underline;
}
.rucwest-calc .table>tbody>tr>td {
    font-size: 18px;
    font-weight: 200;
}
.rucwest-calc .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(249, 249, 249, 0.9);
}
.rucwest-calc .table>thead>tr>th,
.table-striped>tbody>tr {
    background-color: rgba(255, 255, 255, 0.9);
}
.rucwest-calc .table-responsive-js p {
    font-size: 82.5%;
}
.rucwest-calc .disclaimer-text {
    letter-spacing: .05em;
    font-size: 82.5%;
}
.city {
    text-align: left;
    margin: 0 5px 0 0;
}
.combMPGresult {
    text-align: center;
}
.combined {
    font-size: 30px;
    font-weight: 500;
    color: #003366;
    padding: 0px;
    text-align: left;
    line-height: 1;
    vertical-align: bottom;
}
.ctyhwy {
    font-size: 25px;
    font-weight: 400;
    color: #003366;
    padding: 0px;
    text-align: left;
    line-height: 1;
    vertical-align: bottom;
}
.fuel1 {
    width: 50%;
    margin: 0 auto 0 auto;
    line-height: 1;
}
.fueleconomy {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin: 0 0 .5em 0;
}
.fueleconomy-header {
    font-size: 13px;
    border-bottom: 1px solid #ccc;
    background-color: #efefef;
    font-weight: bold;
    color: #333;
    padding: 2px;
}
.fueltype {
    font-size: 14px;
    color: #003366;
    font-weight: 600;
}
.fuelTypeVehicle {
    background-color: #85b665;
    padding-bottom: 3px;
    padding-top: 3px;
    font-weight: 600;
    color: #ffffff;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    width: 150px
}
table.results1 {
    width: 75%;
    margin: 7px auto 3px auto;
    border-collapse: collapse;
    line-height: 1;
}
table.results2 {
    width: 100%;
    margin: 0 auto 0 auto;
    border-collapse: collapse;
    line-height: 1;
}
.results2 .unitsLabel,
.results2 .combined {
    padding-top: 8px;
}
.results2 td {
    border: none;
}
.twofuels {
    margin-top: 0px;
    width: 25%;
    text-align: right;
    padding-right: 2px;
    border-bottom: 1px solid #cccccc;
}
.unitsLabel {
    font-size: 14px;
    font-weight: 600;
    color: #003366;
    text-align: left;
    line-height: .8;
    vertical-align: top;
    margin-bottom: 1px;
}
.context {
    position: absolute;
    left: -999em;
    width: 1em;
    overflow: hidden;
}
@media (max-width: 991px) {
    .calc-col-2 {
        height: 100%;
        padding-top: 4px;
        padding-bottom: 185px;
    }
}
@media (max-width: 768px) {
    .calc-col-2 .input-group[class*="col-"] {
        padding-left: 15px;
    }
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<div class="section white-bg">
<div class="container">
<div class="row">

<div class="col-xs-12 col-md-12 col-lg-8 col-lg-offset-2 rucwest-calc">
<div class="row rucwest-calc-box">
<div class="col-xs-12">
<h3><strong>Compare For Yourself</strong></h3>
<p>Curious about your potential Road Charge payment vs. the current fuel tax structure? Use this calculator to compare the current monthly fuel tax vs. the per-mile Road Charge payment.</p>
</div>

<form id="ruc-calc-form" class="col-xs-12" role="form" name="gasdata">

<div class="form-group col-xs-12 state-field" style="margin-right:0;">
<div class="row">
<h4><strong>Location:</strong></h4>
    <label class="control-label form-control-label">Select a state:</label>
    <div class="input-group col-xs-12">

<select id="state" name="state" class="form-control" onchange="calculateTotal()" required>
                      <option value="select" selected="selected">--Select--</option>
                      <option value="hawaii">Hawaii</option>
                      <option value="utah">Utah</option>
                      <option value="washington">Washington</option>
</select>
    </div>
  </div>
</div>
<div class="form-group hide hi-county-field col-xs-12" style="margin-right:0;">
<div class="row">
    <label class="control-label form-control-label">Select a county:</label>
    <div class="input-group col-xs-12">
<select id="hi-county" name="hi-county" class="form-control" onchange="calculateTotal()">
                      <option value="select" selected="selected">--Select--</option>
                      <option value="hawaii-county">Hawaii</option>
                      <option value="honolulu-county">Honolulu</option>
                      <option value="kauai-county">Kauai</option>
                      <option value="maui-county">Maui</option>
</select>
    </div>
  </div>
</div>

  <div class="form-group control-group">
  <h4><strong>Mileage:</strong></h4>
    <label class="control-label form-control-label">How many miles do you drive per month?</label>
    <div class="input-group col-xs-12 controls">
    <div class="input-group-addon"><i class="fa fa-road"></i></div>
      <input class="numeric value-miles form-control" type="number" name="miles" min="1" max="50000" onchange="calculateTotal()" placeholder="Enter Miles">
      <p class="help-block"></p>
    </div>
  </div>

  <div class="form-group calc-type" style="margin-right:0;">
<h4><strong>Vehicle:</strong></h4>
<label class="control-label form-control-label">Enter your vehicle's MPG </label>
<div class="input-group col-xs-12">
                      <label><input type="radio" name="RadioGroup1" value="combined" onClick="toggleMpgType()" id="radio_1" checked> I know my vehicle's MPG</label>
                      <br>
                      <label><input type="radio" name="RadioGroup1" value="separate" onClick="toggleMpgType()" id="radio_2"> Find my vehicle's MPG</label>
      </div>
  </div>

  <div id="combMpgRow" class="form-group" style="margin-right:0;">
<label class="control-label form-control-label">What is the average MPG of your vehicle?</label>  <small>Find your vehicle's MPG <a id="findmpglink" onclick="toggleMpgTypeRadio()">here</a>.</small>
<div class="input-group col-xs-12">
      <div class="input-group-addon"><i class="fa fa-tint"></i></div>
      <input class="numeric value-mpg form-control" type="number" name="mpg" min="1" max="300" onchange="calculateTotal()" placeholder="Enter MPG">
    </div>
  </div>

  <div id="cityMpgRow" class="form-group calc-type" style="display:none;margin-right:0;">
<label class="control-label form-control-label">Find my vehicle's MPG</label>
<div class="input-group col-xs-12">
<select class="form-control" name="mnuYear" id="mnuYear" required><option value="">Select Year</option></select>
<select class="form-control" name="mnuMake" id="mnuMake" required disabled><option value="">Select Make</option></select>
<select class="form-control" name="mnuModel" id="mnuModel" required disabled><option value="">Select Model</option></select>
<select class="form-control" name="mnuOptions" id="mnuOptions" required disabled><option value="">Select Option</option></select>
<div id="fempgresult"></div>
      </div>
  </div>

<div class="form-group">
<h4><strong>How Much You Pay Per Month:</strong></h4>
</div>

<div id="totalPrice"><div class='table-responsive-js'><table class='table table-striped table-bordered table-hover'><tbody><tr><td colspan='3'><h4>Please enter your selection for Location, Mileage, and your vehicle's MPG in order to see your results.</h4></td></tr></tbody></table></div>
</div>
<div id="totalPriceEVtoggle"></div>
<div class="collapse" id="EVcollapse">
<div id="totalPriceEVcompare"></div>
</div>
</form>
<div class="col-xs-12 disclaimer-text">
<p>&nbsp;</p>
<p style="margin:0;"><strong>Disclaimer:</strong></p>
<small>Federal fuel tax of $0.184 per gallon is used in this calculator.</small><br />
<small>This calculation tool is for informational purposes only and may not apply to your situation. It is intended to help consumers understand the “set costs” of a gallon of gasoline based on the selected State's fuel taxes on a gallon of gasoline plus the federal taxes. The calculation is based on comparing the State's fuel taxes to road usage charges incurred by driving on State's roads. It may not take into account other local option fuel taxes. Rates are rounded to the nearest hundredth decimal.</small><br />
<small>For sales tax on fuel, price per gallon calculation was based on AAA average prices for 1/1/2016.</small><br />
<small>The Washington State calculations use the June 2016 state fuel tax of 44.5 cents per gallon and assume a state road use charge of 2.37 cents per mile.</small><br/>
<small>*Electric vehicles in Washington State currently pay an annual <a href="http://apps.leg.wa.gov/rcw/default.aspx?cite=46.17.323" target="_blank">$150 fee</a>.</small>
</div>

</div>
</div>

    </div><!-- close .row -->
  </div><!-- close .container -->
</div><!-- close .section -->
<script type="text/javascript">
// // START -- Variable that can be updates -- START // //
// current federal gas tax in dollars per gallon //
var currentfederalgastax=0.184; // $0.184

// current state gas tax in dollars per gallon //
var state_prices = new Array(); // Declare the array constructor
state_prices["select"]=0;
state_prices["washington"]=0.445;
state_prices["utah"]=0.2941;
state_prices["hawaii"]=0.16;

// state road use charge in dollars per mile //
var state_RCprices = new Array(); // Declare the array constructor
//state_RCprices["select"]=0;
state_RCprices["washington"]=0.02369828695;
state_RCprices["utah"]=0.0119120518;
state_RCprices["hawaii"]=0.008;

// for Hawaii only //
// county gas tax dollars per gallon //
var county_prices= new Array(); // Declare the array constructor
county_prices["select"]=0;
county_prices["hawaii-county"]=0.088;
county_prices["honolulu-county"]=0.165;
county_prices["kauai-county"]=0.17;
county_prices["maui-county"]=0.18;

// for Hawaii only //
// county road use charge in dollars per mile //
var county_RCprices= new Array(); // Declare the array constructor
county_RCprices["select"]=0;
county_RCprices["hawaii-county"]=0.0044;
county_RCprices["honolulu-county"]=0.00825;
county_RCprices["kauai-county"]=0.0085;
county_RCprices["maui-county"]=0.009;

// for Washington only - EV drivers gas tax //
var EVfeeWashington=12.50;// // END -- Variable that can be updates -- END // //
</script>

<script type="text/javascript">
/*<!-- // This calculator has been created for RUC West and Members. //
// If the calculator needs to be updated, please contact RUC West with the new gas tax and/or RUC tax information for your state. //
// If you would like to use the calculator and are not already a RUC West Member, please contact us. //
// https://www.rucwest.org/  //
//-->

<!--==================================================================-->
<!-- Purpose: To allow people to compare the tax costs of paying by the gallon or by the mile,  -->
<!--                 based upon their vehicle specific information.                             -->
<!-- Data Sources:                                                                              -->
<!--The list of years, in XML format, comes from                                                -->
<!-- https://www.fueleconomy.gov/ws/rest/vehicle/menu/year                                      -->
<!-- The list of models within a year, in XML format, comes from                                -->
<!-- http://www.fueleconomy.gov/ws/rest/vehicle/menu/make?year=                                 -->
<!-- The estimated MPG for a year, make and model, in XML format, comes from                    -->
<!-- https://www.fueleconomy.gov/ws/rest/vehicle/menu/options?year=&make=&model=                -->
<!--                                                                                            -->
<!--                        Maintenance Log                                                     -->
<!-- Name                     Date                      Comments                                -->
<!-- Developer/company  08/01/2016  Developed initial release                                   -->
<!-- Ami Koreh/PRR      09/01/2016  Developed initial version of the calculator                 -->
<!-- (room for future comments)                                                                 -->
<!--                                                                                            -->
<!-- Technical notes / requirements:                                                            -->
<!-- Bootstrap v3.3.7; javascript; jQuery v1, v2 or v3.                                         -->
<!-- If the calendar needs to be updated, you can manually change the values used in the        -->
<!-- calculations.   Look for ‘// // START -- Variable that can be updated -- START // //’      -->
<!-- (around line 602).                                                                         -->
<!-- If the calculator needs to be updated, please contact RUC West with the new gas tax        -->
<!-- and/or RUC tax information for your state.                                                 -->
<!--==================================================================-->
*/

// When the document is ready
$( document ).ready(function() {

// get vehicle's MPG from fueleconomy.gov
   function getVehicle() {

      var id = $( "#mnuOptions" ).val();
      //var myurl = "";
      //var vehdesc = "";
      //var fuelprice = 0.0;

        $.ajax({
        url: 'https://www.fueleconomy.gov/ws/rest/vehicle/'+id,
          async: false,
          dataType: 'json',
          success: function (veh) {

            $("#fempgresult").html("");

              $("#fempgresult").append("<div class='model'>"+veh.year+" "+veh.make+" "+veh.model+"</div>");
              $("#fempgresult").append("<div class='specs'>"+veh.fuelType1+"</div>");

              $("#fempgresult").append("<div class='fueleconomy'>");
                $(".fueleconomy").append("<div class='fueleconomy-header'>EPA Fuel Economy</div>");
                var html ="<table class='results1'>";
                html+="<col style='width: 50%'>";
                html+="<col style='width: 25%'>";
                html+="<col style='width: 25%'>";

                var combstr = "MPG";
                if (veh.fuelType=='Electricity') {
                  combstr+="e";
                }
                html+="<tr>";
                  html+="<td rowspan='2' class='combined'><span class='context'>Combined "+combstr+"</span><div class='combMPGresult'>"+veh.comb08+"</div></td>";
                  html+="<td colspan='2' class='unitsLabel'>"+combstr+"</td>";

                html+="</tr>";

                html+="<tr>";
                  html+="<td class='ctyhwy'>"+veh.city08+"</td>";
                  html+="<td class='ctyhwy'>"+veh.highway08+"</td>";
                html+="</tr>";

                html+="<tr>";
                  html+="<td class='rating-type text-center'>combined</td>";
                  html+="<td class='rating-type'>city</td>";
                  html+="<td class='rating-type'>hwy</td>";
                html+="</tr>";

                html+="</table>";

                $(html).appendTo(".fueleconomy");
              $("#fempgresult").append("</div>"); // closes the fueleconomy div
}
   });
  }

      fillYears();

      $('#mnuYear').change(function() {
        chgYears ();
        calculateTotal();
      });

      $('#mnuMake').change(function() {
        chgMake();
        calculateTotal();
      });

      $('#mnuModel').change(function() {
        chgModel();
      });

      $("#mnuOptions").change(function() {
          getVehicle();
          calculateTotal();
          $('#fempgresult').show();
      });

// fill years in select dropdown for years greater than 1984
    function fillYears () {
      $.getJSON('https://www.fueleconomy.gov/ws/rest/vehicle/menu/year', function (data) {
        var mylen = data.menuItem.length;
       // $('#mnuYear').append($('<option>--Select Year--</option>'
        for(var i=0;i < mylen;i++) {

          $('#mnuYear').append($('<option>', {
            value: data.menuItem[i].value,
            text :data.menuItem[i].text
          }));
        }
      });
    }

    function  chgYears () {
      var myyear = $( "#mnuYear option:selected" ).text();

      if ($( "#mnuYear option:selected" ).text() == "Select Year") {
        $('#mnuMake option').remove();
        $('#mnuMake').append($('<option>', {
          value: '',
          text :'Select Make'
        }));
        $('#mnuMake').prop("disabled", true);
        $('#mnuModel').prop("disabled", true);
        $('#mnuOptions').prop("disabled", true);
      } else {
        fillMakes(myyear);

        $('#mnuModel option').remove();
        $('#mnuModel').append($('<option>', {
          value: '',
          text :'Select Model'
        }));

        $('#mnuOptions option').remove();
        $('#mnuOptions').append($('<option>', {
          value: '',
          text :'Select Option'
        }));

        $('#mnuMake').prop("disabled", false);
        $('#mnuModel').prop("disabled", true);
        $('#mnuOptions').prop("disabled", true);
        $('#fempgresult').hide();
      }
    }

// fill makes in select dropdown for years greater than 1984
    function fillMakes (year) {
      if (new Number(year) > 1984) {
        var mySelect = document.getElementById('mnuMake');
        mySelect.options.length = 0;
        mySelect.options[0] = new Option ("Select Make", "");
        mySelect.options[0].selected="true";

        $.getJSON('https://www.fueleconomy.gov/ws/rest/vehicle/menu/make?year='+year, function (data) {

          var mylen = data.menuItem.length;
          for(var i=0;i < mylen;i++) {

            $('#mnuMake').append($('<option>', {
              value: data.menuItem[i].value,
              text :data.menuItem[i].text
            }));
          }
        });
      }
    }

    function chgMake () {
      var myyear = $( "#mnuYear option:selected" ).text();
      var mymake = $( "#mnuMake option:selected" ).text();

      $('#mnuModel').prop("disabled", false);
      $('#mnuOptions').prop("disabled", true);

      calculateTotal();

      fillModels(myyear,mymake);
    }

    function fillModels (year,make) {

      var mySelect = document.getElementById('mnuModel');
      mySelect.options.length = 0;
      mySelect.options[0] = new Option ("Select Model", "");
      mySelect.options[0].selected="true";
      var count=0;
      var mymodel = "";
      var myurl = "https://www.fueleconomy.gov/ws/rest/vehicle/menu/model?year="+year+'&make='+make;
      $.ajax({
        type: "GET",
        url: myurl,
        async: false,
        dataType: "xml",
        success: function(xml) {
          $(xml).find('menuItem').each(function(){
            count=count+1;
            mymodel= $(this).find('value').text();
          });
          if (count<2){
            $('#mnuModel option').remove();
            fillOptions(year,make, mymodel);
            $('#mnuOptions').prop("disabled", false);
          }

          $(xml).find('menuItem').each(function(){
            var myvalue = $(this).find('value').text();
            var mytext = $(this).find('text').text();
            $('#mnuModel').append($('<option>', {
              value: myvalue,
              text : mytext
            }));
          });

        }
      });
    }

    function chgModel () {
      var myyear = $( "#mnuYear option:selected" ).text();
      var mymake = $( "#mnuMake option:selected" ).text();
      var mymodel = $( "#mnuModel option:selected" ).text();

      fillOptions(myyear,mymake, mymodel);
      $('#mnuOptions').prop("disabled", false);
      calculateTotal();
      //$('#fempgresult').hide();
    }

    function fillOptions (year,make,model) {

      var mySelect = document.getElementById('mnuOptions');
      mySelect.options.length = 0;
      mySelect.options[0] = new Option ("Select Option", "");
      mySelect.options[0].selected="true";

      var myurl = "https://www.fueleconomy.gov/ws/rest/vehicle/menu/options?year="+year+"&make="+make+"&model="+model;
      var count = 0;

      $.ajax({
        type: "GET",
        url: myurl,
        async: false,
        dataType: "xml",
        success: function(xml) {
          $(xml).find('menuItem').each(function(){
            count=count+1;
          });

          $(xml).find('menuItem').each(function(){
            var myvalue = $(this).find('value').text();
            var mytext = $(this).find('text').text();
            $('#mnuOptions').append($('<option>', {
              value: myvalue,
              text : mytext
            }));
          });

        }
      });
    }

});

// Get form
var calc_form = $("#ruc-calc-form"); // Getting form information using jquery for use in functions
var the_calc_Form = document.forms["ruc-calc-form"]; // Getting form information for array constructor

// function for retrieving value for selected state
function getStatePrice() {
    var incomeStatePrice=0;
    var selectedState = the_calc_Form.elements["state"];
    incomeStatePrice = state_prices[selectedState.value];
    return incomeStatePrice;
}

function getStateRCPrice() {
    var incomeStateRCPrice=0;
    var selectedState = the_calc_Form.elements["state"];
    incomeStateRCPrice = state_RCprices[selectedState.value];
    return incomeStateRCPrice;
}

function getCountyPrice() {
    var incomeCountyPrice=0;
    var selectedCounty = the_calc_Form.elements["hi-county"];
    incomeCountyPrice = county_prices[selectedCounty.value];
    return incomeCountyPrice;
}

function getCountyRCPrice() {
    var incomeCountyRCPrice=0;
    var selectedCounty = the_calc_Form.elements["hi-county"];
    incomeCountyRCPrice = county_RCprices[selectedCounty.value];
    return incomeCountyRCPrice;
}

function getMiles() {
    var val_input_miles=0;
    val_input_miles = $(".value-miles").val();
    return val_input_miles;
}

function getMPG() {
    var val_input_mpg=0;
if ($("#radio_1").is(":checked")) {
        val_input_mpg = $(".value-mpg").val();
} else if ($("#radio_2").is(":checked")) {
  val_input_mpg = $(".combMPGresult").text();
}
getMPGtype();
    return val_input_mpg;
}


function getMPGtype() {
    var val_mpg_type=0;
if ($("#radio_2").is(":checked")) {
    val_mpg_type = $(".unitsLabel").text();
}
    return val_mpg_type;
}

function validateForm() {

// Configure the validator globally. Requires jquery.validate
// Validate form, add custom error message
calc_form.validate({
    debug: true,
    success: "valid",
    //validation rules
        messages: {
            "miles": {
                required: "You must your how many miles you drive per month",
                min: "Invalid. Enter number of miles between 1 and 50,000",
                max: "Invalid. Enter number of miles between 1 and 50,000"
            },
            "mpg": {
                required: "You must your vehicle's MPG",
                min: "Invalid. Enter MPG between 1 and 300",
                max: "Invalid. Enter MPG between 1 and 300"
            }
        }
    });
}


// perform calculation
function calculateTotal() {

validateForm();

togglecountyifstatehi();

// calculate monthly Gal by monthly miles driven by avg. MPG
var GalPerMonth = getMiles() / getMPG();

var RCperMilesresult=0;

if ($('#state').val() == 'hawaii') {
var comb_hi_county_state = getCountyPrice() + getStatePrice();
var comb_hi_RC_county_state = getCountyRCPrice() + getStateRCPrice();
var gasPrice = GalPerMonth * comb_hi_county_state;
var RCgasPrice = getMiles() * comb_hi_RC_county_state;
RCperMilesresult = comb_hi_RC_county_state;
var statewcountytablename = "State + County";
}
else {
var gasPrice = GalPerMonth * getStatePrice();
RCperMilesresult = getStateRCPrice();
var RCgasPrice = getMiles() * RCperMilesresult;
var statewcountytablename = "State";
}

// adjust EV for WA fee
if (getMPGtype() == 'MPGe' && $('#state').val() == 'washington') {
gasPrice=EVfeeWashington;
}

// calculate Federal Gas Tax
var federalgastax = GalPerMonth * currentfederalgastax;

var totalgaswfed = federalgastax + gasPrice;
var totalRCwfed = federalgastax + RCgasPrice;


var rcvsgasresult=0;
var rcvsgasresultdiff=0;
if (RCgasPrice > gasPrice) {
rcvsgasresult = "more than";
rcvsgasresultdiff=RCgasPrice - gasPrice;
rcvsgasresultdiff=' $'+roundclean(rcvsgasresultdiff,2);
} else if (RCgasPrice == gasPrice) {
  rcvsgasresult = "equal to";
rcvsgasresultdiff=' ';
} else if (RCgasPrice < gasPrice) {
  rcvsgasresult = "less than";
rcvsgasresultdiff=gasPrice - RCgasPrice;
rcvsgasresultdiff=' $'+roundclean(rcvsgasresultdiff,2);
}

var gasPricechecktype=0;
var gasPricechecktypeFed=0;
var gasPricechecktypeFedTotal=0;
var RCgasPricechecktypeFedTotal=0;
if ( getMPGtype() == 'MPGe' && $('#state').val() == 'washington') { // adjust EV for WA fee
gasPricechecktype = '$'+EVfeeWashington+' fee*';
gasPricechecktypeFed = 'Fully-electric vehicle';
gasPricechecktypeFedTotal = '$'+EVfeeWashington+' fee*';
RCgasPricechecktypeFedTotal = ' $'+roundclean(RCgasPrice,2);
//rcvsgasresult = "more than";
//rcvsgasresultdiff=' $'+roundclean(RCgasPrice,2);
} else if ( getMPGtype() == 'MPGe') {
gasPrice=0;
gasPricechecktype = 'Fully-electric vehicle';
gasPricechecktypeFed = 'Fully-electric vehicle';
gasPricechecktypeFedTotal = 'Fully-electric vehicle';
RCgasPricechecktypeFedTotal = ' $'+roundclean(RCgasPrice,2);
rcvsgasresult = "more than";
rcvsgasresultdiff=' $'+roundclean(RCgasPrice,2);
} else {
gasPricechecktype = ' $'+roundclean(gasPrice,2);
gasPricechecktypeFed = ' $'+roundclean(federalgastax,2);
gasPricechecktypeFedTotal = ' $'+roundclean(totalgaswfed,2);
RCgasPricechecktypeFedTotal = ' $'+roundclean(totalRCwfed,2);
}

// create results for optional EVtoggle
var rcvsgasresult_EVtoggle=0;
var rcvsgasresultdiff_EVtoggle=0;
var gasPrice_EVtoggle=0;
var isEVfee='';
if ($('#state').val() == 'washington') {
gasPrice_EVtoggle=EVfeeWashington;
isEVfee=' fee*';
}
if (RCgasPrice > gasPrice_EVtoggle) {
rcvsgasresult_EVtoggle = "more than";
rcvsgasresultdiff_EVtoggle=RCgasPrice - gasPrice_EVtoggle;
rcvsgasresultdiff_EVtoggle=' $'+roundclean(rcvsgasresultdiff_EVtoggle,2);
gasPrice_EVtoggle = ' $'+roundclean(gasPrice_EVtoggle,2)+''+isEVfee;
} else if (RCgasPrice == gasPrice_EVtoggle) {
  rcvsgasresult_EVtoggle = "equal to";
rcvsgasresultdiff_EVtoggle=' ';
gasPrice_EVtoggle = ' $'+roundclean(gasPrice_EVtoggle,2)+''+isEVfee;
} else if (RCgasPrice < gasPrice_EVtoggle) {
  rcvsgasresult_EVtoggle = "less than";
rcvsgasresultdiff_EVtoggle=gasPrice_EVtoggle - RCgasPrice;
rcvsgasresultdiff_EVtoggle=' $'+roundclean(rcvsgasresultdiff_EVtoggle,2);
gasPrice_EVtoggle = ' $'+roundclean(gasPrice_EVtoggle,2)+''+isEVfee;
}

if( getMiles() == 0 || getMPG() == 0 || getStatePrice() == 0 || calc_form.valid() == 0) {
hideTotal();
} else if ($('#state').val() == 'hawaii' && $('#hi-county').val() == 'select' || calc_form.valid() == 0) {
hideTotal();
}  else {
$('#totalPrice').html("<div class='table-responsive-js'><table class='table table-striped table-bordered table-hover'><tr><th></th><th>Gas Tax</th><th>RUC Tax</th><tr><tr><th>"+statewcountytablename+"</th><td>"+gasPricechecktype+"</td><td>$"+roundclean(RCgasPrice,2)+"</td></tr><tr><th>Federal</th><td>"+gasPricechecktypeFed+"</td><td>"+gasPricechecktypeFed+"</td></tr><tr><th>Total</th><td>"+gasPricechecktypeFedTotal+"</td><td>"+RCgasPricechecktypeFedTotal+"</td></tr><tr><td colspan='3'><p>Under a State RUC of $"+rctaxroundclean(RCperMilesresult,4)+" per mile, your monthly State RUC would be"+rcvsgasresultdiff+" "+rcvsgasresult+" the current State Gas Tax structure.</p></td></tr></tbody></table></div>");

if (getMPGtype() != 'MPGe'){
  $('#totalPriceEVtoggle').html('<a role="button" data-toggle="collapse" href="#EVcollapse" aria-expanded="false" aria-controls="EVcollapse">Compare to a Fully-electric vehicle</a>');
  $('#totalPriceEVcompare').html("<h4><strong>How Much A Fully-Electric Vehicle Would Pay:</strong></h4><div class='table-responsive-js'><table class='table table-striped table-bordered table-hover'><tr><th></th><th>Gas Tax</th><th>RUC Tax</th><tr><tr><th>"+statewcountytablename+"</th><td>"+gasPrice_EVtoggle+"</td><td>$"+roundclean(RCgasPrice,2)+"</td></tr><tr><th>Federal</th><td>$0.00</td><td>"+gasPricechecktypeFed+"</td></tr><tr><th>Total</th><td>"+gasPrice_EVtoggle+"</td><td>"+RCgasPricechecktypeFedTotal+"</td></tr><tr><td colspan='3'><p>With a fully-electric vehicle, under a State RUC of $"+rctaxroundclean(RCperMilesresult,4)+" per mile, your monthly State RUC would be"+rcvsgasresultdiff_EVtoggle+" "+rcvsgasresult_EVtoggle+" the current State Gas Tax structure.</p></td></tr></tbody></table></div>");
}
}
}

function IsPostiveInteger(n) {
  var n = new Number(n);
  return !isNaN(n) && n===parseInt(n,10) && n>0;
}

function hideTotal() {
$('#totalPrice').html("<div class='table-responsive-js'><table class='table table-striped table-bordered table-hover'><tbody><tr><td colspan='3'><h4>Please enter your selection for Location, Mileage, and your vehicle's MPG in order to see your results.</h4></td></tr></tbody></table></div>");
$('#totalPriceEVtoggle').html('');
$('#totalPriceEVcompare').html('');
}

function roundclean(e, t) {
    var val_clean = Number(Math.round(e + "e" + t) + "e-" + t);
    return val_clean.toFixed(2);
  }

function rctaxroundclean(e, t) {
    var val_clean = Number(Math.round(e + "e" + t) + "e-" + t);
    return val_clean.toFixed(4);
  }

function formatNumber (num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

// toggle to #radio_2 for MPG lookup
function toggleMpgTypeRadio(){
  $( "#radio_2" ).click();
}

// toggle to lookup vehicle's MPG using fuel economy API
function toggleMpgType(){
    $("#radio_1, #radio_2").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#combMpgRow').show();
            $('#cityMpgRow').hide();
            calculateTotal();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#cityMpgRow').show();
            $('#combMpgRow').hide();
            calculateTotal();
        }
    });
}

// check if Hawaii is selected, show Hawaii counties if true
function togglecountyifstatehi(){
if ($('#state').val() == 'hawaii') {
  $('.hi-county-field').removeClass('hide');
}
else {
$('.hi-county-field').addClass('hide');
}
}
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

	We recommend that you utilize the iFrame embedded version of this calculator. For the instructions here: https://www.rucwest.org/portal/member-resources/using-ruc-calculator/

	If you’d prefer to utilize the manual code download method, please read the following notes.

	Notes:
	• After downloading code, copy the HTML from the index.html file into the area of the website where you would like to feature the calculator.
	• The calculator is utilizing Bootstrap (v3.3.7) stylesheet and JavaScript. If you are already using Bootstrap on your website, you can remove those two resources. However, if you are not, you will likely need to load Bootstrap on your website to utilize the calculator as currently designed.
	• Much like including Bootstrap in the calculator, you will need to load jQuery on you website in order to make the calculator function. If you are already loading jQuery on your site, you may be able to remove that resource. If you are not, you will need to keep the jQuery resource. We recommend using the latest stable release of jQuery v1, v2, or v3.
	• If the calendar needs to be updated, you can manually change the values used in the calculations. Look ‘// // START -- Variable that can be updated -- START // //’ (around line 602).
	• Otherwise, if the calculator needs to be updated, please contact RUC West with the new gas tax and/or RUC tax information for your state.