var App = new Class({
	
	initialize: function(){
		this.initSlideShows()
			.attach()
			.initNavFx()
			.initNavFx2()
			.initHistory()
			.initpanorama()
		;
	},
	
	initSlideShows: function(){
		
		// this site has tons of slide shows
		// they are all instantiated here
		// the events are all added in `attach`
		
		// this whole site's navigation is a slideshow
		this.mainTabs = new SlideShow('main-show',{
			transition: 'fadeThroughBackground'
		});
		
		
		// navigation demo with numbered labels
		this.navigationShow = new SlideShow('navigation-show', {
			transition: 'pushLeft'
		});
		
		// wakeboarding pictures
		this.mixedShow = new SlideShow('mixed-show', {
		transition: 'fadeThroughBackground',
			delay: 3000,
			duration: 1000,
			autoplay: true
		});


		
		return this;
	},
	
	attach: function(){
		return this.attachMainTabs().attachNavigationDemo();	
	},
	
	attachMainTabs: function(){
		var navs = $('nav').getElements('li');
		this.mainTabs.addEvent('show', function(slideData){
			// stop the intro show if it's not the intro slide
			if (slideData.next.index == 0) {
				this.navigationShow.play();
				
			} else {
				this.navigationShow.pause();
			}
			// same as above, but ecma-riff-script!
			//this.mixedShow[(slideData.next.index == 1) ? 'play' : 'pause']();
			this.transitionShow[(slideData.next.index == 3) ? 'play' : 'pause']();
			
			// change class of current tab
			navs.removeClass('current');
			navs[slideData.next.index].addClass('current');
		}.bind(this));
		return this;
	},
	
	attachNavigationDemo: function(){
		var self = this;

		// these will control the slideshow
		var navs = $('navigation-demo').getElements('.nav li');

		// add click events to the elements
		navs.each(function(element, index){
			element.addEvent('click', function(){
				// going to figure the current index of the slideshow
				// and change the transition to go the "right" way
				// so it feels like a typical "panel" kind of widget
				var currentIndex = self.navigationShow.slides.indexOf(self.navigationShow.current);
				var transition = (currentIndex < index) ? 'pushLeft' : 'pushRight';
				// ignoring the last two lines this is really
				// quite simple, the indicies of the nav elements
				// and the slide elements match ... so just show the index
				self.navigationShow.show(index, { transition: transition });
			});
		});
		
		// morph the style of the nav elements
		this.navigationShow.addEvent('show', function(slideData){
			navs[slideData.previous.index].morph('.normal');
			navs[slideData.next.index].morph('.current');
		});
		
		// set the initial slide to current
		navs[0].morph('.current');
		
		// add Keyboard
		$(document).addEvent('keyup', function(event){
			// couldn't be any easier!
			if (event.key == 'left')
				self.navigationShow.showPrevious({ transition: 'pushRight' });
			else if (event.key == 'right')
				self.navigationShow.showNext({ transition: 'pushLeft' });
		});
		
		return this;
	},
	
	initHistory: function(){
		var self = this;
		this.history = new HashEvents().addEvents({
			// using my history manager to control the main tab slideshow
			'navigation-demo':    function(){ self.mainTabs.show(0) }
		}).check();
		return this;
	},
	
	// irrelevant to the slideshows, but interesting nonetheless I hope :D
	initNavFx: function(){
		this.nav = $('nav');
		var navHideAmount = this.nav.getSize().x + 20;
		this.nav.setStyle('right', -navHideAmount);
		this.nav.tween.delay(1000, this.nav, ['right', 0]);
		return this;
	},
	
	initNavFx2: function(){
		this.nav = $('schriftback');
		var navHideAmount = this.nav.getSize().x + 20;
		this.nav.setStyle('right', -navHideAmount);
		this.nav.tween.delay(1000, this.nav, ['right', 0]);
		return this;
	},
	
	initpanorama: function(){
		this.panorama = $('story');
		this.panorama.setStyle('opacity', 0);
		this.panorama.tween.delay(1000, this.panorama, ['opacity', 1]);
		return this;
	}
	
});

var app;
window.addEvent('domready', function(){
	$$('html')[0].removeClass('notready').addClass('ready');
	app = new App;
});