var personCount = 1;
var vehicleCount = 0;

function updatePersonForm(currentPersonCount) {
  if(personCount > currentPersonCount) {
    for(i=personCount;i>currentPersonCount;i=i-1) {
      $('#person' + i).remove();
      $('#person' + i + '_separator').remove();
    }
  } else if(personCount < currentPersonCount) {
    for(i=personCount;i<currentPersonCount;i=i+1) {
      $('#persons > tbody:last').append('<tr id="person' + (i+1) + '_separator"><td colspan="2"><div style="font-size:0px;line-height:0px;border-top:1px dotted #adadad;margin-top:5px;margin-bottom:5px;"></div></td></tr><tr id="person' + (i+1) + '"><td style="width:200px">' + (i+1) + '. Person (Alter in Jahren):</td><td><input type="text" name="personAge[]" style="width:300px" /></td></tr>');
    }
  }
  
  personCount = currentPersonCount;
}

function updateVehicleForm(currentVehicleCount) {
  if(vehicleCount > currentVehicleCount) {
    for(i=vehicleCount;i>currentVehicleCount;i=i-1) {
      $('#vehicle' + i + '_type').remove();
      $('#vehicle' + i + '_length').remove();
      $('#vehicle' + i + '_height').remove();
      $('#vehicle' + i + '_separator').remove();
    }
  } else if(vehicleCount < currentVehicleCount) {
    for(i=vehicleCount;i<currentVehicleCount;i=i+1) {
      $('#vehicles > tbody:last').append('<tr id="vehicle' + (i+1) + '_separator"><td colspan="2"><div style="font-size:0px;line-height:0px;border-top:1px dotted #adadad;margin-top:5px;margin-bottom:5px;"></div></td></tr><tr id="vehicle' + (i+1) + '_type"><td style="width:200px">' + (i+1) + '. Fahrzeug:</td><td><select name="vehicleType[]" style="width:300px"><option>PKW</option><option>Wohnmobil</option><option>Minibus</option><option>Motorrad</option><option>Motorrad mit Beiwagen</option><option>Gepäckanhänger</option><option>Bootsanhänger</option><option>Wohnanhänger</option></select></td></tr><tr id="vehicle' + (i+1) + '_length"><td style="width:200px"></td><td><input type="text" name="vehicleLength[]" style="width:300px" /></td></tr><tr id="vehicle' + (i+1) + '_height"><td style="width:200px"></td><td><input type="text" name="vehicleHeight[]" style="width:300px" /></td></tr>');
      $('#vehicle' + (i+1) + '_length input').prompt('Länge des Fahrzeugs in cm');
      $('#vehicle' + (i+1) + '_height input').prompt('Höhe des Fahrzeugs in cm');
    }
  }

  vehicleCount = currentVehicleCount;
}

$(document).ready(function() {
  updateVehicleForm(vehicleCount);

  $('#personCount').change(function() { updatePersonForm(parseInt($(this).val())) });
  $('#vehicleCount').change(function() { updateVehicleForm(parseInt($(this).val())) });
});