///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Global vars

var xpaste_tree_rec_width = 182;

// var tree_public  = 0; should be set in the index.html
// var tree_private = 1;

var paste_tree_reset_phase;
var paste_tree_reset_me_id;

// Note: Once the html has been pased, the function paste_tree_execute() must be called.
//       This is so all the attributes are correctly initaliased, else the callbacks will fail.


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///                                                                                                                         ///
///  Tree of all parents and siblings. This is the BLUE table!                                                              ///
///                                                                                                                         ///
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



function paste_tree(me_id, limit)
{
  paste_tree_reset_phase = new Array();
  paste_tree_reset_me_id = new Array();

  var person = db_person[me_id];

  var html = '';

  html += '<table border="0" cellspacing="1" cellpadding="0" width="748" class="bor1">';

  html += '<tr class="toprow"><td><table border="0" cellspacing="3" cellpadding="0" class="toprow"><tr valign="center">';
  html += '<td class="myid" >'+person[0][0]+'</td>';
  html += '<td class="first">'+person[0][1]+'</td>';
  html += '<td class="last" >'+person[0][2]+'</td>';
  html += '<td class="sexpic"><img border="0" width="11" height="11" src="../images/'+person[0][5]+'.gif" alt=""></td>';
  html += '<td class="date">';

  if(person[1][0][0].year > 0) html +=    'Born '       + person[1][0][0].tiny();
  if(person[1][1][0].year > 0) html += ' - Christened ' + person[1][1][0].tiny();
  if(person[2][0][0].year > 0) html += ' - Died '       + person[2][0][0].tiny();
  if(person[2][1][0].year > 0) html += ' - Buried '     + person[2][1][0].tiny();

  html += '</td>';
  html += '<td class="treepic" width="100%" align="right"><a href="#pagetop"><img border="0" width="16" height="15" src="../images/people.gif" alt="Go To Tree"></a></td>';
  html += '</tr></table></td></tr>';

  html += '<tr><td bgcolor="#F8F8FF"><table border="0" cellspacing="0" cellpadding="0"><tr><td class="borupR1mini">';

  html += paste_tree_rec(me_id, 0, person[0][2], limit);

  html += '</td></tr></table>';
  html += '</td></tr></table>';

  return html;
}


function paste_tree_rec(me_id, lev, root, limit)
{
  var html = '';

  if(me_id == '')
  {
    html += '<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%"><tr>';
    html += '<td width="'+xpaste_tree_rec_width+'" class="borupLmini" valign="top">&nbsp;</td>';
    html += '</tr></table>';

    return html;
  }

  if(typeof(db_person[me_id]) == "undefined") return '';

  html += '<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%"><tr>';
  html += '<td width="'+xpaste_tree_rec_width+'" class="borupLmini" rowspan=2 valign="top">';
  html += paste_tree_leaf(me_id, lev);
  html += '</td>';

  paste_tree_invoke(me_id, 0);

  if(lev < limit)
  {
    var me_db = db_person[me_id];
    var dd_id = me_db[0][3];
    var mm_id = me_db[0][4];

    if(dd_id != '' || mm_id != '')
    {
      html += '<td class="borupR1mini" valign="top"><div id="'+me_id+'_dad">';
      html += paste_tree_rec(dd_id, lev+1, root, limit);
      html += '</div></td></tr>';

      paste_tree_invoke(me_id, 1);

      html += '<tr><td class="borupR2mini" valign="top"><div id="'+me_id+'_mum">';
      html += paste_tree_rec(mm_id, lev+1, root, limit);
      html += '</div></td></tr>';

      paste_tree_invoke(me_id, 2);

      //if(lev > 3) fire_expand(me_id);
    }
  }

  paste_tree_invoke(me_id, 3);

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

  return html;
}


// -----------------------------------------------------------------------------
// The terminating node of the recursive tree

function paste_tree_leaf(me_id, lev)
{
  var me_db = db_person[me_id];
  var dd_id = me_db[0][3];
  var mm_id = me_db[0][4];

  var html = '';

  html += '<table border="0" cellspacing="0" cellpadding="0" width="'+(xpaste_tree_rec_width-1)+'">';
  html += '<tr><td class="trup0lab"><a href="#" onclick="fire_key(\''+me_id+'\', \'key\');">'+me_db[0][2]+'</a></td></tr>';
  html += '</table>';

  html += '<div id="'+me_id+'_key">';
  html += '<table border="0" cellspacing="0" cellpadding="0" width="'+(xpaste_tree_rec_width-1)+'"><tr><td class="trup0lab">';

  html += '<a href="#" onclick="fire_general(\''+me_id+'\', \'all\');"    ><img class="border1" id="'+me_id+'_all_img"     src="../images/dt0_all.gif"    ></a>';
  html += '<a href="#" onclick="fire_area(   \''+me_id+'\', \'title\');"  ><img class="border1" id="'+me_id+'_title_img"   src="../images/dt0_title.gif"  ></a>&nbsp;';
  html += '<a href="#" onclick="fire_area(   \''+me_id+'\', \'id\');"     ><img class="border1" id="'+me_id+'_id_img"      src="../images/dt0_id.gif"     ></a>';
  html += '<a href="#" onclick="fire_area(   \''+me_id+'\', \'census\');" ><img class="border1" id="'+me_id+'_census_img"  src="../images/dt0_census.gif" ></a>';
  html += '<a href="#" onclick="fire_area(   \''+me_id+'\', \'birth\');"  ><img class="border1" id="'+me_id+'_birth_img"   src="../images/dt0_birth.gif"  ></a>';
  html += '<a href="#" onclick="fire_area(   \''+me_id+'\', \'death\');"  ><img class="border1" id="'+me_id+'_death_img"   src="../images/dt0_death.gif"  ></a>';
  html += '<a href="#" onclick="fire_area(   \''+me_id+'\', \'sibling\');"><img class="border1" id="'+me_id+'_sibling_img" src="../images/dt0_sibling.gif"></a>&nbsp;';

  if(dd_id != '' || mm_id != '') html += '<a href="#" onclick="fire_expand( \''+me_id+'\');" ><img class="border1" id="'+me_id+'_but" src="../images/dt_shrink.gif"></a>';

  html += '</td></tr></table></div>';

  html += '<div id="'+me_id+'_all"></div>';

  return html;
}


// -----------------------------------------------------------------------------
// The html content of the main data area.

function paste_tree_content(me_id, title, theid, census, birth, death, sibling)
{
  if(me_id == '') return '';

  if(typeof(db_person[me_id]) == "undefined") return '';

//  return(me_id+' '+title+' '+theid+' '+census+' '+birth+' '+death+' '+sibling); // debug

  html = '<table border="0" cellspacing="1" cellpadding="0" width="' + (xpaste_tree_rec_width-1) + '">';

  if(title)
  {
    html += '<tr class="trup0lab">';
    if(theid ) html += '<td>Id</td>';
    if(census) html += '<td>Census</td>';
    if(birth ) html += '<td>Born</td>';
    if(death ) html += '<td>Died</td>';
    html += '<td>Name</td></tr>';
  }

  var me_db = db_person[me_id];

  var dd_id = me_db[0][3];
  var dd_db;

  var sb_ids;
  var sb_tot;
  var sb_id;
  var sb_db;

  if(dd_id == '')                             sibling = 0;
  if(typeof(db_person[dd_id]) == "undefined") sibling = 0;

  if(sibling)
  {
    dd_db  = db_person[dd_id];
    sb_ids = dd_db[3];
    sb_tot = sb_ids.length;
  }
  else
  {
    sb_tot = 1;
    sb_id  = me_id;
    sb_db  = me_db;
  }

  for(i=0; i<sb_tot; i++)
  {
    html += '<tr valign="top">';

    if(sibling)
    {
      sb_id = sb_ids[i];
      sb_db = db_person[sb_id];
    }

    // Id
    if(theid)
    {
      html += '<td class="trup1lab">'+sb_id+'&nbsp;</td>';
    }

    // In Census
    if(census)
    {
      var bmd = '';//in_bmd(sb_id);
      var cen = in_cen(sb_id, 0, 9999);
      html += '<td class="trup1lab">'+cen+bmd+'&nbsp;</td>';
    }

    // Birth (or Christening)
    if(birth)
    {
      var born; born = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';

           if(sb_db[1][0][0].year > 0) born = sb_db[1][0][0].year;
      else if(sb_db[1][1][0].year > 0) born = sb_db[1][1][0].year;


      html += '<td class="trup1lab">'+born+'&nbsp;</td>';
    }

    // Death (or Burial)
    if(death)
    {
      var died; died = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';

           if(sb_db[2][0][0].year > 0) died = sb_db[2][0][0].year;
      else if(sb_db[2][1][0].year > 0) died = sb_db[2][1][0].year;

      html += '<td class="trup1lab">'+died+'&nbsp;</td>';
    }

    var link = '<a href="#" onclick=\'paste_update("'+ sb_id +'");\' title="">';

    // Names
    if(sb_id == me_id) html += '<td class="trup2lab" width="100%">'+link+'<span class="trupeeroot">'+sb_db[0][1]+'</span></a></td>';
    else               html += '<td class="trup1lab" width="100%">'+link+sb_db[0][1]+'</a></td>';

    html += '</tr>';
  }

  html += '</table>';

  return html;
}


// -----------------------------------------------------------------------------


function paste_tree_invoke(me_id, phase)
{
  paste_tree_reset_phase.push(phase);
  paste_tree_reset_me_id.push(me_id);
}


function paste_tree_execute()
{
  var i;

  for(i=0; i<paste_tree_reset_phase.length; i++)
  {
    var me_id = paste_tree_reset_me_id[i];

    switch(paste_tree_reset_phase[i])
    {
      case 0 :
      {
        document.getElementById(me_id+'_key').style.display =  'none';
        document.getElementById(me_id+'_all').style.display =  'none';
        document.getElementById(me_id+'_all').setAttribute('tree_title'  , 0);
        document.getElementById(me_id+'_all').setAttribute('tree_id'     , 0);
        document.getElementById(me_id+'_all').setAttribute('tree_census' , 1);
        document.getElementById(me_id+'_all').setAttribute('tree_birth'  , 1);
        document.getElementById(me_id+'_all').setAttribute('tree_death'  , 1);
        document.getElementById(me_id+'_all').setAttribute('tree_sibling', 1);

        break;
      }

      case 1 :
      {
        document.getElementById(me_id+'_dad').style.display = 'block';

        break;
      }

      case 2 :
      {
        document.getElementById(me_id+'_mum').style.display = 'block';

        break;
      }

      case 3 :
      {
        fire_general(me_id, 'all');
        fire_area(me_id, 'init');

        break;
      }
    }
  }
}


// -----------------------------------------------------------------------------

function fire_expand(id)
{
  var dad_on  = (document.getElementById(id+'_dad').style.display == 'block');
  var mum_on  = (document.getElementById(id+'_mum').style.display == 'block');
  var dad_off = (document.getElementById(id+'_dad').style.display == 'none' );
  var mum_off = (document.getElementById(id+'_mum').style.display == 'none' );

  if(dad_on || mum_on)
  {
    document.getElementById(id+'_dad').style.display = 'none';
    document.getElementById(id+'_mum').style.display = 'none';
    document.getElementById(id+'_but').src="../images/dt_expand.gif";
    return;
  }

  if(dad_off || mum_off)
  {
    document.getElementById(id+'_dad').style.display = 'block';
    document.getElementById(id+'_mum').style.display = 'block';
    document.getElementById(id+'_but').src="../images/dt_shrink.gif";
    return;
  }
}


function fire_general(id, tag)
{
  var it = id+'_'+tag;

  fire_area(id, '');

  if(document.getElementById(it).style.display == 'block')
  {
    document.getElementById(it).style.display = 'none';
    document.getElementById(it+'_img').src=('../images/dt0_'+tag+'.gif');
    return;
  }

  if(document.getElementById(it).style.display == 'none')
  {
    document.getElementById(it).style.display = 'block';
    document.getElementById(it+'_img').src=('../images/dt1_'+tag+'.gif');
    return;
  }
}


function fire_key(id, tag)
{
  if(document.getElementById(id+'_'+tag).style.display == 'block')
  {
    document.getElementById(id+'_'+tag).style.display = 'none';
    return;
  }

  if(document.getElementById(id+'_'+tag).style.display == 'none')
  {
    document.getElementById(id+'_'+tag).style.display = 'block';
    return;
  }
}


function fire_area(id, tag)
{
  var area = id + '_all';

  // get status

  var title   = parseInt(document.getElementById(area).getAttribute('tree_title'  ));
  var theid   = parseInt(document.getElementById(area).getAttribute('tree_id'     ));
  var census  = parseInt(document.getElementById(area).getAttribute('tree_census' ));
  var birth   = parseInt(document.getElementById(area).getAttribute('tree_birth'  ));
  var death   = parseInt(document.getElementById(area).getAttribute('tree_death'  ));
  var sibling = parseInt(document.getElementById(area).getAttribute('tree_sibling'));

  // act on input

  var was_off = (document.getElementById(area).style.display == 'none');

  if(was_off)  //  if area was off then any option turns both area and option on
  {
    var now_on = 0;

         if(tag == 'title'  ) { now_on = title   = 1; }
    else if(tag == 'id'     ) { now_on = theid   = 1; }
    else if(tag == 'census' ) { now_on = census  = 1; }
    else if(tag == 'birth'  ) { now_on = birth   = 1; }
    else if(tag == 'death'  ) { now_on = death   = 1; }
    else if(tag == 'sibling') { now_on = sibling = 1; }

    if(now_on)
    {
      document.getElementById(area).style.display = 'block';
      document.getElementById(area+'_img').src=('../images/dt1_all.gif');
    }
  }
  else  //  if area was on then any option id toggled
  {
         if(tag == 'title'  ) title   = 1 - title;
    else if(tag == 'id'     ) theid   = 1 - theid;
    else if(tag == 'census' ) census  = 1 - census;
    else if(tag == 'birth'  ) birth   = 1 - birth;
    else if(tag == 'death'  ) death   = 1 - death;
    else if(tag == 'sibling') sibling = 1 - sibling;
  }

  // update status

  document.getElementById(area).setAttribute('tree_title'  , title  );
  document.getElementById(area).setAttribute('tree_id'     , theid  );
  document.getElementById(area).setAttribute('tree_census' , census );
  document.getElementById(area).setAttribute('tree_birth'  , birth  );
  document.getElementById(area).setAttribute('tree_death'  , death  );
  document.getElementById(area).setAttribute('tree_sibling', sibling);

  // update buttons

  document.getElementById(id+'_title_img'  ).setAttribute('src', '../images/dt' + title   + '_title.gif'  );
  document.getElementById(id+'_id_img'     ).setAttribute('src', '../images/dt' + theid   + '_id.gif'     );
  document.getElementById(id+'_census_img' ).setAttribute('src', '../images/dt' + census  + '_census.gif' );
  document.getElementById(id+'_birth_img'  ).setAttribute('src', '../images/dt' + birth   + '_birth.gif'  );
  document.getElementById(id+'_death_img'  ).setAttribute('src', '../images/dt' + death   + '_death.gif'  );
  document.getElementById(id+'_sibling_img').setAttribute('src', '../images/dt' + sibling + '_sibling.gif');

  if(tag == 'init') return;

  // draw area

  document.getElementById(area).innerHTML = paste_tree_content(id, title, theid, census, birth, death, sibling);
}