var current_tab = 0;
var current_thumbnail = 0;
var current_profile = 0;

var Site = {
	init: function() {
		//console.log('Site.init()');
		
		$('top').setStyle('opacity', 0);
		$('top_extended_line').setStyle('width', 0);
		$('logo').setStyle('opacity', 0);
		
		$('content').setStyles({
			'opacity': 0,
			'height': 0
		});
		
		$('footer').setStyles({
			'opacity': 0,
			'display': 'none'
		});	
		
		if ( $chk($('nav')) ) {
			Nav.init();
		}	
	},
	
	start: function() {
		//console.log('Site.start()');
		
		var topExtendedLineFx = new Fx.Tween($('top_extended_line'), {
			duration: 750,
			transition: Fx.Transitions.Expo.easeOut,
			link: 'chain'
		});
		
		var logoFx = new Fx.Tween($('logo'), {
			duration: 500,
			transition: Fx.Transitions.Sine.easeInOut,
			link: 'chain'
		});
		
		//console.log('baseFx and logoFx set');
	
		var logo_left_coordinate = $('logo').getCoordinates().left;
		var window_width = Window.getSize().x;
		
		//console.log("Logo left coordinate: " + logo_left_coordinate);
		//console.log("Window width: " + window_width);
		
		topExtendedLineFx.start('width', window_width - logo_left_coordinate ).chain(function(){
			$('top').setStyle('opacity', 1);
					
			var top_right_coordinate = $('top').getCoordinates().right;
			//console.log("Top right coordinate: " + top_right_coordinate);
			$('top_extended_line').setStyle('width', window_width - top_right_coordinate);
			
			topExtendedLineFx.start('margin-right', window_width - top_right_coordinate).chain(function(){
				$('top_extended_line').setStyle('display', 'none');
			});
			
			logoFx.start('opacity', '1').chain(function(){
				Nav.animationStart();
				//console.log("Start animation finished.");
			});
		});
		
	}
}

var Nav = {
	init: function() {
		//console.log("Nav.init()");
		
		// Clears the web text from each link so the background image with custom font shows through
		$$('#nav li a').each(function(el, i) {
			el.set('html', '');
			el.setStyle('top', '44px');
			el.setStyle('opacity', '0');
		});
		
		Nav.behavior();
	},
	
	animationStart: function() {
		//console.log("Nav.start()");
		
		var myTimer = 0;
		var myFadeFx = [];
		var mySlideFx = [];
		
		$$('#nav li a').each(function(el, i) {
			myTimer += 100;
			
			myFadeFx[i] = new Fx.Tween(el, {
				duration: 400 + myTimer,
				transition: Fx.Transitions.Sine.easeIn,
				link: 'chain'
			});
			
			mySlideFx[i] = new Fx.Tween(el, {
				duration: 500 + myTimer,
				transition: Fx.Transitions.Back.easeOut,
				link: 'chain'
			});
			
			myFadeFx[i].start('opacity', '1');
			mySlideFx[i].start('top', '0px');			
		});
	},
	
	behavior: function() {
		//console.log("Nav.behavior()");
		
		$$('#nav li a').each(function(el, i, tabs) {
			el.addEvents({
				'mouseover': function(){
					el.setStyle('background-position', '0px -44px');
				},
				'mouseleave': function(){
					if (! el.hasClass('active')) {
						el.setStyle('background-position', '0px 0px');
					}
				},
				'click': function(event){
					event.stop();
					//console.log(el.get('id') + " clicked");
					
					if (i != current_tab) {
						var myChain = new Chain();
						var updated_content;
						var myRequest;
						
						topSlideFx = new Fx.Tween($('top'), {
							duration: 500,
							transition: Fx.Transitions.Expo.easeOut,
							link: 'chain',
							onComplete: function() { myChain.callChain() }
						});
			
						contentFx = new Fx.Morph($('content'), {
							duration: 500,
							transition: Fx.Transitions.Expo.easeOut,
							link: 'chain',
							onComplete: function() { myChain.callChain() }
						});
					
						if (i == 0) {
							//console.log("Home tab was clicked while not current.");
							
							Nav.switchTabs(tabs, i);
							
							contentFx.start({
								'opacity': 0,
								'height': 0
							}).chain(function(){
								$('content').set('html', '');
								topSlideFx.start('top', Window.getSize().y * .4).chain(function(){
									$('top').setStyle('top', '40%');
								});
							});
						} else {
							//console.log("Tab was clicked.");
							
							myRequest = new Request({
								url: this.get('href'),
								link: 'chain',
								onRequest: function(){
									//console.log('Requesting...');
								},
								onComplete: function(){
									//console.log('Request complete.');
								},
								onSuccess: function(html){
									//console.log('Request successful.');
									updated_content = html;
									myChain.callChain();
								},
								onFailure: function(html){
									//console.log('Request failed.');
									updated_content = "error";
									myChain.callChain();
								}
							});
											
							myChain.chain(
								function(){
									//console.log('Chain step 1.');
									if (current_tab == 0) {
										//console.log('Home tab is current. Make request and show it.');
										topSlideFx.start('top', Window.getSize().y * .4, 30);
									} else {
										//console.log('Home tab is not current. Collapse the content.');
										contentFx.start({
											'opacity': 0,
											'height': 0
										});
									}
									Nav.switchTabs(tabs, i);
									
								},
								function() {
									//console.log('Chain step 2.');
									myRequest.get();
								},
								function(){
									//console.log('Chain step 3.');
									$('content').set('html', updated_content);
									
									if (el.get('href') == "whoweare.html") {
										Profiles.init();
									}
									
									this.callChain();
								},
								function(){
									//console.log('Chain step 4.');
									contentFx.start({
										'opacity': 1,
										'height': 560
									});
								}
							);
							
							myChain.callChain();
						}
					}		
				}
			});
		});
	},
	
	switchTabs: function(tabs, i){
		tabs[current_tab].setStyle('background-position', '0px 0px');
		tabs[current_tab].removeClass('active');
		current_tab = i;
		tabs[current_tab].setStyle('background-position', '0px -44px');
		tabs[current_tab].addClass('active');
		//console.log('Switched tab');
	}
	
}

var Profiles = {
	init: function() {
		//console.log("Profiles.init()");
		
		current_thumbnail = 0;
		current_profile = 0;
		
		Profiles.thumbnails();
	},
	
	thumbnails: function() {
		//console.log("Profiles.thumbnails(): Thumbnail: " + current_thumbnail + ": Profile: " + current_profile);
		
		var profiles = $$('.profile');
		
		$$('.thumbnail').each(function(el, i, thumbnails) {	
			myOpacityFx = new Fx.Tween(el, {
				duration: 500
			});
			
			el.addEvents({
				'mouseover': function(){
					el.get('tween', {property: 'opacity'}).start(1);
				},
				'mouseleave': function(){
					if (! el.hasClass('active') ){
						el.get('tween', {property: 'opacity'}).start(.3);
					}
				},
				'click': function(){
					//console.log(el.get('id'));

					thumbnails[current_thumbnail].get('tween', {property: 'opacity'}).start(.3);
					thumbnails[current_thumbnail].removeClass('active');
					current_thumbnail = i;
					thumbnails[current_thumbnail].get('tween', {property: 'opacity'}).start(1);
					thumbnails[current_thumbnail].addClass('active');
					
					var previous_profile = current_profile;
					current_profile = i;
					
					profiles[previous_profile].get('morph', {duration: 750, transition: 'Expo:out'}).start({
						'top': -475,
						'opacity': 0
					});
					
					profiles[current_profile].get('morph', {duration: 1000, transition: 'Expo:out'}).start({
						'top': [475, 0],
						'opacity': [0,1]
					});
					
					var profile_height = profiles[current_profile].getStyle('height');
					
					$('profiles').get('morph', {duration: 500, transition: 'Expo:out'}).start({
						'height': profile_height
					});
					//$('profiles').setStyle('height', profile_height);
					
					//console.log(profiles[current_profile].getStyle('height'));			
				}
			});
		});
	}
}

window.addEvents({
	'domready': function() {
		//console.log('DOM Ready');
		Site.init();
	},
	
	'load': function(){
		//console.log('Locked and Loaded');
		Site.start();
	}
	
});