/* 

	JG O'Hare
	created by Ryan Mitchell (ryan@rtnetworks.net)

*/
window.addEvent("domready",function() {

	var line = function() {

		// create a new white line to move across
		var line = new Element('div',{
		
			styles: {
				'height': '2px',
				'background-color': '#fff',
				'width': '100%',
				'float': 'left',
				'font-size': '0px',
				'margin': '281px 0px 0px -1415px'
				
			},
			html: ' '
		
		});
		
		line.inject($('extra_bg'));
		line.set('tween',{duration: 'long'});
		line.tween('margin-left','0px');
	
	};

	var greenbox = function() {

		// create green box
		var greenbox = new Element('div', {
			styles: {
				'id': 'greenbox',
				'height': '1px',
				'background-color': '#333629',
				'border-bottom':'2px solid #ffffff',
				'width': '100%',
				'float': 'left',
				'margin': '0px 0px 0px 0px'
			}
		});
		
		greenbox.inject($('extra_bg'));
		greenbox.set('tween',{duration: 'long'});
		greenbox.tween('height','92px');
		
		// logo
		(function() { 
		
			var logo = new Element('a', {
				href: 'javascript:void(0);',
				text: '',
				styles: {
					'opacity': 0,
					'padding': '10px 75px 0px 53px',
					'float': 'left'
				},
				html: '<img src="images/o-hare.gif" alt="logo" />'
			});
			
			logo.addEvent('click',window.tagline);
		
			logo.inject(greenbox); 
			logo.set('tween',{duration: 'long'});
			logo.tween('opacity','1');
			
		}).delay(200);
	
		// links bar
		(function() { 
		
			var pad = (Browser.Engine.trident5) ? "0" : "53";
		
			var links = new Element('p', {
				id: 'links',
				html: '<a href="javascript:void(0);" onclick="services_link();"><img src="images/services.gif" id="link_services" /></a><a href="javascript:void(0);" onclick="profile_link();"><img src="images/profile.gif" id="link_profile" /></a><a href="javascript:void(0);" onclick="history_link();"><img src="images/history.gif" id="link_history" /></a><a href="javascript:void(0);" onclick="contact_link();"><img src="images/contact.gif" id="link_contact" /></a>',
				styles: {
					'opacity': 0,
					'padding': '72px 0px 0px '+pad+'px',
					'color': '#fff',
					'font-size': '13px'
				}
			});
		
			links.inject(greenbox); 
			links.set('tween',{duration: 'short'});
			links.tween('opacity','1');
			
		}).delay(600);
	
	};
	
	var background = function() {
	
		$('screen').setStyles({
			'background-image': 'url(images/background.jpg)',
			'background-position': '322px 38px',
			'background-repeat': 'no-repeat'
		});
			
	};
	
	window.tagline = function() {
		
		if(window.canchange) {
			
			window.canchange = false;
	
			var seq = new Sequence();
			seq.chain(
				function() { runchange(); },
				function() {
					
					(function() {
	
					// create a new white line to move down
					var line = new Element('div',{
					
						id: "tagline",
						styles: {
							'height': '3px',
							'background-color': '#fff',
							'width': '100%',
							'float': 'left',
							'font-size': '0px',
							'margin': '-525px 0px 0px 0px',
							'opacity': 0
							
						},
						html: '<img src="images/tagline.gif" alt="tagline" style="padding:10px 0px 0px 317px;" />'
					
					});
					
					line.inject($('extra_bg'));
					line.set('morph',{duration: 'long'});
					line.morph({'margin-top':'-572px','opacity':1});
					
					// what do i do on a new link being clicked?
					onchange += 'var tag = $("tagline"); \
					tag.morph({ "margin-top":"-525px","opacity":0 });\
					(function() { tag.dispose(); }).delay(1200); ';
					
					window.canchange = true;
					
					}).delay(650);
					
				}
			);
			seq.run();
			
		}
	
	};
	
	var footer = function() {

		// create a new white line to move down
		var line = new Element('div',{
		
			id: "footer",
			styles: {
				'height': '3px',
				'background-color': '#ffffff',
				'width': '100%',
				'float': 'left',
				'font-size': '0px',
				'margin': '0px 0px 0px 0px',
				'opacity': 0
				
			},
			html: '<img src="images/footer.gif" alt="footer" style="padding:10px 0px 0px 320px;" />'
		
		});
		
		line.inject($('extra_bg'));
		line.set('morph',{duration: 'long'});
		line.morph({'margin-top':'272px','opacity':1});
		
		// what do i do on a new link being clicked?
		//onchange += 'var line = $("footer"); \
		//line.morph({ "margin-top":"0px","opacity":0 }); ';
	
	};
	
	var runchange = function() {
	
		try { runchange_sublink(); eval(onchange); }
		catch(e) { }
		
		onchange = '';
	
	};
	
	var runchange_sublink = function() {
	
		try { runchange_sublink_sub(); eval(onchange_sublink); }
		catch(e) { }
		
		onchange_sublink = '';
	
	};
	
	var runchange_sublink_sub = function() {
	
		try { eval(onchange_sublink_sub); }
		catch(e) { }
		
		onchange_sublink_sub = '';
	
	};

	
	window.services_link = function() {
		
		if(window.canchange) {
			
			window.canchange = false;
			
			var seq = new Sequence();
			seq.chain(
				function() { runchange(); },
				function() {
			
					// turn link white
					$("link_services").setProperty("src",$("link_services").getProperty("src").replace(".gif","-on.gif"));
				
					// what do i do on a new link being clicked?
					onchange += '$("link_services").setProperty("src",$("link_services").getProperty("src").replace("-on.gif",".gif"));';
			
				},
				function() {
					
					(function() {
				
					// create a new white line to move down
					var line = new Element('div',{
					
						id: "sublinks",
						styles: {
							'height': '3px',
							'background-color': '#fff',
							'width': '100%',
							'float': 'left',
							'font-size': '10px',
							'margin': '-272px 0px 0px 0px',
							'opacity': 0
							
						},
						html: '<p style="margin-left:320px"><a href="javascript:void(0);" onclick="services_sublink(\'civil-litigation\');"><img src="images/sublinks/civil-litigation.png" id="services_sub_civil-litigation" /></a><br />\
						<a href="javascript:void(0);" onclick="services_sublink(\'licensing\');"><img src="images/sublinks/licensing.png" id="services_sub_licensing" /></a><br />\
						<a href="javascript:void(0);" onclick="services_sublink(\'employment\');"><img src="images/sublinks/employment.png" id="services_sub_employment" /></a><br />\
						<a href="javascript:void(0);" onclick="services_sublink(\'conveyancing\');"><img src="images/sublinks/conveyancing.png" id="services_sub_conveyancing" /></a><br />\
						<a href="javascript:void(0);" onclick="services_sublink(\'commercial-property\');"><img src="images/sublinks/commercial-property.png" id="services_sub_commercial-property" /></a><br />\
						<a href="javascript:void(0);" onclick="services_sublink(\'corporate\');"><img src="images/sublinks/corporate.png" id="services_sub_corporate" /></a><br />\
						<a href="javascript:void(0);" onclick="services_sublink(\'finance\');"><img src="images/sublinks/finance.png" id="services_sub_finance" /></a><br />\
						<a href="javascript:void(0);" onclick="services_sublink(\'matrimonial-and-family\');"><img src="images/sublinks/matrimonial-and-family.png" id="services_sub_matrimonial-and-family" /></a><br />\
						<a href="javascript:void(0);" onclick="services_sublink(\'other-services\');"><img src="images/sublinks/other-services.png" id="services_sub_other-services" /></a><br />\</p>'
					
					});
					
					line.inject($('extra_bg'));
					line.set('morph',{duration: 'long'});
					line.morph({'margin-top':'-262px','opacity':1});
					
					// what do i do on a new link being clicked?
					onchange += 'var line = $("sublinks"); \
					line.morph({ "margin-top":"-272px","opacity":0 }); \
					(function() { line.dispose(); }).delay(1200); ';
					
					window.canchange = true;
					
					}).delay(650);
	
				}
			);
			seq.run();
			
		}
	
	};
	
	window.services_sublink = function(sublink) {
		
		if(window.canchange) {
			
			window.canchange = false;

			var seq = new Sequence(
			
				function() {
					runchange_sublink();
				},
				function() {
					$("services_sub_"+sublink).setProperty("src",$("services_sub_"+sublink).getProperty("src").replace(".png","-on.png"));
				},
				function() {
					
					(function() {
					
						
						// create a new white line to move down
						var line = new Element('div',{
						
							id: "content",
							styles: {
								'border-top': '3px solid #fff',
								'width': '100%',
								'height': '0px',
								'float': 'left',
								'font-size': '10px',
								'margin': '-400px 0px 0px 0px',
								'opacity': 0
								
							},
							html: '<p class="title"><img src="images/titles/'+sublink+'.png" alt="'+sublink+'"></p> \
							<div style="height:2px; background-color:#fff; float:left; width:100%; font-size:0px;">&nbsp;</div> \
							<div id="scrollarea"><a href="javascript:void(0);" id="scroll_up"><img src="images/scrolltop.png" id="scroll_up_img" /></a><div id="scrollbar"><div id="scrollnob"><img src="images/scrollnob.png" /></div></div><a href="javascript:void(0);" id="scroll_down"><img src="images/scrollbottom.png" style="margin-top:15px;" /></a></div> \
							<p class="text" id="text_scroll"><img src="images/text/'+sublink+'.png" alt="'+sublink+'" /><br />&nbsp;<br />&nbsp;</p>'
						
						});
						
						line.inject($('extra_bg'));
						line.set('morph',{duration: 'long'});
						line.morph({'margin-top':'-600px','opacity':1,"height":"210px"});
						
						setupScrollbars.delay(1300);
						
						// what do i do on a new link being clicked?
						onchange_sublink += '$("services_sub_'+sublink+'").setProperty("src",$("services_sub_'+sublink+'").getProperty("src").replace("-on.png",".png")); ';
						onchange_sublink_sub += 'var line = $("content"); \
						line.morph({ "margin-top":"-400px","opacity":0, "height":"10px" }); \
						(function() { line.dispose(); }).delay(1200);';
						
						if(sublink == 'civil-litigation') {
						
							var pad = (Browser.Engine.trident5) ? "-199" : "-216";
							if(Browser.Engine.gecko) pad = "-228";
						
							// create sublinks
							var subs = new Element('p', {
								id: 'sublinks2',
								styles: { 
									'opacity': 0, 
									'margin': pad+'px 0px 0px 400px'
								},
								html: '<a href="javascript:void(0);" onclick="services_sublink_sub(\'road-traffic\');"><img src="images/sublinks/road-traffic.png" id="services_sub_road-traffic" /></a><br /> \
								<a href="javascript:void(0);" onclick="services_sublink_sub(\'public-liability\');"><img src="images/sublinks/public-liability.png" id="services_sub_public-liability" /></a><br /> \
								<a href="javascript:void(0);" onclick="services_sublink_sub(\'accidents-at-work\');"><img src="images/sublinks/accidents-at-work.png" id="services_sub_accidents-at-work" /></a><br /> \
								<a href="javascript:void(0);" onclick="services_sublink_sub(\'medical-negligence\');"><img src="images/sublinks/medical-negligence.png" id="services_sub_medical-negligence" /></a>'
							});		
							
							subs.inject($('sublinks'));
							subs.set('morph',{duration: 'long'});
							subs.morph({'margin-left':'490px','opacity':1});
							
							onchange_sublink += 'var line2 = $("sublinks2"); \
							line2.morph({ "margin-left":"400px","opacity":0 }); \
							(function() { line2.dispose(); }).delay(1200);';
		
						
						} else if(sublink == 'conveyancing') {
						
							var pad = (Browser.Engine.trident5) ? "-199" : "-216";
							if(Browser.Engine.gecko) pad = "-228";
						
							// create sublinks
							var subs = new Element('p', {
								id: 'sublinks2',
								styles: { 
									'opacity': 0, 
									'margin': pad+'px 0px 0px 400px'
								},
								html: '<a href="javascript:void(0);" onclick="services_sublink_sub(\'residential\');"><img src="images/sublinks/residential.png" id="services_sub_residential" /></a><br /> \
								<a href="javascript:void(0);" onclick="services_sublink_sub(\'commercial\');"><img src="images/sublinks/commercial.png" id="services_sub_commercial" /></a><br /> \
								<a href="javascript:void(0);" onclick="services_sublink_sub(\'site-development\');"><img src="images/sublinks/site-development.png" id="services_sub_site-development" /></a><br /> \
								<a href="javascript:void(0);" onclick="services_sublink_sub(\'remortgaging\');"><img src="images/sublinks/remortgaging.png" id="services_sub_remortgaging" /></a><br /> \
								<a href="javascript:void(0);" onclick="services_sublink_sub(\'wills\');"><img src="images/sublinks/wills.png" id="services_sub_wills" /></a>'
							});		
							
							subs.inject($('sublinks'));
							subs.set('morph',{duration: 'long'});
							subs.morph({'margin-left':'490px','opacity':1});
							
							onchange_sublink += 'var line2 = $("sublinks2"); \
							line2.morph({ "margin-left":"400px","opacity":0 }); \
							(function() { line2.dispose(); }).delay(1200);';		
						
						}
						
						window.canchange = true;
					
					}).delay(650);
	
				
				}//,
				//function() {
				//	$("extra_bg").setStyle("background-image","url(images/backgrounds/stop.jpg)");
				//	onchange_sublink += '$("extra_bg").setStyle("background-image","none"); ';
				//}
			
			);
			seq.run();
			
		}
					
	}
	
	window.services_sublink_sub = function(sublink) {
		
		if(window.canchange) {
			
			window.canchange = false;
	
			var seq = new Sequence(
			
				function() {
					runchange_sublink_sub();
				},
			
				function() {
					
					(function() {
					
					$("services_sub_"+ sublink).setProperty("src",$("services_sub_"+ sublink).getProperty("src").replace(".png","-on.png"));
					
					// create a new white line to move down
					var line = new Element('div',{
					
						id: "content",
						styles: {
							'border-top': '3px solid #fff',
							'width': '100%',
							'height': '0px',
							'float': 'left',
							'font-size': '10px',
							'margin': '-400px 0px 0px 0px',
							'opacity': 0
							
						},
						html: '<p class="title"><img src="images/titles/'+ sublink +'.png" alt="'+ sublink +'"></p> \
						<div style="height:2px; background-color:#fff; float:left; width:100%; font-size:0px;">&nbsp;</div> \
						<div id="scrollarea"><a href="javascript:void(0);" id="scroll_up"><img src="images/scrolltop.png" id="scroll_up_img" /></a><div id="scrollbar"><div id="scrollnob"><img src="images/scrollnob.png" /></div></div><a href="javascript:void(0);" id="scroll_down"><img src="images/scrollbottom.png" style="margin-top:15px;" /></a></div> \
						<p class="text" id="text_scroll"><img src="images/text/'+ sublink +'.png" alt="company" /><br />&nbsp;<br />&nbsp;</p>'
					
					});
					
					line.inject($('extra_bg'));
					line.set('morph',{duration: 'long'});
					line.morph({'margin-top':'-600px','opacity':1,"height":"210px"});
					
					setupScrollbars.delay(1300);
					
					// what do i do on a new link being clicked?
					onchange_sublink_sub += '$("services_sub_'+ sublink +'").setProperty("src",$("services_sub_'+ sublink +'").getProperty("src").replace("-on.png",".png")); \
					var line = $("content"); \
					line.morph({ "margin-top":"-400px","opacity":0, "height":"10px" }); \
					(function() { line.dispose(); }).delay(1200);';
					
					window.canchange = true;
					
					}).delay(650);
					
				
				}//,
				//function() {
				//	$("extra_bg").setStyle("background-image","url(images/backgrounds/stop.jpg)");
				//	onchange_sublink_sub += '$("extra_bg").setStyle("background-image","none"); ';
				//}
			
			);
			seq.run();
			
		}
	
	}
		
	window.profile_link = function() {
			
		if(window.canchange) {
			
			window.canchange = false;
			
			var seq = new Sequence();
			seq.chain(
				function() { runchange(); },
				function() {
			
					// turn link white
					$("link_profile").setProperty("src",$("link_profile").getProperty("src").replace(".gif","-on.gif"));
				
					// what do i do on a new link being clicked?
					onchange += '$("link_profile").setProperty("src",$("link_profile").getProperty("src").replace("-on.gif",".gif"));';
			
				},
				function() {
					
					(function() {
				
					// create a new white line to move down
					var line = new Element('div',{
					
						id: "sublinks",
						styles: {
							'height': '3px',
							'background-color': '#fff',
							'width': '100%',
							'float': 'left',
							'font-size': '10px',
							'margin': '-272px 0px 0px 0px',
							'opacity': 0
							
						},
						html: '<p style="margin-left:420px"><a href="javascript:void(0);" onclick="profile_sublink(\'company\');"><img src="images/sublinks/company.png" id="profile_sub_company" /></a><br /><a href="javascript:void(0);" onclick="profile_sublink(\'solicitors\');"><img src="images/sublinks/solicitors.png" id="profile_sub_solicitors" /></a></p>'
					
					});
					
					line.inject($('extra_bg'));
					line.set('morph',{duration: 'long'});
					line.morph({'margin-top':'-262px','opacity':1});
					
					// what do i do on a new link being clicked?
					onchange += 'var subs = $("sublinks"); \
					subs.morph({ "margin-top":"-272px","opacity":0 }); \
					(function() { subs.dispose(); }).delay(1200); ';
					
					window.canchange = true;
					
					}).delay(650);
				
				}
			);
			seq.run();	
			
		}
	
	};
	
	window.profile_sublink = function(sublink) {
		
		if(window.canchange) {
			
			window.canchange = false;
	
			switch(sublink) {
			
				case "company":
		
					var seq = new Sequence(
					
						function() {
							runchange_sublink();
						},
						function() {
							$("profile_sub_company").setProperty("src",$("profile_sub_company").getProperty("src").replace(".png","-on.png"));
						},
						function() {
							
							(function() {
							
							// create a new white line to move down
							var line = new Element('div',{
							
								id: "content",
								styles: {
									'border-top': '3px solid #fff',
									'width': '100%',
									'height': '0px',
									'float': 'left',
									'font-size': '10px',
									'margin': '-400px 0px 0px 0px',
									'opacity': 0
									
								},
								html: '<p class="title"><img src="images/titles/company.png" alt="company"></p> \
								<div style="height:2px; background-color:#fff; float:left; width:100%; font-size:0px;">&nbsp;</div> \
								<div id="scrollarea"><a href="javascript:void(0);" id="scroll_up"><img src="images/scrolltop.png" id="scroll_up_img" /></a><div id="scrollbar"><div id="scrollnob"><img src="images/scrollnob.png" /></div></div><a href="javascript:void(0);" id="scroll_down"><img src="images/scrollbottom.png" style="margin-top:15px;" /></a></div> \
								<p class="text" id="text_scroll"><img src="images/text/company.png" alt="company" /><br />&nbsp;<br />&nbsp;</p>'
							
							});
							
							line.inject($('extra_bg'));
							line.set('morph',{duration: 'long'});
							line.morph({'margin-top':'-600px','opacity':1,"height":"210px"});
							
							setupScrollbars.delay(1300);
							
							// what do i do on a new link being clicked?
							onchange_sublink += '$("profile_sub_company").setProperty("src",$("profile_sub_company").getProperty("src").replace("-on.png",".png")); \
							var line = $("content"); \
							line.morph({ "margin-top":"-400px","opacity":0, "height":"10px" }); \
							(function() { line.dispose(); }).delay(1200);';
							
							window.canchange = true;
							
							}).delay(650);
						
						}//,
						//function() {
						//	$("extra_bg").setStyle("background-image","url(images/backgrounds/stop.jpg)");
						//	onchange_sublink += '$("extra_bg").setStyle("background-image","none"); ';
						//}
					
					);
					seq.run();
					
				break;
				
				case "solicitors":
		
					var seq = new Sequence(
					
						function() {
							runchange_sublink();
						},
						function() {
																		
							$("profile_sub_solicitors").setProperty("src",$("profile_sub_solicitors").getProperty("src").replace(".png","-on.png"));
	
						},
						function() {
							
							(function() {
							
							// what do i do on a new link being clicked?
							onchange_sublink = '$("profile_sub_solicitors").setProperty("src",$("profile_sub_solicitors").getProperty("src").replace("-on.png",".png"));';
	
							var pad = (Browser.Engine.trident5) ? "-60" : "-64";
	
							// create sublinks
							var subs = new Element('p', {
								id: 'sublinks2',
								styles: { 
									'opacity': 0, 
									'margin': pad+'px 0px 0px 480px'
								},
								html: '<a href="javascript:void(0);" onclick="profile_sublink_sub(\'james-gerard-ohare\');"><img src="images/sublinks/james-gerard-ohare.png" id="profile_sub_james-gerard-ohare" /></a><br /> \
								<a href="javascript:void(0);" onclick="profile_sublink_sub(\'colm-owens\');"><img src="images/sublinks/colm-owens.png" id="profile_sub_colm-owens" /></a><br />\
								<a href="javascript:void(0);" onclick="profile_sublink_sub(\'brendan-guinness\');"><img src="images/sublinks/brendan-guinness.png" id="profile_sub_brendan-guinness" /></a><br />\
								<a href="javascript:void(0);" onclick="profile_sublink_sub(\'maura-herron\');"><img src="images/sublinks/maura-herron.png" id="profile_sub_maura-herron" /></a><br />\
								<a href="javascript:void(0);" onclick="profile_sublink_sub(\'linda-emery\');"><img src="images/sublinks/linda-emery.png" id="profile_sub_linda-emery" /></a><br />\
								<a href="javascript:void(0);" onclick="profile_sublink_sub(\'kathy-downey\');"><img src="images/sublinks/kathy-downey.png" id="profile_sub_kathy-downey" /></a><br />\
								<a href="javascript:void(0);" onclick="profile_sublink_sub(\'emily-shanks\');"><img src="images/sublinks/emily-shanks.png" id="profile_sub_emily-shanks" /></a>'
							});		
							
							subs.inject($('sublinks'));
							subs.set('morph',{duration: 'long'});
							subs.morph({'margin-left':'540px','opacity':1});
							
							onchange_sublink += 'var line = $("sublinks2"); \
							line.morph({ "margin-left":"480px","opacity":0 }); \
							(function() { line.dispose(); }).delay(1200);';
							
							window.canchange = true;
							
							}).delay(650);
						
						}
					
					);
					seq.run();
					
				break;
			
			}
			
		}
	
	}
	
	window.profile_sublink_sub = function(sublink) {
		
		if(window.canchange) {
			
			window.canchange = false;
	
			var seq = new Sequence(
			
				function() {
					runchange_sublink_sub();
				},
				function() {
									
						$("profile_sub_"+ sublink).setProperty("src",$("profile_sub_"+ sublink).getProperty("src").replace(".png","-on.png"));
		
				},
				function() {
					
					(function() {
					
					// create a new white line to move down
					var line = new Element('div',{
					
						id: "content",
						styles: {
							'border-top': '3px solid #fff',
							'width': '100%',
							'height': '0px',
							'float': 'left',
							'font-size': '10px',
							'margin': '-400px 0px 0px 0px',
							'opacity': 0
							
						},
						html: '<p class="title"><img src="images/titles/'+ sublink +'.png" alt="'+ sublink +'"></p> \
						<div style="height:2px; background-color:#fff; float:left; width:100%; font-size:0px;">&nbsp;</div> \
						<div id="scrollarea"><a href="javascript:void(0);" id="scroll_up"><img src="images/scrolltop.png" id="scroll_up_img" /></a><div id="scrollbar"><div id="scrollnob"><img src="images/scrollnob.png" /></div></div><a href="javascript:void(0);" id="scroll_down"><img src="images/scrollbottom.png" style="margin-top:15px;" /></a></div> \
						<p class="text" id="text_scroll"><img src="images/text/'+ sublink +'.png" alt="company" /><br />&nbsp;<br />&nbsp;<br />&nbsp;</p>'
					
					});
					
					line.inject($('extra_bg'));
					line.set('morph',{duration: 'long'});
					line.morph({'margin-top':'-600px','opacity':1,"height":"210px"});
					
					setupScrollbars.delay(1300);
					
					// what do i do on a new link being clicked?
					onchange_sublink_sub += '$("profile_sub_'+ sublink +'").setProperty("src",$("profile_sub_'+ sublink +'").getProperty("src").replace("-on.png",".png")); \
					var line = $("content"); \
					line.morph({ "margin-top":"-400px","opacity":0, "height":"10px" }); \
					(function() { line.dispose(); }).delay(1200);';
					
					window.canchange = true;
					
					}).delay(650);
				
				}//,
				//function() {
				//	$("extra_bg").setStyle("background-image","url(images/backgrounds/stop.jpg)");
				//	onchange_sublink_sub += '$("extra_bg").setStyle("background-image","none"); ';
				//}
			
			);
			seq.run();
			
		}
	
	}
	
	window.history_link = function() {
		
		if(window.canchange) {
			
			window.canchange = false;
			
			var seq = new Sequence();
			seq.chain(
				function() { runchange(); },
				function() {
					
					// turn link white
					$("link_history").setProperty("src",$("link_history").getProperty("src").replace(".gif","-on.gif"));
				
					// what do i do on a new link being clicked?
					onchange += '$("link_history").setProperty("src",$("link_history").getProperty("src").replace("-on.gif",".gif"));';
		
				},
				function() {
					
					(function() {
			
					
					// create a new white line to move down
					var line = new Element('div',{
					
						id: "content",
						styles: {
							'border-top': '3px solid #fff',
							'width': '100%',
							'height': '0px',
							'float': 'left',
							'font-size': '10px',
							'margin': '-400px 0px 0px 0px',
							'opacity': 0
							
						},
						html: '<p class="title"><img src="images/titles/history.png" alt="history"></p> \
						<div style="height:2px; background-color:#fff; float:left; width:100%; font-size:0px;">&nbsp;</div> \
						<div id="scrollarea"><a href="javascript:void(0);" id="scroll_up"><img src="images/scrolltop.png" id="scroll_up_img" /></a><div id="scrollbar"><div id="scrollnob"><img src="images/scrollnob.png" /></div></div><a href="javascript:void(0);" id="scroll_down"><img src="images/scrollbottom.png" style="margin-top:15px;" /></a></div> \
						<p class="text" id="text_scroll"><img src="images/text/history.png" alt="history" /><br />&nbsp;<br />&nbsp;</p>'
					
					});
					
					line.inject($('extra_bg'));
					line.set('morph',{duration: 'long'});
					line.morph({'margin-top':'-600px','opacity':1,"height":"210px"});
					
					setupScrollbars.delay(1300);
					
					// what do i do on a new link being clicked?
					onchange += 'var line = $("content"); \
					line.morph({ "margin-top":"-400px","opacity":0, "height":"10px" }); \
					(function() { line.dispose(); }).delay(1200);';
					
					}).delay(650);
	
			
				},
				function() {
					
					(function() { 
				
					// create a new white line to move down
					var line = new Element('div',{
					
						id: "subblock",
						styles: {
							'height': '3px',
							'background-color': '#fff',
							'width': '100%',
							'float': 'left',
							'font-size': '10px',
							'margin': '-272px 0px 0px 0px',
							'opacity': 0
							
						},
						html: '<p style="margin:3px 0px 0px 320px; padding:0px;"><img src="images/history/1-big.jpg" alt="history image" id="history_image" height="256" /></p> \
						<div style="margin:-256px 0px 0px 58px;"> \
						<div id="history_images"><p style="width:270px;"><a href="javascript:void(0);" onclick="changeImage(1);"><img src="images/history/1-small.jpg" alt="history" /></a><a href="javascript:void(0);" onclick="changeImage(2);"><img src="images/history/2-small.jpg" alt="history" /></a><a href="javascript:void(0);" onclick="changeImage(3);"><img src="images/history/3-small.jpg" alt="history" /></a><a href="javascript:void(0);" onclick="changeImage(4);"><img src="images/history/4-small.jpg" alt="history" /></a></p></div> \
						<div id="scrollarea2"><a href="javascript:void(0);" id="scroll_left"><img src="images/scrollleft.png" /></a><div id="scrollbar2"><div id="scrollnob2"><img src="images/scrollnob2.png" /></div></div><a href="javascript:void(0);" id="scroll_right"><img src="images/scrollright.png" style="margin-left:15px;" /></a></div> \
						<p style="margin-top:8px;"><img src="images/history/1-text.png" alt="text" id="history_text" /></p></div>'
					
					});
					
					line.inject($('extra_bg'));
					line.set('morph',{duration: 'long'});
					line.morph({'margin-top':'-262px','opacity':1});
					
					var imgCount = 4;
					
					window.slider2 = new Slider($('scrollbar2'),$('scrollnob2'), {
						mode: 'horizontal',
						steps: imgCount
					}).set(0);
					
					window.slider2.addEvent('onChange',function(step) { 
					
						var scroll = $('history_images').getScrollSize();
						new Fx.Scroll($('history_images')).set((step/imgCount) * (scroll.x - 200),0);
						window.step2 = step;
					
					});
					
					window.step2 = 0;
					
					$('scroll_left').addEvent('mouseover',function() {
					
						window.myPeriodical2 = (function(){
							if(window.step2 <= 0) $clear(window.myPeriodical2);
								window.slider2.set(window.step2--);
						}).periodical(150, window.slider);
					
					});
					$('scroll_left').addEvent('mouseout',function() {
					
						$clear(window.myPeriodical2);
					
					});
					
					$('scroll_right').addEvent('mouseover',function() {
					
						window.myPeriodical2 = (function(){
							if(window.step2 == window.slider2.options.steps) $clear(window.myPeriodical2);
								window.slider2.set(window.step2++);
						}).periodical(150, window.slider2);
					
					});
					$('scroll_right').addEvent('mouseout',function() {
					
						$clear(window.myPeriodical2);
					
					});
					
					// what do i do on a new link being clicked?
					onchange += 'var line2 = $("subblock"); \
					line2.morph({ "margin-top":"-272px","opacity":0 }); \
					(function() { line2.dispose(); }).delay(1200); ';
					
					window.canchange = true;
					
					}).delay(650);
				
				}
			);
			seq.run();
			
		}
	
	};
	
	window.changeImage = function(img) {
		$('history_image').setProperty('src','images/history/'+img+'-big.jpg');
		$('history_text').setProperty('src','images/history/'+img+'-text.png');
	}
	
	window.contact_link = function() {
		
		if(window.canchange) {
			
			window.canchange = false;
			
			var seq = new Sequence();
			seq.chain(
				function() { runchange(); },
				function() {
					
					// turn link white
					$("link_contact").setProperty("src",$("link_contact").getProperty("src").replace(".gif","-on.gif"));
				
					// what do i do on a new link being clicked?
					onchange += '$("link_contact").setProperty("src",$("link_contact").getProperty("src").replace("-on.gif",".gif"));';
		
				},
				function() {
					
					(function() {
					
					// create a new white line to move down
					var line = new Element('div',{
					
						id: "content",
						styles: {
							'border-top': '3px solid #fff',
							'width': '100%',
							'height': '0px',
							'float': 'left',
							'font-size': '10px',
							'margin': '-400px 0px 0px 0px',
							'opacity': 0
							
						},
						html: '<p class="title"><img src="images/titles/contact.png" alt="contact"></p> \
						<div style="height:2px; background-color:#fff; float:left; width:100%; font-size:0px;">&nbsp;</div> \
						<p class="text"><img src="images/text/contact.png" alt="contact" /><br /><a href="javascript:void(0);" onclick="showmap();"><img src="images/text/map.png" align="right" style="margin-right:645px;" /></a><br />\
						<input type="text" class="name" id="frm_name" /><br /><input type="text" class="email" id="frm_email" /><br /><input type="text" class="subject" id="frm_subject" /></p>'
					
					});
					
					line.inject($('extra_bg'));
					line.set('morph',{duration: 'long'});
					line.morph({'margin-top':'-600px','opacity':1,"height":"210px"});
					
					// what do i do on a new link being clicked?
					onchange += 'var line = $("content"); \
					line.morph({ "margin-top":"-400px","opacity":0, "height":"10px" }); \
					(function() { line.dispose(); }).delay(1200);';
					
					}).delay(650);
	
			
				},
				function() {
					
					(function() {
				
					// create a new white line to move down
					var line = new Element('div',{
					
						id: "subblock",
						styles: {
							'height': '3px',
							'background-color': '#fff',
							'width': '100%',
							'float': 'left',
							'font-size': '10px',
							'margin': '-272px 0px 0px 0px',
							'opacity': 0
							
						},
						html: '<p style="margin:3px 0px 0px 320px; padding:0px;"><img src="images/contact-details.png" alt="contact details" align="right" style="margin:13px 658px 0px 0px;" /><br />\
						<textarea name="message" class="message" id="frm_message"></textarea><br />\
						<a href="javascript:void(0);" onclick="window.submitform();"><img src="images/submit.png" alt="submit" /></a></p>'
					
					});
					
					line.inject($('extra_bg'));
					line.set('morph',{duration: 'long'});
					line.morph({'margin-top':'-262px','opacity':1});
					
					// what do i do on a new link being clicked?
					onchange += 'var line2 = $("subblock"); \
					line2.morph({ "margin-top":"-272px","opacity":0 }); \
					(function() { line2.dispose(); }).delay(1200); ';
					
					window.canchange = true;
					
					}).delay(650);
				
				}
			);
			seq.run();
			
		}
	
	};
	
	window.showmap = function() {
		
		if(window.canchange) {
			
			window.canchange = false;
			
			var seq = new Sequence();
			seq.chain(
				function() { runchange(); },
				function() {
					
					// turn link white
					$("link_contact").setProperty("src",$("link_contact").getProperty("src").replace(".gif","-on.gif"));
				
					// what do i do on a new link being clicked?
					onchange += '$("link_contact").setProperty("src",$("link_contact").getProperty("src").replace("-on.gif",".gif"));';
	
				},
				function() {
					
					(function() {
					
					// create a new white line to move down
					var line = new Element('div',{
					
						id: "content",
						styles: {
							'border-top': '3px solid #fff',
							'width': '100%',
							'height': '0px',
							'float': 'left',
							'font-size': '10px',
							'margin': '-400px 0px 0px 0px',
							'opacity': 0
							
						},
						html: '<p style="padding:0px; margin-top:-1px;"><img src="images/map-options.png" alt="map options" usemap="#Map"></p> \
						<div style="height:2px; margin-top:-3px; background-color:#fff; float:left; width:100%; font-size:0px;">&nbsp;</div> \
						<p style="height:558px; padding:0px; margin-top:-1px;"><img src="images/map-big.png" alt="map options"> \
						<map name="Map" id="Map"><area shape="rect" coords="12,12,80,33" href="map.html" target="_blank" /><area shape="rect" coords="104,13,230,33" href="http://maps.google.co.uk/maps?f=q&amp;hl=en&amp;geocode=&amp;q=37-41+high+street,+belfast&amp;jsv=107&amp;sll=54.60327,-5.919271&amp;sspn=0.016481,0.050511&amp;ie=UTF8&amp;ll=54.599914,-5.926824&amp;spn=0.008241,0.025256&amp;z=16&amp;iwloc=addr" target="_blank" /><area shape="rect" coords="256,13,323,32" href="javascript:contact_link();" /></p>'
					
					});
					
					line.inject($('extra_bg'));
					line.set('morph',{duration: 'long'});
					line.morph({'margin-top':'-600px','opacity':1,"height":"610px"});
					
					// what do i do on a new link being clicked?
					onchange += 'var line = $("content"); \
					line.morph({ "margin-top":"-400px","opacity":0, "height":"10px" }); \
					(function() { line.dispose(); }).delay(1200);';
					
					window.canchange = true;
					
					}).delay(650);
			
				}
			);
			seq.run();
			
		}
	
	};
	
	window.submitform = function() {
		
		var send = true;
		var msg = '';
		
		if($('frm_name').value == '') {
			send = false;
			msg += '\nYou need to enter your name';
		}
		
		if(!(/^[a-z0-9._%-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i.test($('frm_email').value)) || ($('frm_email').value == '')) {
			send = false;
			msg += '\nYou need to enter a valid email address';
		}
		
		if($('frm_subject').value == '') {
			send = false;
			msg += '\nYou need to enter a subject';
		}
		
		if($('frm_message').value == '') {
			send = false;
			msg += '\nYou need to enter a message';
		}
		
		if(!send) {
			alert('We couldn\'t send your inquiry form because:\r\n'+msg);	
		}
		else {
		
			// send form
			var req = new Request({ url: 'inquiry.php', method: 'post'});
			req.addEvent('onSuccess',function() { 
				alert('Your inquiry form has been sent!\r\n\r\nA member of staff will get in touch as soon as possible!'); 
				$('frm_message').value = $('frm_name').value = $('frm_subject').value = $('frm_email').value = '';
			});
			req.send('name='+escape($('frm_name').value)+'&email='+escape($('frm_email').value)+'&subject='+escape($('frm_subject').value)+'&message='+escape($('frm_message').value));
		
		}
		
	}
	
	window.setupScrollbars = function() {
	
		window.slider = new Slider($('scrollbar'),$('scrollnob'), {
			mode: 'vertical',
			steps: 100
		}).set(0);
		
		window.slider.addEvent('onChange',function(step) { 
		
			var scroll = $('text_scroll').getScrollSize();
			new Fx.Scroll($('text_scroll')).set(0,(step/100) * (scroll.y - 166));
			window.step = step;
		
		});
		
		window.step = 0;
		
		$('scroll_up').addEvent('mouseover',function() {
		
			window.myPeriodical = (function(){
				if(window.step <= 0) $clear(window.myPeriodical);
					window.slider.set(window.step--);
			}).periodical(20, window.slider);
		
		});
		$('scroll_up').addEvent('mouseout',function() {
		
			$clear(window.myPeriodical);
		
		});
		
		$('scroll_down').addEvent('mouseover',function() {
		
			window.myPeriodical = (function(){
				if(window.step == window.slider.options.steps) $clear(window.myPeriodical);
					window.slider.set(window.step++);
			}).periodical(20, window.slider);
		
		});
		$('scroll_down').addEvent('mouseout',function() {
		
			$clear(window.myPeriodical);
		
		});
	
	}

	
	// utility class to create a chain
	// of actions
	var Sequence = new Class({
		Implements: Chain,
		initialize: function(){
			this.chain.apply(this, arguments);
		},
		run: function() {
			while(this.$chain.length > 0)
				this.callChain();
		}
	});
	
	// preload all images
	var i = [
		'images/background.jpg',
		'images/contact-details.png',
		'images/contact-on.gif',
		'images/contact.gif',
		'images/footer.gif',
		'images/history.gif',
		'images/history-on.gif',
		'images/input-email.png',
		'images/input-name.png',
		'images/input-message.png',
		'images/input-subject.png',
		'images/o-hare.gif',
		'images/profile-on.gif',
		'images/profile.gif',
		'images/scrollbottom.png',
		'images/scrollleft.png',
		'images/scrolltop.png',
		'images/scrollright.png',
		'images/scrollnob.png',
		'images/scrollnob2.png',
		'images/services-on.gif',
		'images/services.gif',
		'images/submit.png',
		'images/tagline.gif',
		'images/sublinks/accidents-at-work-on.png',
		'images/sublinks/accidents-at-work.png',
		'images/sublinks/brendan-guinness-on.png',
		'images/sublinks/brendan-guinness.png',
		'images/sublinks/civil-litigation-on.png',
		'images/sublinks/civil-litigation.png',
		'images/sublinks/colm-owens-on.png',
		'images/sublinks/colm-owens.png',
		'images/sublinks/commercial-on.png',
		'images/sublinks/commercial.png',
		'images/sublinks/commercial-property-on.png',
		'images/sublinks/commercial-property.png',
		'images/sublinks/company-on.png',
		'images/sublinks/company.png',
		'images/sublinks/conveyancing-on.png',
		'images/sublinks/conveyancing.png',
		'images/sublinks/corporate-on.png',
		'images/sublinks/corporate.png',
		'images/sublinks/emily-shanks-on.png',
		'images/sublinks/emily-shanks.png',
		'images/sublinks/employment-on.png',
		'images/sublinks/employment.png',
		'images/sublinks/finance-on.png',
		'images/sublinks/finance.png',
		'images/sublinks/james-gerard-ohare-on.png',
		'images/sublinks/james-gerard-ohare.png',
		'images/sublinks/kathy-downey-on.png',
		'images/sublinks/kathy-downey.png',
		'images/sublinks/licensing.png',
		'images/sublinks/licensing-on.png',
		'images/sublinks/linda-emery-on.png',
		'images/sublinks/linda-emery.png',
		'images/sublinks/matrimonial-and-family-on.png',
		'images/sublinks/matrimonial-and-family.png',
		'images/sublinks/maura-herron-on.png',
		'images/sublinks/maura-herron.png',
		'images/sublinks/medical-negligence-on.png',
		'images/sublinks/medical-negligence.png',
		'images/sublinks/nuala-franklin-on.png',
		'images/sublinks/nuala-franklin.png',
		'images/sublinks/other-services-on.png',
		'images/sublinks/other-services.png',
		'images/sublinks/public-liability-on.png',
		'images/sublinks/public-liability.png',
		'images/sublinks/remortgaging-on.png',
		'images/sublinks/remortgaging.png',
		'images/sublinks/residential-on.png',
		'images/sublinks/residential.png',
		'images/sublinks/road-traffic-on.png',
		'images/sublinks/road-traffic.png',
		'images/sublinks/site-development-on.png',
		'images/sublinks/site-development.png',
		'images/sublinks/solicitors-on.png',
		'images/sublinks/solicitors.png',
		'images/sublinks/wills-on.png',
		'images/sublinks/wills.png',
		'images/text/accidents-at-work.png',
		'images/text/brendan-guinness.png',
		'images/text/civil-litigation.png',
		'images/text/colm-owens.png',
		'images/text/commercial.png',
		'images/text/commercial-property.png',
		'images/text/company.png',
		'images/text/conveyancing.png',
		'images/text/corporate.png',
		'images/text/emily-shanks.png',
		'images/text/employment.png',
		'images/text/finance.png',
		'images/text/james-gerard-ohare.png',
		'images/text/kathy-downey.png',
		'images/text/licensing.png',
		'images/text/linda-emery.png',
		'images/text/matrimonial-and-family.png',
		'images/text/maura-herron.png',
		'images/text/medical-negligence.png',
		'images/text/nuala-franklin.png',
		'images/text/other-services.png',
		'images/text/public-liability.png',
		'images/text/remortgaging.png',
		'images/text/residential.png',
		'images/text/road-traffic.png',
		'images/text/site-development.png',
		'images/text/wills.png',
		'images/titles/accidents-at-work.png',
		'images/titles/brendan-guinness.png',
		'images/titles/civil-litigation.png',
		'images/titles/colm-owens.png',
		'images/titles/commercial.png',
		'images/titles/commercial-property.png',
		'images/titles/company.png',
		'images/titles/conveyancing.png',
		'images/titles/corporate.png',
		'images/titles/emily-shanks.png',
		'images/titles/employment.png',
		'images/titles/finance.png',
		'images/titles/james-gerard-ohare.png',
		'images/titles/kathy-downey.png',
		'images/titles/licensing.png',
		'images/titles/linda-emery.png',
		'images/titles/matrimonial-and-family.png',
		'images/titles/maura-herron.png',
		'images/titles/medical-negligence.png',
		'images/titles/nuala-franklin.png',
		'images/titles/other-services.png',
		'images/titles/public-liability.png',
		'images/titles/remortgaging.png',
		'images/titles/residential.png',
		'images/titles/road-traffic.png',
		'images/titles/site-development.png',
		'images/titles/wills.png',
		'images/text/map.png',
		'images/text/map-big.png',
		'images/text/map-options.png',
		'images/history/1-small.jpg',
		'images/history/1-big.jpg',
		'images/history/1-text.png',
		'images/history/2-small.jpg',
		'images/history/2-big.jpg',
		'images/history/2-text.png',
		'images/history/3-small.jpg',
		'images/history/3-big.jpg',
		'images/history/3-text.png',
		'images/history/4-small.jpg',
		'images/history/4-big.jpg',
		'images/history/4-text.png'
		
	];
		
	i.each(function(e) { var img = new Element('img',{ src: e } ); });

	// initial delay
	var start = 2000;
	
	// space to hold functions that should be run on section change
	var onchange = "";
	var onchange_sublink = "";
	var onchange_sublink_sub = "";
	
	// can a link change be effected?
	window.canchange = true;
	
	// timeline
	var seq = new Sequence(
		function() { line.delay(start) },
		function() { greenbox.delay(start+1200) },
		function() { background.delay(start+2000) },
		function() { footer.delay(start+2500) },
		function() { tagline.delay(start+2950) }
	);
	seq.run();
		
});