var currentCustomerTickerPos = 0;

function customerTickerFader() {

	var theTickerScroller = $("customerShowcase");

	var myDuration = 500;
	var myTransition = Fx.Transitions.Sine.easeOut;
	
	
	function movinOnUp() {
		liHeight = 50;
		tickerHeight = theTickerScroller.getSize().y - 50; //cuz the last line is empty (used for background image)
		
		var newTickerPos = currentCustomerTickerPos - liHeight;
				
		//at the end? wrap around!
		if(Math.abs(newTickerPos) > Math.abs(tickerHeight - liHeight + 1)) {
			newTickerPos = 0;
			//console.log("wrap around");
		}
		

		theTickerScroller.setStyle("margin-top", newTickerPos);
		
		currentCustomerTickerPos = newTickerPos;
	}
	
	if(!Browser.Engine.trident) {
		var myMorph = new Fx.Morph(theTickerScroller,
			{
				duration:myDuration,
				transition: myTransition,
				onComplete:function() {
					movinOnUp();
					
					var fadeIn = new Fx.Morph(theTickerScroller,
						{
							duration:myDuration,
							transition:myTransition	
						}
					);
					
					fadeIn.start(
						{
							"opacity":1
						}
					);
				}
			}
		);
		myMorph.start(
			{
				"opacity":0
			}
		);
	}
	else {
		movinOnUp();
	}
}




window.addEvent("domready", function() {

	//set the customer ticker to a random position, so it's different on each page load
	var positions = new Array(0, 50, 100, 150, 200);
	var randomPosition = positions.getRandom();
	var newPostion = -(randomPosition);
	newPostion=0;
	currentCustomerTickerPos = newPostion; //register with the global
	var theTickerScroller = $("customerShowcase");
	theTickerScroller.setStyle("margin-top", newPostion + "px");
	 

	//var count = 1;
	var tickerOver = false;
	var interval = 5000;
	
	var runMe = function tick() {
			customerTickerFader();
		}
		
	runMe.periodical(interval);
});