/* relativ aus Sicht der HTML Datei in der js-Datei verwendet wird */
var i01 = new Image();
i01.src = "ani/kahn.jpg";
var i02 = new Image();
i02.src = "ani/neuer_eingang.jpg";
var i03 = new Image();
i03.src = "ani/paddler.jpg";
var i04 = new Image();
i04.src = "ani/wegweiser.jpg";
var i05 = new Image();
i05.src = "ani/spargel.jpg";
var i06 = new Image();
i06.src = "ani/puls.jpg";
var i07 = new Image();
i07.src = "ani/raddusch.jpg";
var i08 = new Image();
i08.src = "ani/allergien.jpg";
var i09 = new Image();
i09.src = "ani/stoerche.jpg";
var i10 = new Image();
i10.src = "ani/instrumente.jpg";

var i_beat_big = new Image();
i_beat_big.relSrc = "ani/am_pulsschlag_3.jpg";
i_beat_big.src = i_beat_big.relSrc;
var i_beat_small = new Image();
i_beat_small.relSrc = "ani/am_pulsschlag.jpg";
i_beat_small.src = i_beat_small.relSrc
var i_med_big = new Image();
i_med_big.relSrc = "ani/medizinisches_3.jpg";
i_med_big.src = i_med_big.relSrc;
var i_med_small = new Image();
i_med_small.relSrc = "ani/medizinisches.jpg";
i_med_small.src = i_med_small.relSrc;
var i_heart_big = new Image();
i_heart_big.relSrc = "ani/im_herzen_3.jpg";
i_heart_big.src = i_heart_big.relSrc;
var i_heart_small = new Image();
i_heart_small.relSrc = "ani/im_herzen.jpg";
i_heart_small.src = i_heart_small.relSrc;

var bilder = [
    "ani/kahn.jpg",
    "ani/neuer_eingang.jpg",    
    "ani/paddler.jpg",
    "ani/wegweiser.jpg",
    "ani/spargel.jpg",
    "ani/puls.jpg",
    "ani/raddusch.jpg",    
    "ani/allergien.jpg",
    "ani/stoerche.jpg",
    "ani/instrumente.jpg"
];

var ani		= true;

var anzahl	= bilder.length;
var bild_nr	= 0;	

var timeOut	= 3000;

$(document).ready(function(){	
       $(document).click(function(){
              ani = false;
       });
	
	// Animation nur starten wenn CSS aktiv
	if ( $('#box1').css('position') == 'absolute' ) {
              
              $('.topitem').html('<div id="box1" style="position:absolute; top:0; left:0;"><img id="bg_box1" src="ani/kahn.jpg" alt="" /></div><div id="box2" style="display:none;position:absolute; top:0; left:0;"><img id="bg_box2" src="ani/kahn.jpg" alt="" /></div><img style="position:absolute; top:0; left:0;" src="ani/raster.gif" alt="" /><img style="position:absolute; top:0; left:134px;" id="pulsschlag" src="ani/am_pulsschlag.jpg" alt="" /><img style="position:absolute; top:92px; left:402px;" id="herzen" src="ani/im_herzen.jpg" alt="" /><img style="position:absolute; top:118px; left:670px;" id="medizinisches" src="ani/medizinisches.jpg" alt="" />');
              
              //window.setTimeout(nextImage, (2*timeOut) );
              
              window.setTimeout("beat('#pulsschlag', i_beat_big.relSrc, i_beat_small.relSrc, 1, 1)", (2*timeOut) );              
       }
	
});

function nextImage() {
	var aniTime = 1500;
	if (ani) {	
	      var next = (bild_nr + 1);
              
              if ($('#box2').css('display') == 'none' ) {
                     $('#bg_box2').attr('src', bilder[next]);
                     
                     $('#box2').fadeIn(aniTime, function() {
                            // einblenden fertig                            
                            
                            $('#box2').css('display', 'block');
                            
                     });
              } else {
                     $('#bg_box1').attr('src', bilder[next]); 
                     
                     $('#box2').fadeOut(aniTime, function() {
                            // ausblenden fertig
                            
                            $('#box2').css('display', 'none');
                            //$('#bg_box2').attr('src', bilder[next]);                            
                            
                     });
              }
              
              // alte Variante, mit der der IE Probleme hat	
              //$('#bg').animate({opacity: 0.3}, aniTime, function() {
              //	$('#bg').attr('src', bilder[next]).load(function() {
              //		$('#bg').animate({opacity: 1.0}, aniTime);
              //	});
              //});		
		
	      bild_nr++;
              
              if (bild_nr % 2 == 0) {
                     window.setTimeout("beat('#pulsschlag', i_beat_big.relSrc, i_beat_small.relSrc, 1, 1)", (timeOut+aniTime) );			
	      }
		
              if (bild_nr % 2 == 1) {		
                     window.setTimeout("beat('#medizinisches', i_med_big.relSrc, i_med_small.relSrc, 1, 1)", (timeOut+aniTime) );			
	      }
              
              if (bild_nr == anzahl - 1) {
                     bild_nr = -1;
	      }		
	}	
}

function beat(selector, img_big, img_small, phase, run) {
	var delay = 150;
	
	if (run <= 2) {
		if (phase >= 3) {			
			phase = 1;
			run++;			
			return window.setTimeout("beat('"+selector+"', '"+img_big+"', '"+img_small+"', "+phase+", "+run+")", 350);
		}
		
		if (phase % 2 == 1) {			
			phase++;
			$(selector).attr('src', img_big);
			return window.setTimeout("beat('"+selector+"', '"+img_big+"', '"+img_small+"', "+phase+", "+run+")", delay);			
		}
		
		if (phase % 2 == 0) {
			phase++;
			$(selector).attr('src', img_small);			
			return window.setTimeout("beat('"+selector+"', '"+img_big+"', '"+img_small+"', "+phase+", "+run+")", delay);			
		}
	} else {
	
		if (selector == '#pulsschlag') {			
			return window.setTimeout("beat('#herzen', i_heart_big.relSrc, i_heart_small.relSrc, 1, 1)", 1000);	
		} else {			
			return window.setTimeout(nextImage, timeOut);
		}
	}
	
	return 0;
}
