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 articles = $$('#articles .article');
	if (articles.length > 0) {
		var titles = articles.getElement('h4 a');
		var summaries = articles.getElement('p');
		var dates = articles.getElement('.date');
		var years = articles.getElement('.date span');
		
		var options = {
			fps: 50,
			duration: 500,
			link: 'cancel',
			transition: Fx.Transitions.Quad.easeInOut
		};
		
		var dateholder = new Element('div', {'id': 'dateholder'});
		dateholder.inject($('overview').getElement('.icon'), 'after');
		
		dateholder.set('tween', {
			fps: 50,
			duration: 500,
			link: 'cancel',
			transition: Fx.Transitions.Back.easeOut
		});
		
		var articleFX = new Fx.Elements(articles, options);
		var titleFX = new Fx.Elements(titles, options);
		var summaryFX = new Fx.Elements(summaries, options);
		var dateFX = new Fx.Elements(dates, options);
		var yearFX = new Fx.Elements(years, options);
		
		var morphs = new Object();
		morphs['article'] = new Object();
		morphs['title'] = new Object();
		morphs['summary'] = new Object();
		morphs['date'] = new Object();
		morphs['year'] = new Object();
		
		var articleIndex = 0;
		var articlePeriod = null;
		
		var advance = function() {
			articleIndex = (articleIndex + 1) % articles.length;
			
			articles.each(function(article, i) {
				if (articleIndex == i) {showArticle(article)}
			});
		}
		
		var showArticle = function(target) {
			articles.each(function(article, i) {
				if (target == article) {
					$('dateholder').tween('top', 73 + 30 * i + 'px');
					articleIndex = i;
				}
				var c = 0;
				var color = '#505050'
				
				if (target == article) {
					c = 1;
					color = '#282828'
				}
				
				if (useOpacity) {
					morphs['article'][i] = {
						height: 30 + 120 * c,
						opacity: 0.5 + 0.5 * c,
						'padding-top': 15 * c
					}
					
					morphs['date'][i] = {
						width: 64 * c + (1 - c) * widths[i],
						'font-size': 12 + 3 * c,
						top: 54 * c,
						right: 3 * c
					}
					
					morphs['summary'][i] = {
						opacity: c,
						'line-height': 15 * c,
						height: 90 * c
					}
				}
				else {
					morphs['article'][i] = {
						height: 30 + 120 * c,
						'padding-top': 15 * c
					}
					
					morphs['title'][i] = {
						color: color
					}
					
					morphs['date'][i] = {
						width: 64 * c + (1 - c) * widths[i],
						'font-size': 12 + 3 * c,
						top: 54 * c,
						right: 3 * c,
						color: color
					}
					
					morphs['summary'][i] = {
						color: color,
						'line-height': 15 * c,
						height: 90 * c
					}
				}
				
				morphs['year'][i] = {
					'font-size': 15 * c,
					opacity: c
				}
			});
			
			articleFX.start(morphs['article']);
			titleFX.start(morphs['title']);
			summaryFX.start(morphs['summary']);
			dateFX.start(morphs['date']);
			yearFX.start(morphs['year']);
		}
		
		titles.each(function(title, i) {
			title.addEvent('mouseenter', function() {
				if (i != articleIndex) {
					showArticle(articles[i]);
				}
				$clear(articlePeriod);
				articlePeriod = null;
			})
		})
		
		articles.addEvent('mouseleave', function() {
			if (!articlePeriod) {
				articlePeriod = advance.periodical(4000);
			}
		});
		
		dates.addEvents({
			'mouseover': function(e) {
				e.stopPropagation();
				if (!articlePeriod) {
					articlePeriod = advance.periodical(4000);
				}
			},
			'mouseleave': function(e) {e.stopPropagation();}
		});
		
		var widths = new Array();
		
		articles.each(function(article, i) {
			if (useOpacity) {
				article.setStyles({
					height: 30,
					opacity: 0.5
				});
				
				dates[i].setStyles({
					width: 'auto',
					'font-size': 12,
					top: 0,
					right: 0
				});
					
				titles[i].setStyle('padding-top', 0);
				
				summaries[i].setStyles({
					'line-height': 0,
					opacity: 0,
					height: 0
				});
			}
			else {
				article.setStyles('height', 30);
				
				dates[i].setStyles({
					width: 'auto',
					'font-size': 12,
					top: 0,
					right: 0,
					color: '#505050'
				});
					
				titles[i].setStyles({
					'padding-top': 0,
					color: '#505050'
				});
				
				summaries[i].setStyles({
					'line-height': 0,
					color: '#505050',
					height: 0
				});
			}
			
			years[i].setStyles({
				'font-size': 0,
				opacity: 0
			});
			
			widths[i] = Math.min(64, dates[i].getSize().x);
		});
		
		showArticle(articles[0]);
		articlePeriod = advance.periodical(4000);
	}
});