function checkboxAge() {
    var chk_ceil = document.getElementById("chxboxAge");
    if (chk_ceil.checked == true) {
        screenspaceErr(true)
        var e = document.getElementById("cities");
        var value = e.value;
        BuildingAGE(value);
    } else {
      
        removebuildings();
        
 
    }
  
  };


//StuttgartLocal
function BuildingAGE(value) {
    screenspaceErr(true)
    var Framework = vcs.vcm.Framework.getInstance();
    var layers = Framework.getLayers();
  
    var layerIndexRosenstein
    var layernameRosenstein = [value]
    var frameworkZus = vcs.vcm.Framework.getInstance();
    var layersZus = frameworkZus.getLayers();
    for (var i = 0; i < layersZus.length; i++) {
      var layerst = layersZus[i];
      if (layernameRosenstein.indexOf(layerst.name) >= 0) {
        layerIndexRosenstein = i
      }
    }
    var layerIndexPart
    var layernamePart4 = [value]
    var frameworkPart4 = vcs.vcm.Framework.getInstance();
    var layersPart4 = frameworkPart4.getLayers();
    for (var i = 0; i < layersPart4.length; i++) {
      var layerPart4 = layersPart4[i];
      if (layernamePart4.indexOf(layerPart4.name) >= 0) {
        layerPart4.activate(true);
      }
    }

    var layernamePart2 = ["WMS layer"]
    var frameworkPart2 = vcs.vcm.Framework.getInstance();
    var layersPart2 = frameworkPart2.getLayers();
    for (var i = 0; i < layersPart2.length; i++) {
      var layerPart2 = layersPart2[i];
      if (layernamePart2.indexOf(layerPart2.name) >= 0) {
        layerPart2.activate(false);
      }
    }

    var layernamePart3 = ["Openstreetmap layer"]
    var frameworkPart3 = vcs.vcm.Framework.getInstance();
    var layersPart3 = frameworkPart3.getLayers();
    for (var i = 0; i < layersPart3.length; i++) {
      var layerPart3 = layersPart3[i];
      if (layernamePart3.indexOf(layerPart3.name) >= 0) {
        layerPart3.activate(true);
      }
    }
    
  
    //citygml_year_of_construction
  
    var layer2 = layers[layerIndexRosenstein];
    var tileset = layer2.cesium3DTileset;
    if (tileset) {
      tileset.style = new Cesium.Cesium3DTileStyle({
        color: {
          conditions: [
            ["Number(${citygml_year_of_construction}) < 1900", "color('#f7fbff')"],
            ["Number(${citygml_year_of_construction}) <= 1915", "color('#deebf7')"],
            ["Number(${citygml_year_of_construction}) <= 1930", "color('#c6dbef')"],
            ["Number(${citygml_year_of_construction}) <= 1945", "color('#9ecae1')"],
            ["Number(${citygml_year_of_construction}) <= 1960", "color('#6baed6')"],
            ["Number(${citygml_year_of_construction}) <= 1975", "color('#4292c6')"],
            ["Number(${citygml_year_of_construction}) <= 1990", "color('#2171b5')"],
            ["Number(${citygml_year_of_construction}) <= 2005", "color('#08519c')"],
            ["Number(${citygml_year_of_construction}) <= 2020", "color('#08306b')"],
            ["true", "color('#008055')"]
          ],
        },
      });
  
    }
  
  // StuttgartPart
    var layerIndexPart
    var layernamePart = ["StuttgartPart"]
    var frameworkPart = vcs.vcm.Framework.getInstance();
    var layersPart = frameworkPart.getLayers();
    for (var i = 0; i < layersPart.length; i++) {
      var layerPart = layersPart[i];
      if (layernamePart.indexOf(layerPart.name) >= 0) {
        layerPart.activate(false);
      }
    }
  
    // layer3 = layersPart[layerIndexPart];
    // var tilesetPart = layer3.cesium3DTileset;
    // if (tilesetPart) {
    //   tilesetPart.style = new Cesium.Cesium3DTileStyle({
    //     color: {
    //       conditions: [
    //         ["${citygml_year_of_construction} === 'DEBW522AA0001fd8a'", "color('#000000FF')"],
    //         ["${gml_id} === 'DEBW522AA00016448'", "color('#000000FF')"],
    //         ["true", "color('#000000FF')"],
    //       ],
    //     },
    //   });
    // }
  
    // ----------why does this not work?
    // for (i = 0; i < id.length - 1; i++){
    //   idtext = '' + id[i]
    //   layer.highlight({idtext:Cesium.Color.fromCssColorString("#BB8FCE")})
    //   console.log("layer.highlight({" + idtext + ":Cesium.Color.fromCssColorString('#BB8FCE')})")
    // }
  
  }


  var stepSlider = document.getElementById('slider-step');

noUiSlider.create(stepSlider, {
    start: [1900],
    step: 1,
    range: {
        'min': [1900],
        'max': [2020]
    }
});

var stepSliderValueElement = document.getElementById('slider-step-value');

stepSlider.noUiSlider.on('update', function (values, handle) {
    stepSliderValueElement.innerHTML = "Gebäude gebaut vor: " + parseInt(values[handle]);
    BuildingAGEdynamic(parseFloat(values[handle]))
});





function BuildingAGEdynamic(age) {
  var e = document.getElementById("cities");
  var value = e.value;
    screenspaceErr(true)
    var layernamePart4 = [value]
    var frameworkPart4 = vcs.vcm.Framework.getInstance();
    var layersPart4 = frameworkPart4.getLayers();
    for (var i = 0; i < layersPart4.length; i++) {
      var layerPart4 = layersPart4[i];
      if (layernamePart4.indexOf(layerPart4.name) >= 0) {
        layerPart4.activate(true);
      }
    }
    var Framework = vcs.vcm.Framework.getInstance();
    var layers = Framework.getLayers();
  // StuttgartLocal
    var layerIndexRosenstein
    var layernameRosenstein = [value]
    var frameworkZus = vcs.vcm.Framework.getInstance();
    var layersZus = frameworkZus.getLayers();
    for (var i = 0; i < layersZus.length; i++) {
      var layerst = layersZus[i];
      if (layernameRosenstein.indexOf(layerst.name) >= 0) {
        layerIndexRosenstein = i
      }
    }
    var layernamePart2 = ["WMS layer"]
    var frameworkPart2 = vcs.vcm.Framework.getInstance();
    var layersPart2 = frameworkPart2.getLayers();
    for (var i = 0; i < layersPart2.length; i++) {
      var layerPart2 = layersPart2[i];
      if (layernamePart2.indexOf(layerPart2.name) >= 0) {
        layerPart2.activate(false);
      }
    }
  
  
    var layer2 = layers[layerIndexRosenstein];
    var tileset = layer2.cesium3DTileset;
    if (tileset) {
      tileset.style = new Cesium.Cesium3DTileStyle({
        color: {
          conditions: [
            ["Number(${citygml_year_of_construction}) <= "+ age + "", "color('#292a2e')"],
            ["true", "color('#B7D9B1','0')"]
          ],
        },
      });
  
    }
  
  
    var layerIndexPart
    var layernamePart = ["StuttgartPart"]
    var frameworkPart = vcs.vcm.Framework.getInstance();
    var layersPart = frameworkPart.getLayers();
    for (var i = 0; i < layersPart.length; i++) {
      var layerPart = layersPart[i];
      if (layernamePart.indexOf(layerPart.name) >= 0) {
        layerPart.activate(false);
      }
    }}


function screenspaceErr(tf) {
  var e = document.getElementById("cities");
  var value = e.value;
    var Framework = vcs.vcm.Framework.getInstance();
    var layers = Framework.getLayers();
  // StuttgartLocal
    var layerIndexRosenstein
    var layernameRosenstein = [value]
    var frameworkZus = vcs.vcm.Framework.getInstance();
    var layersZus = frameworkZus.getLayers();
    for (var i = 0; i < layersZus.length; i++) {
      var layerst = layersZus[i];
      if (layernameRosenstein.indexOf(layerst.name) >= 0) {
        layerIndexRosenstein = i
      }
    }
    var layernamePart2 = ["WMS layer"]
    var frameworkPart2 = vcs.vcm.Framework.getInstance();
    var layersPart2 = frameworkPart2.getLayers();
    for (var i = 0; i < layersPart2.length; i++) {
      var layerPart2 = layersPart2[i];
      if (layernamePart2.indexOf(layerPart2.name) >= 0) {
        layerPart2.activate(false);
      }
    }
  
    var layer2 = layers[layerIndexRosenstein];
    if (layer2 == undefined){

    } else {
        if(tf == true){
        layer2.screenSpaceErrorMobile = 1
        layer2.screenSpaceError = 1
    } else {
        layer2.screenSpaceErrorMobile = 32
        layer2.screenSpaceError = 16
    }
    }
    
    


}
var stopvar = false
function sliderautoMoveStop(){
        stopvar = true
     }


let stoptheAuto = document.getElementById('stopButton');
function sliderautoMove() {
    stopvar = false
    const interval = setInterval(function() {
        var valueold = parseInt(stepSlider.noUiSlider.get());
        stepSlider.noUiSlider.set(valueold + 1);
        console.log(valueold)
        stepSliderValueElement.innerHTML = "Gebäude gebaut vor: " + parseInt(stepSlider.noUiSlider.get());
        if(valueold >=2019) {
            clearInterval(interval);
        } 
        if (stopvar == true){
        clearInterval(interval);
      }
      }, 100);
     
		
	
     
    //  clearInterval(interval);
}
function sliderautoMoveReset() {
        stopvar = true
        stepSlider.noUiSlider.set(1900);
        
        stepSliderValueElement.innerHTML = "Gebäude gebaut vor: " + parseInt(stepSlider.noUiSlider.get());
        removebuildings();
     
    //  clearInterval(interval);
}