<script type="text/javascript"> 
function validateGasCalcForm(frm)
{
   distance=frm.distanceValue.value;
   mileage=frm.mileageValue.value;
   price=frm.priceValue.value;   

   if(distance=="" )
   {
      alert('Error: all fields are required!');
      frm.distanceValue.focus();
      return false;
   }
   if(mileage=="" )
   {
      alert('Error: all fields are required!');
      frm.mileageValue.focus();
      return false;
   }
   if(price=="" )
   {
      alert('Error: all fields are required!');
      frm.priceValue.focus();
      return false;
   }
   return;
}

function SetAllIndex(indexNum,formNme,fldA,fldB,fldC)
{
   document.getElementById(fldA).selectedIndex=indexNum;
   document.getElementById(fldB).selectedIndex=indexNum;
   document.getElementById(fldC).selectedIndex=indexNum;

   return;
} 

function IsNumber(fldId)
{
  var fld=document.getElementById(fldId).value;

  if(isNaN(fld))
  {
      document.getElementById(fldId).value=fld.substring(0, fld.length-1);
      var newvalue=document.getElementById(fldId).value;
      IsNumber(fldId);
  }

  return;   
}
</script>

<style type="text/css">
.gascalc_div
{
   font-family:verdana, arial, sans-serif;
   border:2pt solid #000;
   padding:25px;
   width:340px;
   margin:auto;
}

.gascalc_div label
{
   display:block;
   float:left;
   width:80px;      
}
.label
{
   display:inline;
   float:none;
   width:75px;    
   font-size:11px
}
</style>

<div class="gascalc_div">
	<form method="post" name=form1 onsubmit="return validateForm(this);">
	<p style="clear:both;"> <label>Distance:</label>
						<select name=distance id=select onchange="SetAllIndex(this.selectedIndex,'form1','select','select2','select3');" >
						<option value=m <?php if($_SESSION["calc_gas_distance"]=="m") echo "selected"; ?> >Miles</option>
						<option value=km <?php if($_SESSION["calc_gas_distance"]=="km") echo "selected"; ?> >Kilometers</option>
						</select>
						<input type="text" name="distanceValue" id="distanceValue" size=7 onkeyup="IsNumber(this.id)" value="<?php echo $_SESSION['calc_gas_distanceValue'];?>" ></p>
	<p style="clear:both;"><label>Mileage:</label>
					<select name=mileage id=select2 onchange="SetAllIndex(this.selectedIndex,'form1','select','select2','select3');">
						<option value="gpk" <?php if($_SESSION["calc_gas_mileage"]=="mpg") echo "selected"; ?> >Gallons per 100 Miles</option>
						<option value="lpk" <? if($_SESSION["calc_gas_mileage"]=="lpk") echo "selected"; ?> >Litre per 100 KM</option>
						</select>
						<input type="text" name="mileageValue" size=7 id="mileageValue" onkeyup="IsNumber(this.id)" value="<?php echo $_SESSION['calc_gas_mileageValue'];?>" ></p>
	<p style="clear:both;"><label>Price:</label>
					<select name=price id=select3 onchange="SetAllIndex(this.selectedIndex,'form1','select','select2','select3');">
						<option value="gallonPrice" <?php if($_SESSION["calc_gas_price"]=="gallonPrice") echo "selected"; ?> >Per Gallon</option>
						<option value="litrePrice" <?php if($_SESSION["calc_gas_price"]=="litrePrice") echo "selected"; ?> >Per Litre</option>
						</select>
						
						<input type="text" name="priceValue" size=7 id="priceValue" onkeyup="IsNumber(this.id)" value="<?php echo $_SESSION['calc_gas_priceValue'];?>" ></p>
                        
      <p style="clear:both;"><label>Currency:</label> <select name="currency">
     <option value="$" <?php if($_SESSION['calc_gas_currency']=='$') echo "selected='true'";?>>$</option>
     <option value="&euro;" <?php if($_SESSION['calc_gas_currency']=='€') echo "selected='true'";?>>&euro;</option>
     <option value="&pound;" <?php if($_SESSION['calc_gas_currency']=='£') echo "selected='true'";?>>&pound;</option>
     <option value="&yen;" <?php if($_SESSION['calc_gas_currency']=='Â¥') echo "selected='true'";?>>&yen;</option>
     </select> </p>
                        
	
	<div style="text-align:center;clear:both;"><input type="submit" value="Calculate!"></div>
	<input type="hidden" name="gascalc_ok" value="1">
	</form>	
    
    <?php if(!empty($_POST['gascalc_ok'])):?>
    <p style="clear:both;"> <?php echo $message; ?> </p>
    <?php endif;?>
</div>