window.addEvent('domready', function() {
	
	
	var firstLoad = Cookie.read("first");
	
	$('header-image1').setOpacity(1);
	$('header-image2').setOpacity(0);
	
	
	// suche Bubbles
	bubbles = $(document.body).getElements('img.bubble');
	
	
	// preload und fade Background
	if ( firstLoad == null ) {
		var myImages = new Asset.images(['../_images/background.jpg'], {
		onComplete: function(){
			var background = $('bg');
			background.setOpacity("0");
			background.setStyle("display", "block");
			var backgroundFade = new Fx.Tween( background, {duration: 1500 } );
			backgroundFade.start("opacity", 1);
			backgroundFade.addEvent('onComplete', function() {
					showHeaderGraphic(1);
					animateBubbles( Math.floor(Math.random()*bubbles.length ) );												   
			   });
			}
		});
		firstLoad = Cookie.write("first", "true");
	} else {
		var background = $('bg');
		background.setOpacity("1");
		background.setStyle("display", "block");
		showHeaderGraphic(1);
		animateBubbles( Math.floor(Math.random()*bubbles.length )  );	
	}
	
	$('kommentarField').addEvents({
		'focus':function(){
			$('kommentarField').setOpacity(1);		 
		},
		'blur':function(){
			if( $('kommentarField').value.length == 0 ) {
				$('kommentarField').setOpacity(0.5);
			}	
		}
	});
	
	$('emailField').addEvents({
		'focus':function(){
			$('emailField').setOpacity(1);		 
		},
		'blur':function(){
			if( $('emailField').value.length == 0 ) {
				$('emailField').setOpacity(0.5);
			}
		}
	});
		
	$('kontaktForm').addEvent('submit', function(e) {
		//Prevents the default submit event from loading a new page.
		e.stop();
		
		//Empty the log and show the spinning indicator.
		var log = $('kontaktstatus').empty().addClass('ajax-loading');
		
		//Set the options of the form's Request handler. 
		//("this" refers to the $('myForm') element).
		
		this.set('send', {onComplete: function(response) { 
			log.removeClass('ajax-loading');
			log.set('html', response);
		}});
		
		//Send the form.
		this.send();
	});
});

function showHeaderGraphic(whichOne){
	var fade = 800;
	var wait = 5000;
	
    if(whichOne == 1){
        active = "header-image1";
        inactive = "header-image2";
    }else{
        active = "header-image2";
        inactive = "header-image1";
    }
	
    $(active).fx = new Fx.Tween( active, {duration: fade});
	$(inactive).fx = new Fx.Tween( inactive, {duration: fade});

	$(active).fx.start("opacity", 0);
	$(inactive).fx.start("opacity", 1).wait(wait).chain( function() { showHeaderGraphic( whichOne*-1); });
}

function animateBubbles( number ) {
	
	var fade = 800;
	var wait = 3000;
	
	number = number % bubbles.length;
			
	bubbles[number].setOpacity(0);
	bubbles[number].setStyle("display", "block");
	fx = new Fx.Tween(bubbles[number], { property: 'opacity', link: 'chain', duration: fade });
	fx.start(1).wait(wait).start(0).chain( function() {
			bubbles[number].setStyle("display", "none");
			animateBubbles( number+1 );												
	});
	
}