var App = new Class({
	
	initialize: function(){
		this.initSlideShows()
			.attach()
		
			.initHistory()
		;
	},
	
	initSlideShows: function(){

		this.mainTabs = new SlideShow('main-show',{
			transition: 'fadeThroughBackground'
		});
		
		this.mixedShow = new SlideShow('mixed-show', {
			delay: 10000
		});
		
		// Transitions are just simple functions
		// add one to the slideshow API with SlideShow.add(name, fn)
		SlideShow.add('fall', function(previous, next, duration, instance){
			var distance = instance.element.getSize().y;
			next.setStyle('top', -distance);
			new Fx.Elements([previous, next], {
				transition: 'bounce:out',
				duration: duration
			}).start({
				0: { top: [distance] },
				1: { top: [0] }
			});
			return this;
		});

		return this;
	},
	
	attach: function(){
		return this.attachMainTabs();	
	},
	
	attachMainTabs: function(){
		this.mainTabs.addEvent('show', function(slideData){
			// stop the intro show if it's not the intro slide
			if (slideData.next.index == 1) {
				this.mixedShow.play();
			} else {
				this.mixedShow.play();
			}			// same as above, but ecma-riff-script!
			//this.mixedShow[(slideData.next.index == 0) ? 'play' : 'play']();

			
			// change class of current tab
		}.bind(this));
		return this;
	},
	

	
	initHistory: function(){
		var self = this;
		this.history = new HashEvents().addEvents({
			// using my history manager to control the main tab slideshow

			'':                   function(){ self.mainTabs.show(1) },
			'mixed-content':      function(){ self.mainTabs.show(1) }
			
		}).check();
		return this;
	},
	
	// irrelevant to the slideshows, but interesting nonetheless I hope :D
	initNavFx: function(){

		return this;
	}
	
});

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