window.addEvent('domready', function() {
	var useOpacity = (!Browser.Engine.trident && navigator.appVersion.match('Chrome') == null);
	
	if (useOpacity) {
		$('sitenav').setStyle('opacity', 0);
		
		$('sitenav').set('tween', {
			'link': 'cancel',
			'duration': 250,
			'fps': 50,
			'transition': Fx.Transitions.Expo.easeIn
		});
		
		$('header').addEvents({
			'mouseenter': function() {$('sitenav').tween('opacity', 1);},
			'mouseleave': function() {$('sitenav').tween('opacity', 0)}
		});
	}
	
	$('overview').setStyle('height', 480);
	
	var stories = $$('#stories .story');
	var area = {
		'width': 960,
		'height': 320
	};
	
	var stable = false;
	(function() {stable = true;}).delay(2500);
	
	var TitleScroll = new Class({
		initialize: function(index) {
			this.index = index;
			
			this.storyIndex = index + 1;
			this.title = stories[this.storyIndex].getElement('h4');
			
			this.styles = {
				'font-size': 30 * Math.pow(1.5, 4 - this.index),
				'line-height': 30 * Math.pow(1.5, 4 - this.index),
				'color': '#505050'
			};
			
			if (useOpacity) {
				this.styles['opacity'] = 0.1 * (5 - this.index);
				this.styles['color'] = '#505050';
			}
			else {
				var b = (80 + 10 * index).toString(16);
				this.styles['color'] = '#' + b + b + b;
			}
			
			this.title.setStyles(this.styles);
			
			if (Browser.Engine.trident) {
				this.title.getElement('a').setStyle('color', this.styles['color']);
			}
			
			if (Browser.Engine.webkit && useOpacity) {
				this.title.setStyle('text-shadow', '0 0 ' + Math.round(3 * Math.pow(1.5, 4 - this.index)) + 'px rgba(80, 80, 80, ' + (0.2 * (this.index + 1)) + ')');
			}
			
			this.period = null;
			this.delay = this.go.delay(2500 * Math.pow(2, this.index), this);
		},
		stop: function() {
			$clear(this.period);
			$clear(this.delay);
			this.title.get('tween').cancel();
		},
		advance: function() {
			this.storyIndex = (this.storyIndex + 1) % stories.length;
			
			this.title = stories[this.storyIndex].getElement('h4');
			this.title.setStyle('visibility', '');
			
			if (Browser.Engine.trident) {
				this.title.getElement('a').setStyle('color', this.styles['color']);
			}
			
			if (Browser.Engine.webkit && useOpacity) {
				this.title.setStyle('text-shadow', '0 0 ' + Math.round(3 * Math.pow(1.5, 4 - this.index)) + 'px rgba(80, 80, 80, ' + (0.2 * (this.index + 1)) + ')');
			}
			
			var a = (area.height - 30) * Math.pow(1.5, - 1 - this.index);
			var b = 30 * Math.pow(1.5, 3 - this.index);
			
			var c = - (this.title.getStyle('top').toInt() + 15 + 0.6 * (area.height - 30 - a) + b) / (a - b);
			
			var d = (area.height - 30) * Math.pow(1.5, - this.index);
			var e = 30 * Math.pow(1.5, 4 - this.index);
			
			var styles = new Object();
			for (var key in this.styles) {styles[key] = this.styles[key];}
			styles['top'] = - 15 - 0.6 * (area.height - 30 - d) - e - (d - e) * c;
			
			var left = area.width / 2 + (this.title.getStyle('left').toInt() - area.width / 2) * 1.5;
			styles['left'] = Math.max(- this.title.getSize().x * 1.5, Math.min(area.width, left));
			
			this.title.get('morph').start(styles).chain(
				function() {this.resume.delay(250, this);}.bind(this)
			);
			
			if (Browser.Engine.trident) {
				this.title.getElement('a').tween('color', this.styles['color']);
			}
		},
		go: function() {
			var time = 10000 * ((this.title.getSize().x + area.width) / area.width) * Math.pow(1.25, this.index);
			
			this.title.set('tween', {
				duration: time,
				fps: 25,
				link: 'cancel',
				transition: Fx.Transitions.linear
			});
			
			this.period = this.scroll.periodical((2 - Math.pow(1.25, this.index - 5)) * time, this);
			this.scroll();
		},
		resume: function() {
			this.title.set('tween', {
				duration: 10000 * ((this.title.getSize().x + this.title.getStyle('left').toInt()) / area.width) * Math.pow(1.25, this.index),
				fps: 25,
				link: 'cancel',
				transition: Fx.Transitions.linear
			});
			
			var time = 10000 * ((this.title.getSize().x + area.width) / area.width) * Math.pow(1.25, this.index);
			
			if (this.title.getStyle('left').toInt() < area.width && this.title.getStyle('left').toInt() > - this.title.getSize().x) {
				this.title.get('tween').start('left', - this.title.getSize().x).chain(function() {
					this.title.setStyle('left', area.width);
					this.delay = this.go.delay((1 - Math.pow(1.25, this.index - 5)) * time, this);
				}.bind(this));
			}
			else {
				this.delay = this.go.delay(2500 * (Math.pow(2, this.index) - 1), this);
			}
		},
		scroll: function() {
			var a = (area.height - 30) * Math.pow(1.5, - this.index);
			var b = 30 * Math.pow(1.5, 4 - this.index);
			
			var c = Math.random() - 0.5;
			
			this.title.setStyle('top', - 15 - 0.6 * (area.height - 30 - a) - b - (a - b) * ((1 - 2 * (c < 0)) * Math.pow(Math.abs(c/2), 1/2) + 0.5));
			this.title.get('tween').start('left', - this.title.getSize().x).chain(
				function() {this.title.setStyle('left', area.width);}.bind(this)
			);
		}
	});
	
	var titleFX = new Fx.Elements(stories.getElement('h4'), {
		duration: 1000,
		fps: 50,
		link: 'cancel',
		transition: Fx.Transitions.Expo.easeInOut
	});
	
	var scrollers = new Array();
	stories.each(function(story, i) {
		var title = story.getElement('h4');
		
		story.setStyles({
			position: 'absolute',
			bottom: 0,
			'z-index': stories.length - i - 1
		});
		
		title.set('morph', {
			duration: 500,
			fps: 50,
			link: 'cancel',
			transition: Fx.Transitions.Quad.easeInOut
		});
		
		title.getElement('a').set('tween', {
			duration: 500,
			fps: 50,
			link: 'cancel',
			transition: Fx.Transitions.Quad.easeInOut
		});
		
		story.getElement('.layers').set('tween', {
			duration: 1000,
			fps: 50,
			link: 'cancel',
			transition: Fx.Transitions.Expo.easeInOut
		});
		
		story.getElement('p').set('tween', {
			duration: 1000,
			fps: 50,
			link: 'cancel',
			transition: Fx.Transitions.Expo.easeInOut
		});
		
		story.getElement('h4').setStyles({
			top: -5 - 0.6 * area.height,
			left: area.width
		});
		story.getElement('.layers').setStyle('right', area.width);
		story.getElement('p').setStyle('left', area.width);
		
		
		if (i == 0) {
			title.setStyles({
				'font-size': 30 * Math.pow(1.5, 4),
				'line-height': 30 * Math.pow(1.5, 4),
				'color': '#505050'
			});
			
			if (useOpacity) {
				title.setStyle('opacity', 0.5);
			}
			
			if (Browser.Engine.webkit && useOpacity) {
				title.setStyle('text-shadow', '0 0 15px rgba(80, 80, 80, 0.2)');
			}
			
			if (Browser.Engine.trident) {
				title.getElement('a').setStyle('color', '#505050');
			}
		}
		else if (i > 0 && i <= 5) {
			scrollers[i-1] = new TitleScroll(i-1);
		}
		
		var thumbs = story.getElements('.layers img');
		
		thumbs.each(function(thumb, j) {
			thumb.setStyles({
				'z-index': thumbs.length - 1 - j,
				opacity: 1 * (j < 2)
			});
		});
		
		thumbs.set('tween', {
			duration: 2000,
			fps: 50,
			link: 'cancel',
			transition: Fx.Transitions.Sine.easeInOut,
			onComplete: function() {
				thumbs.each(function(thumb) {
					thumb.setStyle('z-index', (thumb.getStyle('z-index').toInt() + 1) % thumbs.length);
					if (thumb.getStyle('z-index') == thumbs.length - 2) {
						thumb.setStyle('opacity', 1);
					}
				});
			}
		});
	});
	
	if (stories.length > 0) {
		if (useOpacity) {
			$('overview').getElement('.navi').setStyle('opacity', 0);
			
			$('overview').getElement('.navi').set('tween', {
				duration: 250,
				fps: 50,
				link: 'cancel',
				transition: Fx.Transitions.Expo.easeIn
			});
			
			$('overview').addEvents({
				'mouseenter': function() {
					$('overview').getElement('.navi').tween('opacity', 1);
				},
				'mouseleave': function() {
					$('overview').getElement('.navi').tween('opacity', 0);
				}
			});
		}
		else {
			$('overview').addEvents({
				'mouseenter': function() {
					$('overview').getElement('.navi').setStyle('visibility', 'visible');
				},
				'mouseleave': function() {
					$('overview').getElement('.navi').setStyle('visibility', 'hidden');
				}
			});
		}
		
		var presentation = {
			storyIndex: 0,
			banner: null,
			slideshow: null,
			show: function() {
				var title = stories[this.storyIndex].getElement('h4');
				
				var styles = [{}, {}];
				
				styles[0][this.storyIndex] = {'left': (area.width - title.getSize().x) / 2};
				
				if (useOpacity) {
					styles[0][this.storyIndex]['opacity'] = 1;
				}				
				
				styles[1][this.storyIndex] = {
					'font-size': 15,
					'line-height': 30,
					left: 388,
					top: 6,
					color: '#282828'
				};
				
				titleFX.start(styles[0]);
				
				(function() {
					titleFX.start(styles[1]);
					
					if (Browser.Engine.trident) {
						title.getElement('a').tween('color', styles[1][this.storyIndex]['color']);
					}
					
					stories[this.storyIndex].getElement('.layers').tween('right', 572);
					stories[this.storyIndex].getElement('p').tween('left', 388);
					
					if (this.banner) {this.banner.tween('opacity', 1);}
				}).delay(1250, this);
				
				if (Browser.Engine.webkit && useOpacity) {
					title.setStyle('text-shadow', '');
				}
				
				var thumbs = stories[this.storyIndex].getElements('.layers img');
				
				if (thumbs.length > 0) {
					var src = thumbs[Math.round(Math.random() * thumbs.length) % thumbs.length].getProperty('src');
					
					this.banner = new Element('img', {
						src: src.replace(/_128\.jpg$/, '_banner.jpg'),
						alt: '',
						styles: {opacity: 0}
					}).inject($('header'), 'top');
					
					this.banner.set('tween', {
						duration: 1000,
						fps: 50,
						link: 'cancel',
						transition: Fx.Transitions.Sine.easeInOut
					});
				}
					
				if (thumbs.length > 1) {this.slideshow = this.cycle.periodical(4000, this);}
			},
			hide: function() {
				var styles = {};
				styles[this.storyIndex] = {left: area.width};
				
				if (this.banner) {
					this.banner.get('tween').start('opacity', 0).chain(
						function() {
							this.banner.destroy();
						}.bind(this)
					);
				}
				
				titleFX.start(styles).chain(
					function() {
						stories[this.storyIndex].getElement('h4').setStyles({
							'font-size': 20,
							'line-height': 20,
							top: -7 - 0.6 * area.height,
							left: area.width
						});
					}.bind(this)
				);
							
				stories[this.storyIndex].getElement('.layers').tween('right', area.width);
				stories[this.storyIndex].getElement('p').tween('left',  area.width);
			},
			advance: function() {
				stable = false;
				
				$clear(this.slideshow);
				
				scrollers.each(function(scroller) {scroller.stop();});
				this.hide();
				
				(function() {
					stories.each(function(story) {
						story.setStyle('z-index', (story.getStyle('z-index').toInt() + 1) % stories.length);
					});
					
					this.storyIndex = (this.storyIndex + 1) % stories.length;
					
					this.show();
				}).delay(1250, this);
				
				(function() {
					scrollers.each(function(scroller) {scroller.advance();});
				}).delay(2750);
				
				(function() {stable = true;}).delay(4000);
			},
			cycle: function() {
				var thumbs = stories[this.storyIndex].getElements('.layers img');
				
				thumbs.each(function(thumb, i) {
					if (thumb.getStyle('z-index') == thumbs.length - 1) {
						thumb.tween('opacity', 0);
					}
				});
			}
		};
		
		presentation.show();
	}
	
	if (stories.length > 1) {
		$('overview').getElement('.navi').setStyle('display', 'block');
		
		$('overview').getElement('.navi .next').addEvent('click', function(e) {
			e.stop();
			if (stable) {presentation.advance();}
		});
	}
});