// Pictures[PICTUREINDEX] array looks like
// [FILENAME, [EXIF]]
var FILENAME = 0;
var EXIF = 1;

// Pictures[PICTUREINDEX][EXIF][EXIFINDEX] array looks like
// [KEY, VALUE, SHORT]
var KEY = 0;
var VALUE = 1;
var SHORT = 2;

var AlbumPath = "";
var CacheList = [];
var CacheProcess = [];
var Pictures = [];
var PictureX = 0;
var PictureY = 0;
var ShortExif = 1;

function AddExifRow(Data)
{
  $('#ExifTable').append("<tr><td class='ExifCellLeft'>" + Data[KEY] + "</td><td class='ExifCellRight'>" + Data[VALUE] + "</td></tr>");
}

function DisplayImage(Current)
{
  // Get the first element
  Next = Pictures[0];

  // Change the Navigation link
  if ($('#OriginalLink').length) {
    $('#OriginalLink').attr('href', $('#OriginalLink').attr('href').replace(Current[FILENAME], Next[FILENAME]));
    $('#OriginalLink').text(Next[FILENAME]);
  }

  // Change the Image source
  $('#Picture').attr('src', $('#Picture').attr('src').replace(Current[FILENAME], Next[FILENAME]));

  // Change the Picture X of Y
  $('#PictureX').text(PictureX);
  $('#PictureY').text(PictureY);

  // Change the Exif text
  if (ShortExif) { ShowShortExif(); } else { ShowLongExif(); }

  // Add another two items from the cache list to the cache process
  if (CacheList[0] && !CacheProcess[0]) {
    CacheProcess.push(CacheList.shift());
    $(document.createElement('img')).bind('load', function() { if (CacheProcess[0]) this.src = CacheProcess.shift(); }).trigger('load');
  }
}

function MoveFirst()
{
  // Get the currently displayed element
  Current = Pictures[0];

  // We still want to display this first image, so we won't push or unshift anything

  // We will push all the images into the CacheList array though, so we can preload them
  var Base = $('#Picture').attr('src').replace(Current[FILENAME], '');
  for (i = 0; i < Pictures.length; i++) {
    CacheList.push(Base + Pictures[i][FILENAME]);
  }
  CacheProcess.push(CacheList.shift());
  $(document.createElement('img')).bind('load', function() { if (CacheProcess[0]) this.src = CacheProcess.shift(); }).trigger('load');

  // Display the new (same) first image)
  DisplayImage(Current);
}

function MoveNext()
{
  // Get the currently displayed element
  Current = Pictures[0];

  // Shift the first element to the end
  Pictures.push(Pictures.shift());

  // Display the new first image
  PictureX++;
  if (PictureX > PictureY) PictureX = 1;
  DisplayImage(Current);
}

function MovePrevious()
{
  // Get the currently displayed element
  Current = Pictures[0];

  // Shift the last element to the beginning
  Pictures.unshift(Pictures.pop());

  // Display the new first image
  PictureX--;
  if (PictureX < 1) PictureX = PictureY;
  DisplayImage(Current);
}

function ShowLongExif()
{
  // Change the Exif text
  ShortExif = 0;
  $('#ExifTable tr').remove();
  for (i = 0; i < Pictures[0][EXIF].length; i++) {
    AddExifRow(Pictures[0][EXIF][i]);
  }
  $('#ExifTable').append("<tr id='ExifMoreLessRow'><td id='ExifMoreLessCell' colspan='2'><a href='javascript:ShowShortExif();'>Less</a></td></tr>");
}

function ShowShortExif()
{
  // Change the Exif text
  ShortExif = 1;
  $('#ExifTable tr').remove();
  for (i = 0; i < Pictures[0][EXIF].length; i++) {
    if (Pictures[0][EXIF][i][SHORT]) { 
      AddExifRow(Pictures[0][EXIF][i]);
    }
  }
  $('#ExifTable').append("<tr id='ExifMoreLessRow'><td id='ExifMoreLessCell' colspan='2'><a href='javascript:ShowLongExif();'>More</a></td></tr>");
}