// JavaScript Document

window.addEvent('domready', function(){ 
	
	var infoButtonOpen = 0;
	var infoButtonClose = -412;
	var perio;
	
	var liste = $$('#info1, #info2');
		liste.each( 
			function( elements ){
				
				var iButtonOpen = function(){
					
					elements.set('tween',{
						duration: 600,
						transition: Fx.Transitions.Sine.easeOut,
						link: 'chain'
					});	
					elements.tween('marginLeft', infoButtonOpen);
				}
				var iButtonClose = function(){
					elements.set('tween',{
						duration: 300,
						transition: Fx.Transitions.Quint.easeInOut,
						link: 'chain'
					});	
					elements.tween('marginLeft', infoButtonClose);
				}
				elements.addEvents({
					mouseenter:iButtonOpen,
					mouseleave:iButtonClose				   
				})
				
				// Start nach 1sec die InfoButtons
				var count = 0;
				var startIButtonAnimation = function(){
					
					count++;
					$clear( perio );

					if( count <= 2 ){
						$$('#info' + count).set('tween',{
							duration: 600,
							transition: Fx.Transitions.Sine.easeOut,
							link: 'chain'
						});	
						$$('#info' + count).tween('marginLeft', infoButtonOpen);
						
						// macht nach  5-7sec mit Animation weiter
						if( count == 1 ){ perio = startIButtonAnimation.periodical( 5000 ); }
						else{ perio = startIButtonAnimation.periodical( 7000 ); }
					}
					if( count > 0 ){
						var geCount = count-1;
						$$('#info' + geCount).set('tween',{
							duration: 300,
							transition: Fx.Transitions.Quint.easeInOut,
							link: 'chain'
						});	
						$$('#info' + geCount).tween('marginLeft', infoButtonClose);
					}
					if( count > 2 ){
						// endet die Animation
						$clear( perio );	
					}
				}
				startIButtonAnimation.delay( 1000 );
				
			}
		);
	
});