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);
	
	$$('#galleries .layers img').each(function(tile) {
		var source = tile.getProperty('src');
		var thumb = new Element('img', {
			src: source.replace(/_128.jpg$/, '_64.jpg'),
			alt: ''
		});
		thumb.inject('thumbs');
	});
	
	var area = {
		width: 912,
		height: 480
	};
	
	$$('#thumbs img').setStyles({
		position: 'absolute',
		top: area.height
	});
	
	var snowDelay = 50 * Math.sqrt(area.height);
	var snowInterval = null;
	var snowDelays = new Array($$('#thumbs img').length);
	var snowPosition = 0;
	
	$$('#thumbs img').set('tween', {
		duration: 5 * snowDelay,
		fps: 25,
		link: 'cancel',
		transition: Fx.Transitions.Quad.easeIn
	});
	
	var snow = function() {
		var currentPos = snowPosition;
		
		$$('#thumbs img').each(function(thumb, i) {
			var j = (i + $$('#thumbs img').length - currentPos) % $$('#thumbs img').length;
			
			snowDelays[i] = (function() {
				if (thumb.getStyle('top').toInt() >= area.height) {
					snowPosition = (snowPosition + 1) % $$('#thumbs img').length;
					
					var c = Math.random() - 0.5;
					thumb.setStyle('left', (area.width - 86) * ((1 - 2 * (c < 0)) * 2 * Math.pow(c, 2) + 0.5));
					thumb.tween('top', -86, area.height);
				}
			}).delay(snowDelay * j);
		});
	}
	
	var galleries = $$('#galleries .gallery');
	var galleryIndex = 0;
	
	galleries.each(function(gallery, i) {
		var thumbs = gallery.getElements('.layers img');
		
		gallery.setStyles({
			position: 'absolute',
			width: 4,
			height: 4,
			top: -5,
			margin: 0
		});
		
		gallery.getElement('h4').setStyle('display', 'none');
		
		thumbs.each(function(thumb, j) {
			thumb.setStyles({
				'z-index': thumbs.length - 1 - j,
				opacity: 1 * (j < 2)
			});
		});
		
		gallery.set('morph', {
			duration: 1500,
			fps: 50,
			link: 'cancel',
			transition: Fx.Transitions.Expo.easeInOut
		});
		
		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);
					}
				});
			}
		});
	});
	
	var Presentation = new Class({
		initialize: function(index) {
			this.counter = 0;
			this.stable = false;
			this.gallery = galleries[index];
			galleryIndex = index;
			
			this.morphs = [
				{
					top: [-5, -5],
					left: [118 + 240 * index, 118 + 240 * index],
					height: [4, (area.height + 128) / 2 + 5],
					width: [4, 4]
				},
				{
					top: (area.height - 128) / 2,
					left: 56 + 240 * index,
					height: 128,
					width: 128
				},
				{
					left: 118 + 240 * index,
					height: (area.height + 128) / 2 + 5,
					width: 4
				},
				{
					height: 4,
					top: area.height + 1
				}
			];
		},
		show: function() {
			this.gallery.get('morph').start(this.morphs[0]).chain(
				function() {this.gallery.get('morph').start(this.morphs[1]);}.bind(this),
				function() {
					this.gallery.getElement('h4').setStyles({
						display: 'block',
						visibility: ''	
					});
					
					this.stable = true;
				}.bind(this)
			);
		},
		cycle: function() {
			if (this.stable) {
				var thumbs = this.gallery.getElements('.layers img');
				
				var stable = true;
				presentations.each(function(presentation) {
					stable = (stable && presentation.stable);
				});
				
				if (this.counter < thumbs.length || galleries.length <= 3 || this.gallery.getElement('h4').getStyle('visibility') == 'visible' || !stable) {
					thumbs.each(function(thumb, i) {
						if (thumb.getStyle('z-index') == thumbs.length - 1 && thumbs.length > 1) {
							thumb.tween('opacity', 0);
						}
					});
					
					this.counter = Math.min(this.counter + 1, thumbs.length);
				}
				else if (this.counter >= thumbs.length && galleries.length > 3 && this.gallery.getElement('h4').getStyle('visibility') == 'hidden' && stable) {
					this.stable = false;
					this.hide();
				}
			}
		},
		hide: function() {
			this.counter = 0;
			
			this.gallery.getElement('h4').setStyles({
				display: 'none',
				visibility: 'hidden'
			});
			
			this.gallery.get('morph').start(this.morphs[2]).chain(
				function() {this.gallery.get('morph').start(this.morphs[3]);}.bind(this),
				function() {
					galleryIndex = (galleryIndex + 1) % galleries.length;
					presentations.each(function(presentation) {
						if (presentation.gallery == galleries[galleryIndex]) {
							galleryIndex = (galleryIndex + 1) % galleries.length;
						}
					});
					
					this.gallery = galleries[galleryIndex];
					
					this.show.delay(500, this);
				}.bind(this)
			);
		}
	});
	
	$('overview').addEvents({
		mouseenter: function() {
			snowInterval = snow.periodical(snowDelay * $$('#thumbs img').length);
			snow();
		},
		mouseleave: function() {
			$clear(snowInterval);
			
			for(var i = 0; i < snowDelays.length; i++) {
				$clear(snowDelays[i]);
			}
		}
	});
	
	if (galleries.length > 3) {
		$('overview').getElement('.navi').setStyle('display', 'block');
		
		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').addEvent('mouseenter', function() {
				$('overview').getElement('.navi').tween('opacity', 1);
			});
			
			$('overview').addEvent('mouseleave', function() {
				$('overview').getElement('.navi').tween('opacity', 0);
			});
		}
		
		var delay = null;
		
		$('overview').getElement('.navi .down').addEvent('click', function(e) {
			e.stop();
			
			var ready = false;
			presentations.each(function(presentation) {
				ready = (ready || presentation.stable);
			});
			
			if (ready) {
				$clear(delay);
				$clear(period);
				period = null;
				
				presentations.each(function(presentation, i) {
					if (presentation.stable) {
						presentation.stable = false;
						presentation.hide.delay(250 * i, presentation);
					}
				});
				
				delay = (function() {
					period = cycle.periodical(4000);
				}).delay(3500);
			}
		});
	}
	
	presentations = new Array();
	for (var i = 0; i < Math.min(3, galleries.length); i++) {
		presentations[i] = new Presentation(i);
		presentations[i].show.delay(250 * i, presentations[i]);
	}
	
	var cycle = function() {
		presentations.each(function(presentation, i) {
			presentation.cycle.delay(250 * i, presentation);
		});
	}
	
	var period = cycle.periodical(4000);
});