PhotoBar.MOVE_TIME = 750;

  /**
   * creates the photobar
   */
  function PhotoBar(iGroupID) {
    this.objHolder = YSDOM.getObj('photobar_'+iGroupID);
    this.iFlowWidth = YSDOM.getElementSize(this.objHolder.parentNode).width;
    this.iFlowCenter = Math.floor(this.iFlowWidth / 2);
    this.iGroupID = iGroupID;
    this.iSpacing = 0;
    this.aPhotos = [];
    this.iTotalWidth = 0;
    this.iCurrentPhoto = 0;
    this.iCurLeft = 0;
    this.oAnimation = null;
  }
  
  
  /**
   * registers a photo in the photobar
   * @param int iNr
   * @param String sImgID
   * @param String sPhotoURL
   * @param int iWidth
   * @param int iHeight
   * @return void
   */
  PhotoBar.prototype.addPhoto = function(iNr, sImgID, sPhotoURL, iWidth, iHeight) {
    var imgPhoto = YSDOM.getObj(sImgID);
    YSXML.setAttribute(imgPhoto, 'photonr', iNr);
    YSEventHandler.Instance().addHandler(imgPhoto, 'onclick', 
      PhotoBar.prototype.onClickPhoto, this);
    imgPhoto.parentNode.href = "javascript: void(0);";
    YSCSS.setStyle(imgPhoto, 'cursor', 'pointer');
    
    iWidth += YSCSS.getStyle(imgPhoto, 'borderLeftWidth', true) +
              YSCSS.getStyle(imgPhoto, 'borderRightWidth', true);
    this.aPhotos[iNr] = {nr: iNr, img: imgPhoto, url: sPhotoURL,
                         left: this.iTotalWidth+this.iSpacing,
                         width: iWidth, height: iHeight};
    
    // prevent adding spacing to the total width when adding the 1st photo
    this.iTotalWidth += this.iSpacing + iWidth;     
    if ( this.iSpacing == 0 ) {
      this.iSpacing = YSCSS.getStyle(sImgID, 'marginRight', true);
      var objLoadingImg = document.createElement('img');
      objLoadingImg.src = BASE_PATH+'images/loading.gif';
      YSCSS.setMultiStyle(objLoadingImg, ['visibility', 'position'], 
                                        ['hidden', 'absolute']);
      document.body.appendChild(objLoadingImg);      
    }    
  };
  
  
  /**
   * animation function, animates to iNewLeft
   * @param int iNewLeft, iTimePassed
   * @return void
   */
  PhotoBar.prototype.animateTo = function(iNewLeft, iTimePassed) {
    var fPercent = iTimePassed / PhotoBar.MOVE_TIME;
    if ( fPercent > 1 ) fPercent = 1;
    var iLeft = this.iCurLeft + (fPercent * (iNewLeft - this.iCurLeft));
    YSCSS.setStyle(this.objHolder, 'left', iLeft+'px');    
    if ( fPercent == 1 ) {
      this.iCurLeft = iNewLeft;
      this.oAnimation.cancelTimeout();
      this.oAnimation = null;
    }
  };
  
  
  /**
   * returns the 'left' value the holder must have when the photo with iPhotoNr 
   * is the center photo
   * @param int iPhotoNr
   * @return void
   */
  PhotoBar.prototype.getHolderLeft = function(iPhotoNr) {
    var oPhoto = this.aPhotos[iPhotoNr]; 
    if ( !oPhoto ) return 0;
    var iPosFromLeft = oPhoto.left + Math.floor(oPhoto.width/2);
    return Math.max(Math.min(0, this.iFlowCenter-iPosFromLeft), 
                    Math.min(0, this.iFlowWidth - this.iTotalWidth));
  };
  
  
  /**
   * identifies the photo in the center of the photobar
   * sets this.iCurrentPhoto
   * @return void
   */
  PhotoBar.prototype.identifyCenterPhoto = function() {
    var oPhoto = null;
    for ( var iNr in this.aPhotos ) {
      this.iCurrentPhoto = YSNumbers.checkInt(iNr);
      oPhoto = this.aPhotos[iNr];   
      if ( oPhoto.left > this.iFlowCenter ) {
         if ( this.iCurrentPhoto > 0 ) this.iCurrentPhoto--;
         break;
      }
      else if ( oPhoto.left < this.iFlowCenter && 
           oPhoto.left + oPhoto.width >= this.iFlowCenter ) 
        break;
    }
  };
  
  
  /**
   * navigates to photo with given nr
   * @param int iPhotoNr
   * @return void
   */
  PhotoBar.prototype.navigateTo = function(iPhotoNr) {
    if ( this.oAnimation != null ) return;
    if ( this.iCurrentPhoto == 0 ) {
      this.identifyCenterPhoto();
      if ( iPhotoNr > 0 ) iPhotoNr += this.iCurrentPhoto;
      else return;
    }
    
    var iNewLeft = this.getHolderLeft(iPhotoNr);
    if ( iNewLeft == this.iCurLeft ) return;
    else {
      // start animation
      this.oAnimation = new YSTimeout(30, PhotoBar.prototype.animateTo, 
                                      this, iNewLeft, true);
      this.iCurrentPhoto = iPhotoNr;
    }        
  };  
  
  
  /**
   * navigates forward 
   * @return void
   */
  PhotoBar.prototype.nextPhoto = function() {
    this.navigateTo(this.iCurrentPhoto+1);    
  };
  
  
  /**
   * called when a photo in the photobar is clicked
   * @param Event e
   * @param HTMLElement obj
   * @return void
   */
  PhotoBar.prototype.onClickPhoto = function(e, obj) {
    var oPhoto = this.aPhotos[YSNumbers.checkInt(YSXML.getAttribute(obj, 'photonr'))];
    if ( oPhoto ) {
      ShowImage.Instance().show(oPhoto.url);
    }
  };
  
  
  /**
   * navigates backwards
   * @return void
   */
  PhotoBar.prototype.previousPhoto = function() {
    this.navigateTo(this.iCurrentPhoto-1);
  };