window.addEvent('domready', function(){

	// set main ID names
	var containerName = 'main-image';
	var nav = 'highlight-navigation';
	// First DIV to display
	var firstDIV = 'display';
	// className for active nav links
	var navActive = 'active';

/* ------------------------------------------------------------------------
			No Need to Edit Below
------------------------------------------------------------------------ */

	// gets all the links in the navigation for the transitions
	var navigation = $(nav).getElements('a');
	var visibleDiv = $(firstDIV);
	var tempNav = $(nav).getElement('a[rel='+firstDIV+']');
	tempNav.addClass(navActive);

	
	// Runs the function fadeOutIn whenever a link is clicked
	navigation.addEvent('click', fadeOutIn);
		
	// Function to change which is DIV is visible
	function fadeOutIn(event) {
		if(this.getProperty('rel') != 'ignore') {
		$(nav).getElements('a').removeClass(navActive);
		this.addClass(navActive);
		var tempNav = this;
		new Event(event).stop();
		var soonVisible = this.getProperty('rel');
		soonVisible = $(soonVisible);
		var slideText = new Fx.Slide(soonVisible.getElement('div'), {duration: 1000});
		if(visibleDiv != soonVisible) {
			var fadeOut = visibleDiv.effects({duration: 600});
			fadeOut.start({'opacity': [1, 0]});
			var fadeIn = soonVisible.effects({duration: 600});
			fadeIn.start({'opacity': [0, 1]});
			slideText.hide();
			slideText.slideIn();
			}
		visibleDiv = soonVisible;
		}
	}
	
});