text: // Inserts shortcut buttons after all of the following:
  //     <input type="text" class="vDateField">
  //     <input type="text" class="vTimeField">
  
  var DateTimeShortcuts = {
      calendars: [],
      calendarInputs: [],
      clockInputs: [],
      calendarDivName1: 'calendarbox', // name of calendar <div> that gets toggled
      calendarDivName2: 'calendarin',  // name of <div> that contains calendar
      calendarLinkName: 'calendarlink',// name of the link that is used to toggle
      clockDivName: 'clockbox',        // name of clock <div> that gets toggled
      clockLinkName: 'clocklink',      // name of the link that is used to toggle
      shortCutsClass: 'datetimeshortcuts', // class of the clock and cal shortcuts
      admin_media_prefix: '',
      init: function() {
          // Get admin_media_prefix by grabbing it off the window object. It's
          // set in the admin/base.html template, so if it's not there, someone's
          // overridden the template. In that case, we'll set a clearly-invalid
          // value in the hopes that someone will examine HTTP requests and see it.
          if (window.__admin_media_prefix__ != undefined) {
              DateTimeShortcuts.admin_media_prefix = window.__admin_media_prefix__;
          } else {
              DateTimeShortcuts.admin_media_prefix = '/missing-admin-media-prefix/';
          }
  
          var inputs = document.getElementsByTagName('input');
          for (i=0; i<inputs.length; i++) {
              var inp = inputs[i];
              if (inp.getAttribute('type') == 'text' && inp.className.match(/vTimeField/)) {
                  DateTimeShortcuts.addClock(inp);
              }
              else if (inp.getAttribute('type') == 'text' && inp.className.match(/vDateField/)) {
                  DateTimeShortcuts.addCalendar(inp);
              }
          }
      },
      // Add clock widget to a given field
      addClock: function(inp) {
          var num = DateTimeShortcuts.clockInputs.length;
          DateTimeShortcuts.clockInputs[num] = inp;
  
          // Shortcut links (clock icon and "Now" link)
          var shortcuts_span = document.createElement('span');
          shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
          inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
          var now_link = document.createElement('a');
          now_link.setAttribute('href', "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date().strftime('" + get_format('TIME_INPUT_FORMATS')[0] + "'));");
          now_link.appendChild(document.createTextNode(gettext('Now')));
          var clock_link = document.createElement('a');
          clock_link.setAttribute('href', 'javascript:DateTimeShortcuts.openClock(' + num + ');');
          clock_link.id = DateTimeShortcuts.clockLinkName + num;
          quickElement('img', clock_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/admin/icon_clock.gif', 'alt', gettext('Clock'));
          shortcuts_span.appendChild(document.createTextNode('\240'));
          shortcuts_span.appendChild(now_link);
          shortcuts_span.appendChild(document.createTextNode('\240|\240'));
          shortcuts_span.appendChild(clock_link);
  
          // Create clock link div
          //
          // Markup looks like:
          // <div id="clockbox1" class="clockbox module">
          //     <h2>Choose a time</h2>
          //     <ul class="timelist">
          //         <li><a href="#">Now</a></li>
          //         <li><a href="#">Midnight</a></li>
          //         <li><a href="#">6 a.m.</a></li>
          //         <li><a href="#">Noon</a></li>
          //     </ul>
          //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
          // </div>
  
          var clock_box = document.createElement('div');
          clock_box.style.display = 'none';
          clock_box.style.position = 'absolute';
          clock_box.className = 'clockbox module';
          clock_box.setAttribute('id', DateTimeShortcuts.clockDivName + num);
          document.body.appendChild(clock_box);
          addEvent(clock_box, 'click', DateTimeShortcuts.cancelEventPropagation);
  
          quickElement('h2', clock_box, gettext('Choose a time'));
          time_list = quickElement('ul', clock_box, '');
          time_list.className = 'timelist';
          time_format = get_format('TIME_INPUT_FORMATS')[0];
          quickElement("a", quickElement("li", time_list, ""), gettext("Now"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date().strftime('" + time_format + "'));");
          quickElement("a", quickElement("li", time_list, ""), gettext("Midnight"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date(1970,1,1,0,0,0,0).strftime('" + time_format + "'));");
          quickElement("a", quickElement("li", time_list, ""), gettext("6 a.m."), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date(1970,1,1,6,0,0,0).strftime('" + time_format + "'));");
          quickElement("a", quickElement("li", time_list, ""), gettext("Noon"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date(1970,1,1,12,0,0,0).strftime('" + time_format + "'));");
  
          cancel_p = quickElement('p', clock_box, '');
          cancel_p.className = 'calendar-cancel';
          quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissClock(' + num + ');');
      },
      openClock: function(num) {
          var clock_box = document.getElementById(DateTimeShortcuts.clockDivName+num)
          var clock_link = document.getElementById(DateTimeShortcuts.clockLinkName+num)
      
          // Recalculate the clockbox position
          // is it left-to-right or right-to-left layout ?
          if (getStyle(document.body,'direction')!='rtl') {
              clock_box.style.left = findPosX(clock_link) + 17 + 'px';
          }
          else {
              // since style's width is in em, it'd be tough to calculate
              // px value of it. let's use an estimated px for now
              // TODO: IE returns wrong value for findPosX when in rtl mode
              //       (it returns as it was left aligned), needs to be fixed.
              clock_box.style.left = findPosX(clock_link) - 110 + 'px';
          }
          clock_box.style.top = findPosY(clock_link) - 30 + 'px';
      
          // Show the clock box
          clock_box.style.display = 'block';
          addEvent(window.document, 'click', function() { DateTimeShortcuts.dismissClock(num); return true; });
      },
      dismissClock: function(num) {
         document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
         window.document.onclick = null;
      },
      handleClockQuicklink: function(num, val) {
         DateTimeShortcuts.clockInputs[num].value = val;
         DateTimeShortcuts.clockInputs[num].focus();
         DateTimeShortcuts.dismissClock(num);
      },
      // Add calendar widget to a given field.
      addCalendar: function(inp) {
          var num = DateTimeShortcuts.calendars.length;
  
          DateTimeShortcuts.calendarInputs[num] = inp;
  
          // Shortcut links (calendar icon and "Today" link)
          var shortcuts_span = document.createElement('span');
          shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
          inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
          var today_link = document.createElement('a');
          today_link.setAttribute('href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
          today_link.appendChild(document.createTextNode(gettext('Today')));
          var cal_link = document.createElement('a');
          cal_link.setAttribute('href', 'javascript:DateTimeShortcuts.openCalendar(' + num + ');');
          cal_link.id = DateTimeShortcuts.calendarLinkName + num;
          quickElement('img', cal_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/admin/icon_calendar.gif', 'alt', gettext('Calendar'));
          shortcuts_span.appendChild(document.createTextNode('\240'));
          shortcuts_span.appendChild(today_link);
          shortcuts_span.appendChild(document.createTextNode('\240|\240'));
          shortcuts_span.appendChild(cal_link);
  
          // Create calendarbox div.
          //
          // Markup looks like:
          //
          // <div id="calendarbox3" class="calendarbox module">
          //     <h2>
          //           <a href="#" class="link-previous">&lsaquo;</a>
          //           <a href="#" class="link-next">&rsaquo;</a> February 2003
          //     </h2>
          //     <div class="calendar" id="calendarin3">
          //         <!-- (cal) -->
          //     </div>
          //     <div class="calendar-shortcuts">
          //          <a href="#">Yesterday</a> | <a href="#">Today</a> | <a href="#">Tomorrow</a>
          //     </div>
          //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
          // </div>
          var cal_box = document.createElement('div');
          cal_box.style.display = 'none';
          cal_box.style.position = 'absolute';
          cal_box.className = 'calendarbox module';
          cal_box.setAttribute('id', DateTimeShortcuts.calendarDivName1 + num);
          document.body.appendChild(cal_box);
          addEvent(cal_box, 'click', DateTimeShortcuts.cancelEventPropagation);
  
          // next-prev links
          var cal_nav = quickElement('div', cal_box, '');
          var cal_nav_prev = quickElement('a', cal_nav, '<', 'href', 'javascript:DateTimeShortcuts.drawPrev('+num+');');
          cal_nav_prev.className = 'calendarnav-previous';
          var cal_nav_next = quickElement('a', cal_nav, '>', 'href', 'javascript:DateTimeShortcuts.drawNext('+num+');');
          cal_nav_next.className = 'calendarnav-next';
  
          // main box
          var cal_main = quickElement('div', cal_box, '', 'id', DateTimeShortcuts.calendarDivName2 + num);
          cal_main.className = 'calendar';
          DateTimeShortcuts.calendars[num] = new Calendar(DateTimeShortcuts.calendarDivName2 + num, DateTimeShortcuts.handleCalendarCallback(num));
          DateTimeShortcuts.calendars[num].drawCurrent();
  
          // calendar shortcuts
          var shortcuts = quickElement('div', cal_box, '');
          shortcuts.className = 'calendar-shortcuts';
          quickElement('a', shortcuts, gettext('Yesterday'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', -1);');
          shortcuts.appendChild(document.createTextNode('\240|\240'));
          quickElement('a', shortcuts, gettext('Today'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
          shortcuts.appendChild(document.createTextNode('\240|\240'));
          quickElement('a', shortcuts, gettext('Tomorrow'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', +1);');
  
          // cancel bar
          var cancel_p = quickElement('p', cal_box, '');
          cancel_p.className = 'calendar-cancel';
          quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissCalendar(' + num + ');');
      },
      openCalendar: function(num) {
          var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1+num)
          var cal_link = document.getElementById(DateTimeShortcuts.calendarLinkName+num)
          var inp = DateTimeShortcuts.calendarInputs[num];
  
          // Determine if the current value in the input has a valid date.
          // If so, draw the calendar with that date's year and month.
          if (inp.value) {
              var date_parts = inp.value.split('-');
              var year = date_parts[0];
              var month = parseFloat(date_parts[1]);
              if (year.match(/\d\d\d\d/) && month >= 1 && month <= 12) {
                  DateTimeShortcuts.calendars[num].drawDate(month, year);
              }
          }
  
          // Recalculate the clockbox position
          // is it left-to-right or right-to-left layout ?
          if (getStyle(document.body,'direction')!='rtl') {
              cal_box.style.left = findPosX(cal_link) + 17 + 'px';
          }
          else {
              // since style's width is in em, it'd be tough to calculate
              // px value of it. let's use an estimated px for now
              // TODO: IE returns wrong value for findPosX when in rtl mode
              //       (it returns as it was left aligned), needs to be fixed.
              cal_box.style.left = findPosX(cal_link) - 180 + 'px';
          }
          cal_box.style.top = findPosY(cal_link) - 75 + 'px';
      
          cal_box.style.display = 'block';
          addEvent(window.document, 'click', function() { DateTimeShortcuts.dismissCalendar(num); return true; });
      },
      dismissCalendar: function(num) {
          document.getElementById(DateTimeShortcuts.calendarDivName1+num).style.display = 'none';
          window.document.onclick = null;
      },
      drawPrev: function(num) {
          DateTimeShortcuts.calendars[num].drawPreviousMonth();
      },
      drawNext: function(num) {
          DateTimeShortcuts.calendars[num].drawNextMonth();
      },
      handleCalendarCallback: function(num) {
          format = get_format('DATE_INPUT_FORMATS')[0];
          // the format needs to be escaped a little
          format = format.replace('\\', '\\\\');
          format = format.replace('\r', '\\r');
          format = format.replace('\n', '\\n');
          format = format.replace('\t', '\\t');
          format = format.replace("'", "\\'");
          return ["function(y, m, d) { DateTimeShortcuts.calendarInputs[",
                 num,
                 "].value = new Date(y, m-1, d).strftime('",
                 format,
                 "');DateTimeShortcuts.calendarInputs[",
                 num,
                 "].focus();document.getElementById(DateTimeShortcuts.calendarDivName1+",
                 num,
                 ").style.display='none';}"].join('');
      },
      handleCalendarQuickLink: function(num, offset) {
         var d = new Date();
         d.setDate(d.getDate() + offset)
         DateTimeShortcuts.calendarInputs[num].value = d.strftime(get_format('DATE_INPUT_FORMATS')[0]);
         DateTimeShortcuts.calendarInputs[num].focus();
         DateTimeShortcuts.dismissCalendar(num);
      },
      cancelEventPropagation: function(e) {
          if (!e) e = window.event;
          e.cancelBubble = true;
          if (e.stopPropagation) e.stopPropagation();
      }
  }
  
  addEvent(window, 'load', DateTimeShortcuts.init);
  