// HWeather.js
// Version 1.1  2015-04-17 rxf
//	  Wochetage in die richtige Reihenfolge gebracht
//
// Version 1.0  2012-11-20 rxf
//    Anzeige von Tabellen mit Bereichen
//    Ausdruck der Tabellen
//    Anleitung als POPUP

var lineNo=0;
var STW="Sternwarte Welzheim <br>";

// Nullfill:
// Übergbenen Wert zweistellig machen, fall er nur einstellig ist
function nullfill(n)
{
	if(n < 10)
		{
		return("0"+n);
		}
	else
		return(""+n);
}

// Tabelle erzeugen	
function fillTables(werte, anz)
{
  var unit = new Array(" &deg;C", " %", " hPa", " mm", " km/h", " &deg;");

  if(anz == 0)
  {
    var txt = new Array("Temperatur", "Feuchte", "Luftdruck", "Regen ",
        "Wind-Geschwindigkeit", "Windrichtung");
    var wrtmax = new Array(werte.TempMx, werte.HumiMx, werte.PressMx,
        werte.Rain, werte.WindSpeed);
    var wrtmin = new Array(werte.Temp, werte.Humi, werte.Press, werte.Rain,
        werte.WindSpeed, werte.WindDir);
//    var d = new Date(werte.Time * 1000);
    var year = werte.Time.substring(0,4);
    var month = werte.Time.substring(5,7);
    var day = werte.Time.substring(8,10);
    var hour = werte.Time.substring(11,13);
    var minute = werte.Time.substring(14);
    var ziel = "";

    $("#tafelRange").remove();
    $("#tafelSingle").remove();

    $("<table />", {
      id : "tafelSingle"
    }).appendTo("div #tabelle");

//    if ((d.getMinutes() != 0) || (d.getHours() != 0)) {
    if ((minute != 0) || (hour != 0)) {
      $(
          "<caption/>",
          {
            html : STW + "Wetter am " + day + "."
                + month  + "." + year + " um "
                + hour + ":" + minute
          }).appendTo("table");

      for ( var i = 0; i < 6; i++) {
        $("<tr/>", {
          "class" : (i & 1 == 1) ? "gerade" : "ungerade",
          id : "trx" + i
        }).appendTo("table");
        ziel = "table #trx" + i;
        if (i == 3) {
          $(
              "<td/>",
              {
                html : txt[i] + "bis " + hour + ":"
                    + minute + " Uhr"
              }).appendTo(ziel);
        } else {
          $("<td/>", {
            html : txt[i]
          }).appendTo(ziel);
        }
        $("<td/>", {
          html : wrtmin[i] + unit[i]
        }).appendTo(ziel);
      }
    }

    else {
      $(
          "<caption/>",
          {
            html : STW + "Wetter-Werte f&uuml;r den " + day + "."
                + month  + "." + year
          }).appendTo("table");

      for ( var i = 0; i < 3; i++) {
        $("<tr/>", {
          "class" : i == 1 ? "gerade" : "ungerade",
          id : "trx" + i
        }).appendTo("table");
        ziel = "table #trx" + i;
        $("<td/>", {
          rowspan : "2",
          html : txt[i]
        }).appendTo(ziel);
        $("<td/>", {
          "class" : "max small",
          html : "max."
        }).appendTo(ziel);
        $("<td/>", {
          "class" : "max",
          html : wrtmax[i] + unit[i]
        }).appendTo(ziel);

        $("<tr/>", {
          "class" : i == 1 ? "gerade" : "ungerade",
          id : "trn" + i
        }).appendTo("table");
        ziel = "table #trn" + i;
        $("<td/>", {
          "class" : "min small",
          html : "min."
        }).appendTo(ziel);
        $("<td/>", {
          "class" : "min",
          html : wrtmin[i] + unit[i]
        }).appendTo(ziel);
      }

      $("<tr/>", {
        "class" : "gerade",
        id : "trr"
      }).appendTo("table");
      $("<td/>", {
        colspan : "2",
        html : txt[3] + "gesamt"
      }).appendTo("table #trr");
      $("<td/>", {
        html : wrtmax[3] + unit[3]
      }).appendTo("table #trr");

      $("<tr/>", {
        "class" : "ungerade",
        id : "trw"
      }).appendTo("table");
      $("<td/>", {
        colspan : "2",
        html : "Max. " + txt[4]
      }).appendTo("table #trw");
      $("<td/>", {
        "class" : "max",
        html : wrtmax[4] + unit[4]
      }).appendTo("table #trw");
    }
  }
  else // hier ist es ein Datumsbereich
  {
//    alert("Datumsbereich");
    for(var i=0; i<anz; i++)
    {
      var values = new Array(0, werte[i].Temp, werte[i].TempMx, werte[i].Humi, werte[i].HumiMx, 
          werte[i].Press, werte[i].PressMx,
          werte[i].Rain, werte[i].WindSpeed);
      var dStr = werte[i].Time.substring(0,10);
      fillOneLine(values,dStr,i);
    }
  }
}

// Tabelle für den Datumsbereich von sDate bis eDate (einschl) holen und anzeigen
// sDate und eDate haben Datumsformat
// Überschrift und Tabellenkopf anzeigen und dann den AJAX-Call absetzen, mit dem
// die kompletten Werte geholt werden und dann via 'fillTables()' angezeigt werden
function fillRangeTable(sD, eD)
{
  var header = new Array("  Datum  ", "Temperatur<br />&deg;C", "Feuchte<br />%", "Luftdruck<br />hPa", "Regen<br />mm", "Wind-V<br />max km/h");
  var minmax = new Array("          ","min","max","min","max","min","max"," "," ");

  $("#tafelSingle").remove();
  $("#tafelRange").remove();
  
  $("<table />",{
    id: "tafelRange"
  }).appendTo("div #tabelle");
  
  // Überschrift basteln
  $("<caption/>",{
    html:STW + "Wetter vom " 
      +  nullfill(sD.getDate()) 
      + "." + nullfill(sD.getMonth()+1) 
      + "." + sD.getFullYear()
      + " bis " + nullfill(eD.getDate()) 
      + "." + nullfill(eD.getMonth()+1) 
      + "." + eD.getFullYear()
  }).appendTo("table");

  // Kopfzeile
  $("<tr/>", {
    id:"trxh",
    "class": "ungerade"
  }).appendTo("table");
  
  var ziel = "table #trxh";
  for(var i=0; i<6; i++)
  {
    if(i==0)
    {
      $("<th/>",{
        id: "dath",
        html: header[i]
      }).appendTo(ziel);
    }
    else if(i>=1 && i<=3)
    {
      $("<th/>",{
          colspan: "2",
          html: header[i]
      }).appendTo(ziel);
    }
    else
    {
      $("<th/>",{
        html: header[i]
      }).appendTo(ziel);
    }
  }

  // Unter der Kopfzeile die min/max
  $("<tr/>", {
    id:"trx2",
    "class":"ungerade"
  }).appendTo("table");
  
  ziel = "table #trx2";
  for(var i=0; i<9; i++)
  {
    $("<td/>", {
      html: minmax[i]
    }).appendTo(ziel);
  }  

  // Nun per AJAX-Call alle Werte hoeln und im Callback dann anzeigen
  var dt = new Date(sD);
  dt.setHours(0);
  dt.setMinutes(0);
  var days = Math.round(Math.abs(eD - dt) / (1000 * 60 * 60 * 24 ));
  if(days > 35)
    {
    alert("max. 35 Tage m&ouml;glich !");
    return;
    }
  doAjaxCall(dt,days+1);        // ALLE Werte des gefragten Bereiches holen
}


// eine Datenzeile in der Tabelle befüllen
function fillOneLine(wrt,datStr,n)
{
  $("<tr/>",{
    id:"tr"+n,
    "class": (n&1==1)?"ungerade":"gerade"
  }).appendTo("table");
  var ziel = "table #tr"+n;
  
  $("<td/>", {
    html: datStr
  }).appendTo(ziel);

  for(var i=1; i<9; i++)
  {
    $("<td/>", {
      html: (wrt[1]==-17.8) ? "--" : wrt[i]
    }).appendTo(ziel);
  }
}


// Werte vom Server holen
// s ist Datum/Uhrzeit als String im Format 'yy-mm-dd hh:mm'
function doAjaxCall(datz, anz)
{
	var date = { Jahr:'2012', Monat:'3', Tag:'23', Stunde:'0', Minute:'0', Anzahl:'1' };

	date["Jahr"] = datz.getFullYear();             // Variable nun mit den Übergabewerten belegen
	date["Monat"] = datz.getMonth()+1;
	date["Tag"] = datz.getDate();
	date["Stunde"] = datz.getHours();
	date["Minute"] = datz.getMinutes();
	date["Anzahl"] = anz;
	
	
  $.ajax(                          // AJAX-Call
  {   
     
	  type: "POST",                  // wir machen eine POST - Abfrage
	  url: "HWett.php",              // an diese Seite auf dem Server
	  data: date,                    // mit diesen Daten (ein Array)
	  success : function(erg){       // wenn Erfolg, dann 
	    if(erg.charAt(0)=='#')       // DEBUG-Meldungen ..
	    {
	      alert(erg);                // .. ausgeben und ..
	      erg = erg.substr(erg.lastIndexOf('#')+2); // .. wegblenden
	    }
	    fillTables($.parseJSON(erg),anz);  // die Tabelle ensprechend ausfüllen
	  },
	  error: function(xh,t) {        // wenn Error, dann eine Alertbox hinmalen
	    alert("xh=" + xh + "  t=" + t + xh.getAllResponseHeaders() + "\na) " + xh.responseText + "\nb) " + xh.statusText);
	  },
	});
}


// Datepicker auf Deutsch einstellen
$.datepicker.regional['de'] = {
      closeText: '',
      prevText: '<',
      nextText: '>',
      currentText: '',
      monthNames: ['Januar','Februar','M&auml;rz','April','Mai','Juni',
      'Juli','August','September','Oktober','November','Dezember'],
      monthNamesShort: ['Jan','Feb','Mar','Apr','Mai','Jun',
      'Jul','Aug','Sep','Okt','Nov','Dez'],
      dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
      dayNamesShort: ['SON','MON','DIE','MIT','DON','FRE','SAM'],
      dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
      weekHeader: 'KW',
      dateFormat: 'yyyy-mm-dd',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: ''
    };
$.datepicker.setDefaults($.datepicker.regional['de']);    // diese Einstellung nun übernehmen
    
// Script-Aktionen    
// Wenn das Dokument geladen wird
$(document).ready(function()
{
  var sDate = $('#startdate');
  var eDate = $('#enddate');
  var maxDate = new Date();

	// Datums-Zeit-Picker für die Startzeit
	sDate.datetimepicker(                      // Initialisierung des datetimepickers 
	{ 
	  showOn: 'focus' ,                        // onFocus wird der Picker angezeigt
	  dateFormat: "yy-mm-dd",                  // angezeigt wird in diesem Format
	  defaultDate: -1,                         
	  maxDate: "-1d",                          // max Datum unbegrenzt
	  minDate: "2012-03-01",                   // min Datum: da beginnt unsere Datenbank
	  closeText: "OK",                         // erst wenn OK geklickt wird, dann gehts weiter
	  showOtherMonths: "true",                 // Monat via Pfeile wähleen lassen
	  stepMinute: 5,                           // Zeischieber haben eien Auflösung von 5min
	  timeText: "Uhrzeit",                     // Texte dazu
	  hourText: "Stunde",
	  minuteText : "Minute",
	  onClose: function (dateText, inst)       // was passiert, wenn OK gedrückt wird:
    { 
      var dt = new Date(sDate.datepicker('getDate'));
      eDate.datepicker('option','minDate',sDate.datepicker('getDate'));  // minWert des EndeDatums wird auf Startdatum gesetzt
      test = sDate.datepicker('getDate');
      testm = new Date(test.getTime());
      testm.setDate(testm.getDate() + 35);
      eDate.datepicker('option','maxDate',testm);
      eDate.attr("value",sDate.val().substring(0,10));  // Wert des EndeDatums wird auf das StartDatum gesetzt (ohne die Uhrzeit)
      doAjaxCall(dt,0);                      // und die Werte werden angefordert
    },
  });
	
	// Datumspicker für das Ende-Datum
	eDate.datepicker(
	{ 
	  showOn: 'focus' ,            
	  dateFormat: "yy-mm-dd",
	  defaultDate: -1,
	  maxDate: "-1d",
	  showOtherMonths: "true",
//	  showButtonPanel: "true",
//    closeText: "OK",                         // erst wenn OK geklickt wird, dann gehts weiter
	  onClose: function (dateText, inst)       // wenn ein Zeitpunkt gewählt ist, dann
	  { 
	    var sdat = new Date(sDate.datepicker('getDate'));
	    sDate.attr("value",$.datepicker.formatDate('yy-mm-dd', sdat)+" 00:00");
	    fillRangeTable(sDate.datepicker('getDate'), eDate.datepicker('getDate')); 
	  }
	});  

	// Drucken:
	$("#printbutton").click( function() 
	    {
	      $('div#Area').jqprint();
	    });
	
	// PopUp
	$("#manualbutton").popupWindow({
	  windowURL:"Anleitung.html",
	  height: 350,
	  width: 900,
	  left: 50,
	  top: 50
      });
  

// nach oben scrollen
	$(window.parent).scrollTop(0);             // damit der Anfang der Tabelle zu sehen ist
	
  // Inputfeld mit 'gestern' um 0h00 vorbelegen  
  var yesterday = new Date();
  yesterday.setDate(yesterday.getDate()-1);
  sDate.attr("value",$.datepicker.formatDate('yy-mm-dd', yesterday)+" 00:00");  // Startdatum auf 'gestern'
  eDate.attr("value",$.datepicker.formatDate('yy-mm-dd', yesterday));           // Enddatumn auch (aber ohne Uhrzeit)
  eDate.datepicker('option','minDate',sDate.datepicker('getDate'));  // minWert des EndeDatums wird auf Startdatum gesetzt
    
  // Gleich mal die Anfrage an Server absetzen und damit die Tageswerete für das Startdatum holen
  var dt = new Date(sDate.datepicker('getDate'));
  doAjaxCall(dt,0);
});