function GbImageClass(divName) {

  // Constanten
  // -----------------
  // Art der Bilddarstellung
  this.calcWidth = 1;   // Bilder werden alle gleich breit skalliert
  this.calcHeight = 2;   // Bilder werden alle gleich hoch skalliert
  this.calcQuadrat = 3;   // Bilder werden mitich in einem Quadrat plaziert

  // Darstellungsarten
  this.placementClassic = 1;   // Kleine Spalte links mit vorschaubildern übereinander. Rechts grosses Bild mit Unterschrift.
  
  // Aktionen 
  this.mouseClick = 1;    // Das Vorschaubild muss angeklickt werden damit das grosse Bild getauscht wird. 

  // Variablen
  // -----------------
  this.divName = divName;
  this.metric = "px";
  this.placementScaleX = 500;
  this.placementScaleY = 300;
  this.placement = this.placementClassic;
  this.picCalc = this.calcWidth;
  this.dimSmallImage = 100;
  this.dimLargeImage = 380;
  this.previewCount = 3;
  this.actionShowImage = this.mouseClick;
  this.images = new Array();
  this.debug = 0;
  this.firstImageInList = 0;
  this.imageNo = 0;
  this.self = "";


  this.setSelf = function(self) {
    this.self = self;
  }

  this.setMetric = function(metric) {
    this.metric = metric;
  }

  this.setPicCalc = function(calc) {
    this.picCalc = calc;
  }

  this.setDimPlacement = function(scaleX,scaleY) {
    this.placementScaleX = scaleX;
    this.placementScaleY = scaleY;
  }

  this.setPlacement = function(placement) {
    this.placement = placement;
  }

  this.setDimSmallImage = function(scale) {
    this.dimSmallImage = scale;
  }

  this.setDimLargeImage = function(scale) {
    this.dimLargeImage = scale;
  }

  this.setPreviewCount = function(count) {
    this.previewCount = count;
  }

  this.setDebug = function(debug) {
    this.debug = debug;
  }

  this.setActionShowImage = function(action) {
    this.actionShowImage = action;
  }

  this.addImage = function(small, large, text) {
    var obj = new Object();
    obj.small = new Image();
    obj.small.src = small.replace(/&/gi,"&");
    obj.large = new Image();
    obj.large.src = large.replace(/&/gi,"&");
    obj.text = text;
    this.images[this.images.length] = obj;
  }

  this.getSDiv = function() {
     var sdiv = document.getElementById(this.divName);
     return sdiv;
  }

  this.getWidthPlacement = function() {
    return this.placementScaleX+this.metric;
  }

  this.getHeightPlacement = function() {
    return this.placementScaleY+this.metric;
  }

  this.actionNextList = function() {
    if( !((this.firstImageInList+3) > this.images.length) ) {
      this.firstImageInList = this.firstImageInList+3;
      this.setListPictures();
      this.setLargePicture(this.firstImageInList);
      this.imageNo = this.firstImageInList;
      //alert(this.imageNo + " " +this.firstImageInList);
    }
  }

  this.actionPrevList = function() {
    if( !(this.firstImageInList-3 < 0) ) {
      this.firstImageInList = this.firstImageInList-3;
      this.setListPictures();
      this.setLargePicture(this.firstImageInList);
      this.imageNo = this.firstImageInList;
      //alert(this.imageNo + " " +this.firstImageInList);
    }
  }

  this.actionNextImg = function() {
    if( !((this.imageNo+1) >= this.images.length) ) {
      this.imageNo = this.imageNo+1;
      this.setLargePicture(this.imageNo);
      this.firstImageInList = Math.floor(this.imageNo/3)*3;
      this.setListPictures();
      //alert(this.imageNo + " " +this.firstImageInList);
    }
  }

  this.actionPrevImg = function() {
    if( !(this.imageNo-1 < 0) ) {
      this.imageNo = this.imageNo-1;
      this.setLargePicture(this.imageNo);
      this.firstImageInList = Math.floor(this.imageNo/3)*3;
      this.setListPictures();
      //alert(this.imageNo + " " +this.firstImageInList);
    }
  }

  this.actionSetImage = function(number) {
    this.setLargePicture(number+this.firstImageInList);
  }

  this.setListPictures = function() {
    var x = this.firstImageInList;
    document.getElementById('img01').src = this.images[x].small.src;
    if( this.images.length > x+1 ) { 
      document.getElementById('img02').src = this.images[x+1].small.src; 
    } else {
      document.getElementById('img02').src = "images/abs.gif";
    }
    if( this.images.length > x+2 ) { 
      document.getElementById('img03').src = this.images[x+2].small.src; 
    } else {
      document.getElementById('img03').src = "images/abs.gif";
    }
  }

  this.setLargePicture = function(number) {
    this.imageNo = number;
    if( !(number > this.images.length) ) {
      if( !(number < 0) ) {
        document.getElementById('imglarge01').src = this.images[number].large.src;
        document.getElementById('imglarge01text').innerHTML = this.images[number].text;
      }
    }
  }

  this.show = function() {
    var sdiv = this.getSDiv();
    //sdiv.style.border="1px solid blue";
    if( this.debug > 0 ) { sdiv.style.border="1px solid blue"; }
    sdiv.style.width=this.getWidthPlacement();
    sdiv.style.position="relative";

    erg = "<div style='float:left;'>";
    erg += "<a id='actionprev' onclick='"+this.self+".actionPrevList()'><img src='images/imgprev.gif' border='0'></a>&nbsp;&nbsp;&nbsp;";
    erg += "<a id='actionnext' onclick='"+this.self+".actionNextList()'><img src='images/imgnext.gif' border='0'></a><br>";
    erg += "<img id='img01' src='images/abs.gif' style='border:0px;margin:0px;margin-bottom:1em;cursor:pointer;width:16em;' onclick='"+this.self+".actionSetImage(0)'><br>";
    erg += "<img id='img02' src='images/abs.gif' style='border:0px;margin:0px;margin-bottom:1em;cursor:pointer;width:16em;' onclick='"+this.self+".actionSetImage(1)'><br>";
    erg += "<img id='img03' src='images/abs.gif' style='border:0px;margin:0px;margin-bottom:1em;cursor:pointer;width:16em;' onclick='"+this.self+".actionSetImage(2)'><br>";
    erg += "</div>";
    erg += "<div style='float:left;margin-left:1.5em;'>";
    erg += "<a id='actionprevimg' onclick='"+this.self+".actionPrevImg()'><img src='images/imgprev.gif' border='0'></a>&nbsp;&nbsp;&nbsp;";
    erg += "<a id='actionnextimg' onclick='"+this.self+".actionNextImg()'><img src='images/imgnext.gif' border='0'></a><br>";
    erg += "<img id='imglarge01' src='images/abs.gif' style='border:0px;margin:0px;margin-bottom:1em;width:46em;'><br>";
    erg += "<p id='imglarge01text' class='text_text'></p><br>&nbsp;";
    erg += "</div>";
    erg += "<div style='clear:both;'></div>";
    sdiv.innerHTML = erg;
    this.setListPictures();
    this.setLargePicture(0);
    actionprev = document.getElementById('actionprev');
    actionprev.style.cursor = "pointer";
    actionnext = document.getElementById('actionnext');
    actionnext.style.cursor = "pointer";
    actionprevimg = document.getElementById('actionprevimg');
    actionprevimg.style.cursor = "pointer";
    actionnextimg = document.getElementById('actionnextimg');
    actionnextimg.style.cursor = "pointer";
  }
}