Listing of PrintHTML.js
//------------------------------------------------------------------
//  PrintHTML: format and print out the HTML for the gadget
//------------------------------------------------------------------

//------------------------------------------------------------------
//  clean up text utility
//------------------------------------------------------------------
function escapeString(name) {
      name = name.replace(/&/g, "&")
      name = name.replace(/</g, "<")
      name = name.replace(/>/g, ">")
      name = name.replace(/"/g, """)
      name = name.replace(/'/g, "'")
      return name;
}
        
//------------------------------------------------------------------
//  print the edit window
//------------------------------------------------------------------
var editName = "";
var editBirthdate = "";
var editPictureURL = "";
var editAgeFormat = 0;
var editError = "";
var editOn = false;

function printEdit() {
    //------------------------------------------------------------------
    //  first settle which age format is selected
    //------------------------------------------------------------------
    var selected = ["", "", ""];
    if (editAgeFormat < 0 || editAgeFormat > 3) editAgeFormat = 0;
    selected[editAgeFormat] = 'selected = "selected"';
    
    var htmlText = editError + '\
        <table border="0" cellspacing="0" cellpadding="4" width="100%">\
            <tr>\
                <td class="Prompt">Name <span class="Footnote">*</span></td>\
                <td><input type="text" id="name" value="' + escapeString(editName) + '"/></td>\
            </tr>\
            <tr>\
                <td class="Prompt">Birthdate <span class="Footnote">*</span></td>\
                <td><input type="text" id="birthdate" value="' + editBirthdate + '"/></td>\
            </tr>\
            <tr>\
                <td class="Prompt">Picture URL</td>\
                <td><input type="text" id="pictureURL" value="' + editPictureURL + '"/></td>\
            </tr>\
            <tr>\
                <td class="Prompt">Age Format</td>\
                <td>\
                    <select id="ageFormat">\
                    <option value="0"'+ selected[0] + '>years, months, and days</option>\
                    <option value="1"'+ selected[1] + '>months and days only</option>\
                    <option value="2"'+ selected[2] + '>days only</option>\
                    </select>\
                </td>\
            </tr>\
            <tr>\
            <td class="Footnote">* Required</td>\
            <td class="Right">\
                <input type="button" value="Save"  onclick="doSave()"/> \
                <input type="button" value="Cancel" onclick="doCancel()"/>\
            </td>\
          </tr>\
        </table>';
        
    _gel("listDiv").innerHTML = htmlText;
    _gel("name").focus();
    editOn = true;

    _IG_AdjustIFrameHeight();
}

//------------------------------------------------------------------
//  print the help
//------------------------------------------------------------------
function printHelp() {
    editOn = false;
    var htmlText = '\
        <input type="button" value="Close" onclick="doCloseHelp()"/>\
        \
        <p>Age Gauge allows you to keep track of the ages of your children, your grandchildren (and, at some point, you).</p>\
        <h2>How to Use It </h2>\
        <p>From the main display, click ADD to add another person. If you want to change anything about a person who is already on the list, click on their age. If you want to remove them, click on the small x to the right.</p>\
        <p>To include a picture, you need to enter an Internet address (that http://www... thing) of the photo, and this means that you first need to have your photo on the web. If you haven\'t done this before, the following free sites allow you to upload your pictures:</p>\
        <ul>\
            <li><a target="_blank" href="http://www.shutterfly.com/">Shutterfly</a></li>\
            <li><a target="_blank" href="http://www.kodakgallery.com/">Kodak Gallery</a></li>\
            <li><a target="_blank" href="http://snapfish.com/">Snapfish</a></li>\
            <li><a target="_blank" href="http://picasa.google.com/">Picasa</a></li>\
        </ul>\
        <p>The simplest way to get the web address of your picture is as follows:</p>\
        <ol>\
            <li>Find it on the web.</li>\
            <li>Right-click with your mouse on the photo. One of the choices will be "Copy Image Location." This saves the web address (the URL) to your computer\'s clipboard.\
            <br/>(With Internet Explorer, when you right-click on the photo, choose "Properties." Then highlight the URL and press Ctrl-C to copy it.</li>\
            <li>Enter this next to the "Picture URL" prompt by pasting the clipboard (Ctrl-V on a Windows computer or Apple-V on a Mac).</li>\
        </ol>\
        <input type="button" value="Close" onclick="doCloseHelp()"/>';

    _gel("listDiv").innerHTML = htmlText;
    _IG_AdjustIFrameHeight(300);
}

//------------------------------------------------------------------
//  print out the stats for each person
//------------------------------------------------------------------
function printPeople() {
    editOn = false;
    var htmlText = "";
    
    for (n=0; n<people.array.length; n++) {

        //----------------------------------------------------------
        //  extract the raw data
        //----------------------------------------------------------
        var pictureURL = people.array[n].pictureURL;
        var name = people.array[n].name;
        var birthdate = people.array[n].birthdate;
        var ageFormat = people.array[n].ageFormat;
        var ageText = formatAge(name, birthdate, ageFormat);
        
        //----------------------------------------------------------
        //  then format in html
        //----------------------------------------------------------
        htmlText += '<table width="100%" border="0" cellpadding="0" cellspacing="8" bgcolor="' 
            + bgcolor + '"><tr>';
    
        if (pictureURL != "") {
            htmlText += '<td><img src="' + pictureURL + '" height="100"/></td>';
        }
        htmlText += '<td valign="middle"><a href="javascript:doEdit(' + n + ')">' + escapeString(ageText) + '</a></td>';
        htmlText += '<td class="Right" valign="top"><input type="image" src="'+ library + 
            'x.gif" onclick="doDelete(' + n + ')"/></td>';      
        htmlText += '</tr></table>';
    }

    //------------------------------------------------------------------
    //  put the add/help buttons at the bottom
    //------------------------------------------------------------------
    htmlText += '\
        <p class="AddHelp">\
            <input type="button" value="Add"  onclick="doAdd()"/> \
            <input type="button" value="Help" onclick="doHelp()"/>\
        </p>';
        
    _gel("listDiv").innerHTML = htmlText;
    _IG_AdjustIFrameHeight();
}