window.addEvent('domready', function() {
	if(document.getElement('.heroes')) {
		var thumbs = document.getElement('.thumbs');
		var headline = document.getElement('.hero-text h1');
		var introtext = document.getElement('.hero-text p');
		var slides = document.getElements('.heroes img').each( function(slide, i) {
			if(i==0) {
				headline.setStyle('color', slide.get('data-hero-color')).set('html', slide.get('data-pagetitle'));
				introtext.setStyle('color', slide.get('data-hero-color')).set('html', slide.get('data-introtext'));
				slide.set('src', slide.get('rel'));
			}
			thumbs.adopt(new Element('li').adopt(new Element('img', {
				'src': slide.get('data-thumb'),
				'alt': slide.get('data-pagetitle'),
				'data-introtext': slide.get('data-introtext'),
				'data-hero-color': slide.get('data-hero-color')
			}), new Element('div', {'class': 'thumbs-overlay'}).fade(0.5)));
		});
		slides.getLast().set('src', slides.getLast().get('rel'));

		var textFx = new Fx.Elements([headline, introtext],{'link': 'chain' });
		var changeHeroText = function(headlineText, introtextText, heroColor) {
			textFx.start({
				'0': {'opacity': 0},
				'1': {'opacity': 0}
			}).chain( function() {
				headline.setStyle('color', heroColor).set('html', headlineText);
				introtext.setStyle('color', heroColor).set('html', introtextText);
				this.callChain();
			}).start({
				'0': {'opacity': 1},
				'1': {'opacity': 1}
			});
		};
		var slideshow = new SlideShow(document.getElement('.heroes'), {
			transition: 'fade',
			duration: 1500
		});

		var slider = new SpaceSlider(thumbs, {
			'offset': 90,
			'fxOpts': {
				'duration': 1500,
				'link': 'cancel'
			},
			'interval': 5500,
			'autoPlay': true,
			'autoPlayDirection': 'prev',
			'slideDirection': 'up',
			'elementsBefore': 1,
			'elementsAfter': 1,
			'onShow': function(curEl, curIndex, lastEl) {
				lastEl.getElement('.thumbs-overlay').fade(0.5);
				slideshow.show(curIndex);
				var newHeroData = curEl.getFirst();
				changeHeroText(newHeroData.get('alt'), newHeroData.get('data-introtext'), newHeroData.get('data-hero-color'));
			},
			'onShowComplete': function(curEl) {
				curEl.getElement('.thumbs-overlay').fade(0);
				var img = slides[this.getPrev()];
				if(img && !img.get('src')) {
					img.set('src', img.get('rel'));
				}
			}
		});

		thumbs.getChildren().each( function(thumb, i) {
			thumb.addEvent('click', function(e) {
				e.stop();
				slider.stop();
				manual = true;
				var curPic = slideshow.slides[i].getFirst('img');
				if(!curPic.get('src')) {
					curPic.addEvent('load', function() {
						slider.slideTo(thumb).playDelayed(10000);
						this.removeEvent('load', arguments.callee);
					}).set('src', curPic.get('rel'));
				}
				else {
					slider.slideTo(thumb).playDelayed(10000);
				}
			});
		});
		slider.prepare('prev').prepare('prev').elements[0].getElement('.thumbs-overlay').fade(0);
	}
});