function startClock() {
  xsecond -= 1;
  if (xsecond <= 1) reload();
  timerID = setTimeout("startClock()", 1000);
}

function reload() {
  xsecond = jsecond;
  $.getJSON('data/2f49b57dd70591c2c4.php?station='+jstation, function(data) {

    if (data.timestamp > lstimestamp)
    {
      lstimestamp = data.timestamp;
      data_pkt  = data;

      var now = Math.floor(new Date() / 1000);

      if (now > Math.floor(data.timestamp) + 120) {
        $('#status').css('color', '#8f1010')
        $('#status').html('Dati non aggiornati');
      } else {
        $('#status').css('color', '#29a525')
        $('#status').html('Dati aggiornati');
      }

      if ((now + 86400) < Math.floor(data.timestamp)) {
        $('#status').css('color', '#cfd837')
        $('#status').html('Data Warning');
      }

      var a = new Date(data.timestamp * 1000);
      var months = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'];
      var year = a.getFullYear();
      var month = months[a.getMonth()];
      var date = a.getDate();
      var hour = a.getHours();
    
      if (hour < 10)
        hour = "0" + hour;
      var min = a.getMinutes();
      if (min < 10)
        min = "0" + min;
      var sec = a.getSeconds();
      if (sec < 10)
        sec = "0" + sec;

      currtimes = 'Alle ' + hour + ':' + min + ':' + sec + ' del ' + date + ' ' + month + ' ' + year;
      $('#time').html(currtimes);

      dirwind= Math.floor((parseInt(data.bearing)+11.24)/22.5);
      switch(dirwind) {
        case 0: labels="N"; break;
        case 1: labels="NNE"; break;
        case 2: labels="NE"; break;
        case 3: labels="ENE"; break;
        case 4: labels="E"; break;
        case 5: labels="ESE"; break;
        case 6: labels="SE"; break;
        case 7: labels="SSE"; break;
        case 8: labels="S"; break;
        case 9: labels="SSW"; break;
        case 10: labels="SW"; break;
        case 11: labels="WSW"; break;
        case 12: labels="W"; break;
        case 13: labels="WNW"; break;
        case 14: labels="NW"; break;
        case 15: labels="NNW"; break;
        case 16: labels="N"; break;
      }
      switch(Math.floor((parseInt(data.bearingTM)+11.24)/22.5)) {
        case 0: hilabels="N"; break;
        case 1: hilabels="NNE"; break;
        case 2: hilabels="NE"; break;
        case 3: hilabels="ENE"; break;
        case 4: hilabels="E"; break;
        case 5: hilabels="ESE"; break;
        case 6: hilabels="SE"; break;
        case 7: hilabels="SSE"; break;
        case 8: hilabels="S"; break;
        case 9: hilabels="SSW"; break;
        case 10: hilabels="SW"; break;
        case 11: hilabels="WSW"; break;
        case 12: hilabels="W"; break;
        case 13: hilabels="WNW"; break;
        case 14: hilabels="NW"; break;
        case 15: hilabels="NNW"; break;
        case 16: hilabels="N"; break;
      }

      $("#pkt0").html(currtimes);
      if(data.temp != lstemp){$("#pkt1").fadeOut(10,function(){$(this).html(data.temp).fadeIn(1000)});lstemp = data.temp;}
      $("#pkt2").html(data.tempTH+' @'+data.TtempTH);
      $("#pkt3").html(data.tempTL+' @'+data.TtempTL);
      if (data.temptrend>=0) data.temptrend = '+'+data.temptrend;$("#pkt4").html(data.temptrend);
      if(data.hum != lshum){$("#pkt5").fadeOut(10,function(){$(this).html(data.hum).fadeIn(1000)});lshum = data.hum;}
      $("#pkt6").html(data.humTH+'% @'+data.ThumTH);
      $("#pkt7").html(data.humTL+'% @'+data.ThumTL);
      if(dirwind != lsdirwind){$("#pkt8").fadeOut(10,function(){$(this).attr('src','icon/'+dirwind+'.png?E4pf4f5TJw').fadeIn(1000)});lsdirwind = dirwind;}
      if(data.wspeed != lswind){$("#pkt9").fadeOut(10,function(){$(this).html(data.wspeed).fadeIn(1000)});lswind = data.wspeed;}
      $("#pkt10").html(data.bearing);
      $("#pkt11").html(labels);
      $("#pkt12").html(data.wgustTM+' km/h '+hilabels+' @'+data.TwgustTM);
      if(data.press != lspress){$("#pkt13").fadeOut(10,function(){$(this).html(data.press).fadeIn(1000)});lspress = data.press;}
      if (data.presstrendval >= -0.2 && data.presstrendval <= 0.2) $("#pkt13b").attr('src','css/images/press_staz.png');
      if (data.presstrendval > 0.2) $("#pkt13b").attr('src','css/images/press_up.png');
      if (data.presstrendval < -0.2) $("#pkt13b").attr('src','css/images/press_down.png');
      $("#pkt14").html(data.pressTH+' @'+data.TpressTH);
      $("#pkt15").html(data.pressTL+' @'+data.TpressTL);
      if(data.rfall != lsrfall){$("#pkt16").fadeOut(10,function(){$(this).html(data.rfall).fadeIn(1000)});lsrfall = data.rfall;}
      $("#pkt17").html('RR '+data.rrate+' mm/h');
      $("#pkt18").html(data.rrateTM+' @'+data.TrrateTM);
      if(data.SolarRad>2000){$("#pkt19").html('no sensor');}else{$("#pkt19").html(data.SolarRad+' W/m²');}
      if(data.UV<0) data.UV="no sensor";$("#pkt20").html(data.UV);
      $("#pkt21").html(data.dew);
      $("#pkt22").html(data.wchill);
      $("#pkt23").html(data.intemp);
      $("#pkt24").html(data.inhum);
      $("#pkt25").html(data.apptemp);
      $("#pkt26").html(data.heatindex);
      $("#pkt27").html(data.humidex);
    }
  })
}

function charthome() {

  var yTitles = {
    color : "#000000",
    fontWeight : "bold",
    fontSize : "10px"
  };
  var yLabels = {
    color : "#4682B4",
    fontWeight : "bold",
    fontSize : "9px"
  };
  var yLabelsBaro = {
    color : "#228B22",
    fontWeight : "bold",
    fontSize : "9px"
  };
  var yLabelsTemp = {
    color : "#000000",
    fontWeight : "bold",
    fontSize : "9px"
  };
  var yLabelsWind = {
    color : "#228B22",
    fontWeight : "bold",
    fontSize : "9px"
  };

  var parameter = "";
  var one_Options = [];
  one_Counter = 0;
  one_names = ['Temperatura', 'Vento'];
  var two_Options = [];
  two_Counter = 0;
  two_names = ['Pressione', 'Umidità'];
  var data1 = [];

  var ticktemp,
      tickwind;
  var maxtemp,
      mintemp,
      minwind,
      maxwind;
  var ttemp = -100,
      mtemp = 100,
      twind = 0;

  $.each(one_names, function(i, name) {
    if (name == "Temperatura") {
      parameter = "outTemp"
    }
    if (name == "Vento") {
      parameter = "windSpeed"
    }

    $.getJSON('data/76ab68f835f5da529.php?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
      one_Options[i] = {
        name : name,
        data : data,
        yAxis : i,
        negativeColor : "#4572EE"
      };

      if (i == 0) {
        for ( y = 0; y < data.length; y++) {
          if (data[y][1] > ttemp)
            ttemp = data[y][1];
          if (data[y][1] < mtemp)
            mtemp = data[y][1];
        }
        ttemp = (Math.ceil(ttemp));
        mtemp = (Math.floor(mtemp));
        ticktemp = Math.ceil((ttemp - mtemp) / 4);
        maxtemp = Math.ceil((ttemp + ticktemp) / ticktemp) * ticktemp;
        mintemp = maxtemp - (9 * ticktemp);
      }
      if (i == 1) {
        for ( y = 0; y < data.length; y++) {
          if (twind < data[y][1])
            twind = data[y][1];
        }
        twind = (Math.ceil(twind));
        mwind = (Math.floor(0));
        tickwind = Math.ceil((twind - mwind) / 10);
        maxwind = Math.ceil((twind + tickwind) / tickwind) * tickwind;
        minwind = 0;
      }

      one_Counter += 1;
      if (one_Counter === one_names.length) {
        one_Chart();
      }
    });
  });

  function one_Chart() {
    var one_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 10,
        spacingBottom : 10,
        height : 240,
        renderTo : 'one_',
        defaultSeriesType : "spline",
        backgroundColor : "rgba(255, 255, 255, 0.4)",
        plotBackgroundColor : {
          linearGradient : [0, 0, 0, 150],
          stops : [[0, "#ddd"], [1, "rgba(255, 255, 255, 0.4)"]]
        },
        plotBorderColor : "#88BCCE",
        plotBorderWidth : 0.5,
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : ['#EE4643', '#228B22'],
      credits : {
        enabled : false
      },
      title : {
        text : null
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : [{
        lineWidth : 2,
        tickPixelInterval : 40,
        minTickInterval : 6,
        tickInterval : ticktemp,
        max : maxtemp,
        min : mintemp,
        offset : 0,
        title : {
          text : "°C",
          rotation : 0,
          align : "high",
          offset : 0,
          x : -10,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -7,
          y : -5,
          formatter : function() {
            if (this.value < mtemp - ticktemp || this.value > ttemp + ticktemp) {
              return "";
            } else {
              if (this.value < 0) {
                return '<span style="fill: blue;">' + this.value + '</span>';
              } else {
                return '<span style="fill: red;">' + this.value + '</span>';
              }
            }
          },
          style : yLabels
        }
      }, {
        gridLineWidth : 1,
        tickPixelInterval : 40,
        minTickInterval : 6,
        tickInterval : tickwind,
        max : maxwind,
        min : minwind,
        offset : 0,
        title : {
          text : "km/h",
          rotation : 0,
          align : "high",
          offset : 0,
          x : 30,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "left",
          x : 5,
          y : -5,
          formatter : function() {
            if (this.value < 0 || this.value > twind) {
              return "";
            } else {
              return this.value;
            }
          },
          style : yLabelsWind
        }
      }],
      xAxis : {
        type : 'datetime'
      },
      tooltip : {

        backgroundColor : "#A2D959",
        borderColor : "#fff",
        borderRadius : 3,
        borderWidth : 0,
        shared : true,
        crosshairs : {
          width : 0.5,
          color : "#666"
        },
        style : {
          lineHeight : "16px",
          fontSize : "10px",
          color : "#000"
        },
        formatter : function() {
          var s = Highcharts.dateFormat('%A %d %b %H:%M', this.x);
          $.each(this.points, function(i, point) {
            var unit = {
            "Vento": " km/h",
            "Temperatura": "°C"
            }[point.series.name];
            if (point.series.name != " ") {
              s += "<br/>" + point.series.name + ": <b>" + point.y + unit + "</b>";
            }
          });
          return s;
        }
      },
      plotOptions : {
        series : {
          marker : {
            radius : 0,
            states : {
              hover : {
                enabled : true
              }
            }
          }
        },
        spline : {
          lineWidth : 1.5,
          shadow : false,
          cursor : "pointer",
          states : {
            hover : {
              enabled : false
            }
          }
        }
      },
      series : one_Options
    });

    l = 0;
    $.each(two_names, function(l, name) {
      if (name == "Pressione")
        parameter = "barometer";
      if (name == "Umidità")
        parameter = "outHumidity";

      $.getJSON('data/76ab68f835f5da529.php?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
        two_Options[l] = {
          name : name,
          data : data,
          yAxis : l
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        two_Counter += 1;

        if (two_Counter === two_names.length) {
          two_Chart();
        }
      });
    });
  }

  function two_Chart() {
    var two_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 10,
        spacingBottom : 10,
        height : 240,
        renderTo : 'two_',
        defaultSeriesType : "spline",
        backgroundColor : "rgba(255, 255, 255, 0.4)",
        plotBackgroundColor : {
          linearGradient : [0, 0, 0, 150],
          stops : [[0, "#ddd"], [1, "rgba(255, 255, 255, 0.4)"]]
        },
        plotBorderColor : "#88BCCE",
        plotBorderWidth : 0.5,
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : ['#228B22', '#4682B4'],
      credits : {
        enabled : false
      },
      title : {
        text : ''
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : [{
        lineWidth : 2,
        tickPixelInterval : 40,
        offset : 0,
        tickInterval : 1,
        title : {
          text : "hPa",
          rotation : 0,
          align : "high",
          offset : 0,
          x : -10,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -7,
          y : -5,
          style : yLabelsBaro
        }
      }, {
        gridLineWidth : 1,
        tickPixelInterval : 40,
        tickInterval : 20,
        min : 0,
        max : 100,
        offset : 0,
        title : {
          text : "%",
          rotation : 0,
          align : "high",
          offset : 0,
          x : 15,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "left",
          x : 5,
          y : -5,
          style : yLabels
        }
      }],
      xAxis : {
        type : 'datetime'
      },
      tooltip : {

        backgroundColor : "#A2D959",
        borderColor : "#fff",
        borderRadius : 3,
        borderWidth : 0,
        shared : true,
        crosshairs : {
          width : 0.5,
          color : "#666"
        },
        style : {
          lineHeight : "16px",
          fontSize : "10px",
          color : "#000"
        },
        formatter : function() {
          var s = Highcharts.dateFormat('%A %d %b %H:%M', this.x);
          $.each(this.points, function(i, point) {
            var unit = {
            "Umidità": " %",
            "Pressione": " hPa"
            }[point.series.name];
            if (point.series.name != " ") {
              s += "<br/>" + point.series.name + ": <b>" + point.y + unit + "</b>";
            }
          });
          return s;
        }
      },
      plotOptions : {
        series : {
          marker : {
            radius : 0,
            states : {
              hover : {
                enabled : true
              }
            }
          }
        },
        spline : {
          lineWidth : 1.5,
          shadow : false,
          cursor : "pointer",
          states : {
            hover : {
              enabled : false
            }
          }
        }
      },
      series : two_Options
    });
  }

}

function previhome(query) {
  $.getJSON("https://api.open-meteo.com/v1/gfs?latitude=52.52&longitude=13.41&hourly=temperature_2m,precipitation_probability,rain,cloudcover", function(data) {

    chartTempData = new Highcharts.Chart({

      chart : {
        spacingTop : 10,
        spacingBottom : 10,
        height : 320,
        renderTo : "containerTemp",
        defaultSeriesType : "spline",
        backgroundColor : "rgba(255, 255, 255, 0.4)",
        plotBackgroundColor : {
          linearGradient : [0, 0, 0, 150],
          stops : [[0, "#ddd"], [1, "rgba(255, 255, 255, 0.4)"]]
        },
        plotBorderColor : "#88BCCE",
        plotBorderWidth : 0.5,
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      title : {
        text : ""
      },
      xAxis : {
        type : 'datetime'
      },
      lang : {
        thousandsSep : ""
      },
      credits : {
        enabled : false
      },
      plotOptions : {
        series : {
          marker : {
            radius : 0,
            states : {
              hover : {
                enabled : true
              }
            }
          }
        },
        spline : {
          lineWidth : 1.5,
          shadow : false,
          cursor : "pointer",
          states : {
            hover : {
              enabled : false
            }
          }
        },
        column : {
          pointWidth : 15
        },
        areaspline : {
          lineWidth : 1.5,
          shadow : false,
          states : {
            hover : {
              enabled : false
            }
          }
        }
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      exporting : {
        enabled : false
      },
      tooltip : {

        backgroundColor : "#A2D959",
        borderColor : "#fff",
        borderRadius : 3,
        borderWidth : 0,
        shared : true,
        crosshairs : {
          width : 0.5,
          color : "#666"
        },
        style : {
          lineHeight : "16px",
          fontSize : "10px",
          color : "#000"
        },
        formatter : function() {
          var s = Highcharts.dateFormat('%A %d %b %H:%M', this.x);
          $.each(this.points, function(i, point) {
            var unit = {
            "Precipitazioni": " mm",
            "Vento": " kmh",
            "Temperatura": "°C",
            "Pressione": " hPa"
            }[point.series.name];
            if (point.series.name != " ") {
              s += "<br/>" + point.series.name + ": <b>" + point.y + unit + "</b>";
            }
          });
          // eo each
          return s;
        }
      },

      yAxis : [{
        tickPixelInterval : 40,
        minTickInterval : 6,
        tickInterval : ticktemp,
        max : maxtemp,
        min : mintemp,
        lineWidth : 2,
        gridLineWidth : 1,
        offset : 0,
        title : {
          text : "°C",
          rotation : 0,
          align : "high",
          offset : 0,
          x : -5,
          y : 0,
          style : yTitles
        },
        labels : {
          x : -5,
          y : -3,
          formatter : function() {
            if (this.value < mtemp - ticktemp || this.value > ttemp + ticktemp) {
              return "";
            } else {
              if (this.value < 0) {
                return '<span style="fill: blue;">' + this.value + '</span>';
              } else {
                return '<span style="fill: red;">' + this.value + '</span>';
              }
            }
          },
          style : yLabels
        }
      }, {
        tickPixelInterval : 40,
        minTickInterval : 6,
        tickInterval : tickrain,
        max : maxrain,
        min : minrain,
        offset : 0,
        title : {
          text : "mm",
          rotation : 0,
          align : "low",
          offset : 0,
          x : 5,
          y : 15,
          style : yTitles
        },
        labels : {
          align : "left",
          x : 5,
          y : -3,
          formatter : function() {
            if (this.value < 0 || this.value > train) {
              return "";
            } else {
              return this.value;
            }
          },
          style : yLabels
        }
      }, {
        tickPixelInterval : 40,
        minTickInterval : 6,
        tickInterval : tickwind,
        max : maxwind,
        min : minwind,
        opposite : true,
        offset : 0,
        title : {
          text : "kmh",
          rotation : 0,
          align : "low",
          offset : 0,
          x : -5,
          y : 15,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -5,
          y : -3,
          formatter : function() {
            if (this.value < 0 || this.value > twind) {
              return "";
            } else {
              return this.value;
            }
          },
          style : yLabelsWind
        }
      }, {
        tickPixelInterval : 40,
        minTickInterval : 6,
        tickInterval : tickbaro,
        max : maxbaro,
        min : minbaro,
        lineWidth : 2,
        opposite : true,
        offset : 0,
        title : {
          text : "hPa",
          rotation : 0,
          align : "high",
          offset : 0,
          x : 5,
          y : 0,
          style : yTitles
        },
        labels : {
          align : "left",
          x : 5,
          y : -3,
          formatter : function() {
            if (this.value < mbaro - tickbaro || this.value > tbaro + tickbaro) {
              return "";
            } else {
              return this.value;
            }
          },
          style : yLabelsBaro
        }
      }],

      series : [{
        name : "Temperatura",
        data : temps,
        color : "#EE4643",
        threshold : 0,
        negativeColor : "#4572EE"
      }, {
        name : "Precipitazioni",
        data : precs,
        color : "#4572A7",
        type : "column",
        yAxis : 1,
      }, {
        name : "Pressione",
        data : baros,
        color : "#9ACD32",
        yAxis : 3
      }, {
        name : "Vento",
        data : wsps,
        color : "#1485DC",
        yAxis : 2,
        type : "scatter",
        marker : {
          radius : 2,
          symbol : "circle"
        }
      }, {
        name : " ",
        data : icos,
        color : "#006400",
        type : "scatter",
        events : {
          legendItemClick : false
        }
      }]
    });
  });
}