Table cell selection and content display

HTML

<table id="tableAppointment">
    <thead>
        <tr></tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div id="results" title="Results">
    <article></article>
    <button onclick="doClose.call(this)">Close</button>
</div>

CSS

#results {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 400px;
    height: 300px;
    background-color: #E5E5E5;
    border-style:ridge;
    z-index:+1;
}
#tableAppointment {
    width:100%; 
    background-color: White;
    border:1px solid Black;
    color: #1B72A4;
}
#tableAppointment th,
#tableAppointment td {
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border:1px solid Black;
    border-spacing:1px;
}
#tableAppointment thead th {
    font-weight: bold;
    background-color: #F1F1F0;
    text-align:center;
}
#tableAppointment tbody th { 
    width: 70px; 
}
#tableAppointment tbody tr {
    text-align: left;
}
#tableAppointment td.available {
    background-color: #E2E2E2;
}
#tableAppointment td.selection {
    background-color: #CCFFCC;
}

JavaScript

// A FEW UTILITIES......................

//compute ordinal indactors
Number.prototype.ordinal = function () {
    switch ((Math.floor(this / 10) == 1) ? 0 : this % 10) {
        case 1: return "st";
        case 2: return "nd";
        case 3: return "rd";
        default: return "th";
    }
};

//convert hour number into formatted string (12 or 24 hours format)
Number.prototype.toHours = function (hoursFormat) {
    var suffix = "", hour = this;
    if (hoursFormat == "12") {
        suffix = "AM";
        if (hour > 12) {
            hour -= 12;
            suffix = "PM";
        }
    }
    return (hour + 100).toString().substr(1) + ":00" + suffix;
};

//convert number to string of specified length with leading zeros as required
Number.prototype.toDigits = function(numDigits) {
    var frame = Math.pow(10, numDigits);
    return ((this % frame) + frame).toString().substr(1);
};


// START OF APPLICATION......................................

//this config block puts all settings in one place
//server-side code could easily set these in the guise of hidden input elements
var config = {
    startDay: 7,
    daysInView: 6,
    daysInMonth: 31,
    startHour: 8, //24 hour format
    hoursInView: 12,
    slotMinutes: 15, //must divide exactly into 60 and maxSelected
    hoursMode: 12, //12 = am/pm; 24 = 24 hour mode
    maxSlotsTime: 45 //max minutes allowed
};

$(document).ready(function () {
            
    //For speed, make copies of frequently used selectors
    var $table = $("#tableAppointment");
    var $body = $("tbody", $table);
    var $results = $("#results");
    var $resultsArticle = $("article", $results);
    var days = [];

    config.maxSlotsCount = Math.floor(config.maxSlotsTime / config.slotMinutes);
    config.slotQuantity = Math.floor(60 / config.slotMinutes);

    //create table header row
    var $head = $("thead tr", $table).append("<th>").append($("<th>", { text: "Time Slot" }));
    for (var day = config.startDay, i = 0; i <...