var Images = new Array();
/*
  Parameter zur Positionierung der Bilder
*/
var showImageBorder = 30;
var minImageMargin = 20;
var containerWidth = 750;
var containerLeft = null;
var maxImageHeight = 0;
/*
  Paramerer für das Scrollen
*/
var deltaXMax = 150;
var deltaXMin = 2;
var deltaT = 25;

var clipWidth = null;
var isScrolling = false;
var actPos = 0;

function setImagesPosition(pos)
{
  for (i=0; i<Images.length; i++)
  {
    if (i == pos - 1)
    {
      document.getElementById('img' + i).style.visibility = 'visible'
      Images[i].left = - Images[i].width + showImageBorder;
      document.getElementById('img' + i).style.left =  Images[i].left + 'px';

    }
    else if (i == pos)
    {
      document.getElementById('img' + i).style.visibility = 'visible'
      Images[i].left = containerLeft;
      document.getElementById('img' + i).style.left =  Images[i].left + 'px';

    }
    else if (i == pos + 1)
    {
      document.getElementById('img' + i).style.visibility = 'visible'
      Images[i].left = clipWidth - showImageBorder;
      document.getElementById('img' + i).style.left =  Images[i].left + 'px';
    }
    else
    {
      document.getElementById('img' + i).style.visibility = 'hidden'
    }
  }
}

function scrollImages(direction)
{
  var keepScrolling = false;

  // nach links
  if (direction == -1)
  {
    var x = (Images[actPos + 1].left - containerLeft) / (clipWidth - showImageBorder -  containerLeft)
    var deltaX = Math.round( x * deltaXMax + (1 -x) * deltaXMin );

    // Bild linker Rand
    if (actPos > 0)
    {
      if (Images[actPos - 1].left > - Images[actPos -1].width)
      {
        Images[actPos-1].left -= deltaX;
        document.getElementById('img' + (actPos - 1)).style.left = Images[actPos - 1].left + 'px';
      }
    }
    // Bild mitte
    if ( Images[actPos].left - deltaX > - Images[actPos].width + showImageBorder )
    {
      Images[actPos].left -= deltaX;
      document.getElementById('img' + actPos).style.left = Images[actPos].left + 'px';
      keepScrolling = true;
    }
    else if ( Images[actPos].left > - Images[actPos].width + showImageBorder )
    {
      Images[actPos].left = - Images[actPos].width + showImageBorder;
      document.getElementById('img' + actPos).style.left = Images[actPos].left + 'px';
    }
    // Bild rechter Rand
    if (actPos + 1 < Images.length)
    {
      if (Images[actPos + 1].left - deltaX > containerLeft)
      {
        Images[actPos+1].left -= deltaX;
        document.getElementById('img' + (actPos + 1)).style.left = Images[actPos + 1].left + 'px';
        keepScrolling = true;
      }
    }
    // Bild rechts ausserhalb
    if ((actPos + 2 < Images.length) && (Images[actPos+1].left - containerLeft < showImageBorder))
    {
      document.getElementById('img' + (actPos + 2)).style.visibility = 'visible';
      Images[actPos+2].left = clipWidth - showImageBorder +  Images[actPos+1].left - containerLeft;
      document.getElementById('img' + (actPos + 2)).style.left = Images[actPos + 2].left + 'px';
    }
  }
  // nach rechts
  else if (direction == 1)
  {
    var x = (Images[actPos].left - containerLeft) / (clipWidth - showImageBorder -  containerLeft)
    var deltaX = Math.round( (1-x) * deltaXMax + x * deltaXMin );

    // Bild linker Rand
    if (actPos > 0)
    {
      if (Images[actPos - 1].left + deltaX < containerLeft)
      {
        Images[actPos-1].left += deltaX;
        document.getElementById('img' + (actPos - 1)).style.left = Images[actPos - 1].left + 'px';
        keepScrolling = true;
      }
      else if (Images[actPos - 1].left  < containerLeft)
      {
        Images[actPos-1].left = containerLeft;
        document.getElementById('img' + (actPos - 1)).style.left = Images[actPos - 1].left + 'px';
      }
    }
    // Bild mitte
    if ( Images[actPos].left + deltaX < clipWidth - showImageBorder )
    {
      Images[actPos].left += deltaX;
      document.getElementById('img' + actPos).style.left = Images[actPos].left + 'px';
      keepScrolling = true;
    }
    else if ( Images[actPos].left < clipWidth - showImageBorder  )
    {
      Images[actPos].left = clipWidth - showImageBorder;
      document.getElementById('img' + actPos).style.left = Images[actPos].left + 'px';
    }
    // Bild rechter Rand
    if (actPos + 1 < Images.length)
    {
      if (Images[actPos + 1].left < clipWidth)
      {
        Images[actPos+1].left += deltaX;
        document.getElementById('img' + (actPos + 1)).style.left = Images[actPos + 1].left + 'px';
      }
    }
    // Bild links ausserhalb
    if ((actPos - 2 >= 0) && (clipWidth - Images[actPos].left  < 2 * showImageBorder))
    {
      document.getElementById('img' + (actPos - 2)).style.visibility = 'visible';
      Images[actPos - 2].left = - Images[actPos - 2].width + showImageBorder - ( clipWidth - Images[actPos].left - showImageBorder);
      document.getElementById('img' + (actPos - 2)).style.left = Images[actPos - 2].left + 'px';
    }
  }

  if (keepScrolling) {
    if (direction==1) {
      setTimeout("scrollImages(1)", deltaT);
    } else {
      setTimeout("scrollImages(-1)", deltaT);
    }  
  }
  else
  {
    isScrolling = false;
    actPos -= direction;
    setImagesPosition(actPos);
  }
}

function imgOnclick(idx)
{
  if (idx == actPos +1 || (idx == actPos && idx != Images.length - 1))
  {
    if ( !isScrolling )
    {
      isScrolling = true;
      scrollImages(-1);
    }
  }
  else if (idx == actPos - 1)
  {
    if ( !isScrolling )
    {
      isScrolling = true;
      scrollImages(1)
    }
  }
}

function initOnload()
{
  var idx = 0;
  var e = null;

  while (e = document.getElementById('img'+idx)) 
  {
    e.onclick = function() { imgOnclick(this.id.replace(/^img/, '')); return false }
    e.style.position = 'absolute';
    e.style.display = 'inline';
    e.style.margin = '0px';
    Images[idx] = new Object();
    Images[idx].width = e.width;
    Images[idx].height = e.height
    Images[idx].left = 0;
    Images[idx].src = e.src;
    maxImageHeight = Math.max(maxImageHeight, e.height);
    idx++;
  }

  e = document.getElementById('clip');
  e.style.height = (maxImageHeight + 20) + 'px';
  e.style.left = "0px";
  e.style.width = "100%";
  e.style.margin = "0px 0px 0px 0px";

  clipWidth = document.documentElement.clientWidth;
  containerLeft = Math.round((clipWidth - containerWidth)/2);

  setImagesPosition(actPos);

}