function animate_onload()
  {
  var current_frame = 1;
  var next_frame = 1;
  var max_frame_6hr = 0;
  var max_frame_3hr = 0;
  var max_frame_1hr = 0;
  var max_frame = 1;
  var interval_id = 0;
  var delay = 1000;
  var min_delay = 200;
  var max_delay = 2000;

/*
  function findPos(obj) 
    {
    var curleft = curtop = 0;
    if (obj.offsetParent)
       {
       do
          {
          curleft += obj.offsetLeft;
          curtop += obj.offsetTop;
          } while (obj = obj.offsetParent);
       return [curleft,curtop];
       }
    }
*/
  function findPosX(obj) 
    {
    var curleft = 0;
    if (obj.offsetParent)
       {
       do
          {
          curleft += obj.offsetLeft;
          } while (obj = obj.offsetParent);
       return curleft;
       }
    }
  function findPosY(obj) 
    {
    var curtop = 0;
    if (obj.offsetParent)
       {
       do
          {
          curtop += obj.offsetTop;
          } while (obj = obj.offsetParent);
       return curtop;
       }
    }


  function update_frame_count()
    {
    document.getElementById("count").innerHTML = (max_frame-current_frame+1)+" / "+max_frame;
    }

  function update_button_state()
    {
    activate_button("customize");

    if ( interval_id == 0 )
       {
       activate_button("play");
       deactivate_button("pause");

       if ( current_frame != 1 && current_frame != max_frame )
          {
          activate_button("prev");
          activate_button("first");
          activate_button("next");
          activate_button("last");
          }
       else if ( current_frame != 1 && current_frame == max_frame )
          {
          deactivate_button("prev");
          deactivate_button("first");
          activate_button("next");
          activate_button("last");
          }
       else if ( current_frame == 1 && current_frame != max_frame )
          {
          activate_button("prev");
          activate_button("first");
          deactivate_button("next");
          deactivate_button("last");
          }
       else if ( current_frame == 1 && current_frame == max_frame )
          {
          deactivate_button("prev");
          deactivate_button("first");
          deactivate_button("next");
          deactivate_button("last");
          }
       }
    else
       {
       activate_button("pause");
       deactivate_button("play");
       deactivate_button("prev");
       deactivate_button("first");
       deactivate_button("next");
       deactivate_button("last");
       }

    if ( delay <= min_delay )
       {
       deactivate_button("speedup");
       }
    else
       {
       activate_button("speedup");
       }
    if ( delay >= max_delay )
       {
       deactivate_button("slowdown");
       }
    else
       {
       activate_button("slowdown");
       }
    }

  function activate_button(id)
    {
    var button = document.getElementById(id);
    if (button.src.indexOf("_off") != -1)
      {
      button.src = button.src.substring(0, button.src.indexOf("_off.gif")) + ".gif";
      button.style.cursor = "pointer";
      eval("button.onclick = anim_" + id);
      }
    }

  function deactivate_button(id)
    {
    var button = document.getElementById(id);
    if (button.src.indexOf("_off") == -1)
      {
      button.src = button.src.substring(0, button.src.indexOf(".gif")) + "_off.gif";
      button.style.cursor = "default";
      button.onclick = null;
      }
    }

  // pad a number string with leading zeroes
  function pad(n, len)
    {
    s = n.toString();
    if (s.length < len)
      {
      s = ('0000000000' + n.toString()).slice(-len);
      }
    return s;
    }

  // all functions for animation are encapsulated to avoid namespace conflicts
  function switch_frame()
    {
    // ensure we don't go out of bounds
    if (next_frame < 1) next_frame = max_frame;
    else if (next_frame > max_frame) next_frame = 1;

    document.getElementById("frame" + current_frame).style.display = "none";
    document.getElementById("frame" + next_frame).style.display = "block";

    current_frame = next_frame;

    update_frame_count();
    update_button_state();
    }

  function anim_prev()
    {
    next_frame = current_frame + 1;
    switch_frame();
    }

  function anim_next()
    {
    next_frame = current_frame - 1;
    switch_frame();
    }

  function anim_first()
    {
    next_frame = max_frame;
    switch_frame();
    }

  function anim_last()
    {
    next_frame = 1;
    switch_frame();
    }

  function anim_play()
    {
    if (!interval_id)
      {
      interval_id = window.setInterval(anim_next, delay);
      }
    update_button_state();
    }

  function anim_pause()
    {
    if (interval_id)
      {
      window.clearInterval(interval_id);
      interval_id = 0;
      }

    // to reactivate other buttons 
    update_button_state();
    }

  function anim_speedup()
    {
    delay -= 200;
    if (delay < min_delay)
      {
      delay = min_delay;
      update_button_state();
      }

    if (interval_id)
       {
       anim_pause();
       anim_play();
       }
    }

  function anim_slowdown()
    {
    delay += 200;
    if (delay > max_delay)
      {
      delay = max_delay;
      update_button_state();
      }

    if (interval_id)
       {
       anim_pause();
       anim_play();
       }
    }

  function anim_customize()
    {
    if (popUp.style.display == "none")
      {
      popUp.style.display = "block";
      }
    else
      {
      popUp.style.display = "none";
      }
    }

  function anim_one()
    {
    max_frame = max_frame_1hr;
    popUp.style.display = "none";

    if ( current_frame > max_frame_1hr )
       {
       next_frame = max_frame_1hr;
       switch_frame();
       }
    else
       {
       update_frame_count();
       update_button_state();
       }
    }

  function anim_three()
    {
    max_frame = max_frame_3hr;
    popUp.style.display = "none";

    if ( current_frame > max_frame_3hr )
       {
       next_frame = max_frame_3hr;
       switch_frame();
       }
    else
       {
       update_frame_count();
       update_button_state();
       }
    }

  function anim_six()
    {
    max_frame = max_frame_6hr;
    popUp.style.display = "none";

    update_button_state();
    update_frame_count();
    }

  var now = new Date();
  var one_hourAgo   = new Date(now.getTime() - (1000 * 60 * 60));
  var three_hourAgo = new Date(now.getTime() - (3000 * 60 * 60));
  var six_hourAgo   = new Date(now.getTime() - (6000 * 60 * 60));

  // put together a string representation of the date an hour ago (to compare with the time in the file names)
  var one_hourAgoString = one_hourAgo.getUTCFullYear().toString() + pad(one_hourAgo.getUTCMonth()+1, 2) + pad(one_hourAgo.getUTCDate(), 2) + pad(one_hourAgo.getUTCHours(), 2) + pad(one_hourAgo.getUTCMinutes(), 2) + pad(one_hourAgo.getUTCSeconds(), 2);
  var three_hourAgoString = three_hourAgo.getUTCFullYear().toString() + pad(three_hourAgo.getUTCMonth()+1, 2) + pad(three_hourAgo.getUTCDate(), 2) + pad(three_hourAgo.getUTCHours(), 2) + pad(three_hourAgo.getUTCMinutes(), 2) + pad(three_hourAgo.getUTCSeconds(), 2);
  var six_hourAgoString = six_hourAgo.getUTCFullYear().toString() + pad(six_hourAgo.getUTCMonth()+1, 2) + pad(six_hourAgo.getUTCDate(), 2) + pad(six_hourAgo.getUTCHours(), 2) + pad(six_hourAgo.getUTCMinutes(), 2) + pad(six_hourAgo.getUTCSeconds(), 2);

  // find out how many frames there are in the last 1 and 3 hours
  // (note that frame numbers are backwards so animation
  // goes from max_frame, max_frame - 1, ..., 3, 2, 1)
  var i=1;
  while (node = document.getElementById("frame" + i))
    {
    var splitString;

    // get just the filename
    splitString = node.src.split("/");

    // get just the time from the filename
    splitString = splitString[splitString.length-1].split(".");

    // check if the time of the current frame fits within the last hour
    if (splitString > one_hourAgoString) max_frame_1hr++;
    if (splitString > three_hourAgoString) max_frame_3hr++;
    if (splitString > six_hourAgoString) max_frame_6hr++;

    i++;
    }

  // move the pop-up relative to the customize image
  var popUp          = document.getElementById("customize_popup");
  var customizeImage = document.getElementById("customize");
  var x;
  var y;
/*  [x,y] = findPos(customizeImage); */
  x = findPosX(customizeImage);
  y = findPosY(customizeImage);
  popUp.style.top = y + customizeImage.height + "px";
  popUp.style.left = x - popUp.style.width.substring(0, popUp.style.width.indexOf("px",0)) + customizeImage.width + "px";

  var pt = document.getElementById("product_type");
  if ( pt != null )
     if ( pt.innerHTML == "sat_goes" )
        {
        max_frame = max_frame_3hr;
        document.getElementById("short").onclick = anim_three;
        document.getElementById("long").onclick  = anim_six;
        }
     else if ( pt.innerHTML == "sat_noaa" )
        {
        max_frame = 1;
        document.getElementById("first").style.display = "none";
        document.getElementById("prev").style.display = "none";
        document.getElementById("pause").style.display = "none";
        document.getElementById("play").style.display = "none";
        document.getElementById("next").style.display = "none";
        document.getElementById("last").style.display = "none";
        document.getElementById("slowdown").style.display = "none";
        document.getElementById("speedup").style.display = "none";
        document.getElementById("customize").style.display = "none";
        }
     else if ( pt.innerHTML == "radar" )
        {
        max_frame = max_frame_1hr;
        document.getElementById("short").onclick = anim_one;
        document.getElementById("long").onclick  = anim_three;
        }

  update_button_state();
  }

window.onload = animate_onload;