/******************************************************** 
  Copyright (C) 2007 gloom it (gloomit.de)
  Axel Rothenbuecher and Phillip Kroll GbR
  Beschreibung: JavaScript für Gallery
  Projekt: agenturzwo.de
*********************************************************/



// Breite der Bilder in der Gallerie
var imageWidth = 580;

// Vertikaler Abstand zwischen zwei Bildern in der Gallerie 
var spacer = 12;

// Geschwindigkeit für das Blättern 
// duch die Gallerie. Einheit: Sekunden
var browseSpeed = 0.3;

// Zeit, die zwischen dem Laden eines 
// Kontainers gewartet werden soll, Einheit Sekunden
var loadingTime = 0.1;

// nicht ändern
var clickActive = false;
var disableBrowsing = false;

// Initialisierung der Gallerie startet das Laden
// der Div Elemente 
function initGallery( ){

  var gallery_box = $( 'gloom_gallery' );
  
  // Falls Gallerieelement nicht gefunden wird,
  // wird abgebrochen
  if ( !gallery_box ) { return }
  
  gallery_box.style.position = 'relative';
  
  // Icon für Ladeprozess sichbar machen
  $( 'loadInfo' ).style.display = "inline";
        
  gallery_box.style.left = "-" + ( imageWidth + spacer ) + "px";
            
  var galleryContainerList = gallery_box.getElementsByTagName('div');

  disableBrowsing = ( galleryContainerList.length == 1);
  
  // falls nur 1 bild in der Galerie ist, wird es zweimal geklont,
  // falls nur 2 bilder in der Galerie sind, werden sie einmal geklont,
  // falls mehr als 2 bilder in der Galerie sind, wird nicht geklont.
  increaseDivAmount( gallery_box, 3 - galleryContainerList.length );
  
  // startet rekursives Laden
  new Effect.Appear( gallery_box, { duration: 0.2, afterFinish :  function(){ loadGalleryContainer( galleryContainerList, 0 ); } } );
}


// Löscht eine Div Element aus dem DOM            
function deleteDiv( parent, element ){
  parent.removeChild( element );
  clickActive = true;
}

// Klont alle Div Elemente in gallery_box um mehr
// Div elemente zu erhalten
function increaseDivAmount( gallery_box, times ){

    if ( times <= 0 ){ return }
    
    var galleryContainerList = gallery_box.getElementsByTagName('div');
    var container_copy = new Array();
    for ( var i = 0; i < galleryContainerList.length; i++ ){
      container_copy[ i ] = galleryContainerList[ i ].cloneNode(true);
    }
    for ( var j = 0; j < times; j++ ){
      for ( var i = 0; i < container_copy.length; i++ ){
       gallery_box.appendChild( container_copy[ i ].cloneNode(true) );
      }
    }
}


// rekursive alle src tags der bilder setzen und mit appear einblenden
// vorwärts- und rückwärtspfeile einblenden
// Ladebalken ausblenden
function loadGalleryContainer( galleryContainerList, Index ){

    // rekursion beenden
    if ( Index >= galleryContainerList.length ){ 
      
      // wenn mehr als 1 Bild in der Galerie ist, werden die 
      // Buttons zum blättern angezeigt
      if ( !disableBrowsing ){
        document.getElementById( 'btn_backward' ).style.display = "inline";
        document.getElementById( 'btn_forward' ).style.display = "inline";
      }
      
      new Effect.Fade( document.getElementById( 'loadInfo' ), { duration: 0.5 } );
      
      clickActive = true;
      return; 
    }
    
    // rekursion
    var firstImgObj = galleryContainerList[ Index ].getElementsByTagName('img')[ 0 ];
    firstImgObj.style.display = "none";
    firstImgObj.src = firstImgObj.getAttribute('rel');
    new Effect.Appear( firstImgObj, { duration: loadingTime, afterFinish :  function(){ loadGalleryContainer( galleryContainerList, Index + 1 ); } } );
      
}

     
// Galleriebilder nach rechst verschieben
// element: div-container, der alle gallerieelemente enthält          
function moveRight( element ){
              
  if ( clickActive & !disableBrowsing ){ clickActive = false; } else { return }
              
  var gallery_box = $(element);           
  var div_elements = gallery_box.getElementsByTagName('div');
  
  // container clonen 
  newdiv = div_elements[ 0 ].cloneNode(true);           
  
  // container einfügen       
  gallery_box.appendChild( newdiv );
          
  // Container per Effekt verschwinden lassen   
  new Effect.Scale( div_elements[ 0 ], 0, { scaleY:0, duration: browseSpeed,  afterFinish: function(){ deleteDiv( gallery_box ,div_elements[ 0 ] ); } } );
         
}


// Galleriebilder nach rechst verschieben
// element: div-container, der alle gallerieelemente enthält          
function moveLeft( element ){
  
  if ( clickActive & !disableBrowsing ){ clickActive = false; } else { return }
  
  var gallery_box = $(element);           
  var div_elements = gallery_box.getElementsByTagName('div');
               
  // container clonen
  newdiv = div_elements[ div_elements.length - 1 ].cloneNode(true);
  newdiv.style.width = "1px";
  
  // container einfügen
  gallery_box.insertBefore( newdiv, gallery_box.firstChild );
  
  // Container per Effekt auftauchen lassen  
  new Effect.Scale( newdiv, imageWidth * 100, { scaleContent: false, scaleY:0, duration: browseSpeed,  afterFinish: function(){ deleteDiv( gallery_box, div_elements[ div_elements.length - 1 ] ); } } );
        	
}