/*

2do:
· Bug bei Höhenberechnung bei t2b wenn man Fenstergröße verändert
· Bug bei Sortierreihenfolge bei t2b
· Preload/Check ob Bildelemente in den Bannerkästen geladen sind, damit das Skript auch domready und nicht on nur onload läuft.
· Mögllichkeit für l2r/r2l
· Margin mitberechnen
· Parameter für fließend (so wie jetzt) und schrittweise (Banner bleibt Zeit X stehen, dann skipt er weiter. Hier dann noch zeit & effekt als parameter)
· Parameter für Stop bei Hover
· Manche Funktionen eleganter machen
· Schnittstelle für Laufband-Parameter (Start/Stop, Geschwindigkeit und Richtung on the fly ändern)


Variablenliste:
C = randbanner-container 
E = Kindelemente (die eigentlichen Banner-conatiner, die bewegt werden)
cH = Höhe der 'Leinwand'
bH = Höhe aller Banner zusammen

*/

window.addEvent('load', function() {
	if ($('randbanner')){
		var RandBanner = new BannerSlide({ 
			id:'randbanner'
		});
	}
});

var BannerSlide = new Class({
	Implements: Options,
	options: {
		id:'randbanner',
		speed: 35,
		direction: 'b2t',
		align: 'center',
		padding: 0
    },
	initialize: function(options){
        this.setOptions(options);
        
        if(this.options.speed==0){this.options.speed=1}
        //if(this.options.direction!=0&&this.options.direction!=1){this.options.direction=1}
        
        // Schalter um (z.b. beim Hover) die Animation zu stoppen
    	bitStop = false;
    	
		dir = this.options.direction;
        BanId = this.options.id;
        
        // Die Banner holen
        E = $(BanId).getChildren();
        $(BanId).setStyles({overflow:'hidden'});
        
        // Größen Berechnen
        cH = $(BanId).getHeight();
        
        // Banner-Container braucht nen Wrapper (innen)
        C = new Element('div', {id: BanId+'-wrapper'}).inject($(BanId));
        
        bH = 0;
        var BanPos = this.options.align;
        var BanPad = this.options.padding;
        E.each(function(li,i) {
			li.addEvent('mouseenter', function(){ bitStop=true; });
			li.addEvent('mouseleave', function(){ bitStop=false; });
			
        	// In den (relativ positinierten) Wrapper packen
        	C.grab(li);
        	
        	// Margin entfernen, bringt die Berechnung durcheinander (Abstände mit padding machen oder innen einen wrapper)
        	li.setStyles({'margin-top':0,'margin-bottom':0});
        	
        	// Wieder positionieren
        	li.setStyle('position','absolute');
        	if (dir=='t2b') {
        		li.setStyle('top',cH-bH-li.getHeight());
        	} else {
        		li.setStyle('top',bH);
        	}
        	
        	if(BanPos=='center'){
        		li.setStyle('left',parseInt((C.getWidth()-li.getWidth())/2)+BanPad);
        	} else {
        		li.setStyle(BanPos,BanPad);
        	}
        	bH += parseInt(li.getHeight());
        });
        
		//mv = this.options.speed*(this.options.direction==0?1:-1);
		
		moveBanners = function() {
			if (bitStop){return}
			var El = null;
			var ArrPos = new Array;
			var Pos = 0;
			E.each(function(li,i) {
				newtop = parseInt(li.getStyle('top'))-(dir=='t2b'?-1:1);
				li.setStyle('top',newtop);
				ArrPos[i] = newtop+li.getHeight();
				if (newtop > cH && dir=='t2b') {
					El = li;
					Pos = i;
				} else if ((newtop+li.getHeight()) < 0 && dir=='b2t') {
					El = li;
					Pos = i;
				}
			});
			if (El)	{
				if (dir=='t2b')	{
					El.setStyle('top',cH-bH);
				} else {
					if (Pos-1<0){
						Pos = E.length-1;
					} else {
						Pos -= 1;
					}
					El.setStyle('top',parseInt(ArrPos[Pos]));
				}
			}
		};
		
		window.addEvent('resize', function() {
			var cHneu = $(BanId).getHeight();
			if (cHneu>cH) {
				
			}
			cH = cHneu;
		});
		
        // Eventüberwachung (Fenstergröße ändert sich)
        moveBanners.periodical(this.options.speed);
	},
	
});