var gScrollInitialised = false;
var gScrollTimeout = null;
var gScrollDelayMs = 40;
var gScrollAmount = 15;
var gMinLeftMargin = 0;
var gCentreLayers = false;

var gTopLayerHeight = 20;
var gScrollLayerHeight = 130;
var gBottomLayerHeight = 20;
var gImageFullWidth = 116;  // includes the space before & after used to calculate no of pictures in Displaying x to x of x status

var gClipLeft = new Array();
var gFullWidth = new Array();
var gNormalWidth = new Array();
var gNormalHeight = new Array();
var gLeftPos = new Array();

var gClosedLayers = false;
var gLeaveOpen = false;
var gLoadPicturesLater = false;
var gDelayBeforeLoadPicture = false;
var gLayerPictures = new Array();
var gLoadPictureDelayMs = 500;
var gLayerToOpen = 0;

window.onload = itpScrollInit;

// StartScrollLayer with position of layer x, y
//   if width is less than given, ie. no scroll bar then don't show scroll things
//  AddPicture(APictureName, Width, Height, Text1, Text2)
//  AddPicture(APictureName, Width, Height, Text1, Text2)
//    pictures are also counted, and total shown in bottom layer
// EndScrollLayer
//   if the extra table thing at bottom to be used then this is part of EndScrollLayer
//   because it needs to know how many pictures were added
// other functions like SetScrollSpeed(ADelay, AAmount)
//   ScrollOptions("MouseOver, MouseClick, HoverPicture, BigPicture")
//   whether it centres, if centres then min left offset
// may be best to hold some settings in template file, ie. speed, whether click or hover causes scroll


function itpScrollInit()
{
  var i, x;
  for (i = 1; x = document.getElementById('scrolllayer' + i); i++)
  {
    gClipLeft[i] = 0;
    x.style.overflow = 'visible';
    gFullWidth[i] = x.offsetWidth;
    gLeftPos[i] = x.offsetLeft;
    x.style.overflow = 'hidden';
    gNormalWidth[i] = x.offsetWidth;
    gNormalHeight[i] = x.offsetHeight;

    itpUpdateLayerStatus(i);
  }
  if (gCentreLayers)
  {
    onresize = itpScrollLayerCentre;
    itpScrollLayerCentre();
  }
  gScrollInitialised = true;

  // open initial layer when closed layers used
  if ((gClosedLayers) && (gLayerToOpen > 0)) {itpOpenLayer(gLayerToOpen);};
}

function itpScrollLayerCentre()
{
  var i, winWidth, layerObj, x;
  winWidth = (document.all) ? document.body.clientWidth : window.innerWidth;

  for (i = 1; layerObj = document.getElementById('scrolllayer' + i); i++)
  {
    x = (winWidth - layerObj.offsetWidth + gMinLeftMargin) / 2; // changed gCentringWidth to layerObj.offsetWidth
    if (x < gMinLeftMargin) x = gMinLeftMargin;
    layerObj.style.left = x - gClipLeft[i];
    gLeftPos[i] = x;      // adjust the left position used by scroll layer, next time it's scrolled

    itpScrollRestart(i);  // restart the scrolling, otherwise it could end up in the wrong place


    if (layerObj = document.getElementById('scrolllayer' + i + 'top')){
      x = (winWidth - layerObj.offsetWidth + gMinLeftMargin) / 2; // changed gCentringWidth to layerObj.offsetWidth
      if (x < gMinLeftMargin) x = gMinLeftMargin;
      layerObj.style.left = x;
    };
    if (layerObj = document.getElementById('scrolllayer' + i + 'bottom')){
      x = (winWidth - layerObj.offsetWidth + gMinLeftMargin) / 2; // changed gCentringWidth to layerObj.offsetWidth
      if (x < gMinLeftMargin) x = gMinLeftMargin;
      layerObj.style.left = x;
    };
  }

  // centre other layers that require similar centring, i.e. those labeled centringlayer1..x
  for (i = 1; layerObj = document.getElementById('centringlayer' + i); i++)
  {
    x = (winWidth - layerObj.offsetWidth + gMinLeftMargin) / 2;
    if (x < gMinLeftMargin) x = gMinLeftMargin;
    layerObj.style.left = x;
  }
}

function itpScrollRight(layerNo)
{
  if (gScrollInitialised) itpScroll(layerNo, gScrollAmount);
}

function itpScrollLeft(layerNo)
{
  if (gScrollInitialised) itpScroll(layerNo, -gScrollAmount);
}

function itpScrollRestart(layerNo)
{
  if (gScrollInitialised)
  {
  gClipLeft[layerNo] = 0;
  itpScroll(layerNo, 0);
  }
}

function itpScroll(layerNo, amount)
{
  var x = document.getElementById('scrolllayer' + layerNo);
  var i = layerNo;
  gClipLeft[i] += amount;
  if (gClipLeft[i] < 0) gClipLeft[i] = 0;
  if (gClipLeft[i] + gNormalWidth[i] > gFullWidth[i]) gClipLeft[i] = gFullWidth[i] - gNormalWidth[i];
  x.style.clip = 'rect(0px, ' + gNormalWidth[i] + gClipLeft[i] + 'px, ' + gNormalHeight[i] + 'px, ' + gClipLeft[i] + 'px)';
  x.style.left = -gClipLeft[i] + gLeftPos[i] + 'px';
  x.style.width = gNormalWidth[i] + gClipLeft[i] + 'px';
  if (amount != 0) gScrollTimeout = setTimeout('itpScroll(' + layerNo + ', ' + amount + ')', gScrollDelayMs);

  itpUpdateLayerStatus(layerNo);

}

function itpUpdateLayerStatus(layerNo)
{
  var x;
  if (x = document.getElementById('layer' + layerNo + 'status'))
  {
    var imageStart, imageEnd, totalImages, imagesPerWidth;

    totalImages = Math.round(gFullWidth[layerNo] / gImageFullWidth);
    imagesPerWidth = Math.round(gNormalWidth[layerNo] / gImageFullWidth);
    imageStart = Math.round(gClipLeft[layerNo] / gImageFullWidth) + 1;
    imageEnd = imageStart + imagesPerWidth - 1;

    if (totalImages > imagesPerWidth)
    {
      x.innerHTML = 'Displaying ' + imageStart + ' to ' + imageEnd + ' of ' + totalImages + ' images';
    }
    else
    {
      x.innerHTML = 'Displaying ' + totalImages + ' images';
    }
  }
}

function itpScrollStop()
{
  clearTimeout(gScrollTimeout);
}

// (by Sock) not used any more can be deleted
function DisplayImage(picURL,picWidth,picHeight)
{
  newWindow=window.open(picURL,'newWin','toolbar=no,width='+picWidth+',height='+picHeight)
  newWindow.document.write('<html><head><\/head><body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0><IMG src="'+picURL+'"><\/body><\/html>')
  newWindow.resizeBy(picWidth-newWindow.document.body.clientWidth,picHeight-newWindow.document.body.clientHeight)
  newWindow.focus()
}

// from  http://www.sitepoint/article/resize-popup-fit-images-size, also uses popup.htm
function itpPopupPicture(APictureURL)
{
  window.open("popup.htm?"+APictureURL, "newPic", "resizable=1,HEIGHT=200,WIDTH=200");
}

function itpToggleLeaveOpen()
{
  gLeaveOpen = !gLeaveOpen;
}

function itpToggleAlertBeforePic()
{
  gAlertBeforePic = !gAlertBeforePic;
}


function itpOpenLayer(layerNo)
{
  var i, x;

  if (!gLeaveOpen)
  {
    itpCloseAll();  // close all open layers
  }

  itpOpenCloseLayer(layerNo); // open given layer

  // set the image source of the pictures
  if (gLoadPicturesLater)
  {
    if (!gLayerPictures[layerNo][0])
    {
      if (gDelayBeforeLoadPicture)
      {
        itpGetPicture(layerNo, 1); // get first picture, the rest loaded via timer
      }
      else
      {
        var i;
        for (i = 1; i <= gLayerPictures[layerNo].length; i++)
        {
          itpGetPicture(layerNo, i);
        }
      }

      gLayerPictures[layerNo][0] =  true; // mark as loaded, so no need to load again
    } // if
  } // if
}

function itpGetPicture(layerNo, picNo)
{
  if (x = document.getElementById('layer' + layerNo + 'pic' + (picNo)))
  {
    x.src = gLayerPictures[layerNo][picNo];
  }

  // set next pic to load via timer
  if (gDelayBeforeLoadPicture && (picNo < gLayerPictures[layerNo].length))
  {
    setTimeout('itpGetPicture(' + layerNo + ', ' + (picNo + 1) + ')', gLoadPictureDelayMs);
  }
}
//

function itpCloseAll()
{
  // close all open layers
  for (i = 1; x = document.getElementById('scrolllayer' + i); i++)
  {
    // if layer already open then close it
    if (x.style.visibility == 'visible')
    {
      itpOpenCloseLayer(i); // close the layer i.e. toggle to hide
    }
  }
}

function itpOpenCloseLayer(layerNo)
{

  var top_layer_pos, i, x, y, visible, adjustment;
  // get top layer's top position
  x = document.getElementById('scrolllayer' + layerNo + 'top');
  top_layer_pos = parseInt(x.style.top);

  // make main layer visible and position just below top layer
  x = document.getElementById('scrolllayer' + layerNo);
  if (visible = (x.style.visibility == 'visible'))
  {
    x.style.visibility = 'hidden';
    x.style.top = top_layer_pos;
  }
  else
  {
    x.style.top = top_layer_pos + gTopLayerHeight;
    x.style.visibility = 'visible';
  }

  // make bottom layer visible and position just below main layer
  x = document.getElementById('scrolllayer' + layerNo + 'bottom');
  if (visible) {
    x.style.visibility = 'hidden';
    x.style.top = top_layer_pos;
  }
  else
  {
    x.style.top = top_layer_pos + gTopLayerHeight + gScrollLayerHeight;
    x.style.visibility = 'visible';
  }

  // make scroll buttons visible, or hide if already visible
  x = document.getElementById('scrollbuttons' + layerNo);
  if (visible) {
    x.style.visibility = 'hidden';
  }
  else
  {
    x.style.visibility = 'visible';
  }

  adjustment = gTopLayerHeight + gScrollLayerHeight + gBottomLayerHeight;
  if (visible) adjustment = -adjustment;

  // position all layers below this lower by height of top, main and bottom layers
  for (i = layerNo + 1; x = document.getElementById('scrolllayer' + i + 'top'); i++)
  {
    x.style.top = parseInt(x.style.top) + adjustment;
    if (y = document.getElementById('scrolllayer' + i))
      y.style.top = parseInt(y.style.top) + adjustment;
    if (x = document.getElementById('scrolllayer' + i + 'bottom'))
      x.style.top = parseInt(x.style.top) + adjustment;
  }

}