function front_block(names)
{
  var html = "";

  for(var j=0; j<8; j++)
  {
    var myid = names[j];
    
    var ok = (typeof(db_person[myid]) != "undefined");
    
    var sn = '';
    var id = myid.substr(0,3);
    var lv = myid.substr(4,1);
    
    if(ok)
    {
      var person = db_person[myid];
          
      sn = person[0][2];
      
      html += '<a href="#" onclick="main_init(\'' + myid + '\')">';
      html += '<b>' + id + ' &nbsp; ' + lv + ' &nbsp; ' + sn + '</b>';
      html += '</a><br>';
    }
    else
    {
      html += '<b>' + id + ' &nbsp; ' + lv + ' &nbsp; ' + sn + '</b><br>';
    }
  }
  
  return html;
}


function front_mugs(names, w)
{
  var html = '';

  html += '<table border="0" cellspacing="4" cellpadding="0" width="100%"><tr valign="top">';
  
  h = 1.3 * w;

  for(var i=0; i<names.length; i++)
  {
    var myid = names[i];
  
    html += '<td align="center" cellspacing="0" cellpadding="0" border="0">';
    html += '<a href="#" onclick=\'main_init("'+ myid +'");\' title="">';
    html += '<img class="border1" width="'+w+'" height="'+h+'" alt="" src="' + get_mug(myid) + '">';
    html += '</a></td>';
  }

  html += '</tr></table>';
  
  return html;
}



function control_front()
{
  var mugs1 = new Array(
    '000.301','100.301',
    '200.301','300.301',
    '000.202','200.203',
    '000.101','400.101',
    '400.202','600.202',
    '400.304','500.301',
    '600.301','700.309');
    
  var mugs2 = new Array(
    '000.403','040.408',
    '100.402','140.403',
    '200.401','240.408',
    '300.401','340.401',
    '400.402','440.401',
    '500.401','540.404',
    '600.401','640.404',
    '700.405','740.404');

  var names = new Array(
    ['000.001','010.601','020.504','030.601','040.408','050.601','060.501','070.601'],
    ['100.301','110.601','120.509','130.601','140.403','150.601','160.501','170.601'],
    ['200.203','210.601','220.501','230.601','240.408','250.601','260.501','270.601'],
    ['300.301','310.601','320.503','330.601','340.401','350.601','360.501','370.601'],
    ['400.101','410.601','420.501','430.601','440.401','450.601','460.501','470.601'],
    ['500.301','510.601','520.502','530.601','540.404','550.601','560.501','570.601'],
    ['600.202','610.601','620.504','630.601','640.404','650.601','660.501','670.601'],
    ['700.309','710.601','720.501','730.601','740.404','750.601','760.501','770.601']);
    
  var html = '';
  
  
  html += '<div class="Content"><div class="cont">';
  html += '<p>';
  html += '<h1>Family Tree of Sam and Laura Gratrix</h1>';
  html += '<p>';
  html += 'Below is a map of our public family tree - just click somewhere! Have fun :)';
  html += '<p>';
  
  html += '<table border="0" cellspacing="1" cellpadding="0" class="bor1"><tr><td>';
  html += '<table border="0" cellspacing="0" cellpadding="0" width="100%">';
 
  html += '<tr><td colspan="4">' + front_mugs(mugs1, 44) + '</td></tr>';

  html += '<tr valign="middle">';
 
  // Left
  
  html += '<td align="center"><table class="front" cellpadding=0 cellspacing=0 border=0 width="123">';

  for(var i=0; i<2; i++)
  {
    html += '<tr><td class="bor">' + front_block(names[i]) + '</td></tr>';
  }
  
  html += '</table></td>';
  
  //
  
  html += '<td align="center"><table class="front" cellpadding=0 cellspacing=0 border=0 width="123">';

  for(var i=2; i<4; i++)
  {
    html += '<tr><td class="bor">' + front_block(names[i]) + '</td></tr>';
  }
  
  html += '</table></td>';
  
  // Right
  
  html += '<td align="center"><table class="front" cellpadding=0 cellspacing=0 border=0 width="123">';

  for(var i=4; i<6; i++)
  {
    html += '<tr><td class="bor">' + front_block(names[i]) + '</td></tr>';
  }
  
  html += '</table></td>';
  
  //
  
  html += '<td align="center"><table class="front" cellpadding=0 cellspacing=0 border=0 width="123">';

  for(var i=6; i<8; i++)
  {
    html += '<tr><td class="bor">' + front_block(names[i]) + '</td></tr>';
  }
  
  html += '</table></td></tr>';

  html += '<tr><td colspan="4">' + front_mugs(mugs2, 38) + '</td></tr>';



  html += '</table></td></tr></table>';
  
  
  
  html += '<p><b>Our Index System:</b> (please ignore if you like)<p>';
  html += 'Everybody in our tree has been assigned a unique ID tag. We kind of have a system for people that ';
  html += 'are close to our direct ancesters, which we find quite useful. Not so close people tend to get ';
  html += 'given arbitrary tags! ';
  html += '<p>'
  html += 'Our direct ancestors and their siblings have been indexed with a tag of form <i>ABC.GXY</i>. ';
  html += 'The first part <i>ABC</i> is a three digit octal number used to index the family surname, ';
  html += '<i>G</i> is the generation of the family, and <i>XY</i> indexes the ancestor or sibling. ';
  html += 'For example, 240.601	is the tag for Thomas Thackeray. So, 240 means Thackery, Thomas is at generation 6, ';
  html += 'and has been assigned sibling index 01. I try to index the siblings in birth order, ';
  html += 'but this is not always true in the case of late commers! ' ;
  html += 'The arbitrary tagged people typically have a tag of form <i>9xx.xxx</i>. ';
  html += ' - the tag always starts with a 9 and the rest can be anything. ';  
  html += '<p>';
  html += 'The most important family name is Gratrix and has been assigned octal index 000. ';
  html += 'A generation 0 Gratrix has a tag of form <i>000.0XY</i> and would correspond to a child of Sam and Laura (one day maybe...). ';
  html += 'Our 8 Grandparents enter in at generation 3 and have tags of form <i>A00.3XY</i>. For example,  ';
  html += '<i>000.3XY</i> = Gratrix, <i>100.3XY</i> = Howarth, <i>200.3XY</i> = Callaghan, and so on. ';
  html += 'All generation 6 tags have the form <i>AB0.6XY</i>. ';
  html += 'The 8&times;8=64 possible names from generations 0-6 are shown bold on the tree above. ';
  html += 'The single digit represents the generation level at which the name first appears. '; 
  html += 'All generation 9 tags have the form <i>ABC.9XY</i> where 8&times;8&times;8=512 different names are possible. ';
  html += '</div></div>';

  return html;
}