$(document).ready(function(){
	$("#h_fr").hide().animate({opacity:0},0);
	$("#h_de").hide().animate({opacity:0},0);
	$("#h_en").hide().animate({opacity:0},0);


	var switcheroo = setInterval('Header.interval()',5000);
	
	Hovers.init(switcheroo);
})

var Hovers = {
	init:function(switcheroo){
		$('#nl').hover(
			function(){
				//MOUSE IN
				clearInterval(switcheroo);
				Header.setActive('h_nl');
			},
			
			function(){
				//MOUSE OUT
				switcheroo = setInterval('Header.interval()',5000);
			}
		);
		
		$('#fr').hover(
			function(){
				//MOUSE IN
				clearInterval(switcheroo);
				Header.setActive('h_fr');
			},
			
			function(){
				//MOUSE OUT
				switcheroo = setInterval('Header.interval()',5000);
			}
		);
		
		$('#de').hover(
			function(){
				//MOUSE IN
				clearInterval(switcheroo);
				Header.setActive('h_de');
			},
			
			function(){
				//MOUSE OUT
				switcheroo = setInterval('Header.interval()',5000);
			}
		);
		
		$('#en').hover(
			function(){
				//MOUSE IN
				clearInterval(switcheroo);
				Header.setActive('h_en');
			},
			
			function(){
				//MOUSE OUT
				switcheroo = setInterval('Header.interval()',5000);
			}
		);
	}
}

var Header = {	
	interval:function(){
		//alert("switcherooo!");
		
		//alert("Alweer 5 seconden sinds deze functie werd aangeroepen!");
		var previous_active = false;
		var switch_was_done = false;
		
		$('#header').children().each(function(){
			var child = $(this);
			
			if($(child).is('.active')){
				previous_active = true;
				
				$(child).hide().animate({opacity:0},500);
				$(child).removeClass('active');
				$(child).addClass('inactive');
			}else if($(child).is('.inactive')){
				if(previous_active == true){
					$(child).show().animate({opacity:1.0},500);
					$(child).removeClass('inactive');
					$(child).addClass('active');
					
					switch_was_done = true;
				}
				
				previous_active = false;
			}
		});
		
		if(switch_was_done == false){
			$('#header div:first-child').show().animate({opacity:1.0},500);
			$('#header div:first-child').removeClass('inactive');
			$('#header div:first-child').addClass('active');
		}
	},
	
	setActive:function(id){
		var headers = new Array();
		var value = "";
		
		headers[0]="h_nl";
		headers[1]="h_fr";
		headers[2]="h_de";
		headers[3]="h_en";
		
		for(var i=0;i<=3;i++){
			value = headers[i];
			
			if(id == value){
				//SHOW
				$("#"+value).show().animate({opacity:1.0},500);
				if($("#"+value).is('.inactive')){
					//set new class
					$("#"+value).removeClass('inactive');
					$("#"+value).addClass('active');
				}
			}else{
				//HIDE
				$("#"+value).hide().animate({opacity:0},0);
				
				//set class to inactive if this isn't the case yet!
				if($("#"+value).is('.active')){
					$("#"+value).removeClass('active');
					$("#"+value).addClass('inactive');
				}
			}
		}
	}
}