// 
// photo album handling
// copyright 2005, Bob Swanson
// You may use this code for your own
// slideshows, but please retain this
// copyright notice
//
var numbers = Array(
    "canalzone.jpg",
    "100_2130.jpg",
    "100_2132.jpg",
    "100_2133.jpg",
    "100_2135.jpg",
    "100_2136.jpg",
    "100_2141.jpg",
    "100_2148.jpg",
    "100_2145.jpg",
    "100_2149.jpg",
    "100_2151.jpg",
    "100_2153.jpg",
    "100_2160.jpg",
    "100_2156.jpg",
    "100_2158.jpg",
    "100_2161.jpg",
    "100_2163.jpg",
    "100_2166.jpg",
    "100_2168.jpg",
    "100_2170.jpg",
    "100_2172.jpg",
    "100_2173.jpg",
    "100_2174.jpg",
    "100_2175.jpg",
    "100_2176.jpg",
    "100_2179.jpg",
    "100_1936.jpg",
    "100_2178.jpg",
    "100_2180.jpg",
    "100_2181.jpg",
    "100_2185.jpg",
    "100_2189.jpg",
    "100_2190.jpg",
    "100_2191.jpg",
    "100_2194.jpg",
    "100_2195.jpg",
    "100_2196.jpg",
    "100_2202.jpg",
    "100_2203.jpg",
    "100_2204.jpg",
    "100_2205.jpg",
    "100_2206.jpg",
    "100_2209.jpg",
    "100_2216.jpg",
    "100_2217.jpg"    
);
var total_photos = 45;
var narratives = Array(
//     "canalzone.jpg",
    "Useful map for following our narrative",
//     "100_2130.jpg",
    "Cristobol in early morning",
//     "100_2132.jpg",
    "Many ships at the Cristobol end of the Canal",
//     "100_2133.jpg",
    "The pilot boat comes along side the Pride of America",
//     "100_2135.jpg",
    "Many cruises stop at Cristobol Pier after transit",
//     "100_2136.jpg",
    "Cristobol is a very busy port",
//     "100_2141.jpg",
    "Other ships already ahead of us in the Gatun Locks",
//     "100_2148.jpg",
    "You can see the stair-step locks in use",
//     "100_2145.jpg",
    "Jungle alongside of cruise ship as we approach Gatun Locks",
//     "100_2149.jpg",
    "Another ship is approaching the locks as we start to enter",
//     "100_2151.jpg",
    "Many of the passengers viewing the canal transit were crowding the rail and even standing on cocktail tables...",
//     "100_2153.jpg",
    "Lighthouse sticking up through the jungle near the Gatun Locks",
//     "100_2160.jpg",
    "More of the jungle near the Gatun Locks",
//     "100_2156.jpg",
    "Our locking companion approaches; she is the 'Ludwigshafen Express'",
//     "100_2158.jpg",
    "These electric locomotives are used to control the ships in the locks",
//     "100_2161.jpg",
    "The lock is ready for the 'Express'",
//     "100_2163.jpg",
    "A huge container ship leaves a lock on our left",
//     "100_2166.jpg",
    "The lock gate opens to allow the 'Express' to enter",
//     "100_2168.jpg",
    "The lock gate swings open fully, so the ship can enter",
//     "100_2170.jpg",
    "As the ship enters the lock, the guiding cables are attached to the mules",
//     "100_2172.jpg",
    "There is only a small gap between the Pride and the lock wall",
//     "100_2173.jpg",
    "The mule is attached to the Pride and steadies her in the lock",
//     "100_2174.jpg",
    "The mule guiding the 'Express'; note the many cargo containers",
//     "100_2175.jpg",
    "No one is behind us during locking (security perhaps?)",
//     "100_2176.jpg",
    "A shot of the bridge of the 'Ludwigshafen Express'",
//     "100_2179.jpg",
    "Another view of our companion",
//     "100_1936.jpg",
    "The Pride was built at a Lloyd yard in Germany (no relation to the shipping line)",
//     "100_2178.jpg",
    "The 'Express' crew is taking a good look at the Pride",
//     "100_2180.jpg",
    "The upper gates open and the 'Express' enters the next chamber",
//     "100_2181.jpg",
    "As the 'Express' enters the next chamber, a ship leaves the last lock into Gatun Lake",
//     "100_2185.jpg",
    "Officers of the 'Express' and pilot check clearances very carefully",
//     "100_2189.jpg",
    "We've risen quite a ways; another ship enters the companion lock from Cristobol",
//     "100_2190.jpg",
    "Closeup of the next ship in line",
//     "100_2191.jpg",
    "We're done with the second chamber and are entering the next one",
//     "100_2194.jpg",
    "Looking down at the 'Express', the mule tracks, and the lock control tower",
//     "100_2195.jpg",
    "We are high enough to see over the lock building, over to the visitor gallery",
//     "100_2196.jpg",
    "The visitor gallery at Gatun Locks",
//     "100_2202.jpg",
    "Lock gates open to let the 'Express' into the next chamber",
//     "100_2203.jpg",
    "Closeup of the bulb on the bow of the 'Express'",
//     "100_2204.jpg",
    "A lighthouse that is part of the Gatun Lock complex",
//     "100_2205.jpg",
    "The lock operations still use good old-fashioned mechanical technology",
//     "100_2206.jpg",
    "Gatun Dam is a huge earthen dam, holding back the Gatun Lake",
//     "100_2209.jpg",
    "The Pride leaves the upper lock, into Gatun Lake; the first U.S.-flagged passenger ship to transit the Panama Canal in nearly 50 years",
//     "100_2216.jpg",
    "A view back at the full lock we just left",
//     "100_2217.jpg"    
    "View of the top of Gatun Dam from our position in the lake"
);
var titles = Array(
//     "canalzone.jpg",
    "Map of Canal Zone",
//     "100_2130.jpg",
    "Entering Panama Canal at Cristobol",
//     "100_2132.jpg",
    "More Ships",
//     "100_2133.jpg",
    "Pilot Boat",
//     "100_2135.jpg",
    "Cristobol Pier",
//     "100_2136.jpg",
    "Busy Port",
//     "100_2141.jpg",
    "Approaching Gatun Locks",
//     "100_2148.jpg",
    "Closeup of Locks",
//     "100_2145.jpg",
    "Jungle Near Locks",
//     "100_2149.jpg",
    "Another Ship",
//     "100_2151.jpg",
    "Passengers Gawking",
//     "100_2153.jpg",
    "Lighthouse",
//     "100_2160.jpg",
    "Scenery",
//     "100_2156.jpg",
    "Ludwigshafen Express",
//     "100_2158.jpg",
    "'Mules'",
//     "100_2161.jpg",
    "Lock Ready",
//     "100_2163.jpg",
    "Container Ship Leaving",
//     "100_2166.jpg",
    "Lock Gate Opening",
//     "100_2168.jpg",
    "Gate Nearly Open Now",
//     "100_2170.jpg",
    "Entering the Lock",
//     "100_2172.jpg",
    "Tight Fit",
//     "100_2173.jpg",
    "Mule Attached to the 'Pride'",
//     "100_2174.jpg",
    "Mule Attached to the 'Express'",
//     "100_2175.jpg",
    "No One Approaching",
//     "100_2176.jpg",
    "Our Locking Companion",
//     "100_2179.jpg",
    "Another View",
//     "100_1936.jpg",
    "'Pride' Built By",
//     "100_2178.jpg",
    "'Express' Crew",
//     "100_2180.jpg",
    "Gates Opening",
//     "100_2181.jpg",
    "Entering Second Lock Chamber",
//     "100_2185.jpg",
    "Checking Clearances",
//     "100_2189.jpg",
    "We Have Risen",
//     "100_2190.jpg",
    "Next Ship Ready to Enter Lock",
//     "100_2191.jpg",
    "Into the Next Lock Chamber",
//     "100_2194.jpg",
    "Bird's Eye View",
//     "100_2195.jpg",
    "We Can See Over the Building",
//     "100_2196.jpg",
    "Gallery",
//     "100_2202.jpg",
    "Lock Gates Open",
//     "100_2203.jpg",
    "Bow Bulb",
//     "100_2204.jpg",
    "Another Lighthouse",
//     "100_2205.jpg",
    "Lock Machinery",
//     "100_2206.jpg",
    "Gatun Dam",
//     "100_2209.jpg",
    "Entering Gatun Lake",
//     "100_2216.jpg",
    "Leaving a Full Lock",
//     "100_2217.jpg"    
    "Top of Gatun Dam"
);

var current = 0;

var first_time = 1;

function first_pass()
{
    if (first_time === 1)
    {
      //  alert("first pass");
        load_picture(0); // load picture zero
        first_time = 0; // prevent re-invocation
    }
}

function build_selector()
{
    var selector = document.getElementById("picture_selector"); 
    
    for (i = 0 ; i < total_photos ; i++)
    {
        newtext = document.createTextNode(i + " - " + titles[i]); // text content
        newoption = document.createElement("option");
        newoption.setAttribute("value",i); // value is pic number only
        newoption.appendChild(newtext); // add text
        selector.appendChild(newoption);
    }
}

function create_selector()
{
    for (i = 0 ; i < total_photos ; i++)
    {
        document.write('<option value="' + i + '">' + 
                       i + " - " + titles[i] + '</option>');
    }
}

function get_thumb_url (position) {

    url = "http://www219.pair.com/swansonr/pics/panama2005/lthumbs/th_" + numbers[position];
    return url;
}

function get_picture_url (position) {

    url = "http://www219.pair.com/swansonr/pics/panama2005/" + numbers[position];
    return url;
}

//
// advance and load next if there is one
//
function load_next() {
    //alert(current);
    current = current + 1;
    if (current < total_photos)
    {
        load_picture(current);
    }
    else
    {
        current = current - 1;
        load_picture(total_photos - 1);
    }
}
//
// pop up window with current big photo
//
function load_current() {
    var the_picture_url = get_picture_url(current);
    window.open(the_picture_url,'panama_canal_photo','resizable=yes,scrollbars=yes');
}

function load_selected()
{
    var selector = document.getElementById("picture_selector"); 
    var cur = selector.options[selector.selectedIndex].value;
    //alert("load: " + cur);
    current = parseInt(cur);
    load_picture(current);
}

//
// decrement and load previous if there is one
//
function load_previous() {
    current = current - 1;
    if (current >= 0)
    {
        load_picture(current);
    }
    else
    {
        current = 0;
        load_picture(0);
    }
}

function load_picture(at)
{
    var ximage = document.getElementById("thumb"); // the IMG tag
    var the_thumb_url = get_thumb_url(at);
    ximage.setAttribute("src",the_thumb_url);
    var the_picture_url = get_picture_url(at);
    set_text(the_picture_url);
    set_head_narrative(at);
}

function removeAllChildren(xxx)
{
    while (xxx.hasChildNodes()) 
    {
        xxx.removeChild(xxx.firstChild);
    }
}

//
// sets the prompt just below the photo with
// an anchor that loads the full-size photo
//
function set_text(text)
{
    var prompt = document.getElementById("prompt");
    removeAllChildren(prompt); // remove all content
    //
    // add back in
    //
    newtext = document.createTextNode("View Larger Photo"); // text for anchor
    newpara = document.createElement("p"); // new wrapper for anchor
    newpara.setAttribute("class","timestamp"); // make it smaller 
    anchor = document.createElement("a"); // new anchor
    anchor.setAttribute("href",text);
    anchor.appendChild(newtext); // add text to anchor
    newpara.appendChild(anchor); // put anchor inside paragraph
    // DO NOT DO THIS FOR NOW  prompt.appendChild(newpara); // put paragraph into div
}


function set_head_narrative(position)
{
    //
    // first the heading
    //
    var subh = document.getElementById("subhead");
    removeAllChildren(subh); // remove all content
    //
    // add back in
    //
    newtext = document.createTextNode(titles[position]); // text for title
    newhead = document.createElement("h2"); 
    newhead.setAttribute("class","heading2");
    newhead.appendChild(newtext); // add text to heading
    subh.appendChild(newhead); // put heading into div
    //
    // now the narrative below
    //
    var narr = document.getElementById("narrative");
    removeAllChildren(narr); // remove all content
    //
    // add back in
    //
    newtext = document.createTextNode("[Image: " + position + "] " + narratives[position]); // text for narrative
    newpara = document.createElement("p"); // new wrapper for narrative
    newpara.setAttribute("class","body"); // make it normal
    newpara.appendChild(newtext); // add text to paragraph
    narr.appendChild(newpara); // put paragraph into div
}