static/admin/js/admin/DateTimeShortcuts.js - incubator-flagon-tap - Git at Google

 /*global addEvent, Calendar, cancelEventPropagation, findPosX, findPosY, getStyle, get_format, gettext, interpolate, ngettext, quickElement, removeEvent*/
 // Inserts shortcut buttons after all of the following:
 //     <input type="text" class="vDateField">
 //     <input type="text" class="vTimeField">
 (function() {
     'use strict';
     var DateTimeShortcuts = {
         calendars: [],
         calendarInputs: [],
         clockInputs: [],
         dismissClockFunc: [],
         dismissCalendarFunc: [],
         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
         timezoneWarningClass: 'timezonewarning', // class of the warning for timezone mismatch
         timezoneOffset: 0,
         init: function() {
             var body = document.getElementsByTagName('body')[0];
             var serverOffset = body.getAttribute('data-admin-utc-offset');
             if (serverOffset) {
                 var localOffset = new Date().getTimezoneOffset() * -60;
                 DateTimeShortcuts.timezoneOffset = localOffset - serverOffset;
             }

             var inputs = document.getElementsByTagName('input');
             for (var i = 0; i < inputs.length; i++) {
                 var inp = inputs[i];
                 if (inp.getAttribute('type') === 'text' && inp.className.match(/vTimeField/)) {
                     DateTimeShortcuts.addClock(inp);
                     DateTimeShortcuts.addTimezoneWarning(inp);
                 }
                 else if (inp.getAttribute('type') === 'text' && inp.className.match(/vDateField/)) {
                     DateTimeShortcuts.addCalendar(inp);
                     DateTimeShortcuts.addTimezoneWarning(inp);
                 }
             }
         },
         // Return the current time while accounting for the server timezone.
         now: function() {
             var body = document.getElementsByTagName('body')[0];
             var serverOffset = body.getAttribute('data-admin-utc-offset');
             if (serverOffset) {
                 var localNow = new Date();
                 var localOffset = localNow.getTimezoneOffset() * -60;
                 localNow.setTime(localNow.getTime() + 1000 * (serverOffset - localOffset));
                 return localNow;
             } else {
                 return new Date();
             }
         },
         // Add a warning when the time zone in the browser and backend do not match.
         addTimezoneWarning: function(inp) {
             var $ = django.jQuery;
             var warningClass = DateTimeShortcuts.timezoneWarningClass;
             var timezoneOffset = DateTimeShortcuts.timezoneOffset / 3600;

             // Only warn if there is a time zone mismatch.
             if (!timezoneOffset) {
                 return;
             }

             // Check if warning is already there.
             if ($(inp).siblings('.' + warningClass).length) {
                 return;
             }

             var message;
             if (timezoneOffset > 0) {
                 message = ngettext(
                     'Note: You are %s hour ahead of server time.',
                     'Note: You are %s hours ahead of server time.',
                     timezoneOffset
                 );
             }
             else {
                 timezoneOffset *= -1;
                 message = ngettext(
                     'Note: You are %s hour behind server time.',
                     'Note: You are %s hours behind server time.',
                     timezoneOffset
                 );
             }
             message = interpolate(message, [timezoneOffset]);

             var $warning = $('<span>');
             $warning.attr('class', warningClass);
             $warning.text(message);

             $(inp).parent()
                 .append($('<br>'))
                 .append($warning);
         },
         // Add clock widget to a given field
         addClock: function(inp) {
             var num = DateTimeShortcuts.clockInputs.length;
             DateTimeShortcuts.clockInputs[num] = inp;
             DateTimeShortcuts.dismissClockFunc[num] = function() { DateTimeShortcuts.dismissClock(num); return true; };

             // 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 + ", -1);");
             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(
                 'span', clock_link, '',
                 'class', 'clock-icon',
                 'title', gettext('Choose a Time')
             );
             shortcuts_span.appendChild(document.createTextNode('\u00A0'));
             shortcuts_span.appendChild(now_link);
             shortcuts_span.appendChild(document.createTextNode('\u00A0|\u00A0'));
             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>
             //         <li><a href="#">6 p.m.</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', cancelEventPropagation);

             quickElement('h2', clock_box, gettext('Choose a time'));
             var time_list = quickElement('ul', clock_box);
             time_list.className = 'timelist';
             quickElement("a", quickElement("li", time_list), gettext("Now"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", -1);");
             quickElement("a", quickElement("li", time_list), gettext("Midnight"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 0);");
             quickElement("a", quickElement("li", time_list), gettext("6 a.m."), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 6);");
             quickElement("a", quickElement("li", time_list), gettext("Noon"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 12);");
             quickElement("a", quickElement("li", time_list), gettext("6 p.m."), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 18);");

             var cancel_p = quickElement('p', clock_box);
             cancel_p.className = 'calendar-cancel';
             quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissClock(' + num + ');');
             django.jQuery(document).bind('keyup', function(event) {
                 if (event.which === 27) {
                     // ESC key closes popup
                     DateTimeShortcuts.dismissClock(num);
                     event.preventDefault();
                 }
             });
         },
         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 = Math.max(0, findPosY(clock_link) - 30) + 'px';

             // Show the clock box
             clock_box.style.display = 'block';
             addEvent(document, 'click', DateTimeShortcuts.dismissClockFunc[num]);
         },
         dismissClock: function(num) {
             document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
             removeEvent(document, 'click', DateTimeShortcuts.dismissClockFunc[num]);
         },
         handleClockQuicklink: function(num, val) {
             var d;
             if (val === -1) {
                 d = DateTimeShortcuts.now();
             }
             else {
                 d = new Date(1970, 1, 1, val, 0, 0, 0);
             }
             DateTimeShortcuts.clockInputs[num].value = d.strftime(get_format('TIME_INPUT_FORMATS')[0]);
             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;
             DateTimeShortcuts.dismissCalendarFunc[num] = function() { DateTimeShortcuts.dismissCalendar(num); return true; };

             // 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(
                 'span', cal_link, '',
                 'class', 'date-icon',
                 'title', gettext('Choose a Date')
             );
             shortcuts_span.appendChild(document.createTextNode('\u00A0'));
             shortcuts_span.appendChild(today_link);
             shortcuts_span.appendChild(document.createTextNode('\u00A0|\u00A0'));
             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', 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('\u00A0|\u00A0'));
             quickElement('a', shortcuts, gettext('Today'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
             shortcuts.appendChild(document.createTextNode('\u00A0|\u00A0'));
             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 + ');');
             django.jQuery(document).bind('keyup', function(event) {
                 if (event.which === 27) {
                     // ESC key closes popup
                     DateTimeShortcuts.dismissCalendar(num);
                     event.preventDefault();
                 }
             });
         },
         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 format = get_format('DATE_INPUT_FORMATS')[0];
                 var selected = inp.value.strptime(format);
                 var year = selected.getUTCFullYear();
                 var month = selected.getUTCMonth() + 1;
                 var re = /\d{4}/;
                 if (re.test(year.toString()) && month >= 1 && month <= 12) {
                     DateTimeShortcuts.calendars[num].drawDate(month, year, selected);
                 }
             }

             // 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 = Math.max(0, findPosY(cal_link) - 75) + 'px';

             cal_box.style.display = 'block';
             addEvent(document, 'click', DateTimeShortcuts.dismissCalendarFunc[num]);
         },
         dismissCalendar: function(num) {
             document.getElementById(DateTimeShortcuts.calendarDivName1 + num).style.display = 'none';
             removeEvent(document, 'click', DateTimeShortcuts.dismissCalendarFunc[num]);
         },
         drawPrev: function(num) {
             DateTimeShortcuts.calendars[num].drawPreviousMonth();
         },
         drawNext: function(num) {
             DateTimeShortcuts.calendars[num].drawNextMonth();
         },
         handleCalendarCallback: function(num) {
             var 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 = DateTimeShortcuts.now();
             d.setDate(d.getDate() + offset);
             DateTimeShortcuts.calendarInputs[num].value = d.strftime(get_format('DATE_INPUT_FORMATS')[0]);
             DateTimeShortcuts.calendarInputs[num].focus();
             DateTimeShortcuts.dismissCalendar(num);
         }
     };

     addEvent(window, 'load', DateTimeShortcuts.init);
     window.DateTimeShortcuts = DateTimeShortcuts;
 })();
	/global addEvent, Calendar, cancelEventPropagation, findPosX, findPosY, getStyle, get_format, gettext, interpolate, ngettext, quickElement, removeEvent/
	// Inserts shortcut buttons after all of the following:
	// <input type="text" class="vDateField">
	// <input type="text" class="vTimeField">
	(function() {
	'use strict';
	var DateTimeShortcuts = {
	calendars: [],
	calendarInputs: [],
	clockInputs: [],
	dismissClockFunc: [],
	dismissCalendarFunc: [],
	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
	timezoneWarningClass: 'timezonewarning', // class of the warning for timezone mismatch
	timezoneOffset: 0,
	init: function() {
	var body = document.getElementsByTagName('body')[0];
	var serverOffset = body.getAttribute('data-admin-utc-offset');
	if (serverOffset) {
	var localOffset = new Date().getTimezoneOffset() * -60;
	DateTimeShortcuts.timezoneOffset = localOffset - serverOffset;
	}

	var inputs = document.getElementsByTagName('input');
	for (var i = 0; i < inputs.length; i++) {
	var inp = inputs[i];
	if (inp.getAttribute('type') === 'text' && inp.className.match(/vTimeField/)) {
	DateTimeShortcuts.addClock(inp);
	DateTimeShortcuts.addTimezoneWarning(inp);
	}
	else if (inp.getAttribute('type') === 'text' && inp.className.match(/vDateField/)) {
	DateTimeShortcuts.addCalendar(inp);
	DateTimeShortcuts.addTimezoneWarning(inp);
	}
	}
	},
	// Return the current time while accounting for the server timezone.
	now: function() {
	var body = document.getElementsByTagName('body')[0];
	var serverOffset = body.getAttribute('data-admin-utc-offset');
	if (serverOffset) {
	var localNow = new Date();
	var localOffset = localNow.getTimezoneOffset() * -60;
	localNow.setTime(localNow.getTime() + 1000 * (serverOffset - localOffset));
	return localNow;
	} else {
	return new Date();
	}
	},
	// Add a warning when the time zone in the browser and backend do not match.
	addTimezoneWarning: function(inp) {
	var $ = django.jQuery;
	var warningClass = DateTimeShortcuts.timezoneWarningClass;
	var timezoneOffset = DateTimeShortcuts.timezoneOffset / 3600;

	// Only warn if there is a time zone mismatch.
	if (!timezoneOffset) {
	return;
	}

	// Check if warning is already there.
	if ($(inp).siblings('.' + warningClass).length) {
	return;
	}

	var message;
	if (timezoneOffset > 0) {
	message = ngettext(
	'Note: You are %s hour ahead of server time.',
	'Note: You are %s hours ahead of server time.',
	timezoneOffset
	);
	}
	else {
	timezoneOffset *= -1;
	message = ngettext(
	'Note: You are %s hour behind server time.',
	'Note: You are %s hours behind server time.',
	timezoneOffset
	);
	}
	message = interpolate(message, [timezoneOffset]);

	var $warning = $('<span>');
	$warning.attr('class', warningClass);
	$warning.text(message);

	$(inp).parent()
	.append($('<br>'))
	.append($warning);
	},
	// Add clock widget to a given field
	addClock: function(inp) {
	var num = DateTimeShortcuts.clockInputs.length;
	DateTimeShortcuts.clockInputs[num] = inp;
	DateTimeShortcuts.dismissClockFunc[num] = function() { DateTimeShortcuts.dismissClock(num); return true; };

	// 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 + ", -1);");
	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(
	'span', clock_link, '',
	'class', 'clock-icon',
	'title', gettext('Choose a Time')
	);
	shortcuts_span.appendChild(document.createTextNode('\u00A0'));
	shortcuts_span.appendChild(now_link);
	shortcuts_span.appendChild(document.createTextNode('\u00A0\|\u00A0'));
	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>
	// <li><a href="#">6 p.m.</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', cancelEventPropagation);

	quickElement('h2', clock_box, gettext('Choose a time'));
	var time_list = quickElement('ul', clock_box);
	time_list.className = 'timelist';
	quickElement("a", quickElement("li", time_list), gettext("Now"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", -1);");
	quickElement("a", quickElement("li", time_list), gettext("Midnight"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 0);");
	quickElement("a", quickElement("li", time_list), gettext("6 a.m."), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 6);");
	quickElement("a", quickElement("li", time_list), gettext("Noon"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 12);");
	quickElement("a", quickElement("li", time_list), gettext("6 p.m."), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 18);");

	var cancel_p = quickElement('p', clock_box);
	cancel_p.className = 'calendar-cancel';
	quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissClock(' + num + ');');
	django.jQuery(document).bind('keyup', function(event) {
	if (event.which === 27) {
	// ESC key closes popup
	DateTimeShortcuts.dismissClock(num);
	event.preventDefault();
	}
	});
	},
	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 = Math.max(0, findPosY(clock_link) - 30) + 'px';

	// Show the clock box
	clock_box.style.display = 'block';
	addEvent(document, 'click', DateTimeShortcuts.dismissClockFunc[num]);
	},
	dismissClock: function(num) {
	document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
	removeEvent(document, 'click', DateTimeShortcuts.dismissClockFunc[num]);
	},
	handleClockQuicklink: function(num, val) {
	var d;
	if (val === -1) {
	d = DateTimeShortcuts.now();
	}
	else {
	d = new Date(1970, 1, 1, val, 0, 0, 0);
	}
	DateTimeShortcuts.clockInputs[num].value = d.strftime(get_format('TIME_INPUT_FORMATS')[0]);
	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;
	DateTimeShortcuts.dismissCalendarFunc[num] = function() { DateTimeShortcuts.dismissCalendar(num); return true; };

	// 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(
	'span', cal_link, '',
	'class', 'date-icon',
	'title', gettext('Choose a Date')
	);
	shortcuts_span.appendChild(document.createTextNode('\u00A0'));
	shortcuts_span.appendChild(today_link);
	shortcuts_span.appendChild(document.createTextNode('\u00A0\|\u00A0'));
	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', 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('\u00A0\|\u00A0'));
	quickElement('a', shortcuts, gettext('Today'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
	shortcuts.appendChild(document.createTextNode('\u00A0\|\u00A0'));
	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 + ');');
	django.jQuery(document).bind('keyup', function(event) {
	if (event.which === 27) {
	// ESC key closes popup
	DateTimeShortcuts.dismissCalendar(num);
	event.preventDefault();
	}
	});
	},
	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 format = get_format('DATE_INPUT_FORMATS')[0];
	var selected = inp.value.strptime(format);
	var year = selected.getUTCFullYear();
	var month = selected.getUTCMonth() + 1;
	var re = /\d{4}/;
	if (re.test(year.toString()) && month >= 1 && month <= 12) {
	DateTimeShortcuts.calendars[num].drawDate(month, year, selected);
	}
	}

	// 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 = Math.max(0, findPosY(cal_link) - 75) + 'px';

	cal_box.style.display = 'block';
	addEvent(document, 'click', DateTimeShortcuts.dismissCalendarFunc[num]);
	},
	dismissCalendar: function(num) {
	document.getElementById(DateTimeShortcuts.calendarDivName1 + num).style.display = 'none';
	removeEvent(document, 'click', DateTimeShortcuts.dismissCalendarFunc[num]);
	},
	drawPrev: function(num) {
	DateTimeShortcuts.calendars[num].drawPreviousMonth();
	},
	drawNext: function(num) {
	DateTimeShortcuts.calendars[num].drawNextMonth();
	},
	handleCalendarCallback: function(num) {
	var 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 = DateTimeShortcuts.now();
	d.setDate(d.getDate() + offset);
	DateTimeShortcuts.calendarInputs[num].value = d.strftime(get_format('DATE_INPUT_FORMATS')[0]);
	DateTimeShortcuts.calendarInputs[num].focus();
	DateTimeShortcuts.dismissCalendar(num);
	}
	};

	addEvent(window, 'load', DateTimeShortcuts.init);
	window.DateTimeShortcuts = DateTimeShortcuts;
	})();