var jdo = [];
var jco = [];
var jso = [];
var jko = [];
var jks = [];
var cables;
var stationID = 0;
var stationInv = 0;
var anzahlStationen = 0;
var anzahlCable = 0;
var stageXofData = 0;
var stageYofData = 0;
var stageXofX = 0;
var stageYofY = 0;

var mueStation;
var uStation;

//Konva.hitOnDragEnabled = true;
Konva.pixelRatio = 1;

var stage = new Konva.Stage({
    container: 'container',
    width: stageWidth,
    height: stageHeight,
    draggable: true,
    x: stageXofX,
    y: stageYofY,
    offsetY: stageYofData,
    offsetX: stageXofData
  });

  if (localStorage.getItem('Position')) {
    var pos = localStorage.getItem('Position');
    pos = pos.replace('"x"','');
    pos = pos.replace('"y"','');
    pos = pos.replace('{','');
    pos = pos.replace('}','');
    pos = pos.replace(':','');
    pos = pos.replace(':','');
    pos = pos.split(',');
    //console.log(pos[0]+' - '+pos[1]);
    /*var sca = localStorage.getItem('Scale');
    sca = sca.replace('"x"','');
    sca = sca.replace('"y"','');
    sca = sca.replace('{','');
    sca = sca.replace('}','');
    sca = sca.replace(':','');
    sca = sca.replace(':','');
    sca = sca.split(',');
    console.log(sca[0]+' - '+sca[1]);*/
    stage.position({
      x: parseInt(pos[0]),
      y: parseInt(pos[1])
    });
    stage.scale({
      //x: parseInt(sca[0]),
      //y: parseInt(sca[1])
      x: zoomStage,
      y: zoomStage
    });
  }
  else {
    stageYofData = stageHeight/mapStartOffsetTemp;
    stageXofData = -(displayWidth/2);
    var stageXofX = 0;
    var stageYofY = 0;
    stage.position({
      x: 0,
      y: 0
    });
    stage.offset({
      x: stageXofData,
      y: stageYofData
    });
  }

var layer = new Konva.Layer();

stage.container().style.backgroundColor = '#e3f9fc';
// Stationen
function getStationStatic(){
    var req = new XMLHttpRequest();
    req.open("GET", jsonStationURL, true);
    req.onreadystatechange = function(){
        if ( req.readyState == 4) {
            if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
                var returnData = req.responseText;
                console.log('Datentransfer -StationStatic- erfolgreich');
                jdo = JSON.parse(returnData);
                getServiceStatic();
        
            } else {
                console.log("Fehler; request.status = " + req.status);
               
            }
            req = null;
        };
    }
    req.send();
}

function getServiceStatic(){
  var req = new XMLHttpRequest();
  req.open("GET", jsonServiceStaticURL, true);

  req.onreadystatechange = function(){
      if ( req.readyState == 4) {
          if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
              var returnData = req.responseText;
              console.log('Datentransfer -ServiceStatic- erfolgreich');
              jso = JSON.parse(returnData);
              drawStaticMap();
      
          } else {
              console.log("Fehler; request.status = " + req.status);
              
          }
          req = null;
      };
  }
  req.send();
}
// KABEL
function getCableStatic(){
    var req = new XMLHttpRequest();
    req.open("GET", jsonCableURL, true);
    req.onreadystatechange = function(){
        if ( req.readyState == 4) {
            if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
                var returnData = req.responseText;
                console.log('Datentransfer -CableStatic- erfolgreich');
                jco = JSON.parse(returnData);
                getKueStatic();
        
            } else {
                console.log("Fehler; request.status = " + req.status);
               
            }
            req = null;
        };
    }
    req.timeout = 60000;
    req.send();
}

function getKueStatic(){
  var req = new XMLHttpRequest();
  req.open("GET", jsonKueURL, true);

  req.onreadystatechange = function(){
      if ( req.readyState == 4) {
          if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
              var returnData = req.responseText;
              console.log('Datentransfer -KUE Static- erfolgreich');
              jko = JSON.parse(returnData);
              getKueStatis();
      
          } else {
              console.log("Fehler; request.status = " + req.status);
              
          }
          req = null;
      };
  }
  req.send();
}

function getKueStatis(){
  var req = new XMLHttpRequest();
  req.open("GET", jsonKueStatusURL, true);

  req.onreadystatechange = function(){
      if ( req.readyState == 4) {
          if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
              var returnData = req.responseText;
              console.log('Datentransfer -KUE Statis- erfolgreich');
              jks = JSON.parse(returnData);
              drawCableMap();
      
          } else {
              console.log("Fehler; request.status = " + req.status);
              
          }
          req = null;
      };
  }
  req.send();
}

function drawStaticMap() {
    anzahlStationen = jdo.Points.length;
    // Namen schreiben    
    
    // Stationen zeichnen
    for(i=0;i<anzahlStationen;i++) {
        
	if (jdo.Points[i].X) {
        var xTemp = Math.round(parseInt(((jdo.Points[i].X)/skalierung)-minX)/displayFactor)-1;
        var yTemp = Math.round(parseInt((maxY-(jdo.Points[i].Y)/skalierung))/displayFactor)-1;
        var nameTemp = jdo.Points[i].Name;
        stationID = jdo.Points[i].IdL;
        stationInv = jdo.Points[i].Inv;

       // console.log(stationInv)
        // MS,ULAF,ECI
        if ((stationInv) === 7) {
          mueStation = new Konva.Group({
            x: xTemp,
            y: yTemp,
            id: "station"+stationID,
            //draggable: true,
          });
    
          mueStation.add(
           new Konva.Text({
            text: nameTemp,
            x: -(0.10*standardFontSize),
            y: (0.5/standardFontSize)-(standardMeldestationen/5),
            fontSize: standardFontSize/10,
            fill: 'black',
            align: 'center',
            })
          );
    
          mueStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: -(standardMeldestationen/5)+1,
              y: -(standardMeldestationen/5)+1,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station1f"+stationID
            })
          );
          mueStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: 1,
              y: -(standardMeldestationen/5)+1,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station2f"+stationID
            })
          );
          mueStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: -(standardMeldestationen/5)+1,
              y: 1,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station3f"+stationID
            })
          );
          mueStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: 1,
              y: 1,
              fill: 'lightgray',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station4f"+stationID
            })
          );
          mueStation.add(
            new Konva.Circle({
              x: 1,
              y: 1,
              radius: standardMeldestationen/10,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "stationCircle"+stationID
            })
          );

          layer.add(mueStation);

          if (document.getElementById("buttonStation").style.opacity > 0.6) {
            mueStation.show();
          } else {
            mueStation.hide();
          }

          // MUE Station Mouseover
          mueStation.on('mouseenter', function () {
            swapMouseOver = 1;
            var name = this.id();
            name = name.replace("station","");
            var DataPlus = "";
            //console.log("GROUP ID"+name);
            var anzahlStatis = statusData.Statis.length;
            //console.log("Stati Anzahl: "+anzahlStatis);
              for (var n = 0; n < anzahlStatis; n++) {
                
                if (statusData.Statis[n].IdL > 0) {
                    //console.log("Station: "+statusData.Statis[n].IdL+" Name: "+name);
                    if(statusData.Statis[n].IdL == name) {
                      var DataTemp = statusData.Statis[n].Me;
                      var ColorTemp = statusData.Statis[n].Co;
                      DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";  
                        
                    } 
                    //console.log("Data: "+DataPlus);  
                  }
  
                }
  
            stage.container().style.cursor = 'pointer';
            //console.log("Group Enter");
            var NameTemp = "";
            for (var i = 0; i < jdo.Points.length; i++){
              // look for the entry with a matching `code` value
              if (jdo.Points[i].IdL == name){
                 //console.log(jdo.Points[i].Name+" gefunden");
                 NameTemp = jdo.Points[i].Name;
              }
            }
  
            var scaleStageRatio = stage.scaleX();
            scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
            scaleStageRatio = scaleStageRatio;
            localStorage.setItem('zoomStage', scaleStageRatio);
  
            for (var m = 0; m < jdo.Points.length; m++){
              // look for the entry with a matching `code` value
              if (jdo.Points[m].IdL == name){
                 //console.log(jdo.Points[i].Name+" gefunden");
                 localStorage.setItem('xStage', jdo.Points[m].X);
                 localStorage.setItem('yStage', jdo.Points[m].Y);
              }
            }
  
            document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+NameTemp+"</h4>";
            document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";       
          });
  
          mueStation.on('mouseleave', function () {
            swapMouseOver = 0;
            stage.container().style.cursor = 'default';
          });
  
          mueStation.on('click', function () {
            var scaleStageRatio = stage.scaleX();
            scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
            scaleStageRatio = scaleStageRatio;
            localStorage.setItem('zoomStage', scaleStageRatio);
            var name = this.id();
            //console.log("CLICK"+name);
            //document.getElementById("mousovertext").innerHTML = "Click auf den Bereich - "+name;
            name = name.replace("station","");
            console.log("Click auf den Bereich mit der ID "+name);
  
            for (var m = 0; m < jdo.Points.length; m++){
              // look for the entry with a matching `code` value
              if (jdo.Points[m].IdL == name){
                 //console.log(jdo.Points[i].Name+" gefunden");
                 localStorage.setItem('xStage', jdo.Points[m].X);
                 localStorage.setItem('yStage', jdo.Points[m].Y);
              }
            }
            document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
            var Ziel = quellURL+"/talas5/Stations/Location.aspx?id="+name+"&b=1";
            window.location.href = Ziel;
          });

        }

        // MS,ECI
        if ((stationInv) === 5) {
          var meStation = new Konva.Group({
            x: xTemp,
            y: yTemp,
           // id: nameTemp,
            //draggable: true,
          });
    
          meStation.add(
           new Konva.Text({
            x: -(0.10*standardFontSize),
            y: (0.5/standardFontSize)-(standardMeldestationen/5),
            align: 'center',
            text: nameTemp,
            fontSize: standardFontSize/10,
            //fontFamily: 'Calibri',
            fill: 'black'
            })
          );
          meStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: -(standardMeldestationen/5)+1,
              y: -(standardMeldestationen/5)+1,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station1f"+stationID
            })
          );
          meStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: 1,
              y: -(standardMeldestationen/5)+1,
              fill: 'lightgray',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station2f"+stationID
            })
          );
          meStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: -(standardMeldestationen/5)+1,
              y: 1,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station3f"+stationID
            })
          );
          meStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: 1,
              y: 1,
              fill: 'lightgray',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station4f"+stationID
            })
          );
          meStation.add(
            new Konva.Circle({
              x: 1,
              y: 1,
              radius: standardMeldestationen/10,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "stationCircle"+stationID
            })
          );
          
          layer.add(meStation);

          if (document.getElementById("buttonStation").style.opacity > 0.6) {
            meStation.show();
          } else {
            meStation.hide();
          }

          // ME Station Mouseover
          meStation.on('mouseenter', function () {
            swapMouseOver = 1;
            var name = this.id();
            name = name.replace("station","");
            var DataPlus = "";
            //console.log("GROUP ID"+name);
            var anzahlStatis = statusData.Statis.length;
            //console.log("Stati Anzahl: "+anzahlStatis);
              for (var n = 0; n < anzahlStatis; n++) {
                
                if (statusData.Statis[n].IdL > 0) {
                    //console.log("Station: "+statusData.Statis[n].IdL+" Name: "+name);
                    if(statusData.Statis[n].IdL == name) {
                      var DataTemp = statusData.Statis[n].Me;
                      var ColorTemp = statusData.Statis[n].Co;
                      DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";  
                        
                    } 
                    //console.log("Data: "+DataPlus);  
                  }
  
                }
  
            stage.container().style.cursor = 'pointer';
            //console.log("Group Enter");
            var NameTemp = "";
            for (var i = 0; i < jdo.Points.length; i++){
              // look for the entry with a matching `code` value
              if (jdo.Points[i].IdL == name){
                 //console.log(jdo.Points[i].Name+" gefunden");
                 NameTemp = jdo.Points[i].Name;
              }
            }
  
            var scaleStageRatio = stage.scaleX();
            scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
            scaleStageRatio = scaleStageRatio;
            localStorage.setItem('zoomStage', scaleStageRatio);
  
            for (var m = 0; m < jdo.Points.length; m++){
              // look for the entry with a matching `code` value
              if (jdo.Points[m].IdL == name){
                 //console.log(jdo.Points[i].Name+" gefunden");
                 localStorage.setItem('xStage', jdo.Points[m].X);
                 localStorage.setItem('yStage', jdo.Points[m].Y);
              }
            }
  
            document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+NameTemp+"</h4>";
            document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";       
          });
  
          meStation.on('mouseleave', function () {
            swapMouseOver = 0;
            stage.container().style.cursor = 'default';
          });
  
          meStation.on('click', function () {
            var scaleStageRatio = stage.scaleX();
            scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
            scaleStageRatio = scaleStageRatio;
            localStorage.setItem('zoomStage', scaleStageRatio);
            var name = this.id();
            //console.log("CLICK"+name);
            //document.getElementById("mousovertext").innerHTML = "Click auf den Bereich - "+name;
            name = name.replace("station","");
            console.log("Click auf den Bereich mit der ID "+name);
  
            for (var m = 0; m < jdo.Points.length; m++){
              // look for the entry with a matching `code` value
              if (jdo.Points[m].IdL == name){
                 //console.log(jdo.Points[i].Name+" gefunden");
                 localStorage.setItem('xStage', jdo.Points[m].X);
                 localStorage.setItem('yStage', jdo.Points[m].Y);
              }
            }
            document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
            var Ziel = quellURL+"/talas5/Stations/Location.aspx?id="+name+"&b=1";
            window.location.href = Ziel;
          });

        }

        // MS,ECI Stationen
        if ((stationInv) === 3) {
          var mecStation = new Konva.Group({
            x: xTemp,
            y: yTemp,
            id: "station"+stationID
            //draggable: true,
          });
    
          mecStation.add(
           new Konva.Text({
            x: -(0.10*standardFontSize),
            y: (0.5/standardFontSize)-(standardMeldestationen/5),
            align: 'center',
            text: nameTemp,
            fontSize: standardFontSize/10,
            //fontFamily: 'Calibri',
            fill: 'black'
            })
          );
    
          mecStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: -(standardMeldestationen/5)+1,
              y: -(standardMeldestationen/5)+1,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station1f"+stationID
            })
          );
          mecStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: 1,
              y: -(standardMeldestationen/5)+1,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station2f"+stationID
            })
          );
          mecStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: -(standardMeldestationen/5)+1,
              y: 1,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station3f"+stationID
            })
          );
          mecStation.add(
            new Konva.Rect({
              width: standardMeldestationen/5,
              height: standardMeldestationen/5,
              x: 1,
              y: 1,
              fill: 'lightgray',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "station4f"+stationID
            })
          );
          mecStation.add(
            new Konva.Circle({
              x: 1,
              y: 1,
              radius: standardMeldestationen/10,
              fill: 'lightgray',
              stroke: 'black',
              strokeWidth: standardMeldestationen/100,
              id: "stationCircle"+stationID
            })
          );
         
          layer.add(mecStation);

          if (document.getElementById("buttonStation").style.opacity > 0.6) {
            mecStation.show();
          } else {
            mecStation.hide();
          }

          // MEC Station Mouseover
          mecStation.on('mouseenter', function () {
            swapMouseOver = 1;
            var name = this.id();
            name = name.replace("station","");
            var DataPlus = "";
            //console.log("GROUP ID"+name);
            var anzahlStatis = statusData.Statis.length;
            //console.log("Stati Anzahl: "+anzahlStatis);
              for (var n = 0; n < anzahlStatis; n++) {
                
                if (statusData.Statis[n].IdL > 0) {
                    //console.log("Station: "+statusData.Statis[n].IdL+" Name: "+name);
                    if(statusData.Statis[n].IdL == name) {
                      var DataTemp = statusData.Statis[n].Me;
                      var ColorTemp = statusData.Statis[n].Co;
                      DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";  
                        
                    } 
                    //console.log("Data: "+DataPlus);  
                  }
  
                }
  
            stage.container().style.cursor = 'pointer';
            //console.log("Group Enter");
            var NameTemp = "";
            for (var i = 0; i < jdo.Points.length; i++){
              // look for the entry with a matching `code` value
              if (jdo.Points[i].IdL == name){
                 //console.log(jdo.Points[i].Name+" gefunden");
                 NameTemp = jdo.Points[i].Name;
              }
            }
  
            var scaleStageRatio = stage.scaleX();
            scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
            scaleStageRatio = scaleStageRatio;
            localStorage.setItem('zoomStage', scaleStageRatio);
  
            for (var m = 0; m < jdo.Points.length; m++){
              // look for the entry with a matching `code` value
              if (jdo.Points[m].IdL == name){
                 //console.log(jdo.Points[i].Name+" gefunden");
                 localStorage.setItem('xStage', jdo.Points[m].X);
                 localStorage.setItem('yStage', jdo.Points[m].Y);
              }
            }
  
            document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+NameTemp+"</h4>";
            document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";       
          });
  
          mecStation.on('mouseleave', function () {
            swapMouseOver = 0;
            stage.container().style.cursor = 'default';
          });
  
          mecStation.on('click', function () {
            var scaleStageRatio = stage.scaleX();
            scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
            scaleStageRatio = scaleStageRatio;
            localStorage.setItem('zoomStage', scaleStageRatio);
            var name = this.id();
            //console.log("CLICK"+name);
            //document.getElementById("mousovertext").innerHTML = "Click auf den Bereich - "+name;
            name = name.replace("station","");
            console.log("Click auf den Bereich mit der ID "+name);
  
            for (var m = 0; m < jdo.Points.length; m++){
              // look for the entry with a matching `code` value
              if (jdo.Points[m].IdL == name){
                 //console.log(jdo.Points[i].Name+" gefunden");
                 localStorage.setItem('xStage', jdo.Points[m].X);
                 localStorage.setItem('yStage', jdo.Points[m].Y);
              }
            }
            document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
            var Ziel = quellURL+"/talas5/Stations/Location.aspx?id="+name+"&b=1";
            window.location.href = Ziel;
          });

        }

        // ULAF Stationen
        if ((stationInv) === 2) {
          uStation = new Konva.Group({
            x: xTemp,
            y: yTemp,
            id: "station"+stationID
            //draggable: true,
          });
    
          uStation.add(
           new Konva.Text({
            x: -(0.10*standardFontSize),
            y: (0.5/standardFontSize)-(standardUlafStationen/10),
            align: 'center',
            text: nameTemp,
            fontSize: standardFontSize/10,
            //fontFamily: 'Calibri',
            fill: 'black'
            })
          );

          uStation.add(
            new Konva.Rect({
              width: standardUlafStationen/5,
              height: standardUlafStationen/5,
              x: 1,
              y: -(standardUlafStationen/5)+1,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardUlafStationen/100,
              id: "station2f"+stationID
            })
          );

          uStation.add(
            new Konva.Circle({
              x: 1,
              y: 1,
              radius: standardUlafStationen/10,
              fill: 'green',
              stroke: 'black',
              strokeWidth: standardUlafStationen/100,
              id: "stationCircle"+stationID
            })
          );
          
          layer.add(uStation);

          if (document.getElementById("buttonUStation").style.opacity > 0.6) {
              uStation.show();
            } else {
              uStation.hide();
            }

          // ULAF Station Mouseover
          uStation.on('mouseenter', function () {
          swapMouseOver = 1;
          var name = this.id();
          name = name.replace("station","");
          var DataPlus = "";
          //console.log("GROUP ID"+name);
          var anzahlStatis = statusData.Statis.length;
          //console.log("Stati Anzahl: "+anzahlStatis);
            for (var n = 0; n < anzahlStatis; n++) {
              
              if (statusData.Statis[n].IdL > 0) {
                  //console.log("Station: "+statusData.Statis[n].IdL+" Name: "+name);
                  if(statusData.Statis[n].IdL == name) {
                    var DataTemp = statusData.Statis[n].Me;
                    var ColorTemp = statusData.Statis[n].Co;
                    DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";  
                      
                  } 
                  //console.log("Data: "+DataPlus);  
                }

              }

          stage.container().style.cursor = 'pointer';
          //console.log("Group Enter");
          var NameTemp = "";
          for (var i = 0; i < jdo.Points.length; i++){
            // look for the entry with a matching `code` value
            if (jdo.Points[i].IdL == name){
               //console.log(jdo.Points[i].Name+" gefunden");
               NameTemp = jdo.Points[i].Name;
            }
          }

          var scaleStageRatio = stage.scaleX();
          scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
          scaleStageRatio = scaleStageRatio;
          localStorage.setItem('zoomStage', scaleStageRatio);

          for (var m = 0; m < jdo.Points.length; m++){
            // look for the entry with a matching `code` value
            if (jdo.Points[m].IdL == name){
               //console.log(jdo.Points[i].Name+" gefunden");
               localStorage.setItem('xStage', jdo.Points[m].X);
               localStorage.setItem('yStage', jdo.Points[m].Y);
            }
          }

          document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+NameTemp+"</h4>";
          document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";      
        });

        uStation.on('mouseleave', function () {
          swapMouseOver = 0;
          stage.container().style.cursor = 'default';
        });

        uStation.on('click', function () {
          var scaleStageRatio = stage.scaleX();
          scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
          scaleStageRatio = scaleStageRatio;
          localStorage.setItem('zoomStage', scaleStageRatio);
          var name = this.id();
          //console.log("CLICK"+name);
          //document.getElementById("mousovertext").innerHTML = "Click auf den Bereich - "+name;
          name = name.replace("station","");
          console.log("Click auf den Bereich mit der ID "+name);

          for (var m = 0; m < jdo.Points.length; m++){
            // look for the entry with a matching `code` value
            if (jdo.Points[m].IdL == name){
               //console.log(jdo.Points[i].Name+" gefunden");
               localStorage.setItem('xStage', jdo.Points[m].X);
               localStorage.setItem('yStage', jdo.Points[m].Y);
            }
          }
          document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
          var Ziel = quellURL+"/talas5/Stations/Location.aspx?id="+name+"&b=1";
          window.location.href = Ziel;
        });

        }

        // Passive Stationen
        if ((stationInv) < 1) {
          var pStation = new Konva.Group({
            x: xTemp,
            y: yTemp,
            id: "station"+stationID,
            draggable: true,
          });
    
          /*group1.add(
           new Konva.Text({
            x: 0/100,
            y: -60/100,
            align: 'center',
            text: nameTemp,
            fontSize: 0.25,
            //fontFamily: 'Calibri',
            fill: 'black'
            })
          );*/
          pStation.add(
            new Konva.Circle({
              x: 1,
              y: 1,
              radius: standardPassiveStationen/10,
              fill: 'lightgray',
              stroke: 'black',
              strokeWidth: standardPassiveStationen/100,
              id: "stationCircle"+stationID
            })
          );
          
          layer.add(pStation);

          if (document.getElementById("buttonPStation").style.opacity > 0.6) {
            pStation.show();
          } else {
            pStation.hide();
          }

          // Passive Station
        pStation.on('mouseenter', function () {
          swapMouseOver = 1;
          var name = this.id();
          name = name.replace("station","");
          var DataPlus = "";
          //console.log("GROUP ID"+name);
          var anzahlStatis = statusData.Statis.length;
          //console.log("Stati Anzahl: "+anzahlStatis);
            for (var n = 0; n < anzahlStatis; n++) {
              
              if (statusData.Statis[n].IdL > 0) {
                  //console.log("Station: "+statusData.Statis[n].IdL+" Name: "+name);
                  if(statusData.Statis[n].IdL == name) {
                    var DataTemp = statusData.Statis[n].Me;
                    var ColorTemp = statusData.Statis[n].Co;
                    DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";  
                      
                  } 
                  //console.log("Data: "+DataPlus);  
                }

              }

          stage.container().style.cursor = 'pointer';
          //console.log("Group Enter");
          var NameTemp = "";
          for (var i = 0; i < jdo.Points.length; i++){
            // look for the entry with a matching `code` value
            if (jdo.Points[i].IdL == name){
               //console.log(jdo.Points[i].Name+" gefunden");
               NameTemp = jdo.Points[i].Name;
            }
          }

          var scaleStageRatio = stage.scaleX();
          scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
          scaleStageRatio = scaleStageRatio;
          localStorage.setItem('zoomStage', scaleStageRatio);

          for (var m = 0; m < jdo.Points.length; m++){
            // look for the entry with a matching `code` value
            if (jdo.Points[m].IdL == name){
               //console.log(jdo.Points[i].Name+" gefunden");
               localStorage.setItem('xStage', jdo.Points[m].X);
               localStorage.setItem('yStage', jdo.Points[m].Y);
            }
          }

          document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+NameTemp+"</h4>";
          document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";       
        });

        pStation.on('mouseleave', function () {
          swapMouseOver = 0;
          stage.container().style.cursor = 'default';
        });

        pStation.on('click', function () {
          var scaleStageRatio = stage.scaleX();
          scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
          scaleStageRatio = scaleStageRatio;
          localStorage.setItem('zoomStage', scaleStageRatio);
          var name = this.id();
          //console.log("CLICK"+name);
          //document.getElementById("mousovertext").innerHTML = "Click auf den Bereich - "+name;
          name = name.replace("station","");
          console.log("Click auf den Bereich mit der ID "+name);

          for (var m = 0; m < jdo.Points.length; m++){
            // look for the entry with a matching `code` value
            if (jdo.Points[m].IdL == name){
               //console.log(jdo.Points[i].Name+" gefunden");
               localStorage.setItem('xStage', jdo.Points[m].X);
               localStorage.setItem('yStage', jdo.Points[m].Y);
            }
          }
          document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
          var Ziel = quellURL+"/talas5/Stations/Location.aspx?id="+name+"&b=1";
          window.location.href = Ziel;
        });
        }

      }
    }   
    stage.add(layer);
    setTimeout(getConditions,1500);
}

function drawCableMap() {
    anzahlCable = jco.Lines.length; 
    var kennung = "";
    
    // Kabel zeichnen
    for(i=0;i<anzahlCable;i++) {
        
        if (jco.Lines[i].IdS > 0) {

                    var pointsTemp = [];
                    var cableID = jco.Lines[i].IdS;

                    var stringX = jco.Lines[i].PX;
                    var partsX = stringX.split(",");
                    partsXlength = partsX.length;

                    var x1Temp = Math.round(parseInt(((partsX[0])/skalierung)-minX)/displayFactor);
                    pointsTemp.push(x1Temp);

                    var stringY = jco.Lines[i].PY;
                    var partsY = stringY.split(",");
                    partsYlength = partsY.length;

                    var y1Temp = Math.round(parseInt((maxY-(partsY[0])/skalierung))/displayFactor);
                    pointsTemp.push(y1Temp);

                    for (x=1;x<partsYlength;x++){
                       // console.log("PointsX " +x+ " - "+partsX[x]);
                        pointsTemp.push(Math.round(parseInt(((partsX[x])/skalierung)-minX)/displayFactor));
                       // console.log("PointsY " +x+ " - "+partsY[x]);
                        pointsTemp.push(Math.round(parseInt((maxY-(partsY[x])/skalierung))/displayFactor));
                    }
                    
                     //console.log("Points "+pointsTemp);

                     cables = new Konva.Line({
                      points: pointsTemp,
                      stroke: 'green',
                      strokeWidth: (standardCableThickness/25),
                      lineJoin: 'square',
                      id: 'line'+cableID,
                      tension: 0,
                      lineCap: 'square'
                    });
                    layer.add(cables);   
                    
                    cables.on('mouseenter', function () {
                      swapMouseOver = 1;
                      var name = this.id(); // LINE muss noch gesplittet werden
                      name = name.replace("line","");
                      var DataPlus = "";
                      var DataPlus2 = "";

                      var anzahlStatis = jso.Services.length;
                      for (var n = 0; n < anzahlStatis; n++) {
                        
                        if (jso.Services[n].IdS > 0) {
                         //console.log("Linie: "+jso.Services[n].IdS);
                            if(jso.Services[n].IdS == name) {
                              var DataTemp = jso.Services[n].Na;
                              var ColorTemp = "green";
                                for ( var b = 0; b < statusDataCable.Statis.length; b++) {
                                  if (statusDataCable.Statis[b].IdLD == jso.Services[n].IdLD) {
                                    ColorTemp = statusDataCable.Statis[b].Co;
                                  }
                                }
                              DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";  
                               
                            } 
                            //console.log("Data: "+DataPlus);  
                          }

                        }

                        var anzahlStaticJko = jko.Services.length;
                        for (var n = 0; n < anzahlStaticJko; n++) {
                          
                          if (jko.Services[n].IdS > 0) {
                            //console.log("Linie: "+statusDataCable.Statis[n].IdLD);
                              if(jko.Services[n].IdS == name) {
                                var DataTemp = jko.Services[n].Na //+" <br /><small>Strang ID: "+jko.Services[n].IdS+", Service ID: "+jko.Services[n].IdLD+"</small>";
                                var ColorTemp = "green";
                                for ( var b = 0; b < statusDataKue.Statis.length; b++) {
                                  if (statusDataKue.Statis[b].IdLD == jko.Services[n].IdLD) {
                                    ColorTemp = statusDataKue.Statis[b].Co;
                                  }
                                }
                                DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'> Kü Richtung "+DataTemp+"</p></li>";    
                              } 
                              //console.log("Data: "+DataPlus);  
                            }
  
                          }

                          for (var m = 0; m < anzahlCable; m++) {
                            if (jco.Lines[m].IdS == name) { 
                              kennung = jco.Lines[m].In;
                            }
                          }

                      //console.log("STRANG ID"+name);
                      stage.container().style.cursor = 'pointer';

                      var scaleStageRatio = stage.scaleX();
                      scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
                      scaleStageRatio = scaleStageRatio;
                      localStorage.setItem('zoomStage', scaleStageRatio);
                      for (var m = 0; m < jco.Lines.length; m++){
                        // look for the entry with a matching `code` value
                        if (jco.Lines[m].IdS == name){
                           //console.log(jdo.Points[i].Name+" gefunden");
                           var stringX = jco.Lines[m].PX;
                           var stringY = jco.Lines[m].PY;
                           stringX = stringX.split(",");
                           stringY = stringY.split(",");
                           stringX = parseFloat(stringX[0]);
                           stringY = parseFloat(stringY[0]);
                           localStorage.setItem('xStage', stringX);
                           localStorage.setItem('yStage', stringY);
                        }
                      }
                      //console.log("Line Enter");
                      document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+kennung+"</h4>";
                      document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";
                    });

                    cables.on('mouseleave', function () {
                      swapMouseOver = 0;
                      stage.container().style.cursor = 'default';
                    });

                    cables.on('click', function () {
                      var scaleStageRatio = stage.scaleX();
                      scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
                      scaleStageRatio = scaleStageRatio;
                      localStorage.setItem('zoomStage', scaleStageRatio);
                      var name = this.id();
                      name = name.replace("line","");
                      //console.log("CLICK"+name);
                      for (var m = 0; m < jco.Lines.length; m++){
                        // look for the entry with a matching `code` value
                        if (jco.Lines[m].IdS == name){
                           //console.log(jdo.Points[i].Name+" gefunden");
                           var stringX = jco.Lines[m].PX;
                           var stringY = jco.Lines[m].PY;
                           stringX = stringX.split(",");
                           stringY = stringY.split(",");
                           stringX = parseFloat(stringX[0]);
                           stringY = parseFloat(stringY[0]);
                           localStorage.setItem('xStage', stringX);
                           localStorage.setItem('yStage', stringY);
                        }
                      }
                     console.log("Click auf den Strang mit der ID "+name);
                     document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
                      var Ziel = quellURL+"/talas5/Stations/CableDetail.aspx?id="+name+"&b=1";
                      window.location.href = Ziel;
                    });
                               
        }
    }
    stage.add(layer);
    getStationStatic();
    setTimeout(getConditionsCable,3000);
}

function cableReset() {
  document.getElementById("loadingMap").innerHTML = "<div class='spinner-wrapper'><span class='spinner-text'>Update der Daten...</span><span class='spinner'></span></div>";
  ebenenZuruecksetzen();
  layer.destroy();
  //drawStaticMap();
  drawMapBorder2();
  drawMapBorder();
  drawCableMap(); 
}

getCableStatic();