// ------------------------------------------------------------------------------------------------
// class PoolImages
var poolImages = Class.create();
poolImages.prototype = {

  initialize: function(activeCategory) {
    // observer auf alle Categorien
    $A($$('#poolImageListBox ul li.poolFolderLi')).each(function(aCategory) {
       Event.observe(aCategory, "click", function(evt){
                        Event.stop(evt);
                        var id = this.id.split("_")[1];
                        myGallery.load(id, function() {});
                        showSubFolder(this);
                      }.bindAsEventListener(aCategory));

       var subClose = $('poolSubClose_' + aCategory.id.replace(/poolImageCategory_/, ""));
       if(subClose) {
         Event.observe(subClose,  'click', hideSubFolder.bind(aCategory));
       }
    });
  }
}

// ------------------------------------------------------------------------------------------------
// ab Hier Gallery und Folderfunktionen für Benutzerbilder
var URL_FORMBLITZIMAGE_LIST     = '/interfaces/xml_formblitz_to_fotoalbum.php'
var URL_POOLIMAGE_LIST          = '/interfaces/xml_traverse_pool_image_categories.php';
var URL_FOLDER_AND_IMAGE_ADMIN  = '/interfaces/xml_folder_and_image_admin.php';
var URL_FOLDER_AND_IMAGE_LIST   = '/interfaces/xml_traverse_user_image_folders.php';
var URL_IMAGE_EDIT_INTERFACE    = '/interfaces/edit_image.php';

// Startwerte
var globalActiveOffset        = 0;
var globalFilesAmount         = 0;
var globalActiveImageAmount   = 16;
// uploadtime
var globalActiveImageSorting  = 'filename';
//var globalActiveImageSorting    = 'uploadtime';

// Image-Preloader
var ImagePreloading;
var doPreloading = false;

// Anzeigeoptionen für die Galerie
var maxWidth;   // MaxBreite für ein Bild
var maxHeight;  // MaxHöhe für ein Bild
var boxPadding; // Padding für ImageContainer
var heightPerImage;      // Höhe einer Bild-Box
var placeholderHeight;   // Höhe des Platzhalter-Elements, welches das Aussehen des Scrollbalkens steuert

// ID für laufenden Alben-Ladevorgang
var activeFolderLoad = 0;

var imageType  = "user"
var uploadType = "";
var myGallery;
var FilesList;
var myFolderList;

var boxMargin                    = 8;    // Margin für ImageContainer
var boxBorderWidth               = 1;    // Rahmenbreite für ImageContainer;
var toolbarHeight                = 0;    // Höhe der Symbolleiste (die sich unter dem Bild befindet)
var imageGalleryHeight           = 300;  // Höhe der ImageGallery
var folderListHeight             = 249;  // Höhe der Ordnerliste
var imageGalleryWidth;
var imageGalleryPadding          = 6;    // Padding für ImageGallery
var imageMinSize                 = 40;   // Minimale Breite und Höhe für die Bilder in der Gallery
// Die Spanne , in der sich die Größe bewegt. 90 bedeutet z.B. minimal 40 (imageMinSize), maximal 140 (imageMinSize + 90)
var imageSizeMargin              = 80;
var imageSize                    = 0;
var columnCount                  = 4;    // Anzahl von Spalten in der Galerie
var rowCount                     = 3;    // Anzahl von Zeilen in der Galerie
var rowAmount                    = 0;    // Hypothetische Anzahl von Zeilen beim Einfügen aller Bilder in die Gallerie
//var lastLoadedImage              = 12; // die Nummer des letzten Bildes in der Galerie
var mouseUpHandler               = null; // der Handler für "mouseup"-Ereignis des Scrolling-Elements
var lastSliderPosition           = 0.5;  // Letzte Position des Sliders
var lastSliderTime               = 0;
var lastColumnCount              = 4;    // Anzahl der Spalten vor der letzten Slider Bewegung

var myObserverHandler = new ObserverHandler();


var active = 0;

// Setzt die Anzeige der aktuell angezeigten Bilder
function setOffsetDisplay() {

  var self = $('scrolling_gallery_container');
  var row = Math.floor(self.scrollTop / heightPerImage);
  var rowAmount = Math.ceil(globalFilesAmount / columnCount);

  $('imageOffsetStart').firstChild.data = (globalActiveOffset + 1);
  $('imageOffsetEnd').firstChild.data   = Math.min(globalFilesAmount, globalActiveOffset + (rowCount * columnCount));
  $('imageAmount').firstChild.data      = globalFilesAmount;
}

function getNoCoverUrl() {
  return "/gfx/" + FOA.Mandant.mandant_short_name + "/" + FOA.Mandant.language_iso_code + "/treeview_folder_nocover.gif";
}

// für den Bildupload über modalbox
showUploadModalBox = function(userID, folderID) {

  if (FOA.uploadType == "html") {
    location.href='/mypics/upload/';
  }
  else {
    FOA.selectedFolder = folderID;
    FOA.overlayContext = new ClassUpload(FOA.User.id, FOA.selectedFolder, "overLayerUpload", ClassUpload.onClose);
    FOA.overlayContext.uploadStep(1);
  }
}

function getGlobalActiveFolderName() {
  if (imageType == "pool") {
    $('folderEmptyUpload').hide();
    return 'poolImageCategory_';
  }
  else {
    $('folderEmptyUpload').show();
    return 'Folder_';
  }
}

// Diese Funktion wird onLoad geladen und initialisiert dadurch die Gallerie
function initGallery(initFolder, setMaxWidth, setMaxHeight, setBoxPadding, offset, aType) {

  // für Safari(rico dnd)
  if(navigator.userAgent.toLowerCase().indexOf("safari") > 0) {
    document.body = document.getElementsByTagName("body")[0];
  }

  FOA.selectedFolder    = initFolder;
  var galleryContainer  = $('scrolling_gallery_container');
  var folderListBox     = $('folderListBox');
  if (folderListBox) {
    folderListHeight = parseInt(Element.getStyle(folderListBox, 'height'));
  }

  // Gallery-Box
  var galleryBox = getElementsByClass('galleryBox', $('content'), 'div')[0];

  //imageGalleryHeight = parseInt(Element.getStyle(galleryContainer, 'height'));
  if (imageGalleryHeight == 300 && Element.getStyle(galleryContainer, 'height')) {
    imageGalleryHeight = parseInt(Element.getStyle(galleryContainer, 'height'));
  }

  Element.setStyle(galleryBox, { height: (imageGalleryHeight + 50) + 'px' });
  Element.setStyle(galleryContainer, { height: (imageGalleryHeight) + 'px' });

  if (typeof aType != "undefined") {
    imageType = aType;
  }

  var treeID = imageType  + 'TreeView';

  // den Bildern den ImageTyp verpassen
  $('imageBoxTemplate').className = "imageBox " + imageType;

  // alle activ folder zurücksetzen
  $A($$(('#' + treeID + ' .activeFolder'))).each(function(aElement) {
    Element.removeClassName(aElement, 'activeFolder');
  });

  maxWidth = setMaxWidth;
  maxHeight = setMaxHeight;
  boxPadding = setBoxPadding;

  // upload-modal (falls eingebunden)
  var folderEmpty = "";
  if(folderEmpty = $('folderEmptyUpload')) {
    var folderLi     = imageType  + 'FolderLi';
    var uploadFolder = $$(('#' + treeID + ' .' + folderLi))[0];
    var folderID     = uploadFolder.id.split('_')[1];

    Event.observe(folderEmpty, "click", function(evt) {
                            Event.stop(evt);
                            if (FOA.uploadType == "html") {
                              location.href = "/mypics/upload/";
                            } else {
                              if (FOA.selectedFolder > 0) {
                                folderID = FOA.selectedFolder;
                              }
                              FOA.overlayContext = new ClassUpload(FOA.User.id, folderID, "overLayerUpload", ClassUpload.onClose);
                              FOA.overlayContext.openFileSelection(true);
                            }
                          }.bindAsEventListener(this));
  }

  if(folderEmpty = $('dropZonePrintUpload')) {
    var folderLi     = imageType  + 'FolderLi';
    var uploadFolder = $$(('#' + treeID + ' .' + folderLi))[0];
    var folderID     = uploadFolder.id.split('_')[1];

    Event.observe(folderEmpty, "click", function(evt) {
                            Event.stop(evt);
                            if (FOA.uploadType == "html") {
                              location.href = "/mypics/upload/";
                            } else {
                              if (FOA.selectedFolder > 0) {
                                folderID = FOA.selectedFolder;
                              }
                              FOA.overlayContext = new ClassUpload(FOA.User.id, folderID, "overLayerUpload", ClassUpload.onClose);
                              FOA.overlayContext.openFileSelection(true);
                            }
                          }.bindAsEventListener(this));
  }

  // Breite der Gallerieansicht bestimmen
  var galleryDims = Element.getDimensions('gallery_container');
  imageGalleryWidth = galleryDims.width;

  heightPerImage = maxWidth + boxPadding * 2 + 2 * boxBorderWidth + toolbarHeight + boxMargin; // Höhe einer Bildbox

  // GallerieObjekt instantiieren
  myGallery = new ImgGallery(imageType);

  // Slider initialisieren
  myGallery.onSlideHandler(lastSliderPosition, true);

  // Album laden
  myGallery.load(initFolder, function() {});

  // Ordnerlisten-Objekt instantiieren
  myFolderList = new FolderList();

  var listHandler;
  if (listHandler = $(imageType + 'ListHandler')) {
    myObserverHandler.setObserver($(imageType + 'ListHandler'),'click', myFolderList.shrinkList);
  }

  // -------------------------------------
  // ÄNDERUNG für POOLIMAGES
  // Alle Folder durchlaufen und Links setzen

  if (imageType == "user") {

    $A($$(('#' + treeID + ' .' + folderLi))).each(function(liElement) {

      // Dropzone erstellen
      FolderList.makeDroppable(liElement);
      FolderList.makeDraggable(liElement);

      // Link: Kontext öffnen
      var folderInfoI = getElementsByClass('folderInfoImg', liElement, 'img')[0];
      Event.observe(folderInfoI, 'click', openFolderContext.bind(liElement));

      // Link: Album öffnen
      var folderCover    = getElementsByClass('folderCover', liElement, 'img')[0];
      var folderDesc     = getElementsByClass('folderDesc', liElement, 'div')[0];

      Event.observe(folderCover, 'click', actionFolder.bind(liElement));
      Event.observe(folderDesc,  'click', actionFolder.bind(liElement));

      var subClose = $('folderSubClose_' + liElement.id.replace(/Folder_/, ""));
      if(subClose) {
        Event.observe(subClose,  'click', hideSubFolder.bind(liElement));
      }
    });
  }

  if((arguments.length > 4) && (arguments[4] > 0)) {
    globalActiveOffset = arguments[4] - (arguments[4] % columnCount);
    myGallery.onLoadFunc = function () {
       $('scrolling_gallery_container').scrollTop = Math.floor(globalActiveOffset / columnCount) * heightPerImage + 1;
    }
  }
}

function openFolderContext() {
  var folderID = this.id.replace(/Folder_/, "");
  // IE-Bug (?): "click" wird auch bei dem Quell-Template-Li observed,
  // so dass diese Fkt. doppelt getriggert wird
  if (parseInt(folderID) > 0) {
    FOA.selectedFolder = folderID;
    FOA.overlayContext = new ClassFolderContext(FOA.User.id, folderID);
  }
}

function actionFolder(event) {
  loadFolder(this);
  showSubFolder(this);
}

function loadFolder(element) {
  var folderID = element.id.replace(/Folder_/, "");
  // IE-Bug (?): "click" wird auch bei dem Quell-Template-Li observed,
  // so dass diese Fkt. doppelt getriggert wird
  if (parseInt(folderID) > 0) {
    myGallery.load(folderID);
  }
}
function showSubFolder(element) {
  var subfolder = $('subfolder_' + element.id.replace(/Folder_/, ""))
  if(subfolder) {
    subfolder.setStyle({display: 'block'});
  }
  var subfolder = $('poolSubfolder_' + element.id.replace(/poolImageCategory_/, ""))
  if(subfolder) {
    subfolder.setStyle({display: 'block'});
  }

}
function hideSubFolder(event) {
  var subfolder = $('subfolder_' + this.id.replace(/Folder_/, ""))
  if(subfolder) {
    subfolder.setStyle({display: 'none'});
  }
  var subfolder = $('poolSubfolder_' + this.id.replace(/poolImageCategory_/, ""))
  if(subfolder) {
    subfolder.setStyle({display: 'none'});
  }
}


function preloadImage() {
  if (doPreloading) {
    var I = new Image();
    if (ImagePreloading.length > 0) {
      I.src = ImagePreloading.shift();
      I.onload = function() {
        preloadImage();
      }
    }
  }
}

function ImgGallery() {

  this.xmlFilesList   = null;
  FOA.galleryItemList = new Array();

  // ___________________V_A_R_I_A_B_L_E_S_____________________

  /**
  * Ein DIV-Element, welches die Galerie und ein Platzhalter-Element zur Regulierung des Scrollbalkens beinhaltet
  */
  var scrollingImageGalleryBox = $('scrolling_gallery_container');
  /**
  * Ein DIV-Platzhalter. Seine Höhe bestimmt das Aussehen des Scrollbalkens
  */
  var placeholder = $('placeholder');

  var imageGalleryBox         = $('gallery_container');
  var imageContainerTemplate  = $('imageContainerTemplate');
  var imageBoxTemplate        = $('imageBoxTemplate');
  var imageTemplate           = $('imageTemplate');

  /**
  * Position des Scrollbalkens
  */
  var lastScrollTop           = 0;
  /**
  Die Nummer des ersten von den zu ladenden Bildern
  */
  var lastScrollOffset        = 0;

  this.timedScrollObserver = function() {
    if (!active) {
      active = window.setTimeout("myGallery.scrollHandler()", 100);
    }
  }

  this.scrollHandler = function() {
    active = 0;

    var self = scrollingImageGalleryBox;
    var scrollBy = (self.scrollTop - lastScrollTop);
    var scrollByAbs = Math.abs(scrollBy);
    if (scrollByAbs == 0) {
      return;
    }

    if (scrollByAbs < heightPerImage) {
      self.scrollTop = self.scrollTop - scrollBy
                     + (scrollBy / scrollByAbs) * heightPerImage;
    }

    // Scroll-Position zwischenspeichern
    lastScrollTop = self.scrollTop;

    globalActiveOffset = Math.floor(self.scrollTop / heightPerImage) * columnCount;

    setOffsetDisplay();

    // und sein Eintreten führt zur Aktualisierung der Gallery
    myGallery.refreshAfterScrolling('scrolling_gallery_container');
  }

  this.onSlideHandler = function(v) {

    var self = $('scrolling_gallery_container');

    var timestamp = new Date().getTime();
    if (timestamp - lastSliderTime < 100) {
      return;
    }
    lastSliderTime = timestamp;

    // Variable enthält alle Bilder-Container
    var imageBoxes = getElementsByClass('imageBox', imageGalleryBox, 'div');

    /**
    * @global maxWidth liefert die Breite des Bildes, welche bei Slider-Bewegungen neu gesetzt werden muss
    * Formel für die Größe: minimale Größe + (Spanne * position des Sliders zwischen 0 und 1)
    */
    imageSize = imageMinSize + Math.floor(imageSizeMargin * v);
    var lastImageSize = imageMinSize + imageSizeMargin * lastSliderPosition;

    /**
    * @global imageBoxTemplate Vorlage, welche beim Laden von neuen Bildern benutzt wird
    * Breite und höhe müssen neu gesetzt werden, damit auch hinzukommende Bilder die angepassten Ausmaße haben
    */
    imageBoxTemplate.style.width = imageSize + "px";
    imageBoxTemplate.style.height = imageSize + "px";

    /**
    * @global boxPadding Padding von ImageContainern
    * @global boxBorderWidth Breite des Rahmen beo den ImageContainern
    * @global imageContainerTemplate Vorlage für Boxen, welche die Bilder-Boxen beinhalten.
    * Breite und Höhe müssen neu gesetzt werden, damit die Boxen bei neu hinzukommenden Bildern die
    * angepassten Ausmaße haben.
    * Formel für die Höhe: Höhe der ImageBox + 2 * boxPadding + 2 * Rahmenbreite
    */
    imageContainerTemplate.style.width = (imageSize + 2 * boxPadding + 2 * boxBorderWidth) + "px";
    imageContainerTemplate.style.height = (imageSize + 2 * boxPadding + 2 * boxBorderWidth) + "px";

    // Alle ImageBoxen und ImageContainer durchlaufen und dabei Höhen und Breiten anpasse
    for (var i=0; i < imageBoxes.length; i++) {

      // Bild skalieren
      var imageElement = imageBoxes[i] . firstChild;
      imageElement.style.width = imageSize + 'px';
      imageElement.style.height = imageSize + 'px';

      // ggf. Overlay skalieren
      /*
      var imageElement = imageBoxes[i] . firstChild;
      imageElement.style.width = imageSize + 'px';
      imageElement.style.height = imageSize + 'px';
      */

      // Box skalieren
      imageBoxes[i].style.width = imageSize + "px";
      imageBoxes[i].style.height = imageSize + "px";

      imageBoxes[i].parentNode.style.width = imageContainerTemplate.style.width;
      imageBoxes[i].parentNode.style.height = imageContainerTemplate.style.height;

      // Kontextmenü skalieren
      var iconField = getElementsByClass('imageIconField', imageBoxes[i], 'div')[0];
      iconField.style.width = imageContainerTemplate.style.width;

      var iconInfo = getElementsByClass('info', imageBoxes[i], 'img')[0];
      iconInfo.style.left = ((imageSize / 2)) + "px";

    }

    // Höhe berechnen, welche pro Bild beansprucht wird. Formel = Höhe des Bildes + 2 * Padding des ImageContainers +
    // 2 * Randbreite des ImageConatiners + höhe der Leiste + Margin des ImageConatiners
    heightPerImage = imageSize + boxPadding * 2 + 2 * boxBorderWidth + toolbarHeight + boxMargin;
    var lastHeightPerImage = lastImageSize + boxPadding * 2 + 2 * boxBorderWidth + toolbarHeight + boxMargin;

    // Anzahl der Zeilen berechnen. Formel: (Höhe der ImageGallery - 2 * Padding der ImageGallery) /
    // (Breite des Bildes + 2 * Padding des ImageContainer + 2 + Randbreite + Margin des ImageContainers
    // Achtung: 20px Abzug wegen anderem Aufbau mit dem Slider!
    var newColumnCount = Math.floor((imageGalleryWidth - 20) / (imageSize + 2 * boxPadding + 2 * boxBorderWidth + boxMargin));

    //columnCount = Math . floor ((imageGalleryWidth - imageGalleryPadding * 2) / (maxWidth + 2 * boxPadding + 2 * boxBorderWidth + boxMargin));
    // Anzahl der Zeilen. Formel: Abrunden (Höhe der Gallerie / Höhe Pro Bild)
    var newRowCount = Math.floor(imageGalleryHeight / heightPerImage);
    // Anzahl der Bilder, die in die Galerie reinpassen. Formel: Anzahl Spalten * Anzahl Zeilen
    var imageCountFittingIntoGalleryView = newColumnCount * newRowCount;

    if (imageCountFittingIntoGalleryView == columnCount * rowCount) {
      return;
    }

    columnCount = newColumnCount;
    rowCount = newRowCount;

    // Gesamtanzahl von Zeilen
    var rowAmount = Math.ceil(globalFilesAmount / columnCount);

    var myOffset = globalActiveOffset;

    // Die Höhe des Platzhalter berechnen. Formel: Aufrunden(Anzahl Bilder / Anzahl Spalten) * Höhe Pro Bild
    //placeholderHeight = Math . ceil(globalFilesAmount / columnCount) * (heightPerImage);
    /* Änderung: die Höhe muss so berechent werden, dass die letzten X Zeilen nach dem Scrollen zur untersten Position in der Galerie zu sehen sind */
    placeholderHeight = Math.max(imageGalleryHeight, Math.ceil((rowAmount * heightPerImage) / imageGalleryHeight) * imageGalleryHeight);
    placeholder.style.height = placeholderHeight + "px";
    var offsetRow = Math.floor(globalActiveOffset / columnCount);

    lastColumnCount = columnCount;
    lastSliderPosition = v;

    if (imageCountFittingIntoGalleryView > imageBoxes.length) {

      // Zeige nur mehr Bilder, wenn auch mehr Bilder da sind
      if (globalFilesAmount > imageBoxes.length) {

        // Fehlende Bilder nachladen
        var imageAmountToAdd = imageCountFittingIntoGalleryView - imageBoxes.length;
        myGallery.addNewImages(globalActiveOffset + imageBoxes.length, false, imageAmountToAdd, 0, false);

        // Anzahl der anzuzeigender Bilder erhöhen (GILT FÜR ALLE ORDNER)
        globalActiveImageAmount += imageAmountToAdd;
      }
    }
    // Wenn die Gallery mehr Bilder enthält, als reinpassen
    else if(imageCountFittingIntoGalleryView < imageBoxes.length) {

      // Überschüssige Bilder löschen
      var imageAmountToRemove = imageBoxes.length - imageCountFittingIntoGalleryView;
      myGallery.removeImages(false, imageAmountToRemove);

      // Anzahl der anzuzeigender Bilder verringern (GILT FÜR ALLE ORDNER)
      globalActiveImageAmount -= imageAmountToRemove;
    }
  }

  /**
    * Dieser Objekt der Klasse Control.Slider ist für die Kontrolle der Sliders und Reaktion auf dessen
    * Änderungen zuständig
    */
  var sliderControl = new Control.Slider('gallery_slider_handle', 'gallery_slider_track',{

    // Startposition des Sliders
    sliderValue: lastSliderPosition,

    /**
    * Die Variable onSlide enthält die Funktion, welche bestimmt, was nach einer Slider-Bewegung geschieht
    *
    * @param v die position des Sliders zwischen 0 und 1. 0 bedeutet äußerst links, 1 - äußerst rechts
    * @author Nikolaj Giebelhaus
    */
    onSlide: this.onSlideHandler,

    /**
    * In der Variable onChange enthält die Funktionm, welche beim loslassen des Sliders ausgeführt wird.
    * Die Funktion entspricht der Funktion onSlide. Vor dem Aufruf wird die Variable onChange auf false gesetzt,
    * damit die Funktion auf jedem Fall ausgeführt wird.
    */
    onChange:function(v){
      this.onSlide(v, true);
    }
  });

  // Breite und Höhe für imageBoxTemplate setzen
  Element.setStyle(imageBoxTemplate, {
    width: maxWidth + 'px',
    height: maxHeight + 'px',
    padding: boxPadding + 'px'
  });
  Element.setStyle(imageContainerTemplate, { width: (maxWidth + 2*boxPadding) + 2 + 'px' }); // 2x1px border mit eingerechnet

  /* Speichere eine Referenz auf das aktuelle Objekt in
     der privaten Eigenschaft self */
  var self = this;

  // ________________P_U_B_L_I_C___M_E_T_H_O_D_S_______________________

  // Leert die Gallerieanzeige
  this.clearGallery = function() {
    $A(getElementsByClass('imageContainer', imageGalleryBox, 'div')).each(function(element) {
      imageGalleryBox.removeChild(element);
    });
  }

  // Fügt ein fehlendes Bild zur Bilderliste hinzu
  this.refreshView = function() {
    var imageBoxes = getElementsByClass('imageBox', imageGalleryBox, 'div');
    if (globalActiveOffset + imageBoxes.length < globalFilesAmount) {
      // Lade ein Bild nach
      new Ajax.Request(URL_FOLDER_AND_IMAGE_LIST, {
        method    : 'get',
        parameters: 'mode=files'
                  + '&folder=' + FOA.selectedFolder
                  + '&filesPerPage=1'
                  + '&sortBy=' + globalActiveImageSorting
                  + '&offset=' + (globalActiveOffset + globalActiveImageAmount - 1),
        onSuccess: function(transport) {
          var xmlDoc = transport.responseXML;
          var imageFileNode = xmlDoc.getElementsByTagName('files')[0].getElementsByTagName('f')[0];
          addImage((globalActiveOffset + globalActiveImageAmount - 1), imageFileNode);
        }
      });

    }
  }

  /**
   * Die Funktion fügt zusätzliche Bilder in die Galerie ein oder ersetzt vorhandene Bilder durch neue.
   * Auch wenn der Name was anderes vermuten  lässt, muss das nicht zeilenweise erfolgen.
   *
   * @todo Funktionsnamen ändern (z.B. addNewImages) und alle aufrufe entsprechend anpassen
   * @author Nikolaj Giebelhaus
   *
   * @param offset die Nummer des ersten von den zu landenden Bildern
   * @param top wenn true, werden bilder vorne eingefügt, sonst hinten
   * @param count Anzahl der Bilder
   */
  this.addNewImages = function(offset, addFromTop, count) {
    if(!FilesList) {
      return 0;
    }
    // Bilder einfügen
    for (var i = 0; i < count; i++) {
      addImage((offset + i), FilesList[offset + i], addFromTop);
    }
  }

  /**
   * Entfernt ein Bild aus der internen Dateiliste
   */
  this.removeFromFilesList = function (offset) {
    FilesList.splice(offset, 1);
  }


   // Von Nikolaj
   // geändert von Urs: Hier muss aufgepasst werden, dass nur Container gelöscht werden und
   // keine anderen HTML_Elemente (wie z.B. <br>)
  this.removeImages = function(top, count) {
    var iContainer = $A(getElementsByClass('imageContainer', imageGalleryBox));

    if (top) {
      for (var i = 0; i < Math.min(count, iContainer.length); i++) {
        imageGalleryBox.removeChild(iContainer.shift());
      }
    }
    else {
      for (var i = 0; i < Math.min(count, iContainer.length); i++) {
        imageGalleryBox.removeChild(iContainer.pop());
      }
    }
  }

  /**
  * Die Funktion aktualisiert die Galerie nach der Bewegung des Scrollbalkens
  *
  * @param boxName string der Name der Box, in welcher gescrollt wurde
  * @param parallelAjaxRequests boolean wenn true, wird die Ausführung auch bei parallel laufenden Ajax-Requests zugelassen
  *
  * Standardmäßig wird die Ausführung bei eine parallel Laufenden Ajax-Request unterbrochen.
  * Die Funktion hat norlalerweise keinen Rückgabewert. Wenn die Ausführung aufgrund von parallelen Ajax-Request unterbrochen
  * wird, liefert die Funktion false zurück
  *
  * @todo Übergabe des Elements statt des Namens
  */
  this.refreshAfterScrolling = function(boxName, parallelAjaxRequests) {

    var self = $(boxName);

    /**
     * Die Zeilendifferenz (um wie viele Zeilen nach vorne ist der User gesprungen ?)
     */
    var rowDiff = Math.floor((globalActiveOffset - lastScrollOffset) / columnCount);
    lastScrollOffset = globalActiveOffset;

    if (rowDiff != 0) {
      this.clearGallery();
      this.addNewImages(globalActiveOffset, (globalActiveOffset > lastScrollOffset), (columnCount * rowCount));
    }
  }
  // =========================================
  // Aktuelles Album erneut laden
  this.reload = function() {
    this.load(FOA.selectedFolder);
  }

  this.setActiveFolderView = function() {

    $A($$(('#' + imageType + 'TreeView .activeFolder'))).each(function(aElement) {
      Element.removeClassName(aElement, 'activeFolder');
    });

    Element.addClassName(getGlobalActiveFolderName(imageType) + FOA.selectedFolder, 'activeFolder');
  }

  // Gallerie-Anzeige eines Ordners
  this.load = function(FolderID, onLoadFunc) {

    FOA.selectedFolder = FolderID;
    this.setActiveFolderView();

    ImagePreloading = new Array();
    /***************** HINZUGEFÜGT VON NIKOLAJ AM 03.12.2007 *****************/
    lastScrollOffset = 0;
    lastScrollTop    = 0;
    globalActiveOffset = 0;
    scrollingImageGalleryBox.scrollTop=0;
    /******************** HINZUGEFÜGT VON NIKOLAJ ENDE  **********************/

    /* =============================================== */
    // Gallerybox leeren
    self.clearGallery();
    Element.hide('folderEmpty');
    Element.show('gallery_loading');

    // Aktiven Ordner setzen
    FOA.selectedFolder = FolderID;

    // Unique-ID bestimmen
    activeFolderLoad = Math.random();

    // ÄNDERUNG für POOLIMAGES
    // Ordnerinhalt per Ajax bestimmen
    switch (imageType) {
      case "user":
        var requestURI = URL_FOLDER_AND_IMAGE_LIST;
        new Ajax.Request(requestURI, {
          method    : 'get',
          parameters: 'mode=files'
                    + '&folder=' + FolderID
                    + '&sortBy=' + globalActiveImageSorting
                    + '&offset=' + globalActiveOffset
                    + '&activeLoad=' + activeFolderLoad,
          onSuccess: parseAjaxResultsImages.bind(this),
          on403: UserAssignTools.login
        });
      break;
      case "pool":
        var requestURI = URL_POOLIMAGE_LIST;
        new Ajax.Request(requestURI, {
          method    : 'get',
          parameters: 'action=getImagesByCategorie'
                    + '&categorie_id='  + FolderID
                    + '&activeLoad='    + activeFolderLoad,
          onSuccess: parseAjaxResultsImages.bind(this),
          on403: UserAssignTools.login
        });
      break;
      case "formblitzimage":
        new Ajax.Request(URL_FORMBLITZIMAGE_LIST, {
          method    : 'get',
          parameters: 'target=getMediaList'
                    + '&userID=' + FOA.User.id
                    + '&type=' + FOA.galleryMediaType,
          onSuccess: parseAjaxResultsImages.bind(this),
          on403: UserAssignTools.login
        });
       break;
    }

  } // ENDE showFolder

  // Ein Bild (Parameter) zur Galerie hinzufügen
  // benötigt globale Parameter
  // - oneImageContainer
  // - imageContainerTemplate
  // - imageBoxTemplate
  // - imageTemplate
  // - maxWidth
  // - maxHeight
  function rotateImage(angle) {
    var imageID = this.id.replace(/imageBox_/, '');

    // zeige Warte-Overlay
    var imageElement = this.firstChild;
    var myOverlay = new Overlay(imageElement.parentNode);
    imageElement.onload = function() {
      myOverlay.remove();
    }

    // Ajax-Request starten
    new Ajax.Request(URL_IMAGE_EDIT_INTERFACE, {
      parameters: 'image=' + imageID
                + '&action=rotate'
                + '&angle=' + angle
                + '&token='+ (new Date()).getTime(),

      onComplete: function (transport) {
        var XMLDoc  = transport.responseXML;
        var result  = XMLDoc.getElementsByTagName('result')[0].firstChild.data;
        var file_time = XMLDoc.getElementsByTagName('file_time')[0].firstChild.data;

        if(result = 'success') {

          // URL austauschen (fileTime aktualisieren)
          imageElement.src = imageElement.src.replace(/ftime=[0-9]+/, "ftime=" + file_time);

          // neue FileTime auch im XML-Element speichern, damit bei Wiederverwendung keine
          // alte cache-Version angezeigt wird
          FilesList[offset].setAttribute('t', file_time);

          // Wenn das erste Bild im Album (Coverbild) gedreht wird, das Album refreshen
          if (offset == 0) {
            Folder.refreshInfo(FOA.selectedFolder);
          }

        }
        else{
          alert('Das Bild konnte nicht gedreht werden!');
        }
      }
    });
  }

  /**
   * Öffnet ein Modal-Overlay-Popup mit dem Bild als Detailansicht
   */
  function showImageOverlay() {
    var imageID      = this.parentNode.id.replace(/imageBox_/, '');
    FOA.overlayContext = new ClassImageSlideShow(FOA.User.id, imageID, FOA.selectedFolder, imageType);
  }

  /**
   * Öffnet ein Modal-Overlay-Popup mit dem PoolBild als Detailansicht
   */
  function showPoolImageOverlay() {
    var imageID = this.parentNode.id.replace(/imageBox_/, '');
    FOA.overlayContext = new ClassImageSlideShow(FOA.User.id, imageID, FOA.selectedFolder, imageType);
  }

  /**
   * Öffnet ein Modal-Overlay-Popup mit dem Kontextmenü für ein Bild
   */
  function showImageContext() {
    var imageID      = this.id.replace(/imageBox_/, '');
    FOA.overlayContext = new ClassImageInfo(FOA.User.id, imageID, FOA.selectedFolder, imageType);
  }

  // ÄNDERUNG für POOLIMAGES
  function getImageURL(imageFileNode, maxWidth, maxHeight) {
    switch (imageType) {
      case "pool":
        var imageURL = ImageTools.staticPoolImageURL(imageFileNode.getAttribute('i'),
                          imageFileNode.getAttribute('t'),
                          { width: maxWidth,
                            height: maxHeight,
                            fitcanvas: true },
                          0);
      break;
      case "formblitzimage":
        var imageURL = ImageTools.staticFormblitzImageURL(FOA.User.id,
                        imageFileNode.getAttribute('i'),
                        imageFileNode.getAttribute('ty'),
                        imageFileNode.getAttribute('t'),
                        { width: maxWidth,
                          height: maxHeight,
                          fitcanvas: true },
                        0);
      break;
      default:
        var imageURL = ImageTools.staticImageURL(FOA.User.id,
                        imageFileNode.getAttribute('i'),
                        imageFileNode.getAttribute('t'),
                        { width: maxWidth,
                          height: maxHeight,
                          fitcanvas: true },
                        0);
      break;
    }
    return imageURL;
  }

  function insertKontextIcons(imageBox) {

    var position = Position.cumulativeOffset(imageBox);

    // Icons einfügen
    var imageIconField = $('imageIconFieldTemplate').cloneNode(true);
    var imageIconWidth = parseInt(imageBox.parentNode.style.width);
    imageIconField.removeAttribute('id');
    imageIconField.style.width = imageIconWidth + "px";
    //imageIconField.style.height = (parseInt(imageBox.parentNode.style.height) * 0.15) + "px";
    imageBox.appendChild(imageIconField);

    // Icons mit Clickhandlern versehen
    var rotateLeft  = getElementsByClass('rotateLeft', imageIconField, 'img')[0];
    var rotateRight = getElementsByClass('rotateRight', imageIconField, 'img')[0];
    var rotateInfo  = getElementsByClass('info', imageIconField, 'img')[0];
    rotateInfo.style.left = ((imageIconWidth / 2) - 10) + "px";
    //Event.observe(rotateLeft,  'click', rotateImage.bind(imageBox, -90));
    //Event.observe(rotateRight, 'click', rotateImage.bind(imageBox, 90));
    rotateInfo.onclick = showImageContext.bind(imageBox);

  }

  function hideKontextIcons(event) {
    var kontextIcons = getElementsByClass('imageIconField', this, 'div')[0];
    Element.hide(kontextIcons);
  }

  function showKontextIcons (event) {
    var kontextIcons = getElementsByClass('imageIconField', this, 'div')[0];
    Element.show(kontextIcons);
  }

  function addImage(offset, imageFileNode, top) {

    if (!imageFileNode) {
      return;
    }

    // Templates clonen
    oneImageContainer = imageContainerTemplate.cloneNode(true);
    oneImageBox       = imageBoxTemplate.cloneNode(true);
    oneImage          = imageTemplate.cloneNode(true);

    // ID der Templates entfernen
    oneImageContainer.removeAttribute('id');
    oneImageBox.removeAttribute('id');
    oneImage.removeAttribute('id');

    // Bildtext zusammensetzen
    //var FileURL = imageFileNode.getAttribute('url');
    if (!imageFileNode.getAttribute('i')) {
      return;
    }

    var FileURL = getImageURL(imageFileNode, maxWidth, maxHeight);

    // Bildattribute setzen
    oneImageBox.setAttribute('id', 'imageBox_' + imageFileNode.getAttribute('i'));

    // wichtig für die Berechnung der Positionen von KontextIcons
    oneImageBox.style.position = "relative";
    oneImage.setAttribute('id',       'imageOffset_' + offset);
    oneImage.setAttribute('width',    maxWidth);
    oneImage.setAttribute('height',   maxHeight);
    oneImage.setAttribute('alt',      imageFileNode.getAttribute('n').replace('"', '&quot;'));
    oneImage.style.width  = imageSize + 'px' ;
    oneImage.style.height = imageSize + 'px' ;

    if(imageType == "pool") {
      oneImage.onclick = showPoolImageOverlay.bind(oneImage);
    }
    else {
      oneImage.onclick        = showImageOverlay.bind(oneImage);
      oneImageBox.onmouseover = showKontextIcons.bind(oneImageBox);
      oneImageBox.onmouseout  = hideKontextIcons.bind(oneImageBox);
    }

    // ==============================================================================================

    // Alle Elemente zusammenbauen
    oneImageBox.appendChild(oneImage);
    oneImageContainer.appendChild(oneImageBox);

    // Die Bildbox
    if (top) {
      imageGalleryBox.insertBefore(oneImageContainer, imageGalleryBox.firstChild);
    }
    else{
      imageGalleryBox.insertBefore(oneImageContainer, $('gallery_cleaner'));
    }

    // zeige Warte-Overlay
    var imageElement = oneImage;
    var myOverlay = new Overlay(imageElement.parentNode);
    imageElement.onload = function() {
      myOverlay.remove();
    }
    oneImage.setAttribute('src', FileURL);

    insertKontextIcons(oneImageBox);

    // Draggable registrieren
    dndMgr.registerDraggable( new CustomDraggable('imageBox', oneImageBox));
  }

  // Ajax-Ergebnisse verarbeiten
  function parseAjaxResultsImages(response) {

    var XMLDoc      = response.responseXML;
    var FolderInfo  = XMLDoc.getElementsByTagName('info')[0];
    var FilesNode   = XMLDoc.getElementsByTagName('items')[0];
    FilesList       = $A(FilesNode.getElementsByTagName('item'));
    myGallery.xmlFilesList = FilesList;

    // Nur das Ergebnis des letzten Ladevorgangs darf angezeigt werden
    // active_load: bekommen wir nicht immer --> vorläufig rausgenommen
    /*
    if (FolderInfo && (FolderInfo.getAttribute('active_load') != activeFolderLoad)) {
      return;
    }
    */

    activeFolderLoad = '';
    for (var i = 0; i < FilesList.length; i++) {
      var imageID  = parseInt(FilesList[i].getAttribute('i'));
      var imageURL = ImageTools.staticImageURL(FOA.User.id,
                      imageID,
                      FilesList[i].getAttribute('t'), {
                        width: maxWidth,
                        height: maxHeight,
                        fitcanvas: true
                      }, 0);
      ImagePreloading[i] = imageURL;
      FOA.galleryItemList[imageID] = { w:  parseInt(FilesList[i].getAttribute('w')),
                                       h:  parseInt(FilesList[i].getAttribute('h')),
                                       ty: FilesList[i].getAttribute('ty') };
    }

    preloadImage();

    var FileAttributes;
    var oneImageBox;
    var oneImage;
    var imageWidth;
    var imageHeight;
    var originalWidth;
    var originalHeight;
    var thumbImageWidth;
    var thumbImageHeight;
    var resizeFactor;

    // ================================================================================
    // Wartezeichen entfernen
    Element.hide('gallery_loading');

    // ===============================================================================
    // Paging erlauben
    //globalFilesAmount   = parseInt(FolderInfo.getAttribute('amount'));
    globalFilesAmount = FilesList.length;
    self.filesOffset  = parseInt(FolderInfo.getAttribute('file_offset'));

    setOffsetDisplay();

    /********************** HINZUGEFÜGT VON NIKOLAJ AM 02.01.2007 *****************/
    /**
     * Die Höhe des Platzhalters. Sie bestimmt den Scrollbereich. Die Formel für die Höhe:
     * Anzahl Zeilen (= Anzahl Bilder insgesamt / Anzahl Bilder pro zeile) multipliziert mit Höhe pro Bild
     *
     */
    /* Änderung: die Höhe muss so berechnet werden, dass die letzten X Zeilen nach dem
       Scrollen zur untersten Position in der Galerie zu sehen sind */
    //alert(Math.ceil(globalFilesAmount / columnCount) - rowCount + 1);
    rowAmount = (Math.ceil(globalFilesAmount / columnCount) - rowCount);

    placeholderHeight = rowAmount * (heightPerImage) + imageGalleryHeight;

    // Höhe des Platzhalters setzen
    placeholder.style.height = placeholderHeight + "px";

    // Scrolling-Erreignis wird überwacht, ...
    Event.observe(scrollingImageGalleryBox, 'scroll', myGallery.timedScrollObserver);
    /********************** HINZUGEFÜGT VON NIKOLAJ ENDE **************************/

    // ===============================================================================
    // Ordnerinhalt anzeigen
    if (FilesList.length > 0) {

      // Album ist leer verstecken
      Element.hide('folderEmpty');

      // Von unten columnCount*rowCount-viele Bilder hinzufügen ab Offset 0
      myGallery.addNewImages(0, false, (columnCount * rowCount));
    }
    else {

      // Album ist leer anzeigen
      Element.show('folderEmpty');

    }

    var imgContainers = imageGalleryBox.childNodes;
    if (myGallery.onLoadFunc) {
      myGallery.onLoadFunc();
      myGallery.onLoadFunc = false;
    }
  };
} // ENDE ImgGallery


// ================================================================================================

function FolderList() {

  // ___________________V_A_R_I_A_B_L_E_S_____________________
  var treeID = imageType  + 'TreeView';
  var firstChild;
  var branchCounter  = 0;

  this.coverURLs    = new Array();
  // this.noCoverURL    = '/roothttp://www8.fotoalbum.de/mandants/root/gfx/treeview_folder_nocover.gif?1236782233';

  /* Speichere eine Referenz auf das aktuelle Objekt in
     der privaten Eigenschaft self */
  var self = this;

  // ________________P_R_I_V_A_T_E___M_E_T_H_O_D_S_______________________

  // ________________P_U_B_L_I_C___M_E_T_H_O_D_S_______________________

  /**
   * Rollt Ordner Liste ein,
   *
   */
  this.shrinkList = function() {
    // Element, welches die Ordnerauflistung enthält
    var treeBranch = $(treeID);
    // Elemente der Ordnerauflistung holen
    var listElements = treeBranch.getElementsByTagName('li');
    // id des aktiven Ordners ermitteln
    // ÄNDERUNGEN POOLIMAGES
    var activeElementID = getGlobalActiveFolderName() + FOA.selectedFolder;

    // Alle Element durchlaufen
    for(var i=0;i<listElements.length;i++) {
      // alle Elemente bis aufs aktive ausblenden
      if(listElements[i].id != activeElementID) {
        listElements[i].style.display = "none";
      }
    }
    // Neue Höhe der Auflistung berechnen
    var newFolderListHeight = $(activeElementID).offsetHeight + 10;
    // Neue Höhe über CSS zuweisen
    treeBranch.parentNode.style.height = newFolderListHeight + "px";
    // Gallery-Box
    var galleryBox       = getElementsByClass('galleryBox', $('content'), 'div')[0];
    // Galerie-Container, dessen Höhe angepasst werden soll
    var galleryContainer = $("scrolling_gallery_container");
    // ist der Galerie-Container links ?
    if(getParentByClass("rightColumn", galleryBox)) {
      // neue Höhe ermitteln
      imageGalleryHeight = imageGalleryHeight + (folderListHeight - newFolderListHeight);
      // Höhe zuweisen
      galleryContainer.style.height = imageGalleryHeight + "px";
      // Bilder nachladen
      galleryBox.style.height = galleryBox.offsetHeight + (folderListHeight - newFolderListHeight -10) + "px";
      myGallery.onSlideHandler(lastSliderPosition, true);
    }

    // ÄNDERUNGEN POOLIMAGES
    // Alte Observer entfernen
    var listHandler = $(imageType + 'ListHandler');
    if(listHandler) {
    myObserverHandler.unsetAllObserver(listHandler.id);
    // Neuen Observer setzen (damit die Liste wieder aufgeklappt werden kann
    myObserverHandler.setObserver(listHandler,'click', myFolderList.rollOutList);
    listHandler.className = "clickable floating_right plus";
    }
  }

  this.rollOutList = function() {
    // Element, welches die Ordnerauflistung enthält
    var treeBranch = $(treeID);
    var newFolderListHeight = treeBranch.offsetHeight;
    // Elemente der Ordnerauflistung holen
    var listElements = treeBranch.getElementsByTagName('li');
    // Alle Elemente einblenden
    for(var i=0;i<listElements.length;i++) {
      listElements[i].style.display = "block";
    }
    // Gallery-Box
    var galleryBox       = getElementsByClass('galleryBox', $('content'), 'div')[0];
    // Galerie-Container, dessen Höhe angepasst werden soll
    var galleryContainer = $("scrolling_gallery_container");

    // ist der Galerie-Container links ?
    if(getParentByClass("rightColumn", galleryBox)) {
      // neue Höhe ermitteln
      imageGalleryHeight = imageGalleryHeight + (newFolderListHeight - folderListHeight);
      // Höhe zuweisen
      galleryContainer.style.height = imageGalleryHeight + "px";
      galleryBox.style.height = galleryBox.offsetHeight + (newFolderListHeight - folderListHeight) + "px";
      // Bilder nachladen
      myGallery.onSlideHandler(lastSliderPosition, true);
    }

    // Default Höhe zuweisen
    treeBranch.parentNode.style.height = folderListHeight + "px";

    // ÄNDERUNGEN POOLIMAGES
    var listHandler = $(imageType + 'ListHandler');
    myObserverHandler.unsetAllObserver(listHandler.id);
    myObserverHandler.setObserver(listHandler,'click', myFolderList.shrinkList);
    listHandler.className = "clickable floating_right minus";
  }

  this.sortList = function(treeBranch) {

    if (!treeBranch) {
      treeBranch = $(treeID);
    }

    var liList = new Array();
    $A(treeBranch.getElementsByTagName('li')).each(function(element) {
      liList.push(element);
      treeBranch.removeChild(element);
    })

    liList.sort(function(liElement1, liElement2) {
      var a = getElementsByClass('folderName', liElement1)[0].firstChild.data;
      var b = getElementsByClass('folderName', liElement2)[0].firstChild.data;

      if (a > b) {
        return 1;
      }
      else if (a < b) {
        return -1;
      }
      else {
        return 0;
      }
    });

    var counter = 1;
    liList.each(function(element) {
      treeBranch.appendChild(element);
    })
  }
}

FolderList.makeDroppable = function(ElementID) {
  dndMgr.registerDropZone( new CustomDropzone(ElementID,{
    acceptName: 'imageBox',
    completion: function(element){
      Folder.dropImage(element,ElementID);
    }
  }) );
}

FolderList.makeDraggable = function(ElementID) {
  // Draggable registrieren
  dndMgr.registerDraggable( new CustomDraggable('folder', ElementID));
}

// =================================================================
/** This is high-level function; REPLACE IT WITH YOUR CODE.
 * Reagiert auf MouseScrolling
 */
function handleMouseScrolling(delta) {

  if (delta < 0) {
    var placeholderDims = Element.getDimensions('placeholder');
    $('scrolling_gallery_container').scrollTop = Math.min(placeholderDims.height, $('scrolling_gallery_container').scrollTop + heightPerImage);
  }
  else {
    $('scrolling_gallery_container').scrollTop = Math.max(0, $('scrolling_gallery_container').scrollTop - heightPerImage);
  }
}

function mouseWheelHandler(event){
  var delta = 0;
  if (!event)
    event = window.event;
  if (event.wheelDelta) {
    delta = event.wheelDelta/120;
    if (window.opera)
      delta = -delta;
  } else if (event.detail) {
    delta = -event.detail/3;
  }
  if (delta)
    handleMouseScrolling(delta);
  if (event.preventDefault)
    event.preventDefault();
  event.returnValue = false;
}

/* Initialization code. */
function enableMouseWheeling() {
  /*
  if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', mouseWheelHandler, false);
  window.onmousewheel = document.onmousewheel = mouseWheelHandler;
  */
  Event.observe(window, 'DOMMouseScroll', mouseWheelHandler)
  Event.observe(window, 'mousewheel', mouseWheelHandler)
  Event.observe(document, 'mousewheel', mouseWheelHandler)
}

function disableMouseWheeling() {
/*
  if (window.removeEventListener)
    window.removeEventListener('DOMMouseScroll', mouseWheelHandler, false);
  window.onmousewheel = document.onmousewheel = function() {};
*/
  Event.stopObserving(window, 'DOMMouseScroll', mouseWheelHandler)
  Event.stopObserving(window, 'mousewheel', mouseWheelHandler)
  Event.stopObserving(document, 'mousewheel', mouseWheelHandler)

}

addLoadEvent(function() {
  Event.observe('gallery_container', 'mouseover', enableMouseWheeling, false);
  Event.observe('gallery_container', 'mouseout', disableMouseWheeling, false);
});

// ================================================================================================

var Folder = new Object();

// Argumente:
// folderID = ID des neuen Ordners
// folderdata = Array mit Daten des neuen Ordners
// targetBranch = element, in den der neue Ordner eingehängt werden soll
Folder.addFolder = function(folderID, folderData, insertion) {

  // LI-Element
  var liElement = $('FolderTemplate').cloneNode(true);
  liElement.id = 'Folder_' + folderID;

  // DroppableFolder-DIV
  var dropFolderDIV    = getElementsByClass('folderDiv', liElement, 'div')[0];
  var newDropFolderDIV = dropFolderDIV.cloneNode(true);
  newDropFolderDIV.id = 'DroppableFolder_' + folderID;
  liElement.replaceChild(newDropFolderDIV, dropFolderDIV);

  // folderCover-IMG
  var coverIMG       = getElementsByClass('folderCover', newDropFolderDIV, 'img')[0];
  coverIMG.src    = '/roothttp://www8.fotoalbum.de/mandants/root/gfx/treeview_folder_nocover.gif?1236782233';
  coverIMG.width  = '31';
  coverIMG.height = '31';
  coverIMG.id     = 'folderCoverFolder_' + folderID;

  // folderInfoImg-IMG
  var folderInfoIMG = getElementsByClass('folderInfoImg', newDropFolderDIV, 'img')[0];

  // Text-DIV
  var textDiv = getElementsByClass('folderDesc', newDropFolderDIV, 'div')[0];

  // Albumname-Text
  var folderNameTag    = getElementsByClass('folderName', liElement, 'strong')[0];
  var newFolderNameTag = folderNameTag.cloneNode(true);
  newFolderNameTag.id  = 'folderNameFolder_' + folderID;
  newFolderNameTag.appendChild(document.createTextNode(folderData[0]));
  folderNameTag.parentNode.replaceChild(newFolderNameTag, folderNameTag);

  // Erstellt am-Text
  var creationDateTag    = getElementsByClass('creationDate', liElement, 'span')[0];
  var newCreationDateTag = creationDateTag.cloneNode(true);
  newCreationDateTag.id  = 'folderNameFolder_' + folderID;
  creationDateTag.parentNode.replaceChild(newCreationDateTag, creationDateTag);

  // Bildanzahl-Text
  var imageAmountTag    = getElementsByClass('imageAmount', liElement, 'span')[0];
  var newImageAmountTag = imageAmountTag.cloneNode(true);
  newImageAmountTag.id  = 'imageAmountFolder_' + folderID;
  imageAmountTag.parentNode.replaceChild(newImageAmountTag, imageAmountTag);

  // vorne oder hinten anfügen?
  var targetBranch = $(imageType + 'TreeView');
  if (insertion == 'start') {
    targetBranch.insertBefore(liElement, targetBranch.firstChild);
  }
  else {
    targetBranch.appendChild(liElement);
  }

  // LI-Element droppable machen
  FolderList.makeDroppable(liElement);

  // Onclick für das ALbum-Kontextmenü definieren
  Event.observe(folderInfoIMG, 'click', openFolderContext.bind(liElement), true);

  // Link: Album öffnen
  Event.observe(coverIMG, 'click', actionFolder.bind(liElement), true);
  Event.observe(textDiv,  'click', actionFolder.bind(liElement), true);

  // Coverbild generieren
  //Folder.setCover(folderID, noCoverURL);

  // OrdnerInfo mit Refresh-Funktion füllen
  var freshFolderData = new Array();
  freshFolderData.push(parseInt(folderData[3]));
  freshFolderData.push(parseInt(folderData[4]));
  Folder.setFreshFolderData(folderID, freshFolderData, this.getNoCoverUrl());
}

/* ============================================================================================= */

// Fügt einen neuen Ordner hinzu (sowohl in der DB als auch in der aktuellen Liste)
Folder.createFolder = function(folderName) {

  var Encoder = new UTF8Encoder();

  // neuen Ordner per Ajax bestimmen
  new Ajax.Request(URL_FOLDER_AND_IMAGE_ADMIN, {
    parameters: 'action=createNewFolder'
              + '&folder=' + Encoder.urlencode(folderName),
    onComplete: function(transport) {
      var XMLDoc      = transport.responseXML;
      var newFolderID = XMLDoc.getElementsByTagName('returnvalue')[0].firstChild.data;

      var folderData = new Array();
      folderData.push(folderName);
      folderData.push("---");
      folderData.push(0); // Ordner kann keine Kindknoten haben!
      folderData.push(0); // Ordner kann keine Dateien beinhalten!
      folderData.push(0); // Ordner kann keine Kindknoten haben!

      Folder.addFolder(newFolderID, folderData, 'start');

      // Ordnerliste sortieren
      myFolderList.sortList();

      Folder.refreshInfo(newFolderID);
    }
  });
}

Folder.removeSubFolderList = function(folderID) {
  Element.remove('subListForFolder_' + folderID);
  var folderPlusMinusList = document.getElementsByClassName('folderPlusMinus', 'Folder_' + folderID);
  if (folderPlusMinusList.length > 0) {
    Element.remove(folderPlusMinusList[0]);
  }
}

/* ============================================================================================= */


Folder.renameHandler = function() {
  var liElement = this;
  var folderName = prompt("Neuer Name des Albums: ", liElement.getElementsByTagName('strong')[0].firstChild.nodeValue);
  if (folderName) {
    Folder.rename(FOA.selectedFolder, folderName);
  }
}

Folder.addNewFolderHandler = function() {

  var folderName = prompt($("overLayerImageSlideShow").foaFrontendSubstantiveNewAlbumName, $("overLayerImageSlideShow").foaFrontendSubstantiveAlbumname);
  if (folderName) {
    Folder.createFolder(folderName);
  }
}

/* ============================================================================================= */

Folder.setCover = function(FolderID, coverImgURL) {

  // Element finden
  var folderLi = $('Folder_' + FolderID);
  var coverImgElement = getElementsByClass('folderCover', folderLi)[0];

  // Größenberechnung, siehe mypics_gallery.inc.php
  var size = "";
  if (size = coverImgURL.match(/size=([0-9]+)x([0-9]+)/)) {
    var width  = RegExp.$1;
    var height = RegExp.$2;
  }
  else {
    var width  = 31;
    var height = 31;
  }

  var coverAreaOffsetX = parseInt($('coverPositioning_coverAreaOffsetX').firstChild.data);
  var coverAreaOffsetY = parseInt($('coverPositioning_coverAreaOffsetY').firstChild.data);
  var coverAreaWidth   = parseInt($('coverPositioning_coverAreaWidth').firstChild.data);
  var coverAreaHeight  = parseInt($('coverPositioning_coverAreaHeight').firstChild.data);

  var coverMarginLeft  = coverAreaOffsetX + Math.floor((coverAreaWidth - width) / 2);
  var coverMarginTop   = coverAreaOffsetY + Math.floor((coverAreaHeight - height) / 2);
  var coverMarginRight = Math.floor((coverAreaWidth - width) / 2);

  Element.setStyle(coverImgElement, {
    marginTop:   coverMarginTop + 'px',
    marginLeft:  coverMarginLeft + 'px',
    marginRight: coverMarginRight + 'px',
    width: width + 'px',
    height: height + 'px'
  });

  coverImgElement.setAttribute("src", coverImgURL);
}

/* ============================================================================================= */

Folder.setAutoCover = function (FolderID) {

  new Ajax.Request("/interfaces/xml_response.php", {
    parameters: 'module=getCoverURL'
              + '&folder=' + FolderID,

    onSuccess: function(transport) {

      // Parse die Ergebnisse des Ajax-Requests
      var xmlDoc  = transport.responseXML;
      var folderInfo = xmlDoc.getElementsByTagName('info')[0];

      // Coverbild vorhanden
      if (folderInfo.getAttribute('cover_url').length() > 0) {
        var coverURL = folderInfo.getAttribute('cover_url');
      }
      else {
        var coverURL = this.getNoCoverUrl();
      }
      Folder.setCover(FolderID, coverURL);
    }
  });

}

/* ============================================================================================= */

Folder.setFreshFolderData = function(FolderID, newFileAmount, coverURL) {

  // Wo liegt der FileAmount
  var fileAmountNode = $('imageAmountFolder_' + FolderID).firstChild;

  // Alten Wert holen
  var oldFileAmount = parseInt(fileAmountNode.data);

  // Neuen Wert nach Int casten
  newFileAmount = parseInt(newFileAmount);

  // wenn vorher 1 Bild, jetzt != 1 Bild vorhanden ist, Name austauschen
  if (oldFileAmount == 1 && newFileAmount != 1) {
    var imageAmountSingle   = getElementsByClass('imageAmountSingle',   $('Folder_' + FolderID), 'span')[0];
    var imageAmountMultiple = getElementsByClass('imageAmountMultiple', $('Folder_' + FolderID), 'span')[0];
    Element.hide(imageAmountSingle);
    Element.show(imageAmountMultiple);
  }

  // Wenn vorher != Bild, jetzt genau 1 Bild vorhanden ist...
  if (oldFileAmount != 1 && newFileAmount == 1) {
    var imageAmountSingle   = getElementsByClass('imageAmountSingle',   $('Folder_' + FolderID), 'span')[0];
    var imageAmountMultiple = getElementsByClass('imageAmountMultiple', $('Folder_' + FolderID), 'span')[0];
    Element.show(imageAmountSingle);
    Element.hide(imageAmountMultiple);
  }

  // Coverbild vorhanden
  if (coverURL.length == 0) {
    var coverURL = this.getNoCoverUrl();
  }
  Folder.setCover(FolderID, coverURL);

  // Neuen Wert setzen
  fileAmountNode.data = newFileAmount;
}

// Aktualisiert die Ordnerinfo (Anzahl Bilder/Unterordner) mittels Ajax-Request
// => ruft Folder.setFreshFolderData() auf
Folder.refreshInfo = function(FolderID) {

  // OrdnerInfo per Ajax bestimmen
  new Ajax.Request(URL_FOLDER_AND_IMAGE_LIST, {
    method    : 'get',
    parameters: 'mode=folder_info'
              + '&folder=' + FolderID,
    onSuccess: function(transport) {
      var xmlDoc = transport.responseXML;
      var folderInfoTag = xmlDoc.getElementsByTagName('info')[0];

      // Austausch der Ordnerinfo anstoßen
      Folder.setFreshFolderData(FolderID, folderInfoTag.getAttribute('amount'), folderInfoTag.getAttribute('cover_url'));
    }
  });
}

/* ============================================================================================= */

Folder.dropImage = function(ImageBox, Droppable) {

  // aktuell angezeigte Ordner-ID herausfinden
  var activeFolderID  = FOA.selectedFolder;

  // Ordner-ID des Ziel-Ordners herausfinden und Objekt initialisieren
  var dropFolderID    = Droppable.id.replace('Folder_', '');

  // BildID herausfinden
  var droppedImageID  = ImageBox.id.replace('imageBox_', '');

  // Bild wurde auf den Quellordner gezogen, STOP
  if (activeFolderID == dropFolderID) {
    // alert('Das Bild befindet sich bereits in diesem Ordner.');
  }
  else {

    // Entferne Bild
    Element.remove(ImageBox.parentNode);

    // Reduziere Bildanzahl
    globalFilesAmount--;

    // Ajax-Request: Bild verschieben
    new Ajax.Request(URL_FOLDER_AND_IMAGE_ADMIN, {
      parameters: 'action=moveImagesIntoFolder'
                + '&images=' + droppedImageID
                + '&folder=' + dropFolderID,
      onComplete: function() {

        // hier auch die Galerieansicht refreshen, also ggf. Bild nachladen, wenn < filesPerPage angezeigt werden!
        myGallery.refreshView();

        // Ordneransicht aktualisieren
        Folder.refreshInfo(activeFolderID);
        Folder.refreshInfo(dropFolderID);
      }
    });
  }
} // ENDE dropImage

/* ============================================================================================= */

function autoCreateProject(productType, folderID, offset) {
  location.href = '/myproducts/auto_create/?folder_id=' + folderID + '&offset=' + offset;
}

function startProject(element) {
    location.href = element.href + '?folder_id=' + FOA.selectedFolder + '&offset=' + globalActiveOffset;
}