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)}
		});
	}
	
	if ($('story').getElement('.column .accordion')) {
		var thumbs = $$('.accordion .slide 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(/_64\.jpg$/, '_banner.jpg'),
				alt: ''
			}).inject($('header'), 'top');
		}
		
		var elLightbox = new Element('div', {'id': 'lightbox'}).inject(document.getElement('body'));
		
		if (useOpacity) {
			elLightbox.setStyle('opacity', 0);
			
			elLightbox.set('tween', {
				'link': 'ignore',
				'duration': 500,
				'fps': 50,
				'transition': Fx.Transitions.Sine.easeInOut
			});
		}
		
		var elFrame = new Element('div', {'id': 'frame'}).inject(elLightbox);
		
		var elMedia = new Element('div', {'class': 'media'}).inject(elFrame);
		
		var elNavi = new Element('div', {'class': 'navi'}).inject(elFrame);
		
		var elPrevious = new Element('a', {
			'class': 'previous',
			'href': '#'
		}).inject(elNavi);
		
		var elNext = new Element('a', {
			'class': 'next',
			'href': '#'
		}).inject(elNavi);
		
		var elClose = new Element('a', {
			'class': 'close',
			'href': '#'
		}).inject(elFrame);
		
		$$('.column .accordion h5 a').addEvent('click', function() { //prevent writing #fragment to history; only works in FF so far...
			window.location.replace(window.location.href.replace(/#.*/, '') + this.getProperty('href'));
		});
		
		var request = new Request({
			'link': 'cancel',
			'onSuccess': function(html) {
				if (elLightbox.getStyle('opacity') == 1 && elLightbox.getStyle('visibility') != 'hidden') {
					if (html.match(/^<img.*\/>$/)) {
						var image = new Asset.image(html.replace(/^<img\s.*src\s*=\s*"([^"]+)".*\/>$/, "$1"), {
							'onload': function() {
								if (elLightbox.getStyle('opacity') == 1 && elLightbox.getStyle('visibility') != 'hidden') {
									elMedia.empty();
									
									image.removeProperties('width', 'height').inject(elMedia);
									
									image.setStyles({
										'left': (elMedia.getSize().x - image.getSize().x) / 2,
										'top': (elMedia.getSize().y - image.getSize().y) / 2,
										'opacity': 0
									});
									
									image.set('tween', {
										'link': 'cancel',
										'duration': 750,
										'fps': 50,
										'transition': Fx.Transitions.Sine.easeInOut
									});
									
									image.tween('opacity', 1);
								}
							}
						});
					}
					else {
						elMedia.empty();
						elMedia.set('html', html);
					}
				}
			}
		});
		
		var lighten = function() {
			var url = lightables[lightIndex].getProperty('href');		
			url = url.replace(/\/media\//, '/show/');		
			request.get(url);
			
			(function() {
				if (!elMedia.get('html')) {
					var indicator = new Element('div', {'class': 'indicator'}).inject(elMedia);
				}
			}).delay(125);
		}
		
		var lightIndex = 0;
		var lightables = $$('.accordion .stretcher .lightable');
		
		lightables.each(function(lightable, i) {
			lightable.addEvent('click', function(e) {
				e.stop();
				lightIndex = i;
				
				if (useOpacity) {
					elLightbox.get('tween').start('opacity', 1).chain(
						function() {lighten();}
					);
				}
				else {
					elLightbox.setStyle('visibility', 'visible');
					lighten();
				}
			});
		});
		
		var closeLightbox = function() {
			request.cancel();
			
			if (useOpacity) {
				var image = elMedia.getElement('img');
				
				if (image) {
					elLightbox.tween('opacity', 0);
					(function() {elMedia.empty();}).delay(500);
				}
				else {
					elMedia.empty();
					elLightbox.tween('opacity', 0);
				}
			}
			else {
				elMedia.empty();
				elLightbox.setStyle('visibility', 'hidden');
			}
		};
		
		elLightbox.addEvent('click', function() {
			closeLightbox();
		});
		
		elClose.addEvent('click', function(e) {
			e.stop();
			closeLightbox();
		});
		
		elFrame.addEvent('click', function(e) {
			e.stop();
		});
		
		elPrevious.addEvent('click', function(e) {
			e.stop();
			
			if (elLightbox.getStyle('opacity') == 1 && elLightbox.getStyle('visibility') != 'hidden') {
				var image = elMedia.getElement('img');
				if (image) {
					image.get('tween').start('opacity', 0).chain(
						function() {
							elMedia.empty();
							lightIndex = (lightIndex + lightables.length - 1) % lightables.length;
							lighten();
						}
					);
				}
				else {
					elMedia.empty();
					lightIndex = (lightIndex + lightables.length - 1) % lightables.length;
					lighten();
				}
			}
		});
		
		elNext.addEvent('click', function(e) {
			e.stop();
			
			if (elLightbox.getStyle('opacity') == 1 && elLightbox.getStyle('visibility') != 'hidden') {
				var image = elMedia.getElement('img');
				if (image) {
					image.get('tween').start('opacity', 0).chain(
						function() {
							elMedia.empty();
							lightIndex = (lightIndex + 1) % lightables.length;
							lighten();
						}
					);
				}
				else {
					elMedia.empty();
					lightIndex = (lightIndex + 1) % lightables.length;
					lighten();
				}
			}
		});
		
		var displayIndex = 0;
		$$('.column .accordion h5 a').each(function(anchor, i) {
			if (anchor.getProperty('href') == window.location.href.match(/#.*/)) {
				displayIndex = i;
			}
		});
		
		var myAccordion = new Accordion($$('.column .accordion h5 a'), $$('.column .accordion .stretcher'), {
			'opacity': false,
			'duration': 500,
			'fps': 50,
			'transition': Fx.Transitions.Quad.easeInOut,
			'display': displayIndex
		});
	}
});