// The size of one thumbnail.
var slideshowThumbSize = 84;

/**
 * Show the previous thumbnail in the slideshow.
 * Since the slideshow starts at the beginning, we never need to query the server.
 * @param {Object} link
 */
function previousThumbnail(link, filter, value, originalPhotoId) 
{
  // Get slideshow components.
  var thumbs = $(link).up('.block').down('.thumbs');
  var leftThumb = getCurrentLeftThumb(thumbs);
  var rightThumb = getCurrentRightThumb(thumbs);

  // If there's another thumb to the left, then we just show it.
  if(leftThumb.previousSiblings().size() > 0) {
    moveToPreviousThumb(thumbs, leftThumb, rightThumb, false);
  } else if(getPhotoId(leftThumb) > 0) {
    // Otherwise, we need to query the server to get the previous thumb.
    // We only do this if we're not at the end of the list (the zero-ID case)
    new Ajax.Updater(thumbs.id, '/photos/slideshow_thumb/' + getPhotoId(leftThumb), {
      parameters: {
        direction: 'left',
        filter: filter, 
        value: value,
        original_photo_id: originalPhotoId
      },
      insertion: Insertion.Top,
      onComplete: function(xhr) {
        growThumbs(thumbs);
        moveToPreviousThumb(thumbs, leftThumb, rightThumb, true);
      }
    });
  }  
}

/**
 * Show the next thumbnail in the slideshow.
 * We only query the server if we don't already have an image.
 * @param {Object} link
 */
function nextThumbnail(link, filter, value, originalPhotoId) 
{
  // Get slideshow components.
  var thumbs = $(link).up('.block').down('.thumbs');
  var leftThumb = getCurrentLeftThumb(thumbs);
  var rightThumb = getCurrentRightThumb(thumbs);
  
  // If there's another thumb to the right, then we just show it.
  if(rightThumb.nextSiblings().size() > 0) {
    moveToNextThumb(thumbs, leftThumb, rightThumb);
  } else if(getPhotoId(rightThumb) > 0) {
    // Otherwise, we need to query the server to get the next thumb.
    // We only do this if we're not at the end of the list (the zero-ID case)
    new Ajax.Updater(thumbs.id, '/photos/slideshow_thumb/' + getPhotoId(rightThumb), {
      parameters: {
        direction: 'right',
        filter: filter, 
        value: value,
        original_photo_id: originalPhotoId
      },
      insertion: Insertion.Bottom,
      onComplete: function(xhr) {
        growThumbs(thumbs);
        moveToNextThumb(thumbs, leftThumb, rightThumb);
      }
    });
  }  
}

/**
 * Get the left-most thumb currently in view.
 * @param {Object} thumbs
 */
function getCurrentLeftThumb(thumbs)
{
//  var index = -(parseInt(thumbs.getStyle('left')) / slideshowThumbSize);
  return thumbs.childElements().findAll(function(thumb) {
    return thumb.hasClassName('visible');
  }).first()
}

/**
 * Get the right-most thumb currently in view.
 * @param {Object} thumbs
 */
function getCurrentRightThumb(thumbs)
{
//  var index = -(parseInt(thumbs.getStyle('left')) / slideshowThumbSize);
//  index++;
  return thumbs.childElements().findAll(function(thumb) {
    return thumb.hasClassName('visible');
  }).last()
}

/**
 * The total number of thumbs in the slideshow.
 * @param {Object} thumbs
 */
function getThumbsTotal(thumbs)
{
  var classNames = $w(thumbs.className);
  for(var i = 0; i < classNames.length; i++) {
    var match = classNames[i].match(/^total-(\d+)$/);
    if(match) return parseInt(match[1]);
  }
  return 0;
}

/**
 * Extract the photo ID from the thumb's CSS class names.
 * @param {Object} thumb
 */
function getPhotoId(thumb)
{
  var classNames = $w(thumb.className);
  for(var i = 0; i < classNames.length; i++) {
    var match = classNames[i].match(/^photo-id-(\d+)$/);
    if(match) return parseInt(match[1]);
  }
  return 0;
}

/**
 * Extract the photo index from the thumb's CSS class names.
 * @param {Object} thumb
 */
function getPhotoIndex(thumb)
{
  var classNames = $w(thumb.className);
  for(var i = 0; i < classNames.length; i++) {
    var match = classNames[i].match(/^photo-index-(\d+)$/);
    if(match) return parseInt(match[1]);
  }
  return 0;
}


/**
 * Move the slideshow to the previous thumb.
 * @param {Object} thumbs
 */
function moveToPreviousThumb(thumbs, leftThumb, rightThumb, newThumbAdded)
{
  rightThumb.removeClassName('visible');
  leftThumb.previousSiblings().first().addClassName('visible');
  if(newThumbAdded) thumbs.setStyle({left: '-' + slideshowThumbSize + 'px'});
  new Effect.MoveBy(thumbs, 0, slideshowThumbSize, {duration: 0.3});
}

/**
 * Move the slideshow to the next thumb.
 * @param {Object} thumbs
 */
function moveToNextThumb(thumbs, leftThumb, rightThumb)
{
  leftThumb.removeClassName('visible');
  rightThumb.nextSiblings().first().addClassName('visible');
  new Effect.MoveBy(thumbs, 0, -slideshowThumbSize, {duration: 0.3});
}

/**
 * Grow the thumbnail container to accommodate a new thumb.
 * @param {Object} thumbs
 */
function growThumbs(thumbs)
{
  var newWidth = thumbs.getWidth() + slideshowThumbSize;
  thumbs.setStyle({width: newWidth + 'px'});  
}