// ohne prototype
//function hide_bg_until_loaded(){
//    var bg = document.getElementById('bg_img');
//    var preloader = new Image();
//    
//    bg.style['display'] = 'none';
//    preloader.onload = function(){
//        bg.style['display'] = 'block';
//    };
//    preloader.src = bg.src;
//    return false;
//}

// mit prototype
var bg_handler;

var BgHandler = Class.create({
	wait_for_cached_pics_time: 100,
	fade_duration: 2,

	initialize: function(){
		this.bg = $('bg_img');
		this.bg_lowres = $('bg_img_low_res');
		this.preloaders = new Array();
		this.set_show(this.bg_lowres);
		this.set_appear(this.bg);
	},
	
	set_show: function(pic){
		var preloader = new Image();
		pic.hide();
	    preloader.onload = function(){
			pic.show();
		};
	    preloader.src = pic.src;
		this.preloaders.push([preloader, pic]);
	},
	
	set_appear: function(pic){
		this.set_show(pic);
		setTimeout('bg_handler.set_appear_effect_for_last_preloader()', this.wait_for_cached_pics_time);
	},
	
	set_appear_effect_for_last_preloader: function(){
		var preloader_with_pic = this.preloaders.last();
	    preloader_with_pic[0].onload = function(){
	        Effect.Appear(preloader_with_pic[1], {duration: this.fade_duration});
	    }.bind(this);
	}
});


document.observe("dom:loaded", function() {
	bg_handler = new BgHandler();
});