var datePickerDivID = "datepicker";

var dayArrayShort   = new Array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa');
var monthArrayLong  = new Array('Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember');

var dateSeparator   = ".";
var dateFormat      = "dmy"       // valid values are "mdy", "dmy", and "ymd"

var startWithMonday = true;

var startYear       = 1900;
var endYear         = 2100;

var strToday        = "Heute";
var strClose        = "X";

var selectedDate    = new Date();

function displayDatePicker( dateFieldName, displayBelowThisObject )
{
  var targetDateField = document.getElementsByName( dateFieldName ).item( 0 );

  if( !displayBelowThisObject )
    displayBelowThisObject = targetDateField;

  var x = displayBelowThisObject.offsetLeft;
  var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;

  var parent = displayBelowThisObject;
  while( parent.offsetParent ) {
    parent = parent.offsetParent;
    x += parent.offsetLeft;
    y += parent.offsetTop ;
  }

  drawDatePicker( targetDateField, x, y );
}


function drawDatePicker( targetDateField, x, y )
{
  selectedDate = getFieldDate( targetDateField.value );

  if( !document.getElementById(datePickerDivID) ) {
    var newNode = document.createElement("div");
    newNode.setAttribute("id", datePickerDivID);
    newNode.setAttribute("style", "visibility: hidden;");
    document.body.appendChild(newNode);
  }

  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.position = "absolute";
  pickerDiv.style.left = x + "px";
  pickerDiv.style.top = y + "px";
  pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
  pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block");
  pickerDiv.style.zIndex = 10000;

  refreshDatePicker( targetDateField.name );
}


function refreshDatePicker( dateFieldName, year, month )
{
  var today = new Date();

  var displayDate = new Date( selectedDate.getFullYear(), selectedDate.getMonth(), 1 );
  if( year >= 0 && month >= 0 ) {
    displayDate = new Date( year, month, 1 );
  }

  var todayDay = -1;
  if( today.getMonth() == displayDate.getMonth() && today.getFullYear() == displayDate.getFullYear() ) {
    todayDay = today.getDate();
  }

  var selectedDay = -1;
  if( selectedDate.getMonth() == displayDate.getMonth() && selectedDate.getFullYear() == displayDate.getFullYear() ) {
    selectedDay = selectedDate.getDate();
  }

  var tdStr = "<td class='dpTD' onmouseout='this.className=\"dpTD\";' onmouseover=' this.className=\"dpTDHover\";' ";
  var tdSelectedStr = "<td class='dpDayHighlightTD' onmouseout='this.className=\"dpDayHighlightTD\";' onmouseover='this.className=\"dpTDHover\";' ";

  // Anfang vom HTML-Code
  var html = "<table class='dpTable'>";

  // NavBar
  html += "<tr>";
  html += "<td>" + getNavCode( dateFieldName, displayDate, -1, "&lt;" ) + "</td>";
  html += "<td><div align='center'>" + getMonthComboCode( dateFieldName, displayDate ) + " " + getYearComboCode( dateFieldName, displayDate ) + "</div></td>";
  html += "<td>" + getNavCode( dateFieldName, displayDate, 1, "&gt;" ) + "</td>";
  html += "</tr>";

  // Tabelle mit eigentlichem Kalender
  html += "<tr><td colspan='3'><table>";

  // Kopfzeile
  html += "<tr class='dpDayTR'>";
  if( startWithMonday ) {
    for(i = 1; i < dayArrayShort.length; i++ )
      html += "<td class='dpDayTD'>" + dayArrayShort[i] + "</td>";
    html += "<td class='dpDayTD'>" + dayArrayShort[0] + "</td>";
  } else {
    for(i = 0; i < dayArrayShort.length; i++)
      html += "<td class='dpDayTD'>" + dayArrayShort[i] + "</td>";
  }
  html += "</tr>";

  // Body
  html += "<tr class='dpTR'>";

  // führende Leerstellen
  if( startWithMonday ) {
    var endTmp = displayDate.getDay()-1;
    if( endTmp < 0 )
      endTmp = 6;
    for (i = 0; i < endTmp; i++)
      html += tdStr + ">&nbsp;</td>";
  } else {
    for (i = 0; i < displayDate.getDay(); i++)
      html += tdStr + ">&nbsp;</td>";
  }

  // Monatstage
  do {
    dayNum = displayDate.getDate();
    tdOnClickStr = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString( displayDate ) + "');\">";

    if( dayNum == selectedDay )
      html += tdSelectedStr;
    else
      html += tdStr;
    html += tdOnClickStr;
    if( dayNum == todayDay )
      html += "<div class='dpToday'>" + dayNum + "</div>";
    else
      html += dayNum;
    html += "</td>";

    if( startWithMonday ) {
      if( displayDate.getDay() == 0 )
        html += "</tr><tr class='dpTR'>";
    } else {
      if( displayDate.getDay() == 6 )
        html += "</tr><tr class='dpTR'>";
    }

    displayDate.setDate( displayDate.getDate() + 1 );
  } while( displayDate.getDate() > 1 )

  // folgende Leerstellen
  if( startWithMonday ) {
    if( displayDate.getDay() > 1 ) {
      for( i = 6; i >= displayDate.getDay(); i-- )
        html += tdStr + ">&nbsp;</td>";
      html += tdStr + ">&nbsp;</td>";
    }
  } else {
    if( displayDate.getDay() > 0 ) {
      for( i = 6; i >= displayDate.getDay(); i-- )
        html += tdStr + ">&nbsp;</td>";
    }
  }
  html += "</tr>";

  // Ende der eigentlichen Kalender-Tabelle
  html += "</table></td></tr>";

  // Links für "Heute" und "Schliessen"
  html += "<tr><td colspan='3'><table width='100%'><tr><td><div style='text-align:left;'>";
  html += "<a href='javascript:refreshDatePicker( \"" + dateFieldName + "\", \"" + today.getFullYear() + "\", \"" + today.getMonth() + "\" );'>" + strToday + "</a>";
  html += "</div></td><td><div style='text-align:right;'>";
  html += "<a href='javascript:updateDateField(\"" + dateFieldName + "\");'>" + strClose + "</a>";
  html += "</div></td></tr></table></td></tr>";

  // und zu guter Letzt: Tabelle zu
  html += "</table>";

  document.getElementById(datePickerDivID).innerHTML = html;
}


function getNavCode( dateFieldName, dateVal, adjust, label )
{
  var newMonth = ( dateVal.getMonth() + adjust ) % 12;
  var newYear  = dateVal.getFullYear() + parseInt( (dateVal.getMonth() + adjust) / 12 );
  if( newMonth < 0 ) {
    newMonth += 12;
    newYear += -1;
  }

  return "<a href='javascript:refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ");'>" + label + "</a>";
}


function getMonthComboCode( dateFieldName, dateVal ) {
  html = "<select class='dpMonthCombo' onchange='refreshDatePicker(\"" + dateFieldName + "\", " + dateVal.getFullYear() + ", this.value );'>";
  for( i = 0; i < monthArrayLong.length; i++ ) {
    html += "<option value='" + i + "'"
    if( i == dateVal.getMonth() )
      html += " selected='selected'"
    html += ">" + monthArrayLong[i] + "</option>";
  }
  html += "</select>"

  return html;
}


function getYearComboCode( dateFieldName, dateVal ) {
  html = "<select class='dpYearCombo' onchange='refreshDatePicker(\"" + dateFieldName + "\", this.value, " + dateVal.getMonth() + ");'>";
  for( i = startYear; i <= endYear; i++ ) {
    html += "<option"
    if( i == dateVal.getFullYear() )
      html += " selected='selected'"
    html += ">" + i + "</option>";
  }
  html += "</select>"

  return html;
}


function getDateString( dateVal ) {
  var dayString   = "00" + dateVal.getDate();
  var monthString = "00" + (dateVal.getMonth()+1);
  dayString       = dayString.substring(dayString.length - 2);
  monthString     = monthString.substring(monthString.length - 2);

  switch( dateFormat ) {
    case "dmy" :
      return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
    case "ymd" :
      return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
    case "mdy" :
    default :
      return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
  }
}


function getFieldDate( dateString ) {
  var dateVal;
  var dArray;
  var d, m, y;

  try {
    dArray = splitDateString( dateString );
    if( dArray ) {
      switch( dateFormat ) {
        case "dmy" :
          d = parseInt(dArray[0], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
        case "ymd" :
          d = parseInt(dArray[2], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[0], 10);
          break;
        case "mdy" :
        default :
          d = parseInt(dArray[1], 10);
          m = parseInt(dArray[0], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
      }
      dateVal = new Date( y, m, d );
    } else if( dateString ) {
      dateVal = new Date( dateString );
    } else {
      dateVal = new Date();
    }
  } catch( e ) {
    dateVal = new Date();
  }

  return dateVal;
}


function splitDateString( dateString )
{
  var dArray;
  if( dateString.indexOf("/") >= 0 )
    dArray = dateString.split("/");
  else if( dateString.indexOf(".") >= 0 )
    dArray = dateString.split(".");
  else if( dateString.indexOf("-") >= 0 )
    dArray = dateString.split("-");
  else if( dateString.indexOf("\\") >= 0 )
    dArray = dateString.split("\\");
  else
    dArray = false;

  return dArray;
}

function updateDateField( dateFieldName, dateString )
{
  var targetDateField = document.getElementsByName( dateFieldName ).item(0);
  if( dateString )
    targetDateField.value = dateString;

  var pickerDiv = document.getElementById( datePickerDivID );
  pickerDiv.style.visibility = "hidden";
  pickerDiv.style.display = "none";
}