// JavaScript Document

var url = window.location.href;
var webroot  = url.substring(0,url.indexOf("t/")+2);
var webpath = url.slice(url.indexOf(webroot)+webroot.length, url.length);

var App = new Class({
	
	initialize: function(){
		this.initSlideShows()
//s			.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('gal_feature', {
			transition: 'fadeThroughBackground',
			duration: 2000,
			delay: 5500,
			autoplay: true
		});
		
		
		// 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 == 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
//			'':                   function(){ self.mainTabs.show(0) },
//			'introduction':       function(){ self.mainTabs.show(0) },
//			'mixed-content':      function(){ self.mainTabs.show(1) },
//			'navigation-demo':    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;
//	}
	
});

var App2 = new Class({
	
	initialize: function(){
		this.initSlideShows()
		;
	},
	
	initSlideShows: function(){
		this.mixedShow = new SlideShow('mixed-show', {
			delay: 6000,
			autoplay: true
		});
		
		// 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;
	}
	
});

function formatGallery(){
//	$('gallery').setStyle('opacity', '0');
//	$('gallery').getElements('img').each(function (a) {
//		imgsrc=a.src.slice(a.src.indexOf(webroot)+webroot.length, a.src.length);
//		a.src = "/_includes/ShowImage3.aspx?src=/"+imgsrc+"&w=146&h=148";
//  	 });
	$('gallery').fade(0, 1);
	if ($('gal_feature')) app = new App;
}

var app;
window.addEvent('domready', function(){
	if ($('gallery')) formatGallery();
	if ($('mixed-content')) {
			app2 = new App2;

	}
});