window.addEvent('domready', function(){
	//Large Yacht Pontoons
	var el = $('myElement1'),
		color1 = el.getStyle('backgroundColor');
		width1 = el.getStyle('width');
		height1 = el.getStyle('height');
		padding1 = el.getStyle('padding');
		left1 = el.getStyle('left');
		top1 = el.getStyle('top');
		//position1 = el.getStyle('position');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement1').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'backgroundColor': '#ffffff',
				'width': '160px',
				'height': '210px',
				'padding': '10px 0px 10px 10px',
				'left': '693px',
				'top': '64px'//,
				//'position': 'absolute'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color1,
				width: width1,
				height: height1,
				padding: padding1,
				left: left1,
				top: top1//,
				//position: position1
			});
		}
	});


});

window.addEvent('domready', function(){
	//Floating Fuel Pontoon
	var el = $('myElement2'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
				left2 = el.getStyle('left');
		top2 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement2').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '210px',
				'padding': '10px 0px 10px 10px',
								'left': '460px',
				'top': '30px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
								left: left2,
				top: top2
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//Deep Water Berths
	var el = $('myElement3'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
		left3 = el.getStyle('left');
		top3 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement3').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '210px',
				'padding': '10px 0px 10px 10px',
				'left': '560px',
				'top': '100px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
				left: left3,
				top: top3
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//20 tonne pillar crane
	var el = $('myElement4'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
		//border = el.getStyle('border');
		padding = el.getStyle('padding');
				left4 = el.getStyle('left');
		top4 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement4').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '220px',
				'padding': '10px 0px 10px 10px',
								'left': '80px',
				'top': '200px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
								left: left4,
				top: top4
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//75 tonne boat hoist and dock
	var el = $('myElement5'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement5').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '210px',
				'padding': '10px 0px 10px 10px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding
				//backgroundImage: backgroundImage
			});
		}
	});


});



window.addEvent('domready', function(){
	//Office
	var el = $('myElement6'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
						left6 = el.getStyle('left');
		top6 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement6').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '230px',
				'padding': '10px 0px 10px 10px',
				'left': '258px',
				'top': '240px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
								left: left6,
				top: top6
				//backgroundImage: backgroundImage
			});
		}
	});


});




window.addEvent('domready', function(){
	//Office
	var el = $('myElement7'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
						left7 = el.getStyle('left');
		top7 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement7').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '230px',
				'padding': '10px 0px 10px 10px',
				'left': '420px',
				'top': '90px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
								left: left7,
				top: top7
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//Dry Sailing
	var el = $('myElement8'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
				left8 = el.getStyle('left');
		top8 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement8').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '250px',
				'padding': '10px 0px 10px 10px',
				'left': '100px',
				'top': '310px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
				left: left8,
				top: top8
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//Toilets & Washing Facilities
	var el = $('myElement9'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement9').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '220px',
				'padding': '10px 0px 10px 10px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//'For Sale' Areas
	var el = $('myElement10'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
										left10 = el.getStyle('left');
		top10 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement10').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '210px',
				'padding': '10px 0px 10px 10px',
								'left': '660px',
				'top': '300px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
												left: left10,
				top: top10
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//90ft (27m) Paint Spray Shop
	var el = $('myElement11'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
						left11 = el.getStyle('left');
		top11 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement11').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '210px',
				'padding': '10px 0px 10px 10px',
								'left': '225px',
				'top': '310px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
								left: left11,
				top: top11
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//Outside Yacht Storage
	var el = $('myElement12'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
						left12 = el.getStyle('left');
		top12 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement12').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '210px',
				'padding': '10px 0px 10px 10px',
								'left': '360px',
				'top': '370px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
								left: left12,
				top: top12
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//Ample car parking
	var el = $('myElement13'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
								left13 = el.getStyle('left');
		top13 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement13').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
		//		'border': '1px dotted #000',
				'width': '160px',
				'height': '210px',
				'padding': '10px 0px 10px 10px',
				'left': '490px',
				'top': '300px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
		//		border: border,
				padding: padding,
												left: left13,
				top: top13
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//Under Cover Yacht Storage
	var el = $('myElement14'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
						left14 = el.getStyle('left');
		top14 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement14').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '220px',
				'padding': '10px 0px 10px 10px',
				'left': '30px',
				'top': '370px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
				left: left14,
				top: top14
				//backgroundImage: backgroundImage
			});
		}
	});


});

window.addEvent('domready', function(){
	//Main Shed
	var el = $('myElement15'),
		color = el.getStyle('backgroundColor');
		width = el.getStyle('width');
		height = el.getStyle('height');
	//	border = el.getStyle('border');
		padding = el.getStyle('padding');
								left15 = el.getStyle('left');
		top15 = el.getStyle('top');
	//	backgroundImage = el.getStyle('backgroundImage');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement15').set('opacity', 0.75).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#ffffff',
			//	'border': '1px dotted #000',
				'width': '160px',
				'height': '220px',
				'padding': '10px 0px 10px 10px',
				'left': '200px',
				'top': '377px'
				//'background-image': 'none'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.75,
				backgroundColor: color,
				width: width,
				height: height,
			//	border: border,
				padding: padding,
								left: left15,
				top: top15
				//backgroundImage: backgroundImage
			});
		}
	});


});



/* FX.Slide */
/* toggle window for the login section */
/* Works with mootools-release-1.2 */
/* more info at http://demos.mootools.net/Fx.Slide */

window.addEvent('domready', function(){
	$('info-panel-text1').setStyle('height','auto');
	var mySlide = new Fx.Slide('info-panel-text1').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideout').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
		
	});
	
	    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideouticon1').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
		
	});
	
 });

window.addEvent('domready', function(){
	$('info-panel-text2').setStyle('height','auto');
	var mySlide = new Fx.Slide('info-panel-text2').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideout2').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
	});
	
	    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideouticon2').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
		
	});
	
 });

window.addEvent('domready', function(){
	$('info-panel-text3').setStyle('height','auto');
	var mySlide = new Fx.Slide('info-panel-text3').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideout3').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
	});
	
	    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideouticon3').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
		
	});
	
 });

window.addEvent('domready', function(){
	$('info-panel-text4').setStyle('height','auto');
	var mySlide = new Fx.Slide('info-panel-text4').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideout4').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
	});
	
	    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideouticon4').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
		
	});
	
 });

window.addEvent('domready', function(){
	$('info-panel-text5').setStyle('height','auto');
	var mySlide = new Fx.Slide('info-panel-text5').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideout5').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
	});
	
	    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideouticon5').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
		
	});
	
 });

window.addEvent('domready', function(){
	$('contact-info-panel-text').setStyle('height','auto');
	var mySlide = new Fx.Slide('contact-info-panel-text').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideoutcontact').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
	});
	
	    //Show-Hide login panel when you click the link "Login" on top of the page
    $('slideoutcontactfoot').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
		
	});
	
 });