var SwitchHeader=Class.create();

SwitchHeader.prototype={
	initialize:function(menu, src){
		this.menu=$(menu);
		this.src=src;
		//var preloader=new Image(src);
		this.header=$("header_overlay");
		Event.observe(this.menu, "mouseover", this.changeHeader.bindAsEventListener(this));
		Event.observe(this.menu, "mouseout", this.hideHeader.bindAsEventListener(this));
	},
	changeHeader:function(){
		
		this.header.hide();
		this.header.src=this.src;
		this.header.show();
		//Effect.Appear(this.header, {duration:0.5, queue: { position: 'end', scope: "header" }});
		//Effect.Fade(this.header, {duration:5, queue: { position: 'end', scope: "header" }, afterFinish: (function(){ this.header.src=this.src; this.header.style.display="none" }.bind(this))});
		
		//Effect.Appear(this.header, {duration:5, queue: { position: 'end', scope: "header" }, beforeStart:function(){alert("start");}});
	},
	hideHeader:function(){
		this.header.hide();
		this.header.src=SwitchHeader.defaultSrc
		this.header.show();
	}
}
document.observe('dom:loaded', function(){
	SwitchHeader.defaultSrc=$("header_overlay").src;
	lis=$$("#menu li:not([class=menu_sep])");
	for(i=0,len=lis.length; i<len; i++){
		new SwitchHeader(lis[i], "/pics/header_0"+(i+1)+".jpg");
	}
});