docs: function () {
  			var $dp = this.inst.dpDiv,
  				o = this.inst.settings,
  				tp_inst = this,
  				litem = '',
  				uitem = '',
  				show = null,
  				max = {},
  				gridSize = {},
  				size = null,
  				i = 0,
  				l = 0;
  
  			// Prevent displaying twice
  			if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) {
  				var noDisplay = ' ui_tpicker_unit_hide',
  					html = '<div class="ui-timepicker-div' + (o.isRTL ? ' ui-timepicker-rtl' : '') + (o.oneLine && o.controlType === 'select' ? ' ui-timepicker-oneLine' : '') + '"><dl>' + '<dt class="ui_tpicker_time_label' + ((o.showTime) ? '' : noDisplay) + '">' + o.timeText + '</dt>' +
  								'<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"><input class="ui_tpicker_time_input" ' + (o.timeInput ? '' : 'disabled') + '/></dd>';
  
  				// Create the markup
  				for (i = 0, l = this.units.length; i < l; i++) {
  					litem = this.units[i];
  					uitem = litem.substr(0, 1).toUpperCase() + litem.substr(1);
  					show = o['show' + uitem] !== null ? o['show' + uitem] : this.support[litem];
  
  					// Added by Peter Medeiros:
  					// - Figure out what the hour/minute/second max should be based on the step values.
  					// - Example: if stepMinute is 15, then minMax is 45.
  					max[litem] = parseInt((o[litem + 'Max'] - ((o[litem + 'Max'] - o[litem + 'Min']) % o['step' + uitem])), 10);
  					gridSize[litem] = 0;
  
  					html += '<dt class="ui_tpicker_' + litem + '_label' + (show ? '' : noDisplay) + '">' + o[litem + 'Text'] + '</dt>' +
  								'<dd class="ui_tpicker_' + litem + (show ? '' : noDisplay) + '"><div class="ui_tpicker_' + litem + '_slider' + (show ? '' : noDisplay) + '"></div>';
  
  					if (show && o[litem + 'Grid'] > 0) {
  						html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
  
  						if (litem === 'hour') {
  							for (var h = o[litem + 'Min']; h <= max[litem]; h += parseInt(o[litem + 'Grid'], 10)) {
  								gridSize[litem]++;
  								var tmph = $.datepicker.formatTime(this.support.ampm ? 'hht' : 'HH', {hour: h}, o);
  								html += '<td data-for="' + litem + '">' + tmph + '</td>';
  							}
  						}
  						else {
  							for (var m = o[litem + 'Min']; m <= max[litem]; m += parseInt(o[litem + 'Grid'], 10)) {
  								gridSize[litem]++;
  								html += '<td data-for="' + litem + '">' + ((m < 10) ? '0' : '') + m + '</td>';
  							}
  						}
  
  						html += '</tr></table></div>';
  					}
  					html += '</dd>';
  				}
  				
  				// Timezone
  				var showTz = o.showTimezone !== null ? o.showTimezone : this.support.timezone;
  				html += '<dt class="ui_tpicker_timezone_label' + (showTz ? '' : noDisplay) + '">' + o.timezoneText + '</dt>';
  				html += '<dd class="ui_tpicker_timezone' + (showTz ? '' : noDisplay) + '"></dd>';
  
  				// Create the elements from string
  				html += '</dl></div>';
  				var $tp = $(html);
  
  				// if we only want time picker...
  				if (o.timeOnly === true) {
  					$tp.prepend('<div class="ui-widget-header ui-helper-clearfix ui-corner-all">' + '<div class="ui-datepicker-title">' + o.timeOnlyTitle + '</div>' + '</div>');
  					$dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide();
  				}
  				
  				// add sliders, adjust grids, add events
  				for (i = 0, l = tp_inst.units.length; i < l; i++) {
  					litem = tp_inst.units[i];
  					uitem = litem.substr(0, 1).toUpperCase() + litem.substr(1);
  					show = o['show' + uitem] !== null ? o['show' + uitem] : this.support[litem];
  
  					// add the slider
  					tp_inst[litem + '_slider'] = tp_inst.control.create(tp_inst, $tp.find('.ui_tpicker_' + litem + '_slider'), litem, tp_inst[litem], o[litem + 'Min'], max[litem], o['step' + uitem]);
  
  					// adjust the grid and add click event
  					if (show && o[litem + 'Grid'] > 0) {
  						size = 100 * gridSize[litem] * o[litem + 'Grid'] / (max[litem] - o[litem + 'Min']);
  						$tp.find('.ui_tpicker_' + litem + ' table').css({
  							width: size + "%",
  							marginLeft: o.isRTL ? '0' : ((size / (-2 * gridSize[litem])) + "%"),
  							marginRight: o.isRTL ? ((size / (-2 * gridSize[litem])) + "%") : '0',
  							borderCollapse: 'collapse'
  						}).find("td").click(function (e) {
  								var $t = $(this),
  									h = $t.html(),
  									n = parseInt(h.replace(/[^0-9]/g), 10),
  									ap = h.replace(/[^apm]/ig),
  									f = $t.data('for'); // loses scope, so we use data-for
  
  								if (f === 'hour') {
  									if (ap.indexOf('p') !== -1 && n < 12) {
  										n += 12;
  									}
  									else {
  										if (ap.indexOf('a') !== -1 && n === 12) {
  											n = 0;
  										}
  									}
  								}
  								
  								tp_inst.control.value(tp_inst, tp_inst[f + '_slider'], litem, n);
  
  								tp_inst._onTimeChange();
  								tp_inst._onSelectHandler();
  							}).css({
  								cursor: 'pointer',
  								width: (100 / gridSize[litem]) + '%',
  								textAlign: 'center',
  								overflow: 'hidden'
  							});
  					} // end if grid > 0
  				} // end for loop
  
  				// Add timezone options
  				this.timezone_select = $tp.find('.ui_tpicker_timezone').append('<select></select>').find("select");
  				$.fn.append.apply(this.timezone_select,
  				$.map(o.timezoneList, function (val, idx) {
  					return $("<option />").val(typeof val === "object" ? val.value : val).text(typeof val === "object" ? val.label : val);
  				}));
  				if (typeof(this.timezone) !== "undefined" && this.timezone !== null && this.timezone !== "") {
  					var local_timezone = (new Date(this.inst.selectedYear, this.inst.selectedMonth, this.inst.selectedDay, 12)).getTimezoneOffset() * -1;
  					if (local_timezone === this.timezone) {
  						selectLocalTimezone(tp_inst);
  					} else {
  						this.timezone_select.val(this.timezone);
  					}
  				} else {
  					if (typeof(this.hour) !== "undefined" && this.hour !== null && this.hour !== "") {
  						this.timezone_select.val(o.timezone);
  					} else {
  						selectLocalTimezone(tp_inst);
  					}
  				}
  				this.timezone_select.change(function () {
  					tp_inst._onTimeChange();
  					tp_inst._onSelectHandler();
  					tp_inst._afterInject();
  				});
  				// End timezone options
  				
  				// inject timepicker into datepicker
  				var $buttonPanel = $dp.find('.ui-datepicker-buttonpane');
  				if ($buttonPanel.length) {
  					$buttonPanel.before($tp);
  				} else {
  					$dp.append($tp);
  				}
  
  				this.$timeObj = $tp.find('.ui_tpicker_time_input');
  				this.$timeObj.change(function () {
  					var timeFormat = tp_inst.inst.settings.timeFormat;
  					var parsedTime = $.datepicker.parseTime(timeFormat, this.value);
  					var update = new Date();
  					if (parsedTime) {
  						update.setHours(parsedTime.hour);
  						update.setMinutes(parsedTime.minute);
  						update.setSeconds(parsedTime.second);
  						$.datepicker._setTime(tp_inst.inst, update);
  					} else {
  						this.value = tp_inst.formattedTime;
  						this.blur();
  					}
  				});
  
  				if (this.inst !== null) {
  					var timeDefined = this.timeDefined;
  					this._onTimeChange();
  					this.timeDefined = timeDefined;
  				}
  
  				// slideAccess integration: http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/
  				if (this._defaults.addSliderAccess) {
  					var sliderAccessArgs = this._defaults.sliderAccessArgs,
  						rtl = this._defaults.isRTL;
  					sliderAccessArgs.isRTL = rtl;
  						
  					setTimeout(function () { // fix for inline mode
  						if ($tp.find('.ui-slider-access').length === 0) {
  							$tp.find('.ui-slider:visible').sliderAccess(sliderAccessArgs);
  
  							// fix any grids since sliders are shorter
  							var sliderAccessWidth = $tp.find('.ui-slider-access:eq(0)').outerWidth(true);
  							if (sliderAccessWidth) {
  								$tp.find('table:visible').each(function () {
  									var $g = $(this),
  										oldWidth = $g.outerWidth(),
  										oldMarginLeft = $g.css(rtl ? 'marginRight' : 'marginLeft').toString().replace('%', ''),
  										newWidth = oldWidth - sliderAccessWidth,
  										newMarginLeft = ((oldMarginLeft * newWidth) / oldWidth) + '%',
  										css = { width: newWidth, marginRight: 0, marginLeft: 0 };
  									css[rtl ? 'marginRight' : 'marginLeft'] = newMarginLeft;
  									$g.css(css);
  								});
  							}
  						}
  					}, 10);
  				}
  				// end slideAccess integration
  
  				tp_inst._limitMinMaxDateTime(this.inst, true);
  			}
  		}