var agebox = $('agebox');
var people = new Hash({
    "Montgomery Burns" : {
        "age" : 513,
        "image" : "mr_burns.gif",
        "job" : "Owner of Springfield Power Plant",
        "gender" : "Male",
        "relatives" : "Larry (son), Lilly Bandcroft (ex-wife), Gertrude (ex-wife), George (brother)",
        "cartoon" : true
        },
    "John Dorian" : {
        "age" : 26,
        "job" : "Doctor of internal medicine",
        "gender" : "Male",
        "relatives" : "Sam Dorian (deceased father), Barbara Dorian née Turner (mother), Dan Dorian (brother), Sam Perry Gilligan Dorian (son)",
        "cartoon" : false
    }
                        
});

people.each(function(person, name) {
    var html = [ '<div class="greybox">' ];
    
    html.push ('<h3>', name || "Unknown", '</h3>');
    html.push ('<img src="', person.image, '" alt="No image." />');
    html.push ('<h4>', person.gender || "You <i>don't know?</i>", '</h4>');
    
    html.push ('<strong>Age:</strong> ', person.age || "Unknown", "<br />");
    html.push ('<strong>Occupation:</strong> ', person.job || "Unemployed/unknown", "<br />");
    html.push ('<strong>Relatives:</strong> ', person.relatives || "None/unknown", "<br />");
    html.push ('<strong>Cartoon character:</strong> ', person.cartoon ? "Yes" : "No");
    
    html.push ('</div>');
    
    $('agebox-placeholder').set('html', $('agebox-placeholder').get('html') + html.join(''));
});