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

	var togglers = $('accordion').getElements('h1');

	var subnavID = "intro";
	var togglerID = "about";
	$('about').getElements('a').setStyle('color', '#EEEEEE');
	
	
	// toggler navigation event listener
	$$('.toggler').addEvent('click', function(e){
		
		togglerID = this.getProperty('id');
		
		$('accordion').getElements('a').setStyle('color', '#000000');
		this.getElements('a').setStyle('color', '#EEEEEE');
			
		getBackground(togglerID);
		$('contentbox').empty();
		subnavID = "intro";
		getContent(togglerID, subnavID);
		
	});
	
	// subnavigation event listeners
	$$('#accordion li').addEvent('click', function(e){
		subnavID = this.getProperty('id');
		var myParentDiv = this.getParent('div');
		var myParentDivID = myParentDiv.getProperty('id');
		togglerID = myParentDivID;
		getContent(togglerID, subnavID);
				
	});
	
	
	function getBackground(togglerID) {
	
		var background = new Asset.image('images/backgrounds/' + togglerID + '.jpg', { 		
			id: 'bkgImage',
			onload: function(){
				$('bkgimage').empty();
				background.inject($('bkgimage'));
			}
		});	
	}

	

	function getContent(togglerID, subnavID) {
	
		$('contentbox').empty();
	
		var imageLoader = new Element('div', {
			id: 'imageLoader',
			'styles': {
				'float': 'right',
				'text-decoration': 'none',
				'padding': '20px',
				'margin-top': '35px'
			}
		});
		
		var textHolder = new Element('div', {
			id: 'textHolder',
		    'styles': {
				'font-family': '"Helvetica Neue", Tahoma, sans-serif',
				'font-size': '12px',
				'color': '#000000'
			 }
		}); 

			
		function getText(togglerID, subnavID) {	

			var req = new Request.HTML({
			    onSuccess: function(responseTree, responseElements, responseHTML) {
			        var myElement = responseElements.filter('#' + subnavID);
			        var myContent = myElement.get('html');
			        textHolder.set('html', myContent); 
			        
			        var contentLinks = textHolder.getElements('a');
			        
			        // handler for links within the content
			        contentLinks.addEvent('click', function(e){
			        	
						subnavID = this.getProperty('id');
						var mySubnav = $('accordion').getElementById(subnavID);
						
						// identify and set accordion display index
						var myParentDiv = mySubnav.getParent('div');
						var myParentDivID = myParentDiv.getProperty('id');
						var myToggler = $('accordion').getElementById(myParentDivID);
						var togglerIndex = togglers.indexOf(myToggler);
						myAccordion.display(togglerIndex);
						
						$('accordion').getElements('h1 a').setStyle('color', '#000000');
						myToggler.getElement('a').setStyle('color', '#EEEEEE');
						
						getBackground(myParentDivID);
						mySubnav.fireEvent('click', 1000);
						
					});
		        
			        getImage(togglerID, subnavID);
			        
			    }
			}).get('text/' + togglerID + '.html');
		}
		
		
		function getImage(togglerID, subnavID) {
		
			var bigImage = new Asset.image('images/' + togglerID + '/' + subnavID + '.jpg', { 		
				id: 'bigImage',
				onload: function(){
					bigImage.inject(imageLoader);
					imageLoader.inject($('contentbox'));
					textHolder.inject($('contentbox'));
				},
				onerror: function() {
					textHolder.inject($('contentbox'));
				}
			});	
		}
			
		getText(togglerID, subnavID);
			
	} // end function getContent()
	
	
	
	getContent(togglerID, subnavID);
	
	
		
});