var useimperical = false;

function calcLifetime(range, cycles, workdistance) {
  var lifetime = cycles*range/(workdistance*2)/(365*(5/7));
  return Math.round(lifetime * 10) / 10
}

function updateLifetime() {
  var range = parseInt(rangeslider.value);
  var cycles = parseInt(cyclesslider.value);
  var workdistance = parseInt(workdistanceslider.value);
  var lt = calcLifetime(range, cycles, workdistance);
  document.getElementById("lifetime").innerHTML = lt;
  return lt;
}

var rangeslider = document.getElementById("range");
rangeslider.step = "5"
var rangevalue = document.getElementById("rangevalue");

var cyclesslider = document.getElementById("cycles");
cyclesslider.step = "25"; 
var cyclesvalue = document.getElementById("cyclesvalue");

var workdistanceslider = document.getElementById("workdistance");
var workdistancevalue = document.getElementById("workdistancevalue");

var costslider = document.getElementById("cost");
costslider.step = "25";
var costvalue = document.getElementById("costvalue");

var costperyear = document.getElementById("costperyear");

function rendervalues(useimpericalunits) {
  var distanceunit = useimperical ? " miles" : " km";
  var monetaryunit = useimperical ? " USD" : " EUR";
  
  rangevalue.innerHTML = rangeslider.value + distanceunit; 
  cyclesvalue.innerHTML = cyclesslider.value + " cycles";
  workdistancevalue.innerHTML = workdistanceslider.value + distanceunit;
  costvalue.innerHTML = costslider.value + monetaryunit;
  costperyear.innerHTML = Math.round(parseInt(costslider.value) / updateLifetime()) + monetaryunit;
}
rendervalues(useimperical);

rangeslider.oninput = function() {
  rangevalue.innerHTML = this.value + " km";
  updateLifetime();
  updatecostperyear()
} 

cyclesslider.oninput = function() {
  cyclesvalue.innerHTML = this.value + " cycles";
  updateLifetime();
  updatecostperyear()
}

workdistanceslider.oninput = function() {
  workdistancevalue.innerHTML = this.value + " km";
  updateLifetime();
  updatecostperyear()
}

function onunitsclicked() {
  var useimpericalcheck = document.getElementById("useimperical");
  useimperical = useimpericalcheck.checked;  
  rendervalues(useimperical);
}

function updatecostperyear() {
   var monetaryunit = useimperical ? " USD" : " EUR";
   costperyear.innerHTML = Math.round(parseInt(costslider.value) / updateLifetime()) + monetaryunit;
}

costslider.oninput = function() {
  var monetaryunit = useimperical ? " USD" : " EUR";
  
  costvalue.innerHTML = this.value + monetaryunit;
  updatecostperyear()
}

updateLifetime();