/*
var navSlideShow;
document.addEvent('domready', function(){

	// cache the navigation elements
	var navs = $('navigation-demo').getElements('.nav li');

	// create a basic slideshow
	navSlideShow = new SlideShow('navigation-show', {
		//selector: 'img', // only create slides out of the images
		onShow: function(data){
			// update navigation elements' class depending upon the current slide
			navs[data.previous.index].removeClass('current');
			navs[data.next.index].addClass('current');
		}
	});

	navs.each(function(item, index){
		// click a nav item ...
		
		item.addEvent('click', function(event){
		//alert('');
			event.stop();
			// pushLeft or pushRight, depending upon where
			// the slideshow already is, and where it's going
			var transition = (navSlideShow.index < index) ? 'pushLeft' : 'pushRight';
			// call show method, index of the navigation element matches the slide index
			// on-the-fly transition option
			navSlideShow.show(index, {transition: transition});
		});
	});

	// tips, for pretty
	new Tips(navs, {
		fixed: true,
		text: '',
		offset: {
			x: -100,
			y: 20
		}
	});
	

});
*/

SlideShow.adders={
	transitions:{},
	add:function(a,b){
	this.transitions[a]=b;
	this.implement({transitions:this.transitions})},
	addAllThese:function(a){$A(a).each(function(b){this.add(b[0],b[1])},this)}
};
$extend(SlideShow,SlideShow.adders);
SlideShow.implement(SlideShow.adders);

SlideShow.add("fade",function(a,b,d){a.set("tween",{duration:d}).fade("out");return this});
SlideShow.addAllThese([
	["none",function(a){a.setStyle("display","none");return this}],
	["crossFade",function(a,b,d){a.set("tween",{duration:d}).fade("out");b.set("tween",{duration:d}).fade("in");return this}],
	["fadeThroughBackground",function(a,b,d){d=d/2;b.set("tween",{duration:d}).fade("hide");a.set("tween",{duration:d,onComplete:function(){b.fade("in")}}).fade("out")}],
	["pushLeft",function(a,b,d,c){
		c=c.element.getSize().x;b.setStyle("left",c);
		(new Fx.Elements([a,b],{duration:d})).start({0:{left:[-c]},1:{left:[0]}});return this}],
	["pushRight",function(a,b,d,c){c=c.element.getSize().x;b.setStyle("left",-c);(new Fx.Elements([a,b],{duration:d})).start({0:{left:[c]},1:{left:[0]}});return this}],
	["pushUp",function(a,b,d,c){c=c.element.getSize().y;b.setStyle("top",c);(new Fx.Elements([a,b],{duration:d})).start({0:{top:[-c]},1:{top:[0]}});return this}],
	["pushDown",function(a,b,d,c){c=c.element.getSize().y;b.setStyle("top",-c);(new Fx.Elements([a,b],{duration:d})).start({0:{top:[c]},1:{top:[0]}});return this}],
	["blindRight",function(a,b,d,c){a=c.element.getSize().x;b.setStyles({left:-a,"z-index":2}).set("tween",{duration:d}).tween("left",0);return this}],
	["blindLeft",function(a,b,d,c){a=c.element.getSize().x;b.setStyles({left:a,"z-index":2}).set("tween",{duration:d}).tween("left",0);return this}],
	["blindUp",function(a,b,d,c){a=c.element.getSize().y;b.setStyles({top:a,"z-index":2}).set("tween",{duration:d}).tween("top",0);return this}],
	["blindDown",function(a,b,d,c){a=c.element.getSize().y;b.setStyles({top:-a,"z-index":2}).set("tween",{duration:d}).tween("top",0);return this}],
	["blindDownFade",function(a,b,d,c){this.blindDown(a,b,d,c).fade(a,b,d,c)}],
	["blindUpFade",function(a,b,d,c){this.blindUp(a,b,d,c).fade(a,b,d,c)}],
	["blindLeftFade",function(a,b,d,c){this.blindLeft(a,b,d,c).fade(a,b,d,c)}],
	["blindRightFade",function(a,b,d,c){this.blindRight(a,b,d,c).fade(a,b,d,c)}]
]);

	var App = new Class({
	
	initialize: function(){
		this.initSlideShows()
			.attach()
			//.initNavFx()
			//.initHistory()
		;
	},
	
	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'
		});*/
		
		// feature list on introduction page
		//this.introShow = new SlideShow('intro-show', {
		//	transition: 'pushLeft',
		//	delay: 3500,
		//	autoplay: true
		//});
		
		// wakeboarding pictures
		//this.mixedShow = new SlideShow('mixed-show', {
		//	delay: 3000
		//});
		
		// navigation demo with numbered labels
		this.navigationShow = new SlideShow('navigation-show', {
			transition: 'pushLeft'
		});
		
		
		// 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;
		});
		
		// cow slideshow using custom 'fall' transition
		this.transitionShow = new SlideShow('transition-show', {
			transition: 'fall',
			duration: 1000,
			delay: 2000,
			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 == 0) ? 'play' : 'pause']();
			
			// change class of current tab
			//navs.removeClass('current');
			//navs[slideData.next.index].addClass('current');
		}.bind(this));
		return this;
	},
	
	selectNav : function( id ) {
	
		
	
		var self = this;
		
		var navs = $('navigation-root').getElements('.nav li');
		navs.each(function(element, index){
		
			//alert(element.id);
			if (element.id == id)
			{
				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 });
			}
		});
	},
	
	
	attachNavigationDemo: function(){
		var self = this;

		// these will control the slideshow
		var navs = $('navigation-root').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');
		
		//this.transitionShow['play']();
		
		// 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
			'':                   function(){ self.mainTabs.show(0) },
			//'introduction':       function(){ self.mainTabs.show(0) },
			//'mixed-content':      function(){ self.mainTabs.show(1) },
			'navigation-root':    function(){ self.mainTabs.show(2) },
			//'custom-transitions': function(){ self.mainTabs.show(3) },
			//'links':              function(){ self.mainTabs.show(4) }
		}).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;
	}*/
	
});