// 
// 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_2206.jpg",
//    Gatun Dam holds back Gatun
  //  Lake, the highest point in
    //the Canal.
    "100_2217.jpg",
    //Top of Gatun Dam
    "100_2221.jpg",
    //Closeup of Gatun Dam
    "100_2222.jpg",
    //Looking back at Gatun Locks
    "100_2223.jpg",
    //Ships in Gatun Lake
    "100_2224.jpg",
    //More Ships...
    "100_2225.jpg",
    //More Ships...
    "100_2227.jpg",
    //Closer view of the ships.
    "100_2230.jpg",
    //Range makers help the pilots to keep the
    //ships lined up correctly in
    //the channels.
    "100_2231.jpg",
    //Another range set
    "100_2232.jpg",
    //Closer view
    "100_2233.jpg",
    //All along Gatun Lake there were
    //trees blooming.
    "100_2237.jpg",
    //Another ship transiting Lake
    //Gatun.
    "100_2236.jpg",
    //This photo shows how narrow the
    //channels can be in Gatun Lake.
    "100_2239.jpg",
    //Making our turn.
    "100_2240.jpg",
    //Our companion, the 
    //Ludwigshafen Express,
    //is behind us as we transit the lake.
    "100_2244.jpg",
    //More of those lovely trees.
    "100_2245.jpg",
    //Another ship approaches us
    //in the lake.
    "100_2246.jpg",
    //Closer.
    "100_2247.jpg",
    //The Frontier Ace is a car carrier.
    "100_2250.jpg",
    //The Canal is constantly being dredged
    //and maintained.
    "100_2251.jpg",
    //Hmmm, they seem to be blasting, too.
    "100_2252.jpg",
    //Widening of the Canal, with the 
    //bridge in the background.
    "100_2254.jpg",
    //The works
    "100_2255.jpg",
    //The Gaillard Cut required enormous
    //excavation, and still does.
    "100_2258.jpg",
    //To prevent washouts, there are
    //drainage channels along the cut.
    "100_2260.jpg",
    //A slightly different drain.
    "100_2261.jpg",
    //Another...
    "100_2264.jpg",
    //A lot of this mountain had to be blasted
    //away to make the canal, but there
    //is still plenty of rock left...
    "100_2270.jpg",
    //Passing by.
    "100_2272.jpg",
    //The Express following us.
    "100_2274.jpg",
    //Sailing under the Centennial Bridge
    "100_2278.jpg",
    //One of the tugs used in the Canal
    "100_2279.jpg",
    //Closeup...
    "100_2280.jpg"
//    Approaching the Pedro Miguel Locks.

);
var total_photos = 36;
var narratives = Array(
    //"canalzone.jpg",
    "Useful map for following our narrative",
//    "100_2206.jpg",
  "The huge earthen Gatun Dam holds back Gatun Lake, the highest point in the Canal",
    //"100_2217.jpg",
    "View over the top of Gatun Dam",
    //"100_2221.jpg",
    "A better view of the top of Gatun Dam",
    //"100_2222.jpg",
    "Looking back where we just transited: the Gatun Locks",
    //"100_2223.jpg",
    "There are many ships in Gatun Lake, often waiting for their turn in the locks",
    //"100_2224.jpg",
    "Another ship anchored in the lake, this one looks like a LNG carrier",
    //"100_2225.jpg",
    "A tanker of some kind",
    //"100_2227.jpg",
    "A bulk carrier",
    //"100_2230.jpg",
    "These 'range markers' help the pilots to keep the ships lined up correctly in the channels",
    //"100_2231.jpg",
    "Another range marker set, used by ships going in the other direction",
    //"100_2232.jpg",
    "Closer view of the range marker set",
    //"100_2233.jpg",
    "We saw many trees blooming along Gatun Lake; these had purple flowers",
    //"100_2237.jpg",
    "A ship coming the other way, transiting Lake Gatun",
    //"100_2236.jpg",
    "This photo shows how narrow and winding the channels can be in Gatun Lake",
    //"100_2239.jpg",
    "You can see our wake as we make a sharp turn",
    //"100_2240.jpg",
    "Our companion, the 'Ludwigshafen Express', is behind us as we transit the lake",
    //"100_2244.jpg",
    "More of those pretty purple flowering trees",
    //"100_2245.jpg",
    "Another ship approaching from the other direction",
    //"100_2246.jpg",
    "As the ship gets closer, you can see how narrow the channels are",
    //"100_2247.jpg",
    "Close enough to identify, the 'Frontier Ace' is a car carrier",
    //"100_2250.jpg",
    "The Canal is constantly being dredged and maintained",
    //"100_2251.jpg",
    "That maintenance seems to include blasting, too",
    //"100_2252.jpg",
    "They are widening the Canal; you can see the Centennial Bridge in the background",
    //"100_2254.jpg",
    "More maintenance work going on",
    //"100_2255.jpg",
    "The Gaillard Cut required enormous excavation, and still does",
    //"100_2258.jpg",
    "To prevent washouts, there are drainage channels along the slopes of the cut",
    //"100_2260.jpg",
    "A slightly different drain",
    //"100_2261.jpg",
    "Another drain along the side of the Gaillard Cut",
    //"100_2264.jpg",
    "A lot of this mountain had to be blasted away to make the canal, but there is still plenty of rock left...",
    //"100_2270.jpg",
    "A closer view of the inside of a mountain",
    //"100_2272.jpg",
    "Around the corner behind us, along comes the 'Ludwigshafen Express'",
    //"100_2274.jpg",
    "Sailing under the Centennial Bridge",
    //"100_2278.jpg",
    "One of the tugs used in the Canal",
    //"100_2279.jpg",
    "A closer view of the tugboat",
    //"100_2280.jpg"
    "Now the 'Pride' is approaching the Pedro Miguel Locks"
);
var titles = Array(
    "Map of Canal Zone",
    "Gatun Dam",
    //    Gatun Dam holds back Gatun
    //  Lake, the highest point in
    //the Canal.
    "Top of Dam",
    //Top of Gatun Dam
    "Closeup of Gatun Dam",
    //Closeup of Gatun Dam
    "View Back to Locks",
    //Looking back at Gatun Locks
    "Ships in Gatun Lake",
    //Ships in Gatun Lake
    "Ship in Gatun Lake",
    //More Ships...
    "Ship in Gatun Lake",
    //More Ships...
    "Closer View of Ship",
    //Closer view of the ships.
    "Range Markers",
    //Range makers help the pilots to keep the
    //ships lined up correctly in
    //the channels.
    "Another Range Marker",
    //Another range set
    "Closeup of Range Marker",
    //Closer view
    "Blooming Trees",
    //All along Gatun Lake there were
    //trees blooming.
    "A Ship Approaches",
    //Another ship transiting Lake
    //Gatun.
    "Narrow Channels",
    //This photo shows how narrow the
    //channels can be in Gatun Lake.
    "Sweeping Turn",
    //Making our turn.
    "The 'Ludwigshafen Express'",
    //Our companion, the 
    //Ludwigshafen Express,
    //is behind us as we transit the lake.
    "Blooming Trees",
    //More of those lovely trees.
    "Approaching Ship",
    //Another ship approaches us
    //in the lake.
    "Approaching Ship",
    //Closer.
    "Car Carrier",
    //The Frontier Ace is a car carrier.
    "Canal Dredging and Repair",
    //The Canal is constantly being dredged
    //and maintained.
    "Dredging Equipment",
    //Hmmm, they seem to be blasting, too.
    "Canal Widening",
    //Widening of the Canal, with the 
    //bridge in the background.
    "More Canal Work in Progress",
    //The works
    "Gaillard Cut",
    //The Gaillard Cut required enormous
    //excavation, and still does.
    "Drainage Channel",
    //To prevent washouts, there are
    //drainage channels along the cut.
    "Drainage Channel",
    //A slightly different drain.
    "Drainage Channel",
    //Another...
    "Huge Mountain Had to be Blasted",
    //A lot of this mountain had to be blasted
    //away to make the canal, but there
    //is still plenty of rock left...
    "Closeup of Blasted Mountain",
    //Passing by.
    "The 'Express'",
    //The Express following us.
    "Centennial Bridge",
    //Sailing under the Centennial Bridge
    "Tug in Canal",
    //One of the tugs used in the Canal
    "Tug Closeup",
    //Closeup...
    "Pedro Miguel Locks"
    //    Approaching the Pedro Miguel Locks.
);

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
}