/* 	Scrolling ticker

	- Voor dit script moet MooTools geladen zijn
	
	- Maak een container-div aan met een ID, die je hieronder definiëert als divID
	
	- Zorg ervoor dat deze de volgende styles heeft:
		position: relative;
		overflow: hidden;
		height: ..px;
		
	- Maak een x aantal divs aan binnen de container-div met de volgende styles:
		position: absolute;
		top: 10px;
		visibility: hidden;
		
	- Stel de Var tickerHeight in op de height-style van de container-div

*/

var interval = 700;
var pause = 5000;
var tickerHeight = 50;
var divID = 'ledenticker';
var topMargin = 10;


window.addEvent('domready', function() {
	startticker();
});


function startticker() {
	i = $$('#' + divID + ' div');
	activeItem = 0;
	i[activeItem].style.visibility = 'visible';
    timeoutID = setTimeout('nextItem()', pause);
}


function nextItem() {
	var prevItem = activeItem;
	activeItem = (prevItem == i.length - 1) ? 0 : prevItem + 1;
	scrollticker(prevItem, activeItem);
}


function scrollticker(from, to) {
    var setTop = new Fx.Style(i[to], 'top');
    setTop.set(0 - tickerHeight);
    $(i[to]).effect('top',{
			onStart: function(){ i[to].style.visibility = 'visible';}, 
            duration: interval,
			transition:Fx.Transitions.Cubic.easeOut
		}).start(0 - tickerHeight, topMargin);
    $(i[from]).effect('top',{
			onComplete: function(){ i[from].style.visibility = 'hidden'; timeoutID = setTimeout('nextItem()', pause);}, 
            duration: interval,
			transition:Fx.Transitions.Cubic.easeOut
    }).start(topMargin, tickerHeight);
}