var visibleDiv = $("image1");
var whichHeader = 2;

function toggle(newSrc) {
	
	if (whichHeader == 0) {
 		newSrc = $("button1").image.src;
	}
	else if (whichHeader == 1) {
 		newSrc = $("button2").image.src;
	}
	else if (whichHeader == 2) {
 		newSrc = $("button3").image.src;
	}
	else if (whichHeader == 3) {
 		newSrc = $("button4").image.src;
	}
	else if (whichHeader == 4) {
 		newSrc = $("button5").image.src;
	}
	else if (whichHeader == 5) {
 		newSrc = $("button6").image.src;
	}
	whichHeader = whichHeader + 1;
	if (whichHeader == 6) {
		whichHeader = 0;
	}
	
   	//stop the current animation if it is running.
   	if($("image1").fx) {
   		$("image1").fx.pause();
   	}
   	if($("image2").fx) {
   		$("image2").fx.pause();
   	}
   	
   	//Decide which div to hide and which to show.
   	if (visibleDiv == $("image1")) {
       	//change the hidden image's source
       	$("banner2").src = newSrc;
       	//fade the visible out and the hidden in.
       	$("image1").fade('out');
       	$("image2").fade('in');
       	//Set which div is visible.
       	visibleDiv = $("image2");
   	} else {
       	//change the hidden image's source
       	$("banner1").src = newSrc;
       	//fade the visible out and the hidden in.
       	$("image1").fade('in');
       	$("image2").fade('out');
       	//Set which div is visible
       	visibleDiv = $("image1");
    }
}

function loadImages(buttonsAndImages){
   	for (biPairKey in buttonsAndImages) {
       	var image = new Element('img',{ src:buttonsAndImages[biPairKey], style:'margin:3px;' });
       	$(biPairKey).image = image;
   	}
}

window.addEvent('domready', function(){
	var el = $$('a'), color = el.getStyle('backgroundColor');
	
	var buttonsAndImages = {'button1':'images/header_1.jpg', 'button2':'images/header_2.jpg', 'button3':'images/header_3.jpg', 'button4':'images/header_4.jpg', 'button5':'images/header_5.jpg', 'button6':'images/header_6.jpg'};
	
	var fader = toggle.periodical(10000);
	
	loadImages(buttonsAndImages);

	$$('a').addEvents({
		mouseenter: function(){
			this.morph({
				'padding-left': '5px'
			});
		},
		mouseleave: function(){
			this.morph({
				'padding-left': '0px'
			});
		}
	});

	$('menu1').addEvents({
		'mouseenter': function(){
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut
			}).tween('height', '130px');
		},
		'mouseleave': function(){
			this.set('tween', {}).tween('height', '50px');
		}
	});

	$('menu2').addEvents({
		'mouseenter': function(){
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut
			}).tween('height', '130px');
		},
		'mouseleave': function(){
			this.set('tween', {}).tween('height', '50px');
		}
	});

	$('menu3').addEvents({
		'mouseenter': function(){
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut
			}).tween('height', '130px');
		},
		'mouseleave': function(){
			this.set('tween', {}).tween('height', '50px');
		}
	});

	$('menu4').addEvents({
		'mouseenter': function(){
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut
			}).tween('height', '130px');
		},
		'mouseleave': function(){
			this.set('tween', {}).tween('height', '50px');
		}
	});
	
	$('menu5').addEvents({
		'mouseenter': function(){
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut
			}).tween('height', '130px');
		},
		'mouseleave': function(){
			this.set('tween', {}).tween('height', '50px');
		}
	});
	
	$('menu6').addEvents({
		'mouseenter': function(){
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut
			}).tween('height', '160px');
		},
		'mouseleave': function(){
			this.set('tween', {}).tween('height', '50px');
		}
	});
	
	$('menu7').addEvents({
		'mouseenter': function(){
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut
			}).tween('height', '130px');
		},
		'mouseleave': function(){
			this.set('tween', {}).tween('height', '50px');
		}
	});
	
	$('menu8').addEvents({
		'mouseenter': function(){
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut
			}).tween('height', '130px');
		},
		'mouseleave': function(){
			this.set('tween', {}).tween('height', '50px');
		}
	});
	
});