var b_LoadLogoPrematurelyDone = false;
var b_LoadPhotoPrematurelyDone = false;

/*

	MAIN INIT

*/
function initHomepage(){
	
	//this only works when javascript is enabled.
	
	initHomepageHeaderImages();
	initHomepageMainButtons();
}



/*
	Display the header images correctly
	
*/
function initHomepageHeaderImages(){
	//fade in on main images
	$('logo').hide();
	$('photo').hide();
	
	//load the background image before the logos
	$('logo').observe('load', function(event){	  	b_LoadLogoPrematurelyDone = true;	 });		
	$('photo').observe('load', function(event){	  	b_LoadPhotoPrematurelyDone = true;	 });
	
	Preloader.add('images/img_header.jpg');
	Preloader.onFinish(setHomepageBackgroundLoadingDone);
	Preloader.load();	
}


/*
	
	Display the main button row correctly

*/
function initHomepageMainButtons(){
	//hide the button row
	$('navigation').hide();
	
	//set a preload on the the images
	$('button1_image').observe('load', function(event){	registerMainButtonsLoaded() });
	$('button2_image').observe('load', function(event){	registerMainButtonsLoaded() });
	$('button3_image').observe('load', function(event){	registerMainButtonsLoaded() });
	$('button4_image').observe('load', function(event){	registerMainButtonsLoaded() });
	
	
	
	//mouseover effects on buttons		
	initMainButtonMouseEffects(1);
	initMainButtonMouseEffects(2);
	initMainButtonMouseEffects(3);
	initMainButtonMouseEffects(4);

	//allow the preloader to load
	Preloader.load();
}




/*
	When the background has finished loading, display the upper elements
	
	but it may very well be possible they're already done loading. If so, don't observe
	the loading process, but trigger the effect immediately
*/
function setHomepageBackgroundLoadingDone(){
	if(b_LoadLogoPrematurelyDone){
		new Effect.Appear($('logo'), {duration: 4});	
	}else{
		$('logo').observe('load', function(event){
			new Effect.Appear($('logo'), {duration: 4});
		 });
	}
	
	if(b_LoadPhotoPrematurelyDone){
		new Effect.Appear($('photo'), {duration: 4});
	}else{
		$('photo').observe('load', function(event){
	  		new Effect.Appear($('photo'), {duration: 4});
		 });
	}	  
}

/*
	Apply misc images and effects here
*/
function initMainButtonMouseEffects(buttonNumber){
	Event.observe('button'+buttonNumber, 'mouseover', 
		function() {
        	$('button'+buttonNumber).firstChild.src='images/btn_main_'+buttonNumber+'b.jpg';
			new Effect.Opacity('button'+buttonNumber+'_title', {duration:0.5, from:0.6, to:1.0});
		}
	);
    Event.observe('button'+buttonNumber, 'mouseout',  
		function() {
			$('button'+buttonNumber).firstChild.src='images/btn_main_'+buttonNumber+'.jpg';
			new Effect.Opacity('button'+buttonNumber+'_title', {duration:0.5, from:1.0, to:0.6});
		}
	);
	
	Preloader.add('images/btn_main_'+buttonNumber+'b.jpg');	
}


/*
	Register when a main button has loaded. If all 4 have, display the row
*/
var n_mainbuttonsloaded = 0;
function registerMainButtonsLoaded(){
	n_mainbuttonsloaded = n_mainbuttonsloaded+1;
	if(n_mainbuttonsloaded == 4){
		
		new Effect.Appear($('navigation'), {duration: 1});
	}	
}