function JumpImagePage(intJumpTo)
{
   intPageIndex = intJumpTo

   document.getElementById("images").innerHTML = LoadImages()
}

function ChangeImageControlVariable()
{
   var objSortOrder = document.getElementById("imagecontrolpanelsortorder")
   var objPageIndex = document.getElementById("imagecontrolpanelpageindex")
   var objViewMode = document.getElementById("imagecontrolpanelviewmode")
   var objPageSize = document.getElementById("imagecontrolpanelpagesize")
   
   if (objSortOrder.options[objSortOrder.selectedIndex].value !== "0") { intSortOrder = new Number(objSortOrder.options[objSortOrder.selectedIndex].value) }
   if (objPageIndex.options[objPageIndex.selectedIndex].value !== "0") { intPageIndex = new Number(objPageIndex.options[objPageIndex.selectedIndex].value) }
   if (objViewMode.options[imagecontrolpanelviewmode.selectedIndex].value !== "0") { intViewMode = new Number(objViewMode.options[objViewMode.selectedIndex].value) }
   if (objPageSize.options[objPageSize.selectedIndex].value !== "0") { intPageSize = new Number(objPageSize.options[objPageSize.selectedIndex].value) }

   document.getElementById("images").innerHTML = LoadImages()
}

function LoadImageData(intPictureID)
{
   var objImageData = document.getElementById("imagedata")
   var intIndex = MAReturnValueIndex(arrimages, 0, intPictureID)

   if (intIndex !== -1)
   {
      var strImageName = StringDecode(arrimages[intIndex][1])
      var strImageExtension = arrimages[intIndex][2]
      var intImageWidth = arrimages[intIndex][3]
      var intImageHeight = arrimages[intIndex][4]
      var intFileSize = arrimages[intIndex][5]
      var strCourtesy = StringDecode(arrimages[intIndex][6])
      var strPosterID = arrimages[intIndex][7]
      var datEntryDate = arrimages[intIndex][8]
      var strPosterName = StringDecode(arrimages[intIndex][9])

      if (intViewMode == 1) { if(strImageName.length !== 0) { objImageData.innerHTML = '<P ID="metadata">' + strImageName + '</P>'; Show('imagedata', true) } }
      if (intViewMode == 2) { objImageData.innerHTML = '<P ID="metadata">' + strImageName + '<BR>posted by ' + strPosterName + ' @ ' + GetDate(datEntryDate, FULL_DATE_TIME) + '<BR>' + intImageWidth + 'x' + intImageHeight + ' - ' + Math.round(intFileSize / 1024) + 'kb</P>'; Show('imagedata', true) }
      if (intViewMode == 3) { objImageData.innerHTML = ''; Hide('imagedata', true) }
   }
}

function LoadImages()
{
   var intOffSet = (intPageIndex - 1) * intPageSize
   var intLimit = new Number(intOffSet) + new Number(intPageSize)
   var strResult = new String()
   var intSiteID = GetSiteID()

   intImageCount = arrimages.length
   intPageCount = 0

   if (blnTitle) { strResult += '<P ID="title">Fotos</P>' }

   for (i = 0; i < intImageCount; i++)
   {
      if (new String(i / intPageSize).indexOf(".") == -1) { intPageCount++ }
   }

   if (intSortOrder == 1) { arrimages = MASort(arrimages, 8, 0, -1, "") }
   if (intSortOrder == 2) { arrimages = MASort(arrimages, 5, 0, -1, "") }
   if (intSortOrder == 3) { arrimages = MASort(arrimages, 0, 0, -1, "") }
   if (intSortOrder == 4) { arrimages = MASort(arrimages, 9, 0, -1, "") }
   if (intSortOrder == 5) { arrimages = MASort(arrimages, 3, 0, -1, "") }
   if (intSortOrder == 6) { arrimages = MASort(arrimages, 6, 0, -1, "") }
   if (intSortOrder == 7) { arrimages = MASort(arrimages, 4, 0, -1, "") }

   if (intImageCount == 0)
   { 
      strResult += '<P>Geen fotos aanwezig</P>'
   }
   else if (intImageCount > 0)
   {
      if (blnMetaData) { strResult += '<P ID="metadata">' + intImageCount + ' fotos verdeeld over ' + intPageCount + ' schermen &nbsp; - current: ' + intPageIndex + ' / ' + intPageCount + '</P>' }

      var intRowCounter = 0

      for (var i = intOffSet; i < intLimit; i++)
      {
         if (i < intImageCount)
         {
            var intImageID = arrimages[i][0]
            var strImageName = StringDecode(arrimages[i][1])
            var strImageExtension = arrimages[i][2]
            var intImageWidth = arrimages[i][3]
            var intImageHeight = arrimages[i][4]

            strResult += '<SPAN ID="thumbnail"><A HREF="javascript:Picture(' + intSiteID + ', ' + intImageID + ', \'' + strImageExtension + '\', ' + intImageWidth + ', ' + intImageHeight + ');"><IMG ID="img' + intImageID + '" CLASS="image-thumb" WIDTH="70" ONMOUSEOVER="javascript:LoadImageData(' + intImageID + ');" HEIGHT="70" SRC="' + SITE_IMAGEURL + '/thumb/' + intImageID + '.jpg"></A></SPAN>'

            if (i == (intRowSize - 1))
            {
               intRowCounter = 0
            }
            else
            { 
               intRowCounter++
            }
         }
      }

      strResult += '<DIV ID="imagedata" STYLE="display: none"></DIV>'
   }

   if (blnNavigator)
   {
      if ((intPageIndex < intPageCount) && (intPageCount != 1)) { strResult += '<P ID="forward"><A HREF="javascript:JumpImagePage(' + (intPageIndex + 1) + ')">volgend</A></P>' }
      if ((intPageIndex > 1) && (intPageCount != 1)) { strResult += '<P ID="previous"><A HREF="javascript:JumpImagePage(' + (intPageIndex - 1) + ')">vorig</A></P>' }
   }

   if (blnOptions)
   {
      strResult += '<DIV ID="control">'
      strResult += '<SELECT id="imagecontrolpanelsortorder" onchange="javascript:ChangeImageControlVariable();" size="1">'
      strResult += '<option value="0">Sort on</option>'
      strResult += '<option value="0"></option>'

      if (intSortOrder == 1) { strResult += '<option value="1" selected>date (def)*</option>' } else { strResult += '<option value="1">date (def)</option>' } 
      if (intSortOrder == 2) { strResult += '<option value="2" selected>filesize*</option>' } else { strResult += '<option value="2">filesize</option>' } 
      if (intSortOrder == 3) { strResult += '<option value="3" selected>id-code*</option>' } else { strResult += '<option value="3">id-code</option>' } 
      if (intSortOrder == 4) { strResult += '<option value="4" selected>poster*</option>' } else { strResult += '<option value="4">poster</option>' } 
      if (intSortOrder == 5) { strResult += '<option value="5" selected>name*</option>' } else { strResult += '<option value="5">name</option>' } 
      if (intSortOrder == 6) { strResult += '<option value="6" selected>height*</option>' } else { strResult += '<option value="6">height</option>' } 
      if (intSortOrder == 7) { strResult += '<option value="7" selected>width*</option>' } else { strResult += '<option value="7">width</option>' } 
  
      strResult += '</select>'
      strResult += '<span><select id="imagecontrolpanelpagesize" onchange="javascript:ChangeImageControlVariable();JumpImagePage(1)" size="1" name="pagesizeselect">'
      strResult += '<option value="0">pics/page</option>'
      strResult += '<option value="0"></option>'

      if (intPageSize == 4) { strResult += '<option value="4" selected>4*</option>' } else { strResult += '<option value="4">4</option>' }
      if (intPageSize == 8) { strResult += '<option value="8" selected>8*</option>' } else { strResult += '<option value="8">8</option>' }
      if (intPageSize == 16) { strResult += '<option value="16" selected>16*</option>' } else { strResult += '<option value="16">16</option>' }
      if (intPageSize == 40) { strResult += '<option value="40" selected>40*</option>' } else { strResult += '<option value="40">40</option>' }
      if (intPageSize == 80) { strResult += '<option value="80" selected>80*</option>' } else { strResult += '<option value="80">80</option>' }

      strResult += '</select>'
      strResult += '<select size="1" id="imagecontrolpanelpageindex" onchange="javascript:ChangeImageControlVariable();">'
      strResult += '<option value="0">pagejump</option>'
      strResult += '<option value="0"></option>'

      for (var i = 1; i <= (new Number(intPageCount)); i++)
      {
         if (intPageIndex == i) { strResult += '<option value="' + i + '" selected>' + i + '*</option>' } else { strResult += '<option value="' + i + '">' + i + '</option>' }
      }
    
      strResult += '</select>'
      strResult += '<select id="imagecontrolpanelviewmode" onchange="javascript:ChangeImageControlVariable();" size="1" name="viewmodeselect">'
      strResult += '<option value="0">infoview</option>'
      strResult += '<option value="0"></option>'
 
      if (intViewMode == 1) 
      {
         strResult += '<option value="3">none</option>'
         strResult += '<option value="1" selected>basic*</option>'
         strResult += '<option value="2">plus</option>'
      }
      else if (intViewMode == 2)
      {
         strResult += '<option value="3">none</option>'
         strResult += '<option value="1">basic</option>'
         strResult += '<option value="2" selected>plus*</option>'
      }
      else
      {
         strResult += '<option value="3" selected>none*</option>'
         strResult += '<option value="1">basic</option>'
         strResult += '<option value="2">plus</option>'
      }

      strResult += '</select>'
      strResult += '</DIV>'
   }

   return strResult
}