var _dynarch_popupCalendar;

function showCalendar(id, format, showsTime, showsOtherMonths) {

  var el = document.getElementById(id);

  if (_dynarch_popupCalendar != null) {
    // we already have some calendar created
    _dynarch_popupCalendar.hide(); // so we hide it first.
  }
  else {
    // first-time call, create the calendar.
    var cal = new Calendar(1, null, dateFromCalendar, closeCalendarHandler);

    // uncomment the following line to hide the week numbers
    // cal.weekNumbers = false;
    cal.showsTime = showsTime;
    cal.time24 = true;

    if (showsOtherMonths) {
      cal.showsOtherMonths = true;
    }
    _dynarch_popupCalendar = cal;    // remember it in the global var
    cal.setRange(2005, 2070);        // min/max year allowed.
    cal.create();
  }

  _dynarch_popupCalendar.setDateFormat(format);    // set the specified date format
  _dynarch_popupCalendar.parseDate(el.value);      // try to parse the text in field
  _dynarch_popupCalendar.sel = el;                 // inform it what input field we use

  // the reference element that we pass to showAtElement is the button that
  // triggers the calendar.  In this example we align the calendar bottom-right
  // to the button.
  //_dynarch_popupCalendar.showAtElement(el.nextSibling, "Br");        // show the calendar

  //_dynarch_popupCalendar.show();
  _dynarch_popupCalendar.showAtElement(el, "bR");

  return false;
}

function dateFromCalendar(cal, date) {
  cal.sel.value = date; // just update the date in the input field.
  //cal.callCloseHandler(); / for single click
}

function closeCalendarHandler(cal) {
  cal.hide();  // hide the calendar
  _dynarch_popupCalendar = null;
}