var removeSilhouette;

function pvAnalysis() {
 // HTML overlay for showing feature name on mouseover
 var nameOverlay = document.createElement("div");
 viewer.container.appendChild(nameOverlay);
 nameOverlay.setAttribute("id", "infotxt");
 nameOverlay.className = "backdrop";
 nameOverlay.style.display = "none";
 nameOverlay.style.position = "absolute";
 nameOverlay.style.bottom = "0";
 nameOverlay.style.left = "0";
 nameOverlay.style["pointer-events"] = "none";
 nameOverlay.style.padding = "4px";
 nameOverlay.style.backgroundColor = "black";
 nameOverlay.style.color = "white";
 nameOverlay.style.font = "italic 12px sans-serif";
 // var for creating chart
 var chartDataPolygonID;
 var chartDataPVJan;
 var chartDataPVFeb;
 var chartDataPVMar;
 var chartDataPVApr;
 var chartDataPVMai;
 var chartDataPVJun;
 var chartDataPVJul;
 var chartDataPVAug;
 var chartDataPVSep;
 var chartDataPVOkt;
 var chartDataPVNov;
 var chartDataPVDez;
 var chartDataPVGEBID;
 var chartDataPVYield;
 // Information about the currently selected feature
 var selected = {
  feature: undefined,
  originalColor: new Cesium.Color()
 };
 // An entity object which will hold info about the currently selected feature for infobox display
 var selectedEntity = new Cesium.Entity();
 // Get default left click handler for when a feature is not picked on left click
 clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
 // Silhouettes are supported
 var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
 silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
 silhouetteBlue.uniforms.length = .01;
 silhouetteBlue.selected = [];
 var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
 silhouetteGreen.uniforms.color = Cesium.Color.LIME;
 silhouetteGreen.uniforms.length = .01;
 silhouetteGreen.selected = [];
 removeSilhouette = viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([ silhouetteBlue, silhouetteGreen ]));
 // Silhouette a feature blue on hover.
 viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
  // If a feature was previously highlighted, undo the highlight
  silhouetteBlue.selected = [];
  // Pick a new feature
  var pickedFeature = viewer.scene.pick(movement.endPosition);
  if (!Cesium.defined(pickedFeature)) {
   nameOverlay.style.display = "none";
   return;
  }
  // A feature was picked, so show it's overlay content
  nameOverlay.style.display = "block";
  nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px";
  nameOverlay.style.left = movement.endPosition.x + "px";
  var name = pickedFeature.getProperty("PVpotentialyield");
  nameOverlay.textContent = "[MWh/a]: " + name;
  // Highlight the feature if it's not already selected.
  if (pickedFeature !== selected.feature) {
   silhouetteBlue.selected = [ pickedFeature ];
  }
 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 // Silhouette a feature on selection and show metadata in the InfoBox.
 viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
  // If a feature was previously selected, undo the highlight
  silhouetteGreen.selected = [];
  // Pick a new feature
  var pickedFeature = viewer.scene.pick(movement.position);
  /* if (!Cesium.defined(pickedFeature)) {
     clickHandler(movement);
     return;
     }
  */	 
  // Select the feature if it's not already selected
  if (silhouetteGreen.selected[0] === pickedFeature) {
   return;
  }
  // Save the selected feature's original color
  var highlightedFeature = silhouetteBlue.selected[0];
  if (pickedFeature === highlightedFeature) {
   silhouetteBlue.selected = [];
  }
  // Highlight newly selected feature
  silhouetteGreen.selected = [ pickedFeature ];
  chartDataPolygonID = pickedFeature.getProperty("PolygonID");
  $.getJSON("./data/pvpotential.json", function(chartData) {
   $.each(chartData, function(i, item) {
    if (chartData[i].BuildingSurfaceID == chartDataPolygonID) {
     chartDataPVJan = chartData[i].Januaryirradianceonroofplane;
     chartDataPVFeb = chartData[i].Februaryirradianceonroofplane;
     chartDataPVMar = chartData[i].Marchirradianceonroofplane;
     chartDataPVApr = chartData[i].Aprilirradianceonroofplane;
     chartDataPVMai = chartData[i].Mayirradianceonroofplane;
     chartDataPVJun = chartData[i].Juneirradianceonroofplane;
     chartDataPVJul = chartData[i].Julyirradianceonroofplane;
     chartDataPVAug = chartData[i].Augustirradianceonroofplane;
     chartDataPVSep = chartData[i].Septemberirradianceonroofplane;
     chartDataPVOkt = chartData[i].Octoberirradianceonroofplane;
     chartDataPVNov = chartData[i].Novemberirradianceonroofplane;
     chartDataPVDez = chartData[i].Decemberirradianceonroofplane;
     chartDataPVGEBID = chartData[i].BuildingID;
     chartDataPVYield = chartData[i].PVpotentialyield;
     clickvbtn();
    }
   });
  });
 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 //Open Fancybox and include ApexChart
 function clickvbtn() {
  //Create Diagram
  var options = {
   series: [ {
    name: "[W/m²]",
    data: [ chartDataPVJan, chartDataPVFeb, chartDataPVMar, chartDataPVApr, chartDataPVMai, chartDataPVJun, chartDataPVJul, chartDataPVAug, chartDataPVSep, chartDataPVOkt, chartDataPVNov, chartDataPVDez ]
   } ],
   chart: {
    type: "area"
   },
   stroke: {
    width: 7,
    curve: "smooth"
   },
   xaxis: {
    categories: [ "Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez" ],
    title: {
     text: "Monat"
    }
   },
   yaxis: {
    title: {
     text: "Strahlungsleistung [W/m²]"
    }
   },
   title: {
    text: chartDataPVGEBID,
    align: "left",
    style: {
     fontSize: "16px",
     color: "#666"
    }
   },
   subtitle: {
    text: chartDataPolygonID + " - Potenzialertrag: " + chartDataPVYield + " MWh/a",
    align: "left",
    style: {
     fontSize: "12px",
     fontWeight: "normal",
     color: "#9699a2"
    }
   },
   fill: {
    type: "gradient",
    gradient: {
     shadeIntensity: 1,
     opacityFrom: .7,
     opacityTo: .9,
     stops: [ 0, 90, 100 ]
    }
   }
  };
  var chart = new ApexCharts(document.querySelector("#chart"), options);
  chart.render();
  //View Graphic
  $("#vbtn").trigger("click");
 }
}
//Deactivate Function
function deactivatePvAnalysis() {
 viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
 viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 viewer.scene.postProcessStages.remove(removeSilhouette);
 $("#infotxt").remove();
}