/**
 *  JS Klasse für Image-Flipper Galerie mit Überblend-Effekt
 *  --------------------------------------------------------
 *  Hintergrund-Layer = Element
 *  Anzeige-Layer = '#flippingBoxHintergrund' 
 *  Anzeige-Text = '#flippingBoxBeschreibung'  
 *  Benötigt JQuery Bibliothek!  
*/ 
kkFlippingBox = {
  
  // Elementen-ID der Galerie (DIV)
  flippingBox : false,
  
  // Elementen-Objekt (DIV) der Galerie
  galerie : false,
  
  // Liste der Bild-Urls (../bilder/bild1.jpg, etc.)
  bilder : new Array(),
  
  // Liste der Bildbeschreibungen (HTML)
  bildtexte : new Array(),
  
  // Aktueller Anzeige-Index
  index : 0,
  
  // Autorun
  autorun : false,
  
  // Initialisierungs-Funktion
  initialisieren : function( ElementId ) {
    // Speichere ID
    this.flippingBox = ElementId;
    // Speichere DOM-Element
    this.galerie = document.getElementById( this.flippingBox );
    if ( this.galerie ) {
      // Setze Hintergrund des Hintergrund-Layers
      this.galerie.style.backgroundImage = 'url(' + this.bilder[0] + ')';
      // Setze Hintergrund des Anzeige-Layers
      document.getElementById('flippingBoxHintergrund').src = this.bilder[0];
      // Setze Bildbeschreibung des Anzeige-Layers
      document.getElementById('flippingBoxBeschreibung').innerHTML = this.bildtexte[0];
      // Erzeuge Navigation
      this.navigation();
    }
    // Preloader starten
    this.preloader();
    // Autorun starten
    this.autorun = setInterval("kkFlippingBox.weiter('auto')", 5000);
    return ;
  },
  
  // flippingBox Navigation
  navigation : function() {
    var menue = '';
    for( a=0; a<this.bilder.length; a++ ) {
      if ( a == this.index )
        menue = menue + '<a href="javascript:void(0);" onclick="kkFlippingBox.weiter('+a+')"><span><img id="flippingBoxBttn'+a+'" src="templates/kamatec_en/images/flippingBox_menuBttnHover.png" alt="'+a+'" title="Weiter" /></span></a>';
      else
        menue = menue + '<a href="javascript:void(0);" onclick="kkFlippingBox.weiter('+a+')"><span><img id="flippingBoxBttn'+a+'" src="templates/kamatec_en/images/flippingBox_menuBttn.png" alt="'+a+'" title="Weiter" /></span></a>';
    }
    document.getElementById('flippingBoxNavigation').innerHTML = menue;
    return ;
  },
  
  // Benötigtes Bildmaterial vorausladen
  preloader : function() {
    var pre = new Array();
    for( i=0; i < this.bilder.length; i++ ) {
      pre[i] = new Image();
      pre[i].src = this.bilder[i];
    }
    return ;
  },
  
  // Ladestatus des Bildes prüfen
  ladestatus : function() {
    var check = new Image();
    check.src = this.bilder[this.index];
    // Ladestatus Grafik anzeigen
    if ( check.complete != true )
      this.galerie.style.backgroundImage = 'url(assets/img_galerie_bild_laden.gif)';
  },
    
  // Weiter zum nächsten Bild ...
  weiter : function( nextId ) {
    if ( typeof nextId == 'number' )
      this.index = nextId;
    else if ( nextId == 'auto' )
      this.index++;
    else
      this.index = 0;
    
    if( typeof( this.bilder[this.index] ) == 'string' && this.bilder[this.index].match(/.+/) ) {
      blend_div( 'flippingBox', 'flippingBoxHintergrund', this.bilder[this.index], 2000 );
      document.getElementById('flippingBoxBeschreibung').innerHTML = this.bildtexte[this.index];
    } else {
      blend_div( 'flippingBox', 'flippingBoxHintergrund', this.bilder[0], 2000 );
      document.getElementById('flippingBoxBeschreibung').innerHTML = this.bildtexte[0];
      this.index = 0;
    }
    // Navigation aktualisieren
    this.navigation();
    // Autorun bei manueller Auswahl zurücksetzen
    clearInterval( this.autorun );
    this.autorun = setInterval("kkFlippingBox.weiter('auto')", 10000);
    return;
  },
  
  opacity : function ( id, opacStart, opacEnd, millisec ) {
  	// speed for each frame
  	var speed = Math.round(millisec / 100);
  	var timer = 0;
  
  	// determine the direction for the blending, if start and end are the same nothing happens
  	if(opacStart > opacEnd) {
  		for(i = opacStart; i >= opacEnd; i--) {
  			setTimeout("kkFlippingBox.changeOpac(" + i + ",'" + id + "')",(timer * speed));
  			timer++;
  		}
  	} else if(opacStart < opacEnd) {
  		for(i = opacStart; i <= opacEnd; i++) {
  			setTimeout("kkFlippingBox.changeOpac(" + i + ",'" + id + "')",(timer * speed));
  			timer++;
  		}
  	}
  },
  
  changeOpac : function ( opacity, id ) {
  	var object = document.getElementById(id).style; 
  	object.opacity = (opacity / 100);
  	object.MozOpacity = (opacity / 100);
  	object.KhtmlOpacity = (opacity / 100);
  	object.filter = "alpha(opacity=" + opacity + ")";
  },
  
  shiftOpacity : function ( id, millisec ) {
  	// if an element is invisible, make it visible, else make it ivisible
  	if(document.getElementById(id).style.opacity == 0) {
  		kkFlippingBox.opacity(id, 0, 100, millisec);
  	} else {
  		kkFlippingBox.opacity(id, 100, 0, millisec);
  	}
  },
  
  currentOpac : function ( id, opacEnd, millisec ) {
  	// standard opacity is 100
  	var currentOpac = 100;
  	
  	// if the element has an opacity set, get it
  	if(document.getElementById(id).style.opacity < 100) {
  		currentOpac = $(id).style.opacity * 100;
  	}
  
  	// call for the function that changes the opacity
  	kkFlippingBox.opacity( id, currentOpac, opacEnd, millisec );
  },
  
  blend_div : function ( divid, imageid, imagefile, millisec ) {
  	var speed = Math.round(millisec / 100);
  	var timer = 0;
  	
  	// Übernehme Hintergrundbild des Anzeige-Layers (DIV) ...
  	document.getElementById( divid ).style.backgroundImage = document.getElementById( imageid ).style.backgroundImage;
  	
  	// ... blende Anzeige-Layer aus ...
  	changeOpac(0, imageid);
  	
  	// ... lade nächstes Bild ...
  	document.getElementById(imageid).style.backgroundImage = "url(" + imagefile + ")";
  
  	// ... und blende Anzeige-Layer wieder ein
  	for(i = 0; i <= 100; i++) {
  		setTimeout("kkFlippingBox.changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
  		timer++;
  	}
  }
} // object end