// 120806 gishii
// This group of scripts is called by the demo pages
// The images array contains a series of images which will be shown in the order they're contained in the array
// Similarly the captions array contains a series of strings
// Functions stepForward() and stepBack() are called to step through each image/caption pair

// Global variable current keeps track of which frame
var current = 0;

// Images will display in this order
images = [
  "demo_intro_1.jpg",
  "demo_intro_2.jpg",
  "demo_intro_4.jpg",
  "demo_intro_5.jpg",
  "demo_intro_6.jpg",
  "demo_intro_7.jpg",
  "demo_intro_8.jpg",
  "demo_intro_9.jpg",
  "demo_intro_10.jpg",
  "demo_intro_11.jpg",
];  

// Captions correspond to the order of images above
captions = [
  "Step 1: To start your family tree just enter your name, email address, and choose your gender.",
  "Step 2: Add family members to your tree by clicking on the arrows.",
  "Step 3: Enter your relative's name; email address is optional.",
  "Step 4: Your relative is added to your tree.  Click on more arrows to keep building your tree.",
  "Step 5: Entering a relative's email address invites them to join the tree that you have made.",
  "Step 6: By joining the tree, your relatives can see the tree from their point of view.  They can help build the tree by clicking the arrows.  So relatives keep adding other relatives!",
  "By clicking \"edit info\" you can add information about yourself or a relative.  You can also correct any mistakes in your tree.",
  "Since there is not room to show all in-laws or extended family, certain branches of your tree are \"pruned\".  Click the little trees to open these branches.",
  "By clicking on a relative's name, you can see their profile.  Check out your family's profiles to see photos and stay in touch with them.",
  "Geni is a private network. Only the people in your tree can see your tree and your profile."
];  

// Call init when the page first loads
function init() {
  current = 0;  
  $('caption').innerHTML = captions[current];
  $('image').innerHTML = "<img src='/images/"+images[current]+"'>";
  new Effect.Appear('image', { duration: 0.5 });
}

// stepForward displays the next image and caption
function stepForward() {
  current = (current>=captions.length) ? captions.length : current + 1;
  if (current >= captions.length) {
    $('caption').innerHTML = "";
    $('image').innerHTML = "<span class='xlargeBoldText'><br><br><br><a href='/tree/start'>Start building your family tree</a></span>";
  } else {
    Element.hide('image');
    $('caption').innerHTML = captions[current];
    $('image').innerHTML = "<img src='/images/"+images[current]+"'>";
    new Effect.Appear('image', { duration: 0.5 });
  }
}

// stepBack displays the previous image and caption
function stepBack() {
  current = (current<=0) ? 0 : current - 1;
  if (current < 0) {
    $('caption').innerHTML = "Click Next to start the demo";
    $('image').innerHTML = "";
  } else {
    Element.hide('image');
    $('caption').innerHTML = captions[current];
    $('image').innerHTML = "<img src='/images/"+images[current]+"'>";
    new Effect.Appear('image');
  }
}