var App = new Class({
	
	initialize: function(){
		this.initSlideShows()
			.attach()
			.initNavFx()
			.initHistory()
		;
	},
	
	initSlideShows: function(){
		
		// the events are all added in `attach`
				
		// feature list on introduction page
		this.introShow = new SlideShow('intro-show', {
			transition: 'pushLeft',
      		duration: 2000,
			delay: 6000,
			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.introShow.play();
			} else {
				this.introShow.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;
	},
		
	initHistory: function(){
		var self = this;
		this.history = new HashEvents().addEvents({
			// using my history manager to control the main tab slideshow
			// the order below specifies what is displayed
			'':                   function(){ self.mainTabs.show(0) },
			'introduction':       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().y + 20;
		this.nav.setStyle('top', -navHideAmount);
		this.nav.tween.delay(1000, this.nav, ['top', 0]);
		return this;
	}
	
});

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