var oDatePicker = new DatePicker('DatePicker');

function showDP(oTxt) {
     if ( !document.getElementById ) return;
     // since we control the text format in callback(), getting the date is easy
     var aDt = oTxt.value.split(".");
     var dt = null;
     if ( aDt && (aDt.length == 3) ) {
        dt = new Date(Number(aDt[2]),Number(aDt[1])-1,Number(aDt[0]));
     }
     // store the textbox for use in the client
     oDatePicker.client = oTxt;
     oDatePicker.show(dt,callback);
}

function callback(dt){
     oDatePicker.client.value =
        dt.getDate() + "." +
        (dt.getMonth() + 1) + "." +
        dt.getFullYear();
     if (oDatePicker.client.type=="hidden")
     	oDatePicker.client.form.submit();
}

function DatePicker(name) {
     this.name = name;
     this.dt = new Date();
     document.write('<span id="' + name +
        '" style="z-index:2; position:absolute;top:100px;left:300px;visibility:hidden;"' +
        'class="DatePicker"></span>');
}

DatePicker.prototype.show = function(dt,callback) {
     if ( dt ) this.dt = dt;
     this.callback = callback;
     // if not rendered yet, do so
     if ( !this.oSpan ) this.render();
     // set coordinates
     this.fill();
     this.oSpan.style.visibility = "visible";
     this.oMonth.focus();
}

DatePicker.prototype.hide = function() {
     if ( this.oSpan ) this.oSpan.style.visibility = "hidden";
}

DatePicker.prototype.render = function() {
     var oT1, oTR1, oTD1, oTH1;
     var oT2, oTR2, oTD2;
     this.oSpan = document.getElementById(this.name);
     this.oSpan.appendChild(oT1 = document.createElement("table"));
     oT1.border = 1;
     oT1.className="back";
     oTR1 = oT1.insertRow(oT1.rows.length);
     oTD1 = oTR1.insertCell(oTR1.cells.length);
     oTD1.colSpan = 7;
     oTD1.className = 'DatePickerHdr';
     oT2 = document.createElement("table");
     oTD1.appendChild(oT2);
     oT2.border = 0;
     oTR2 = oT2.insertRow(oT2.rows.length);
     
     oTD2 = oTR2.insertCell(oTR2.cells.length);
     oTD2.onclick = function() { this.oDatePicker.hide(); oDatePicker.client.value="";}
     oTD2.oDatePicker = this;
     oTD2.innerHTML = "Clear";
     oTD2.className = 'DatePickerHdrBtn';

     oTD2 = oTR2.insertCell(oTR2.cells.length);
     oTD2.title = this.texts.prevMonth;
     oTD2.onclick = function() { this.oDatePicker.onPrev(); }
     oTD2.oDatePicker = this;
     oTD2.innerHTML = "&lt;&lt;";
     oTD2.className = 'DatePickerHdrBtn';
     oTD2 = oTR2.insertCell(oTR2.cells.length);
     this.oMonth = document.createElement("select");
     oTD2.appendChild(this.oMonth);
     this.oMonth.oDatePicker = this;
     this.oMonth.onchange = this.oMonth.onkeyup =
        function() { this.oDatePicker.onMonth(); }
     for ( var i = 0; i < 12; i++ ) {
        this.oMonth.add(new Option(this.texts.months[i], i),undefined);
     }
     oTD2 = oTR2.insertCell(oTR2.cells.length);
     oTD2.title = this.texts.nextMonth;
     oTD2.onclick = function() { this.oDatePicker.onNext(); }
     oTD2.oDatePicker = this;
     oTD2.innerHTML = "&gt;&gt;";
     oTD2.className = 'DatePickerHdrBtn';
     
     oTD2 = oTR2.insertCell(oTR2.cells.length);
     oTD2.onclick = function() { this.oDatePicker.onPrevYear(); }
     oTD2.oDatePicker = this;
     oTD2.innerHTML = "&lt;";
     oTD2.className = 'DatePickerHdrBtn';

     this.oYear = oTR2.insertCell(oTR2.cells.length);
     this.oYear.title = this.texts.yearTitle;
     this.oYear.oDatePicker = this;
     this.oYear.className = 'DatePickerHdrBtn';

     oTD2 = oTR2.insertCell(oTR2.cells.length);
     oTD2.onclick = function() { this.oDatePicker.onNextYear(); }
     oTD2.oDatePicker = this;
     oTD2.innerHTML = "&gt;";
     oTD2.className = 'DatePickerHdrBtn';

     oTR1 = oT1.insertRow(oT1.rows.length);
     for ( i = 0; i < 7; i++ ) {
        oTH1 = document.createElement("th");
        oTR1.appendChild(oTH1);
        oTH1.innerHTML = this.texts.days[i];
        oTH1.className = 'DatePicker';
     }
     this.aCells = new Array;
     for ( var j = 0; j < 6; j++ ) {
        this.aCells.push(new Array);
        oTR1 = oT1.insertRow(oT1.rows.length);
        for ( i = 0; i < 7; i++ ) {
           this.aCells[j][i] = oTR1.insertCell(oTR1.cells.length);
           this.aCells[j][i].oDatePicker = this;
           this.aCells[j][i].onclick =
              function() { this.oDatePicker.onDay(this); }
        }
     }
}

DatePicker.prototype.fill = function() {
     // first clear all
     this.clear();
     // place the dates in the calendar
     var nRow = 0;
     var d = new Date(this.dt.getTime());
     var m = d.getMonth();
     for ( d.setDate(1); d.getMonth() == m; d.setTime(d.getTime() + 86400000) ) {
        var nCol = d.getDay();
        this.aCells[nRow][nCol].innerHTML = d.getDate();
        if ( d.getDate() == this.dt.getDate() ) {
           this.aCells[nRow][nCol].className='listing_header';
        } else {
          this.aCells[nRow][nCol].style.backgroundColor='transparent';
        }
        if ( nCol == 6 ) nRow++;
     }
     // set the month combo
     this.oMonth.value = m;
     // set the year text
     this.oYear.innerHTML = this.dt.getFullYear();
}

DatePicker.prototype.clear = function() {
     for ( var j = 0; j < 6; j++ )
        for ( var i = 0; i < 7; i++ ) {
           this.aCells[j][i].innerHTML = "&nbsp;"
           this.aCells[j][i].className = 'DatePickerBtn';
        }
}

DatePicker.prototype.onPrev = function() {
     if ( this.dt.getMonth() == 0 ) {
        this.dt.setFullYear(this.dt.getFullYear() - 1);
        this.dt.setMonth(11);
     } else {
        this.dt.setMonth(this.dt.getMonth() - 1);
     }
     this.fill();
}

DatePicker.prototype.onNext = function() {
     if ( this.dt.getMonth() == 11 ) {
        this.dt.setFullYear(this.dt.getFullYear() + 1);
        this.dt.setMonth(0);
     } else {
        this.dt.setMonth(this.dt.getMonth() + 1);
     }
     this.fill();
}

DatePicker.prototype.onMonth = function() {
     this.dt.setMonth(this.oMonth.value);
     this.fill();
}

DatePicker.prototype.onPrevYear = function() {
   this.dt.setFullYear(this.dt.getFullYear() - 1);
   this.fill();
}

DatePicker.prototype.onNextYear = function() {
   this.dt.setFullYear(this.dt.getFullYear() + 1);
   this.fill();
}

DatePicker.prototype.onDay = function(oCell) {
     var d = parseInt(oCell.innerHTML);
     if ( d > 0 )
     {
        this.dt.setDate(d);
        this.hide();
        this.callback(this.dt);
     }
}

DatePicker.prototype.texts = {
     months: [
        "Januar", "Februar", "März",
        "April", "Mai", "Juni",
        "Juli", "August", "September",
        "Oktober", "November", "Dezember"
     ],
     days: ["So", "Mo", "Die", "Mi", "Don", "Fr", "Sa"],
     prevMonth: "Voriger Monat",
     nextMonth: "Nächster Monat",
     yearTitle: "Jahr. Klicken, um zu ändern.",
     yearQuestion: "Gib neues Jahr ein:"
};