window.addEvent('domready', function(){
	
	activeImage = 'img1';

	var initialise = $(activeImage).setStyles({display:'block',opacity: 0});	
	var StartBlock1 =  $('lifesafer').set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
			}).tween('height', '72px');
	new Fx.Morph($(activeImage), {duration:1000}).start({'opacity':1}); 
	

	
	
	// The same as before: adding events
	$('lifesafer').addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
			}).tween('height', '72px');
			$('portable').set('tween', {}).tween('height', '55px');
			$('bike').set('tween', {}).tween('height', '55px');
			$('commercial').set('tween', {}).tween('height', '55px');
			var newImage = 'img1';
			transitionImage(activeImage, newImage);


		}
	});

	$('bike').addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
			}).tween('height', '72px');
			$('lifesafer').set('tween', {}).tween('height', '55px');
			$('portable').set('tween', {}).tween('height', '55px');
			$('commercial').set('tween', {}).tween('height', '55px');
			var newImage = 'img2';
			transitionImage(activeImage, newImage);

		}
	});

	$('portable').addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
			}).tween('height', '72px');
			$('lifesafer').set('tween', {}).tween('height', '55px');
			$('bike').set('tween', {}).tween('height', '55px');
			$('commercial').set('tween', {}).tween('height', '55px');
			var newImage = 'img3';
			transitionImage(activeImage, newImage);

		}
	});

	$('commercial').addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
			}).tween('height', '72px');
			$('lifesafer').set('tween', {}).tween('height', '55px');
			$('bike').set('tween', {}).tween('height', '55px');
			$('portable').set('tween', {}).tween('height', '55px');
			var newImage = 'img4';
			transitionImage(activeImage, newImage);

		}//,
		//'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
		//	this.set('tween', {}).tween('height', '55px');
		//}
	});

});
	
	function transitionImage(oldImage,newImage)
	{
		
		var fadeOut = function()
		{
			var div = $(oldImage).setStyles({
				opacity: 1
			});
			
			new Fx.Morph($(oldImage), {duration:1000}).start({'opacity':0});
			
			fadeIn();
		
		};
	
		var fadeIn = function()
		{
		
			var div2 = $(newImage).setStyles({
				display:'block',
				opacity: 0
			});
			
			new Fx.Morph($(newImage), {duration:1000}).start({'opacity':1});
		
		};
	
		if(newImage != activeImage)
		{
			fadeOut();
			activeImage = newImage;		
		}
	}