/**
*
* Erzeugt ein BildLaufband
*
* @class
*
* @author: Daniel Schwarz, *1977 Bochum
* @Erstellt: 13.07.2008
*
* @param {string} strId Id Eines Existierenden Elements im Dokument
* @param {integer} iBreite Breite des Laufbands
* @param {integer} iHoehe Hoehe des Laufbands
* @param {integer} iAbstandH Abstand zwischen den Bildern (Horizontal)
* @param {integer} iTimeout Bestimmt wieviele Milisekunden das Programm wartet bevor das Laufband neu verarbeitet wird
* @param {integer} iSchrittWeite Bestimmt, in pixeln, wie weit das Laufband versetzt wird, bei der Verarbeitung des Laufbands
*/
function BildLaufbandHorizontal(strId,iBreite,iHoehe,iAbstandH, iTimeout, iSchrittWeite) {

  this._id = strId;
  this._iBreite = iBreite;
  this._iHoehe = iHoehe;
  this._iAbstandH = iAbstandH;
  this._iTimeout = iTimeout;
  
  this._iLaufbandBreite = 0;
  
  this._iScrollPosX = 0;
  this._iSchrittWeite = iSchrittWeite;
  this._iScrollAktBand = 1;
  this._strAktLaufbandId = "";
  
  this._aryLaufband = new Array();


  /**
  * Initialisiert das BildLaufband
  *
  * Muss ausgeführt werden nachdem Bilder mittels 
  * AddBildLink hinzugefuegt worden sind.
  *
  */  
  this.Init = function() {
    this._divKontainer = document.getElementById(this._id);
    this.SetBH(this._divKontainer, this._iBreite,this._iHoehe);
    
    this._divKontainer.style.overflow = "hidden";
    this._divKontainer.style.bgColor = "green"; 
    
    eval(this.obj + "=this");
    this._divKontainer.obj = this;
    
    this._ErzeugeLaufband();
    
    this._timoutHndl = window.setTimeout(this.obj + "._Timeout('" + this._id + "')",this._iTimeout);
    
  }
  

  /**
  * Timeout Funktion die bei jedem Timout ausgeführt wird.
  *
  * @access private
  *
  * @param {integer} id Id des Laufabendes
  */  
  this._Timeout = function(id) {
    var obj = document.getElementById(id).obj;
    
    if (obj._iScrollPosX > -1*obj._iLaufbandBreite) {
      obj._iScrollPosX -= (obj._iScrollPosX+obj._iSchrittWeite>-1*obj._iLaufbandBreite)?obj._iSchrittWeite:obj._iLaufbandBreite;
      if (this._strAktLaufbandId == obj._divLaufband1.id) {
        obj.SetXY(obj._divLaufband1, obj._iScrollPosX,0);
        obj.SetXY(obj._divLaufband2, obj._iScrollPosX+obj._iLaufbandBreite,0);
      } else {
        obj.SetXY(obj._divLaufband2, obj._iScrollPosX,0);
        obj.SetXY(obj._divLaufband1, obj._iScrollPosX+obj._iLaufbandBreite,0);
      }
    } else {
      obj._iScrollPosX = 0;
      if (this._strAktLaufbandId == obj._divLaufband1.id) {
        obj._strAktLaufbandId = obj._divLaufband2.id;
        obj.SetXY(obj._divLaufband2, obj._iScrollPosX,0);
        obj.SetXY(obj._divLaufband1, obj._iScrollPosX+obj._iLaufbandBreite,0);
      } else {
        obj._strAktLaufbandId = obj._divLaufband1.id;
        obj.SetXY(obj._divLaufband1, obj._iScrollPosX,0);
        obj.SetXY(obj._divLaufband2, obj._iScrollPosX+obj._iLaufbandBreite,0);
      }
    }
    
    obj._timoutHndl = window.setTimeout(obj.obj + "._Timeout('" + id + "')",obj._iTimeout);
  }

  
  /**
  * EreignisHandler Methode für das 
  * OnmouseOver ereignis eines Links
  *
  * @acess private
  * @param {event} e
  */
  this.OnLinkFocus =
  this.OnLinkOver = function(e) {
    this.firstChild.src = this.obj._aryLaufband[this.id]['over'];
    window.clearTimeout(this.obj._timoutHndl);
    //this.obj.Debug(this.obj._timoutHndl);
  }
  
  
  /**
  * EreignisHandler Methode für das 
  * OnmouseOut ereignis eines Links
  *
  * @acess private
  * @param {event} e
  */
  this.OnLinkBlur = 
  this.OnLinkOut = function(e) {
    this.firstChild.src = this.obj._aryLaufband[this.id]['out'];
    this.obj._timoutHndl = window.setTimeout(this.obj.obj + "._Timeout('" + this.obj._id + "')",this.obj._iTimeout);
  }
  
  
  
  /**
  * Gibt die Band Breite zurück
  */
  this._GetBandBreite = function() {
    var iBreite = 0;
    for (var i=0;i<this._aryLaufband.length;i++) {
      iBreite += this._aryLaufband[i]['b'];
      iBreite += this._iAbstandH;
    }
    return iBreite;
  }
  

  /**
  * Erzeugt html Code und initialisiert Ereignisse
  * für das Laufband 
  *
  * @access private
  */
  this._ErzeugeLaufband = function() {
  
    var iBannerBreite = this._GetBandBreite();
    var iAnzBannerKopien = 2;
    
    if (iBannerBreite < this._iBreite) {
      iAnzBannerKopien = Math.ceil(this._iBreite / iBannerBreite);
    }
    
    this._iLaufbandBreite = iBannerBreite * iAnzBannerKopien;
  
    strHtml = '<div id="' + this._id + 'Band1" style="position:absolute; padding:0px; margin:0px; border:0px; top:0px; left:0px; z-index:10; white-space:nowrap;">';
    for (var j=0;j<iAnzBannerKopien;j++) {  
      for (var i=0;i<this._aryLaufband.length;i++) {
        strHtml += '<div style="display:inline; padding:0px; padding-right:' + this._iAbstandH + 'px; margin:0px; border:0px;"><a href="' + this._aryLaufband[i]['link'] + '" id="' + i + '" style="border:0px;margin:0px;padding:0px;"><img src="'+this._aryLaufband[i]['out'] +'" width="'+this._aryLaufband[i]['b'] +'" height="'+this._aryLaufband[i]['h'] +'" border="0" /></a></div>';
      }
    }
    strHtml += '<div style="clear:both;"></div>';
    strHtml += '</div>';

    strHtml += '<div id="' + this._id + 'Band2" style="position:absolute; padding:0px; margin:0px; border:0px; top:0px; left:0px; z-index:10; white-space:nowrap;">';
    for (var j=0;j<iAnzBannerKopien;j++) {  
      for (var i=0;i<this._aryLaufband.length;i++) {
        strHtml += '<div style="display:inline; padding:0px; padding-right:' + this._iAbstandH + 'px;margin:0px; border:0px;"><a href="' + this._aryLaufband[i]['link'] + '" id="' + i + '" style="border:0px;margin:0px;padding:0px;"><img src="'+this._aryLaufband[i]['out'] +'" width="'+this._aryLaufband[i]['b'] +'" height="'+this._aryLaufband[i]['h'] +'" border="0" /></a></div>';
      }
    }
    strHtml += '<div style="clear:both;"></div>';
    strHtml += '</div>';

    this._divKontainer.innerHTML = strHtml;

    this._divLaufband1 = document.getElementById(this._id + 'Band1');
    this._divLaufband2 = document.getElementById(this._id + 'Band2');
    
    nlLinks = this._divKontainer.getElementsByTagName('a')    
    for (var i=0;i<nlLinks.length;i++) {
      nlLinks[i].obj = this;
      nlLinks[i].onmouseover = this.OnLinkOver;
      nlLinks[i].onmouseout = this.OnLinkOut;
      nlLinks[i].onfocus = this.OnLinkFocus;
      nlLinks[i].onblur = this.OnLinkBlur;
    }
    
    this._strAktLaufbandId = this._id + 'Band1'
  }


  /**
  * Debug Methode,
  *
  * @access private
  *
  * hierzu wird ein Element im Dokument erwartet
  * das, dass Wort 'Debug' als id hat.
  */  
  this.Debug = function(strHtml) {
    div = document.getElementById('Debug');
    div.innerHTML = strHtml;
  }
  
  
  /**
  * Fügt ein Bild Link dem Laufband hinzu
  *
  * @access public
  *
  * @param {string} strBildOut Eine Url zu einem Bild welches im MousOut zustand angezeigt werden soll
  * @param {string} strBildOver Eine Url zu einem Bild welches im MousOver zustand angezeigt werden soll
  * @param {string} strLink Eine Url wohin die Seite geleitet werden soll wenn auf das Bild geklickt wird
  * @param {integer} iBreite Breite des Bildes
  * @param {integer} iHoehe Hoehe des Bildes
  */
  this.AddBildLink = function(strBildOut, strBildOver, strLink, iBreite, iHoehe) {
    var idx = this._aryLaufband.length;
    this._aryLaufband[idx] = new Array();
    this._aryLaufband[idx]['out'] = strBildOut;
    this._aryLaufband[idx]['over'] = strBildOver
    this._aryLaufband[idx]['link'] = strLink;
    this._aryLaufband[idx]['b'] = iBreite;
    this._aryLaufband[idx]['h'] = iHoehe;
  }
  

  /**
  * Setzt ein Element an eine x/y position
  *
  * @access private
  *
  * @param {node} elm Ein Element
  * @param {integer} X Position
  * @param {integer} Y Position
  */
  this.SetXY = function(elm, iX, iY) {
  	elm.style.left = iX + 'px';
    elm.style.top = iY + 'px';
  }
  
  /**
  * Setzt die Breite/Hoehe eines Elements
  *
  * @access private
  *
  * @param {node} elm Ein Element
  * @param {integer} iBreite Breite
  * @param {integer} iHoehe Hoehe
  */
  this.SetBH = function(elm, iBreite, iHoehe) {
    elm.style.width = iBreite + 'px';
	  elm.style.height = iHoehe + 'px';
  }
 
  /**
  * Setzt die Breite/Hoehe eines Elements
  *
  * @access private
  *
  * @param {node} elm Ein Element
  * @param {integer} x X Position
  * @param {integer} y Y Position
  * @param {integer} iBreite Breite
  * @param {integer} iHoehe Hoehe
  */
  this.SetXYBH = function (elm, iX, iY, iBreite, iHoehe) {
    this.SetXY(elm, iX, iY);
  	this.SetBH(elm,iBreite,iHoehe);
  }
  
  

}