function showDiv(divName)
{
  if (document.layers)
    document.layers[divName].display = "block";
  else
    document.getElementById(divName).style.display = "block";
}

function hideDiv(divName)
{
  if (document.layers)
    document.layers[divName].display = "none";
  else
    document.getElementById(divName).style.display = "none";
}

var calendar = Object();

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

calendar = function(fieldName)
{
  // Where the date comes from / is sent back to
  this.fieldName = fieldName;
  this.yearField = fieldName + 'YY';
  this.monthField = fieldName + 'MM';
  this.dayField = fieldName + 'DD';

  this.weekNo = function(year, month, day)
  {
    var theDate = new Date(year, month, day)
    var newYear = new Date(year, 0, 1);
    return Math.ceil((((theDate - newYear) / 86400000) + newYear.getDay()+1)/7);
  }


  // New Function to render the calendar AS a dhtml popup
  this.drawCalendar = function()
  {
    this.visible = true;
    var daysInMonth = this.daysInMonth();
    var startDayOfWeek = this.startOfWeek();
    var dayOfMonth = 1;


    var table = "<table cellspacing='0' cellpadding='0' border='0'>";
    table += "<tr>";
    table += "  <td colspan='2' class='previous'><a onclick='return calendar" + this.fieldName + ".changeMonth(-1);'>&lt;</a> <a onclick='return calendar" + this.fieldName + ".changeYear(-1);'>&laquo;</a></td>";
    table += "  <td colspan='4' class='center'>" + months[this.currentMonth] + "<br>" + this.currentYear + "</td>";
    table += "  <td colspan='2' class='next'><a onclick='return calendar" + this.fieldName + ".changeYear(1);'>&raquo;</a> <a onclick='return calendar" + this.fieldName + ".changeMonth(1);'>&gt;</a></td>";
    table += "</tr>";
    table += "<tr><th>Wk</th><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";

    var styleClass = '';

    for (var week = 0; week < 6; week++)
    {
      if (dayOfMonth <= daysInMonth)
      {
        table += "<tr>";
        table += "<td><a onclick='return calendar" + this.fieldName + ".setDate(" + this.currentYear + "," + (this.currentMonth + 1) + "," + dayOfMonth + ")'>" + this.weekNo(this.currentYear, this.currentMonth, dayOfMonth) + "</a></td>";
        for (var day = 0; day < 7; day++)
        {
          if ((week == 0 && day >= startDayOfWeek) || (week > 0 && dayOfMonth <= daysInMonth))
          {
            if (dayOfMonth == this.currentDay)
              styleClass = 'selected';
            else
              styleClass = '';

            table += "<td class=\"" + styleClass + "\"><a onclick='return calendar" + this.fieldName + ".setDate(" + this.currentYear + "," + (this.currentMonth + 1) + "," + dayOfMonth + ")'>" + dayOfMonth + "</a></td>";
            dayOfMonth++;
          }
          else
          {
            table += "<td>&nbsp;</td>";
          }
        }
        table += "</tr>";
      }
    }

    table += "<tr><th colspan='8' style='padding: 3px;'><a onclick='return calendar" + this.fieldName + ".close();'>Close</a></td></tr>";
    table += "</table>";

    document.getElementById('calendar' + this.fieldName).innerHTML = table;
    showDiv('calendar' + this.fieldName);
  }

  this.close = function()
  {
    this.visible = false;
    hideDiv('calendar' + this.fieldName);
    document.getElementById('calendar' + this.fieldName).innerHTML = '';
  }

  this.setDate = function(year, month, day)
  {
    if (month < 10)
      month = "0" + month;
    if (day < 10)
      day = "0" + day;

    document.getElementById(this.yearField).value = year;
    document.getElementById(this.monthField).value = month;
    document.getElementById(this.dayField).value = day;

    // Manually call the onChange script
    var element = new Object();
    element.name = '__calendar_' + this.fieldName;
    element.value = year + '-' + month + '-' + day;
    
    this.close();
  }

  this.changeMonth = function(change)
  {
    this.currentMonth += change;

    if (this.currentMonth < 0)
    {
      this.currentMonth = 11
      this.changeYear(-1);
    }
    else if (this.currentMonth > 11)
    {
      this.currentMonth = 0;
      this.changeYear(1);
    }
    else
    {
      this.drawCalendar();
    }
    return false;
  }

  this.changeYear = function(change)
  {
    this.currentYear += change;
    this.drawCalendar();
    return false;
  }

  this.startOfWeek = function()
  {
    var DoW = new Date(this.currentYear, this.currentMonth, 1);
    return DoW.getDay();
  }

  this.daysInMonth = function()
  {
    var date = new Date(this.currentYear, this.currentMonth, 1);
    var theMonth = date.getMonth() + 1;
    var theYear = date.getYear();
    // Leap years in Feb
    if (theMonth == 2)
    {
      if (theYear % 4 && (theYear & 100 || !(theYear % 400)))
        return 29;
      else
        return 28;
    }
    else if (theMonth == 4 || theMonth == 6 || theMonth == 9 || theMonth == 11)
    {
      return 30;
    }
    else
      return 31;
  }

  // Kept for legacy compatibility
  this.popup = function()
  {
    if (this.visible)
      this.close();
    else
    {
      // Set up the date
      this.date = document.getElementById(this.yearField).value + document.getElementById(this.monthField).value + document.getElementById(this.dayField).value;
      if (this.date == '-1-1-1')
        this.date = new Date;
      else
        this.date = new Date(document.getElementById(this.yearField).value, document.getElementById(this.monthField).value - 1, document.getElementById(this.dayField).value);

      // Current values
      this.currentDay = this.date.getDate();
      this.currentMonth = this.date.getMonth();
      this.currentYear = this.date.getYear();

      if (this.currentYear < 1000)
        this.currentYear += 1900;

      this.drawCalendar();
    }
  }
}