$(document).ready(function() {
  if(navigator.userAgent.indexOf("MSIE") != -1) {
     var thumb = getElementsByClassName('thumbnail');
     var items = getElementsByClassName('submenu');
  } else {
     var thumb = document.getElementsByClassName('thumbnail');
     var items = document.getElementsByClassName('submenu');
  }
//  var num = thumb.length;
  var status = "none";
  var oldid = "";
  var oldindex = '';

  $(".thumbnail").click(function(event){
      var id = $(this).attr("id");
      var index = id.replace('i', '');

      if(status == 'open') {
          $(items[oldindex]).slideUp("slow");
          $(items[oldindex]).css('visibility','hidden');
          $(items[oldindex]).css('display','none');
          $(thumb[oldindex]).fadeIn("slow");
          $(thumb[oldindex]).css('display','block');
          $(thumb[oldindex]).css('visibility','visible');
       }

       // submenu open
       $(items[index]).slideDown("slow");
       $(items[index]).css('visibility','visible');

       // thumbnail close
       $(this).slideUp("slow");
       $(this).css('display','none');

       status = "open";
       oldid = id;
       oldindex = index;
  });<!-- end click() -->

  $(".prev").click(function(event){
      if(status == 'open') {
          var previndex = Number(oldindex) + 1;

          // close
          $(items[oldindex]).fadeOut("slow");
          $(thumb[oldindex]).fadeIn("slow");

          // prev open
          $(items[previndex]).slideDown("slow");
          $(items[previndex]).css('visibility','visible');
          $(thumb[previndex]).slideUp("slow");
          $(thumb[previndex]).css('display','none');
          status = "open";
          oldindex = previndex;
      }
  });<!-- end prev click() -->

  $(".next").click(function(event){
      if(status == 'open') {
          var nextindex = Number(oldindex) - 1;

          // close
          $(items[oldindex]).fadeOut("slow");
          $(thumb[oldindex]).fadeIn("slow");

          // next open
          $(items[nextindex]).slideDown("slow");
          $(items[nextindex]).css('visibility','visible');
          $(thumb[nextindex]).slideUp("slow");
          $(thumb[nextindex]).css('display','none');
          status = "open";
          oldindex = nextindex;
      }
  });<!-- end next click() -->

  $(".prev").mouseover(function(event){
       $(this).css('background-image','url(images/prev_on.jpg)');
  });<!-- end prev mouseover() -->

  $(".prev").mouseout(function(event){
       $(this).css('background-image','url(images/prev.jpg)');
  });<!-- end prev mouseout() -->

  $(".next").mouseover(function(event){
       $(this).css('background-image','url(images/next_on.jpg)');
  });<!-- end next mouseover() -->

  $(".next").mouseout(function(event){
       $(this).css('background-image','url(images/next.jpg)');
  });<!-- end next mouseout() -->




});<!-- end ready -->