// -----------------------------------------------------------------------------------
//
//  Name: Slidebox
//  Beschreibung: Crossbrowser Slideshow mit Überblend-Effekt
//  Version: 1.2
//  Build: 13.07.2007
//  Autor: Konrad Abmeier
//  (c)Copyright 2007 Konrad Abmeier
//
// -----------------------------------------------------------------------------------
//
//  Hinweise
//
//  Es werden folgende externe Bibliotheken benötigt:
//  Prototype JavaScript Framework (http://www.prototypejs.org/)
//  script.aculo.us JavaScript libraries (http://script.aculo.us/)
//  Diese leigen im Unterverzeichnis "/lib".
//  
//  Die eigentliche Datei liegt im Unterverzeichnis "/js".
//  und werden in folgender Reihenfolge zwischen <head></head> eingebunden:
//
//  <script src="/js/prototype.js" type="text/javascript" ></script>
//  <script src="/js/scriptaculous.js?load=effects" type="text/javascript" ></script>
//  <script src="/js/slidebox.js" type="text/javascript" ></script>
//
//  Bilder und Position werden vom HTML Dokument gesteuert.
//  Das erste (Start) Bild gibt die größe des Containers vor.
//  Das Präfix gibt die Box und die Bilder für die Slideshow an.
//  Das erste (Start) Bild steht in der Box, die anderen Bilder werden
//  über Links referenziert.
//
//  Das (Start) Bild ist von einem DIV-Container der Form "<div id="[Präfix]box"></div>" umschlossen.
//  Das (Start) Bild hat die id id="[Präfix]image". Danach folgen die Links auf die weiteren Bilder mit
//  class="slidelink" und rel="slidebox[Präfix]". In class="slidelink" wird einfach die Anzeige ausgeschaltet
//  .slidelink {display: none;}
//  Der Präfix gibt somit die Box, das Satrtbild und die Gruppe der zu slidenden Bilder an.
//
//  Beispiele:
//
//  In diesem Beispiel wird "s" als Präfix gewählt.
//  Die ID des äußeren Containers <div id="[Präfix]box"> muss also "sbox" <div id="sbox"> lauten.
//  Die ID des auszutauschenden Bildes <img id="[Präfix]image" src...> muss also "simage" <img id="simage" src...> lauten.
//
//  Danach wird auf die einzelnen Bilder (inkl. des ersten Bildes) in folgender Weise verlinkt:
//  <a class="slidelink" href="link_zum_bild" rel="slidebox[Präfix,[intervall],[loop],[duration],[link]">Bild 1</a>
//
//  Präfix:     gewähltes Präfix (hier "s");
//  intervall:  Zeit zwischen den Überblendungen
//  loop :      nach dem Durchlauf von vorne beginnen, 1=ja, 0=nein
//  duration:   Zeit für den Überblendungseffekt
//  link:       Link auf dem Bild
//
//  Die Eingetragenen Werte ersetzen die Default-Werte. Sind bei einem Bild Werte gesetzt, gelten Sie für
//  die nachfolgenden, mit außnahme des Links.
//
//  <div id="sbox">
//    <img id="simage" src="img/1.jpg" alt="" width="600" height="400" />
//    <a class="slidelink" href="img/1.jpg" rel="slidebox[s,2,0,1]">Bild 1</a>
//    <a class="slidelink" href="img/2.jpg" rel="slidebox[s,,,,http://www.solid-t.de/]">Bild 2</a>  
//    <a class="slidelink" href="img/3.jpg" rel="slidebox[s]">Bild 3</a>
//    <a class="slidelink" href="img/4.jpg" rel="slidebox[s]">Bild 4</a>
//    <a class="slidelink" href="img/5.jpg" rel="slidebox[s]">Bild 5</a>
//  </div>
//
//  <div id="praefix_box">
//    <img id="praefix_image" src="img/3.jpg" alt="" width="600" height="400" />
//    <a class="slidelink" href="img/4.jpg" rel="slidebox[praefix_,2,,,http://www.solid-t.de/]">&nbsp;</a>
//    <a class="slidelink" href="img/5.jpg" rel="slidebox[praefix_]">&nbsp;</a>
//    <a class="slidelink" href="img/1.jpg" rel="slidebox[praefix_]">&nbsp;</a>
//    <a class="slidelink" href="img/2.jpg" rel="slidebox[praefix_]">&nbsp;</a>
//  </div>
//
// -----------------------------------------------------------------------------------
//
//	init vars
//
var myInterval = 4; // Default Zeit zwischen den einzelnen Bildern in Sekunden
var myDuration = 1; // Default Zeit für den Überblend-Effekt in Sekunden
var myLoop = 1;     // Default Loop (true,false)

var aryImages = new Object();
var sbactiveImage = new Object();
var mtimer = new Object();
// -----------------------------------------------------------------------------------

var Slidebox = Class.create();
Slidebox.prototype = {
  // init
	initialize: function() {
		if (!document.getElementsByTagName){ return; } // abbrechen, wenn getElementsByTagName nicht vorhanden ist
    var thbinterval = new Object();
    var thbloop = new Object();
    var thbduration = new Object();
    // alle links finden
		var anchors = document.getElementsByTagName('a');
    // alle prüfen
		for (var i=0, len=anchors.length; i<len; i++){
			var anchor = anchors[i];
			// nur rel berücksichtigen
			var relAttribute = String(anchor.getAttribute('rel'));
			// und davon nur slidebox
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match(/^slidebox\[(.+)\]$/i))){
			  // attribute ermitteln
			  var thbparts = RegExp.$1.split(",");
			  var thbox = "";
        // parameter
        // boxname
        if( thbox = thbparts[0] ){
          if( !thbinterval[thbox] ){ thbinterval[thbox] = myInterval; }
          if( !thbloop[thbox] ){ thbloop[thbox] = myLoop; }
          if( !thbduration[thbox] ){ thbduration[thbox] = myDuration; }
          var link = "";
          // intervall
          if( thbparts[1] && !isNaN(parseFloat(thbparts[1])) ){
            thbinterval[thbox] = parseFloat(thbparts[1]);
          }
          // loop
          if( thbparts[2] && !isNaN(parseFloat(thbparts[2])) && thbparts[2] == 0 ){
            thbloop[thbox] = 0;
          }
          // duration
          if( thbparts[3] && !isNaN(parseFloat(thbparts[3])) ){
            thbduration[thbox] = parseFloat(thbparts[3]);
          }
          if( thbduration[thbox] > thbinterval[thbox] ){ thbduration[thbox] = thbinterval[thbox]; }
          // link
          if( thbparts[4] ){
            link = thbparts[4];
          }
  			  if( !aryImages[thbox] ){
	 	   	    aryImages[thbox] = new Array();
	   		  }
          // href, intervall, loop, duration, link
          aryImages[thbox].push(new Array(anchor.getAttribute('href'), thbinterval[thbox], thbloop[thbox], thbduration[thbox], link));
        }
			}
		}
		for (var boxname in aryImages){
		  if( aryImages.length <= 1 || !document.getElementById(boxname + 'image') || !document.getElementById(boxname + 'image').getAttribute('src') ) { delete aryImages[boxname]; }
		  else if( aryImages[boxname][0][0] != document.getElementById(boxname + 'image').getAttribute('src') ) {
        aryImages[boxname].unshift(new Array(document.getElementById(boxname + 'image').getAttribute('src'), aryImages[boxname][0][1], aryImages[boxname][0][2], aryImages[boxname][0][3]));
      }
		}
    // DOM erweitern
    for (var boxname in aryImages){
      sbactiveImage[boxname] = 0;
      if( document.getElementById(boxname + "box") ){
        var objBox = document.getElementById(boxname + "box");
        // imgContainer
        for( var i=0, len=aryImages[boxname].length; i<len; i++ ){
      		var objImgContainer = document.createElement("div");
      		objImgContainer.setAttribute('id',boxname+'_ic'+i);
      		objImgContainer.style.position = 'absolute';
      		objImgContainer.style.overflow = 'hidden';
      		objImgContainer.style.width = ''+$(boxname + "box").getWidth()+'px';
      		objImgContainer.style.height = ''+$(boxname + "box").getHeight()+'px';
      		if( i == 0 ){
            $(boxname + "box").setStyle({width: ''+objImgContainer.style.width+'',height: ''+objImgContainer.style.height+''});
          }
      		objImgContainer.style.display = 'none';
          objBox.appendChild(objImgContainer);
          var objImage = document.createElement("img");
          objImage.setAttribute('src', aryImages[boxname][i][0]);
          objImage.setAttribute('border','0');
          if( aryImages[boxname][i][4] && aryImages[boxname][i][4] != "" ){
        		var objLink = document.createElement("a");
        		objLink.className = 'imagelink';
        		objLink.setAttribute('href',aryImages[boxname][i][4]);        		
         		objImgContainer.appendChild(objLink);
         		objLink.appendChild(objImage);
          } else {
            objImgContainer.appendChild(objImage);
          }
        }
		  }
		}
		for (var boxname in aryImages){
 	    $(boxname+'_ic'+sbactiveImage[boxname]).show();
      $(boxname + 'image').hide();
  	  this.start(boxname);
  	}
	},
	//	start()
	start: function(boxname) {
	  if( sbactiveImage[boxname] < aryImages[boxname].length-1 || aryImages[boxname][sbactiveImage[boxname]][2] == 1 ){
	    if( window.mtimer[boxname] ){
        clearTimeout(mtimer[boxname]);
      }
      mtimer[boxname] = window.setTimeout("mySlidebox.changeImage('"+boxname+"')", ((aryImages[boxname][sbactiveImage[boxname]][1]*1000)-(aryImages[boxname][sbactiveImage[boxname]][3]*1000)));
    }
	},
	//	changeImage()
	changeImage: function(boxname) {
	  osbactiveImage = sbactiveImage[boxname];
    if( sbactiveImage[boxname] < aryImages[boxname].length-1 ) {sbactiveImage[boxname]++;}
    else {sbactiveImage[boxname]=0;}
    imgPreloader = new Image();    

    imgPreloader.onload=function(){      
  		new Effect.Parallel(
        [ new Effect.Fade(boxname+'_ic'+osbactiveImage, { sync: true, duration: aryImages[boxname][osbactiveImage][3], fps: 50, from: 1.0, to: 0.0 }), 
        new Effect.Appear(boxname+'_ic'+sbactiveImage[boxname], { sync: true, duration: aryImages[boxname][sbactiveImage[boxname]][3], fps: 50, from: 0.0, to: 1.0 }) ], 
        { duration: aryImages[boxname][sbactiveImage[boxname]][3], afterFinish: function() { mySlidebox.start(boxname);} } 			
      );
    }
    imgPreloader.src = aryImages[boxname][sbactiveImage[boxname]][0];    
    mySlidebox.preloadNextImages(boxname);
	},
	//	preloadNextImages()
	preloadNextImages: function(boxname){
		if((aryImages[boxname].length - 1) > sbactiveImage[boxname]){
			preloadNextImage = new Image();
			preloadNextImage.src = aryImages[boxname][sbactiveImage[boxname] + 1][0];
		}
	}
}
// -----------------------------------------------------------------------------------
function initSlidebox() { mySlidebox = new Slidebox(); }
Event.observe(window, 'load', initSlidebox, false);
