//Slideshow with on-demand image loading and crossfade of old and new images.
//
//Author:  Wild Rhombus Software, Oct,2011

$(document).ready(function() 
{		
  $("IMG.centeredimage").load(function() {
      $(".loading").hide();
  });

  //Adjust the position of the page if there is no extra information to show.
  if( $("#maininfo").children().length == 0 ) {
    $("#loader").css("top","5px");
  }

//Add distinct class, and an onclick account to all of the thumbnails.
  var thumbs = $("#thumbs img");
  for (i=0; i<thumbs.length; i++)
  {
    $(thumbs[i]).addClass("thumb"+i);
    $(thumbs[i]).click(show);
  }
	
//Fixes problem where page starts at the first index, so first click
//goes to the first index instead of the second, making it look like the
//slideshow doesn't do anything.
  var index = -1;
  var main=$("IMG.centeredimage").attr("src").split('/');
  var num=parseInt(main[main.length-1].match(/\d+/),10);  
  var firstThumb=$(thumbs[0]).attr("src").split('/');
  var firstNum=parseInt(firstThumb[firstThumb.length-1].match(/\d+/),10);
  if( firstNum==num ) {
    index = 0;
  }

  var img_position=$("#loader").position();

  $('#slideshow').find("img:first-child").load( function() {
  //Adjust the position of where the thumbnail images start based on the size 
  //of the first image
    var img_height=$(this).height();
    var thumb_top = img_height + img_position.top+20;
    $("#thumbs").css('top',thumb_top);
  });

//Add the onclick functions for advancing the slideshow.
  $("#slideshow").click(next);
  $("#next").click(next);
  $("#prev").click(prev);

//Have the navigation icons hover over the image.  
  $("#centercontent").hover(function() {
    navFadeIn();
  },
    function() {
    navFadeOut();
  });
	
//Functions for advancing the slideshow.
  function next()
  {
    index=( index + 1 ) % thumbs.length;
    var src=$(".thumb"+index).attr("src").split('/');   
    animate(src);
  }

  function prev()
  {
    index=( index + thumbs.length - 1 ) % thumbs.length;
    var src=$(".thumb"+index).attr("src").split('/');   
    animate(src);
  }

//Show the next image.
  function show()
  {
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome
//    $("#top").focus();

    index=parseInt($(this).attr('class').match(/\d+/),10);

    var src = $(this).attr("src").split('/');
    animate(src);
  }

//Animation for crossfading old and new images
  function animate( src )
  {
    $(".loading").show();
    src.splice(src.length-2,1);
    var imgsrc = src.join("/");

//Find the previous image
    var old = $('#slideshow').find("#loader");
  
//Create a new "loader" div - absolute element that keeps the two images 
//on top of each other.    
    var newdiv = document.createElement('div');
    $(newdiv).attr("id", "loader");
//Adjust image on pages where space for additional info is blank.
    if( $("#maininfo").children().length == 0 ) {
      $(newdiv).css("top","5px");
    }
 
//Create a new image and append it to the div.
    var img = new Image();
    $(newdiv).append(img);

    $(img).load(function() {
//After image is loaded, add it and the div to the main page.
      $('#slideshow').append(newdiv);


      $(".loading").hide();

//First hide the new image and fade it in slowly.
      $(this).hide();
      $(this).fadeIn("slow");

//At same time, fadeout the old image, and remove when done.
//The removing keeps the memory requirements of the page as low 

//as possible.
      $(old).fadeOut("slow", function() {
        $(this).remove();
      });

//Adjust where the thumbnails are based on the height of the new image.
      var img_height=$(this).height();
      var thumb_top = img_height + img_position.top+20;
      $("#thumbs").css('top',thumb_top);
   }).attr("src",imgsrc).attr("class","centeredimage");
  }

//Nav fadein and fadeout functions for image hover.  
  function navFadeOut() 
  {
    $("#next").fadeOut();
    $("#prev").fadeOut();
  }

  function navFadeIn()
  {
    $("#next").fadeIn();
    $("#prev").fadeIn();
  }
});