window.addEvent('domready',function() {  
	
	var grey = new Fx.Slide('bg1', {mode: 'horizontal', wait:false});
	$each($$($('arrow1a')), function(el) {   
			el.addEvents({   
				'mouseenter': function(){
					grey.slideIn();
					$('arrow1b').morph({
						'opacity': 0		   
					})
				},
				'mouseleave': function(){
					grey.slideOut();
					$('arrow1b').morph({
						'opacity': 1		   
					})
				}	 
			});   
		});	
	grey.hide();
			
	var black = new Fx.Slide('bg2', {mode: 'horizontal', wait:false});
		$each($$($('arrow2a')), function(el) {   
			el.addEvents({   
				'mouseenter': function(){
					black.slideIn();
					$('arrow2b').morph({
						'opacity': 0		   
					})
				},
				'mouseleave': function(){
					black.slideOut();
					$('arrow2b').morph({
						'opacity': 1		   
					})
				}	 
			});   
		});	
	black.hide();
	
	var green = new Fx.Slide('bg3', {mode: 'horizontal', wait:false});
		$each($$($('arrow3a')), function(el) {   
			el.addEvents({   
				'mouseenter': function(){
					green.slideIn();
					$('arrow3b').morph({
						'opacity': 0		   
					})
				},
				'mouseleave': function(){
					green.slideOut();
					$('arrow3b').morph({
						'opacity': 1		   
					})
				}	 
			});   
		});	
	green.hide();
	
	var purple = new Fx.Slide('bg4', {mode: 'horizontal', wait:false});
		$each($$($('arrow4a')), function(el) {   
			el.addEvents({   
				'mouseenter': function(){
					purple.slideIn();
					$('arrow4b').morph({
						'opacity': 0		   
					})
				},
				'mouseleave': function(){
					purple.slideOut();
					$('arrow4b').morph({
						'opacity': 1		   
					})
				}	 
			});   
		});	
	purple.hide();
	});