var Site = {
	fourbiglinks: function(){
		var sections = [$('ferrybuilders'), $('residential'), $('commercial'), $('contactus')];			// the sections array holds the element id's of the fourbiglinks, helps keep amount of code to a minimum
		var srcStrings = ['ferrybuilders', 'residential', 'commercial', 'contactus'];			// need this array of strings for building urls or image tags
		
		var currentMyIndex = -1;			// aids in coloring the active and inactive tabs so we can switch between them all. They are initially set to -1 so they don't reference an array address
		var pastMyIndex = -1;
		
		
		var opacityFx = new Fx.Tween('dynamic','opacity', {link: 'cancel'});
		
		sections.each(function(myElement, myIndex, myArray){			// goes through the sections array, plus gives me access to the element, its position in the index and the complete array if I need it
			
			var myImg = myElement.getElements('img.switchsrc');			// myImg gives me access to the section name image
			
			
			var mybgFx = new Fx.Tween(myElement, 'background-color', {link: 'cancel'});			// the background color effect, so I can change it from grey to white as needed. the link makes sure it acts correctly
			
			
			myElement.addEvents({			// add event handlers to the element
				'mouseenter': function() {			// What happens when we hover a big link? We change the background-color and set the img src to black text
					mybgFx.start('#ffffff');
					myImg.set('src', 'images/fourbiglinks/' + srcStrings[myIndex] + 'black.png');
				},
				'mouseleave': function() {			// what happens when we leave a big link? As long as the big link isn't the active one, we reset the grey background-color and make the text white
					if (currentMyIndex != myIndex) {
						mybgFx.start('#7e8083');
						myImg.set('src', 'images/fourbiglinks/' + srcStrings[myIndex] + '.png');
					}
				},
				'click': function() {			// A lot probably happens when we click a link...
					pastMyIndex = currentMyIndex;			// First, we take care of making a past element not active, so we need to set the current and past index's
					currentMyIndex = myIndex;
					if (pastMyIndex != -1) {			// Here we change the old active section back to non-active
						new Fx.Tween(myArray[pastMyIndex], 'background-color').start('#7e8083');
						myArray[pastMyIndex].getElements('img.switchsrc').set('src', 'images/fourbiglinks/' + srcStrings[pastMyIndex] + '.png');
					}
					
					mybgFx.start('#ffffff');			// Now color the new active section and set the text to black
					myImg.set('src', 'images/fourbiglinks/' + srcStrings[myIndex] + 'black.png');
					
					new Request.HTML({
						url: srcStrings[myIndex] + '.html',
						onRequest: function(){
							opacityFx.start(0);
						},
						onComplete: function(responseTree, responseElement, responseHTML, responseJavascript){
							(function(){$('dynamic').set('html', responseHTML)}).delay(500);
							if (currentMyIndex != 0) {
								$('footersmalllogo').set('opacity', '1');
							} else {
								$('footersmalllogo').set('opacity', '0');
							}
							
							(function(){opacityFx.start(1)}).delay(500);
							(function(){setupZoom()}).delay(1000);
						},
						onFailure: function(){}
					}).get();
					
				}
			});
		});
		
		sections[0].fireEvent('click');
	}
}

window.addEvents({			// The window event handlers, domready is when the html is loaded; and load is when all images are!
	'domready': function() {
		Site.fourbiglinks();
	},
	
	'load': function(){
		
	}
	
});