$(document).ready(function() {
  initializeFilmstrips();

  $("#filmstrip div[id='prev']").click(function() {
    $("td[visible='0']", $(this).parent().parent()).show();
    $("td[visible='1']", $(this).parent().parent()).hide();

    $("td[visible]", $(this).parent().parent()).each(function( intIndex ){
      var v = parseInt($(this).attr('visible')) + 1;
      $(this).attr('visible', v);
    });
    toggleNavigation($(this).parent().parent());
  });
  $("#filmstrip div[id='next']").click(function() {
    $("td[visible='1']", $(this).parent().parent()).hide();
    $("td[visible='2']", $(this).parent().parent()).show();

    $("td[visible]", $(this).parent().parent()).each(function( intIndex ){
      var v = parseInt($(this).attr('visible')) - 1;
      $(this).attr('visible', v);
    });
    toggleNavigation($(this).parent().parent());
  });

  function initializeFilmstrips() {
    $("#filmstrip div[id='prev']").each(function( intIndex ){
      $(this).hide();
    });
    $("#filmstrip td[visible]").each(function( intIndex ){
      if ($(this).attr('visible') > 1) {
        $(this).hide();
      }
    });
  }
  function toggleNavigation( context ) {
    if ($("td[visible]:first", context).attr('visible') == 1)
    { $("#prev", context).hide(); } else { $("#prev", context).show(); }

    if ($("td[visible]:last", context).attr('visible') == 1)
    { $("#next", context).hide(); } else { $("#next", context).show(); }
  }
});