docs: function (inst) {
  
              var h, m, row, col, html, hoursHtml, minutesHtml = '',
                  showPeriod = (this._get(inst, 'showPeriod') == true),
                  showPeriodLabels = (this._get(inst, 'showPeriodLabels') == true),
                  showLeadingZero = (this._get(inst, 'showLeadingZero') == true),
                  showHours = (this._get(inst, 'showHours') == true),
                  showMinutes = (this._get(inst, 'showMinutes') == true),
                  amPmText = this._get(inst, 'amPmText'),
                  rows = this._get(inst, 'rows'),
                  amRows = 0,
                  pmRows = 0,
                  amItems = 0,
                  pmItems = 0,
                  amFirstRow = 0,
                  pmFirstRow = 0,
                  hours = Array(),
                  hours_options = this._get(inst, 'hours'),
                  hoursPerRow = null,
                  hourCounter = 0,
                  hourLabel = this._get(inst, 'hourText'),
                  showCloseButton = this._get(inst, 'showCloseButton'),
                  closeButtonText = this._get(inst, 'closeButtonText'),
                  showNowButton = this._get(inst, 'showNowButton'),
                  nowButtonText = this._get(inst, 'nowButtonText'),
                  showDeselectButton = this._get(inst, 'showDeselectButton'),
                  deselectButtonText = this._get(inst, 'deselectButtonText'),
                  showButtonPanel = showCloseButton || showNowButton || showDeselectButton;
  
  
  
              // prepare all hours and minutes, makes it easier to distribute by rows
              for (h = hours_options.starts; h <= hours_options.ends; h++) {
                  hours.push (h);
              }
              hoursPerRow = Math.ceil(hours.length / rows); // always round up
  
              if (showPeriodLabels) {
                  for (hourCounter = 0; hourCounter < hours.length; hourCounter++) {
                      if (hours[hourCounter] < 12) {
                          amItems++;
                      }
                      else {
                          pmItems++;
                      }
                  }
                  hourCounter = 0;
  
                  amRows = Math.floor(amItems / hours.length * rows);
                  pmRows = Math.floor(pmItems / hours.length * rows);
  
                  // assign the extra row to the period that is more densely populated
                  if (rows != amRows + pmRows) {
                      // Make sure: AM Has Items and either PM Does Not, AM has no rows yet, or AM is more dense
                      if (amItems && (!pmItems || !amRows || (pmRows && amItems / amRows >= pmItems / pmRows))) {
                          amRows++;
                      } else {
                          pmRows++;
                      }
                  }
                  amFirstRow = Math.min(amRows, 1);
                  pmFirstRow = amRows + 1;
  
                  if (amRows == 0) {
                      hoursPerRow = Math.ceil(pmItems / pmRows);
                  } else if (pmRows == 0) {
                      hoursPerRow = Math.ceil(amItems / amRows);
                  } else {
                      hoursPerRow = Math.ceil(Math.max(amItems / amRows, pmItems / pmRows));
                  }
              }
  
  
              html = '<table class="ui-timepicker-table ui-widget-content ui-corner-all"><tr>';
  
              if (showHours) {
  
                  html += '<td class="ui-timepicker-hours">' +
                      '<div class="ui-timepicker-title ui-widget-header ui-helper-clearfix ui-corner-all">' +
                      hourLabel +
                      '</div>' +
                      '<table class="ui-timepicker">';
  
                  for (row = 1; row <= rows; row++) {
                      html += '<tr>';
                      // AM
                      if (row == amFirstRow && showPeriodLabels) {
                          html += '<th rowspan="' + amRows.toString() + '" class="periods" scope="row">' + amPmText[0] + '</th>';
                      }
                      // PM
                      if (row == pmFirstRow && showPeriodLabels) {
                          html += '<th rowspan="' + pmRows.toString() + '" class="periods" scope="row">' + amPmText[1] + '</th>';
                      }
                      for (col = 1; col <= hoursPerRow; col++) {
                          if (showPeriodLabels && row < pmFirstRow && hours[hourCounter] >= 12) {
                              html += this._generateHTMLHourCell(inst, undefined, showPeriod, showLeadingZero);
                          } else {
                              html += this._generateHTMLHourCell(inst, hours[hourCounter], showPeriod, showLeadingZero);
                              hourCounter++;
                          }
                      }
                      html += '</tr>';
                  }
                  html += '</table>' + // Close the hours cells table
                      '</td>'; // Close the Hour td
              }
  
              if (showMinutes) {
                  html += '<td class="ui-timepicker-minutes">';
                  html += this._generateHTMLMinutes(inst);
                  html += '</td>';
              }
  
              html += '</tr>';
  
  
              if (showButtonPanel) {
                  var buttonPanel = '<tr><td colspan="3"><div class="ui-timepicker-buttonpane ui-widget-content">';
                  if (showNowButton) {
                      buttonPanel += '<button type="button" class="ui-timepicker-now ui-state-default ui-corner-all" '
                          + ' data-timepicker-instance-id="#' + inst.id.replace(/\\\\/g,"\\") + '" >'
                          + nowButtonText + '</button>';
                  }
                  if (showDeselectButton) {
                      buttonPanel += '<button type="button" class="ui-timepicker-deselect ui-state-default ui-corner-all" '
                          + ' data-timepicker-instance-id="#' + inst.id.replace(/\\\\/g,"\\") + '" >'
                          + deselectButtonText + '</button>';
                  }
                  if (showCloseButton) {
                      buttonPanel += '<button type="button" class="ui-timepicker-close ui-state-default ui-corner-all" '
                          + ' data-timepicker-instance-id="#' + inst.id.replace(/\\\\/g,"\\") + '" >'
                          + closeButtonText + '</button>';
                  }
  
                  html += buttonPanel + '</div></td></tr>';
              }
              html += '</table>';
  
              return html;
          }