//// DatePicker.js
// Inhalt:
//   Klasse DatePicker
//   Funktion getAnzahlTage
//   Funktion getKW

// Objekt-Counter fuer HTML-IDs
var myDatePickerObjectCount = 0;

//// Klasse DatePicker
// Eigenschaften
// Methoden
//      Konstruktor()
//      getCalTable()
//      showDatePicker()
//      hideCalPicker()
//      setCalPosition()
//      getHeadTable()
//      getFootTable()
//      getKwTable()
//      getDatenTable()
//      setCalTable()
//      getDateClicked()
// Konstruktor-Aufruf
function DatePicker(objektName, inputTextId, boolKalenderwoche)
{
    //// Eigenschaften
    
    // Layout
    this.bgColor =      "white";
    this.calBorder =    "solid 6px #EDF3F9";
    this.textColor =    "#2B628A";
    this.preMonthTextColor = "#AAAAAA";
    this.calFontSize =  "0.8em";
    this.fontFamily =   "Arial, Helvetica, sans-serif";
    this.kwBorderStyle = "none";
    this.kwFontColor =  "#AAAAAA";
    this.kwFontWeigth = "bold";
    this.tdHeight =     "15px";
    this.tdDateWidth =  "15px";
    this.tdKwWidth =    "15px";
    this.tableMargin =  "0px";
    this.tablePadding = "1px";
    this.tdMargin =     "1px";
    this.tdPadding =    "0px";

    // Datumseigenschaften
    this.boolKw = boolKalenderwoche;
    this.objektName = objektName;
    this.aktDatum = new Date();                  // immer Jetzt
    this.calDatum = new Date();                  // angezeigter Monat im Kalender
    this.calMonat = this.calDatum.getMonth();    // getMoth von calMonat
    this.calJahr = this.calDatum.getFullYear();  // getFullYear von calMonat
    this.myMonatName = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
    this.myInputTextField = document.getElementById(inputTextId);   // InputText-Objekt
    this.myDatePicker;
    this.objektId = myDatePickerObjectCount++;
    
    //// Methoden
    
    // Konstruktor (Aufruf ganz unten)
    // benoetigt showDatePicker, getCalTable, setCalPosition
    this.Konstruktor = function()
    {
        this.myDatePicker = this.myInputTextField.parentNode.appendChild(this.getCalTable());
        this.myDatePicker.style.visibility = "hidden";
        this.myDatePicker.style.position = "absolute";
        this.setCalPosition();
        this.myInputTextField.onfocus = new Function(this.objektName + '.showDatePicker(true)');
		this.myInputTextField.onkeydown = new Function(this.objektName + '.showDatePicker(false)');
        this.myDatePicker.style.backgroundColor = this.bgColor;
        this.myDatePicker.style.color = this.textColor;
    }
    
    // Liefert das TabellenElement als Objekt zurueck, das den Kalender enthaelt
    // benoetigt getHeadTable, getFootTable, getKwTable, getDatenTable
    this.getCalTable = function()
    {
        // Tabelle
        var myTable = document.createElement("table");
        myTable.setAttribute("id", "calDatePicker" + this.objektId);
        myTable.style.fontSize = this.calFontSize;
        myTable.style.fontFamily = this.fontFamily;
        myTable.style.border = this.calBorder;
        myTable.style.margin = this.tableMargin;
        myTable.style.padding = this.tablePadding;
        var myTR = myTable.insertRow(0);
        // 1,1
        if (this.boolKw)
        {
            var myTD = document.createElement("td");
            myTD.style.margin = "0px";
            myTD.style.padding = "0px";
			myTD.style.width = "28px";
            myTR.appendChild(myTD);
        }
        // 1,2 Kopf mit Monat
        var myTD = document.createElement("td");
        myTD.setAttribute("id", "calHead" + this.objektId);
        myTD.appendChild(this.getHeadTable());
        myTR.appendChild(myTD);
        // 1,3 x zum Schliessen des Kalenders
        var myTD = document.createElement("td");
        myTD.setAttribute("align", "center");
		myTD.onclick = new Function(this.objektName + '.showDatePicker(false)');
        myTD.style.height = this.tdHeight;
        myTD.style.cursor = "pointer";
        myTD.style.width = "1.8em";
        myTD.style.margin = this.tdMargin;
        myTD.style.padding = "2px";
		myTD.style.fontSize = "1.1em";
        myTD.style.fontWeight = "bold";
		myTD.style.textAlign = "right";
		myTD.style.verticalAlign = "top";
        myTD.innerHTML = "<div align='center' style='padding-left:2px; border: 1px solid #AAaaAA; text-align: center; color: #AAaaAA; width: 11px; margin-left: 7px;'>X</div>";
        myTR.appendChild(myTD);
        // 2,1 KW
        var myTR = myTable.insertRow(1);
        if (this.boolKw)
        {
            var myTD = document.createElement("td");
            myTD.setAttribute("id", "calKW" + this.objektId);
            myTD.style.margin = "0px";
            myTD.style.padding = "0px";
            myTD.appendChild(this.getKwTable(this.calMonat, this.calJahr));
            myTR.appendChild(myTD);
        }
        // 2,2 Daten (Tabelle 6*7 Zellen)
        var myTD = document.createElement("td");
        myTD.setAttribute("id", "calDate" + this.objektId);
        myTD.style.margin = "0px";
        myTD.style.padding = "0px";
        myTD.appendChild(this.getDatenTable(this.calMonat, this.calJahr));
        myTR.appendChild(myTD);
		// 2,3 leer
        var myTD = document.createElement("td");
        myTD.innerHTML = "&nbsp;";
        myTR.appendChild(myTD);
        // 3,1
        var myTR = myTable.insertRow(2);
        if (this.boolKw)
        {
            var myTD = document.createElement("td");
            myTD.style.margin = "0px";
            myTD.style.padding = "0px";
            myTR.appendChild(myTD);
        }
        // 3,2 < Jahr >
        var myTD = document.createElement("td");
        myTD.setAttribute("id", "calFoot" + this.objektId);
        myTD.style.margin = "0px";
        myTD.style.padding = "0px";
        myTD.appendChild(this.getFootTable());
        myTR.appendChild(myTD);
        return myTable;
		// 3,3 leer
        var myTD = document.createElement("td");
        myTD.innerHTML = "&nbsp;";
        myTR.appendChild(myTD);
    }
    
    // Macht die Kalendertabelle sichtbar / unsichtbar
    // benoetigt setCalPosition
    this.showDatePicker = function(bool)
    {
        if (bool)
        {
            document.getElementById("calDatePicker" + this.objektId).style.visibility = "visible";
            this.setCalPosition();
        }
        else
        {
            document.getElementById("calDatePicker" + this.objektId).style.visibility = "hidden";
        }
    }
    this.hideDatePicker = function()
    {
        this.showDatePicker(false);
    }
    
    // setzt das die Offset-Attribute nach der Ermittlung der genauen Koordinaten des Mutter-Elements
    // Hilfsfunktion fuer Konstruktor und showDatePicker
    this.setCalPosition = function()
    {
        var positionY = this.myInputTextField.offsetHeight;
        var positionX = 0;
        var myElement = this.myInputTextField;
        while (myElement != null)
        {
            positionY += myElement.offsetTop;
            positionX += myElement.offsetLeft;
            myElement = myElement.offsetParent;
        }
        this.myDatePicker.style.top = positionY + "px";
        this.myDatePicker.style.left = positionX + "px";
    }
    
    // Liefert das Tabellenelement als Objekt zurueck, das als Kopf in die KalenderTabelle eingefuegt wird
    // benoetigt setCalTable
    this.getHeadTable = function()
    {
        var myTable = document.createElement("table");
        myTable.setAttribute("width", "100%");
        myTable.style.margin = this.tableMargin;
        myTable.style.padding = this.tablePadding;
        var myTR = myTable.insertRow(0);
		// Vormonat
        var myTD = document.createElement("td");
        myTD.setAttribute("align", "left");
        myTD.onclick = new Function(this.objektName + '.setCalTable(' + (this.calMonat-1) + ', ' + this.calJahr + ')');
        myTD.style.height = this.tdHeight;
        myTD.style.cursor = "pointer";
        myTD.style.width = "1.2em";
        myTD.style.margin = this.tdMargin;
        myTD.style.padding = this.tdPadding;
        myTD.innerHTML = "&lt;";
        myTR.appendChild(myTD);
        // Anzeige akt. Monat
        var myTD = document.createElement("td");
        myTD.setAttribute("align", "center");
        myTD.style.height = this.tdHeight;
        myTD.style.margin = this.tdMargin;
        myTD.style.padding = this.tdPadding;
        myTD.innerHTML = this.myMonatName[this.calMonat];
        myTR.appendChild(myTD);
        // Nächster Monat
        var myTD = document.createElement("td");
        myTD.setAttribute("align", "right");
        myTD.onclick = new Function(this.objektName + '.setCalTable(' + (this.calMonat+1) + ', ' + this.calJahr + ')');
        myTD.style.height = this.tdHeight;
        myTD.style.cursor = "pointer";
        myTD.style.width = "1.2em";
        myTD.style.margin = this.tdMargin;
        myTD.style.padding = this.tdPadding;
        myTD.innerHTML = "&gt;";
        myTR.appendChild(myTD);
        
        return myTable;
    }
    
    // Liefert das Tabellenelement als Objekt zurueck, das den Fuss in die Kalendertabelle repraesentiert
    // benoetigt setCalTable
    this.getFootTable = function()
    {
        var myTable = document.createElement("table");
        myTable.setAttribute("width", "100%");
        myTable.style.margin = this.tableMargin;
        myTable.style.padding = this.tablePadding;
        var myTR = myTable.insertRow(0);
        // Vorjahr
        var myTD = document.createElement("td");
        myTD.setAttribute("align", "left");
        myTD.onclick = new Function(this.objektName + '.setCalTable(' + this.calMonat + ', ' + (this.calJahr-1) + ')');
        myTD.style.height = this.tdHeight;
        myTD.style.cursor = "pointer";
        myTD.style.margin = this.tdMargin;
        myTD.style.padding = this.tdPadding;
        myTD.style.width = "1.2em";
        myTD.innerHTML = "&lt;";
        myTR.appendChild(myTD);
        // aktuelles Jahr
        var myTD = document.createElement("td");
        myTD.setAttribute("align", "center");
        myTDtxt = document.createTextNode(this.calJahr);
        myTD.style.height = this.tdHeight;
        myTD.style.margin = this.tdMargin;
        myTD.style.padding = this.tdPadding;
        myTD.appendChild(myTDtxt);
        myTR.appendChild(myTD);
        // Nächstes Jahr
        var myTD = document.createElement("td");
        myTD.setAttribute("align", "right");
        myTD.onclick = new Function(this.objektName + '.setCalTable(' + this.calMonat + ', ' + (this.calJahr+1) + ')');
        myTD.style.height = this.tdHeight;
        myTD.style.cursor = "pointer";
        myTD.style.margin = this.tdMargin;
        myTD.style.padding = this.tdPadding;
        myTD.style.width = "1.2em";
        myTD.innerHTML = "&gt;";
        myTR.appendChild(myTD);
        
        return myTable;
    }
    
    // Liefert das Tabellenelement als Objekt zurueck, das die Kalenderwochen als Spalte darstellt
    this.getKwTable = function(monat, jahr)
    {
        var myKW = getKW(1, monat, jahr);
        
        var myTable = document.createElement("table");
        myTable.style.margin = this.tableMargin;
        myTable.style.padding = this.tablePadding;
        myTable.style.color = this.kwFontColor;
        myTable.style.borderRight = this.kwBorderStyle;
        var myTR = myTable.insertRow(0);
        var myTD = document.createElement("td");
        myTD.style.height = this.tdHeight;
        myTD.style.margin = this.tdMargin;
        myTD.style.padding = this.tdPadding;
        myTD.style.fontWeight = this.kwFontWeigth;
        var myTDtxt = document.createTextNode("KW");
        myTD.appendChild(myTDtxt);
        myTR.appendChild(myTD);
        for (var i = 0; i < 6; i++)
        {
            var myTR = myTable.insertRow(i+1);
            var myTD = document.createElement("td");
            myTD.setAttribute("align", "right");
            myTD.style.height = this.tdHeight;
            myTD.style.width = this.tdKwWidth;
            myTD.style.margin = this.tdMargin;
            myTD.style.padding = this.tdPadding;
            myTD.style.fontWeight = this.kwFontWeigth;
            var myTDtxt = document.createTextNode(myKW + i);
            myTD.appendChild(myTDtxt);
            myTR.appendChild(myTD);
        }
        return myTable;
    }
    
    // Liefert als Objekt das Tabellenelement zurueck, dass die Daten des aktuellen Monats im Kalender darstellt
    // benoetigt
    this.getDatenTable = function(monat, jahr)
    {
        var myTagName = new Array('M', 'D', 'M', 'D', 'F', 'S', 'S');
        var myDatumHeute = new Date(jahr, monat, 1);
        var myWochentag = myDatumHeute.getDay();
        if (myWochentag == 0) myWochentag = 7;
        
        // Array mit den notwendigen Daten fuellen
        var myDaten = new Array();
            // Tage des Vormonats
        var myAnzahlTageVormonat = getAnzahlTage(monat, jahr);
        for (var i = myWochentag - 1; i > 0; i--)
        {
            myDaten.push(myAnzahlTageVormonat - i);
        }
            // Tage des aktuellen Monats
        for (var i = 0; i < getAnzahlTage(monat, jahr); i++)
        {
            myDaten.push(i+1);
        }
            // Array auffuellen bis 6*7=42 Felder
        var j = 1;
        for (var i = myDaten.length; i < 43; i++)
        {
            myDaten.push(j);
            j++;
        }
        myDaten.reverse();

        var myDatenTable = document.createElement("table");
        myDatenTable.style.margin = this.tableMargin;
        myDatenTable.style.padding = this.tablePadding;
        // Zeile mit den Wochentagen (siehe oben, myTagName)
        var TR = myDatenTable.insertRow(0);
        for (var i = 0; i < myTagName.length; i++)
        {
            var myTD = document.createElement("td");
            myTD.setAttribute("align", "center");
            myTD.style.height = this.tdHeight;
            myTD.style.width = this.tdDateWidth;
            myTD.style.margin = this.tdMargin;
            myTD.style.padding = this.tdPadding;
            var TDtext = document.createTextNode(myTagName[i]);
            myTD.appendChild(TDtext);
            TR.appendChild(myTD);
        }
        // 6 Zeilen je 7 Spalten mit den Daten
        var hilfAktMonth = false;
        for (var i = 0; i < 6; i++)
        {
            var TR = myDatenTable.insertRow(i+1);
            for (var j = 0; j < 7; j++)
            {
                if (myDaten[myDaten.length-1] == 1)
                {
                    if (hilfAktMonth == false) hilfAktMonth = true;
                    else if (hilfAktMonth == true) hilfAktMonth = false;
                }
                var myTD = document.createElement("td");
                // wenn aktueller Monat
                if (hilfAktMonth)
                {
                    myTD.onclick = new Function(this.objektName + '.getDateClicked(' + myDaten[myDaten.length-1] + ')');
                    myTD.style.cursor = "pointer";
                    myTD.style.fontWeight = "bold";
                }
                // wenn Vormonat oder Nachmonat
                else
                {
                    myTD.style.color = this.preMonthTextColor;
                }
                myTD.setAttribute("align", "right");
                myTD.style.height = this.tdHeight;
                myTD.style.width = this.tdDateWidth;
                myTD.style.margin = this.tdMargin;
                myTD.style.padding = this.tdPadding;
                var TDtext = document.createTextNode(myDaten[myDaten.length-1]);
                myTD.appendChild(TDtext);
                TR.appendChild(myTD);
                myDaten.pop();
            }
        }
        return myDatenTable;
    }
    
    // Setzt das Monatsdatum und dann die Tabellenelemente neu
    this.setCalTable = function(monat, jahr)
    {
        this.calDatum = new Date(jahr, monat, 1);
        this.calMonat = this.calDatum.getMonth();
        this.calJahr = this.calDatum.getFullYear();
        var calHead = document.getElementById("calHead" + this.objektId);
        calHead.replaceChild(this.getHeadTable(), calHead.firstChild);
        var calFoot = document.getElementById("calFoot" + this.objektId);
        calFoot.replaceChild(this.getFootTable(), calFoot.firstChild);
        var calDate = document.getElementById("calDate" + this.objektId);
        var newDateTable = this.getDatenTable(this.calMonat, this.calJahr);
        calDate.replaceChild(newDateTable, calDate.firstChild);
        if (this.boolKw)
        {
			var calKW = document.getElementById("calKW" + this.objektId);
			var newKW = this.getKwTable(this.calMonat, this.calJahr);
			calKW.replaceChild(newKW, calKW.firstChild);
		}
    }

    // Generiert das Datum als deutschen String (TT.MM.JJJJ) mit fuehrenden Nullen und schreibt es in die Input.Box
    this.getDateClicked = function(tag)
    {
        if (tag < 10) tag = "0" + tag;
        if (this.calMonat < 9) var thisMonat = "0" + (this.calMonat+1);
        else var thisMonat = this.calMonat + 1;
        var strDatum = tag + "." + thisMonat + "." + this.calJahr;
        this.myInputTextField.setAttribute("value", strDatum);
        this.myDatePicker.style.visibility = "hidden";
    }

    //// Konstruktor aufrufen
    this.Konstruktor();
}

// <summary>Liefert die Anzahl Tage des angegebenen Monats im angegebenen Jahr zurueck</summary>
// <para>int monat, int jahr</para>
// <return>int anzahlTage</return>
function getAnzahlTage(monat, jahr)
{
    switch (monat+1)
    {
        case 1: return 31; break;
        case 2: 
            // Schaltjahr?
            myTag = new Date(jahr, monat - 1, 1);
            myJahr = myTag.getFullYear();
            mySchaltjahr = myJahr % 4;
            mySchaltjahrAusnahme1 = myJahr % 100;
            mySchaltjahrAusnahme2 = myJahr % 400;
            if (mySchaltjahr == 0)
            {
                if (mySchaltjahrAusnahme1 > 0 
                    || mySchaltjahrAusnahme2 > 0)
                {
                    return 29;
                }
                else
                {
                    return 28;
                }
            }
            else 
            {
                return 28;
            }
            break;
        case 3: return 31; break;
        case 4: return 30; break;
        case 5: return 31; break;
        case 6: return 30; break;
        case 7: return 31; break;
        case 8: return 31; break;
        case 9: return 30; break;
        case 10: return 31; break;
        case 11: return 30; break;
        case 12: return 31; break;
        default: return 0; break;
    }
}

// <summary>Liefert die Kalenderwoche des angegebenen Datums zuruck</summary>
// <para>int tag, int monat, int jahr</para>
// <return>int Kwlenderwoche</return>
function getKW(tag, monat, jahr)
{
    var myDatum=new Date(jahr, monat, tag);
    var myDateObj = new Date();
    myDateObj.setTime(myDatum.getTime() + (3-((myDatum.getDay()+6) % 7)) * 86400000);
    myKwJahr=myDateObj.getFullYear();
    var myKW1 = new Date(myKwJahr,0,4);
    myKW1.setTime(myKW1.getTime() + (3-((myKW1.getDay()+6) % 7)) * 86400000); 
    var myKW = Math.floor(1.5+(myDateObj.getTime()-myKW1.getTime())/86400000/7);
    return myKW;
}