var scrollId = null;
var imageWidth = 251;

// _______________________________________________________________________
// FUNCTION init: initialize the produkt page
// ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
function init()
{
  // loop over product content layers and set the width and position
  for (var i=0; i<=4; i++)
  {
    var layer = document.getElementById("produkte" + i + "Img");
    if (layer)
    {
      var numImages = layer.getElementsByTagName("img").length;
      layer.style.width = numImages * imageWidth + "px";
      layer.style.left = "0px";
    }
  }
}

// _______________________________________________________________________
// FUNCTION scroll: scroll the product content layer
// ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
function scroll(layer, dir)
{
  // current position
  var contentLayer = document.getElementById(layer);
  var pos = parseInt(contentLayer.style.left);
  var scrollWidth = parseInt(contentLayer.style.width) - 2 * imageWidth;

  if ((dir == 1 && pos < 0) || (dir == -1 && pos > -scrollWidth))
  {
    if (!scrollId)
      targetPos = pos + imageWidth * dir;

    // distance to scroll
    var scrollDist = pos - targetPos;
    step = -Math.ceil(scrollDist/5);

    if (Math.abs(step) <= 1)
    {
      // end scrolling if target position is reached
      contentLayer.style.left = targetPos + "px";
      clearTimeout(scrollId);
      scrollId = null;
    }
    else
    {
      // calculate next position
      nextPos = pos + step;

      // scroll
      contentLayer.style.left = nextPos + "px";

      scrollId = setTimeout(function() {
        scroll(layer, dir);
      }, 10);
    }
  }
}