var MooShow = new Class({
	Implements: [Options, Events],
	
	options: {
		wrapSelector: '.slidesIn',
		slideSelector: '.slide_item',
		
		navSelector: 'a',
		
		mode: 'fade', // options: fade OR scroll
		
		duration: 500,
		
		startRandom: true,
		autoRotate: true,
		rotateDuration: 5000,
		welcomeFrame: false		
	},
	
	startIndex: 0,
	slideScale: null,
	curr: null,
	slideInterval: null,
	
	firstTime: true,
	
	initialize: function(scrollId,  navId, opts) {
		if (opts) this.setOptions(opts);
		
		this.scroller 	= $(scrollId)
		this.controller = $(navId)
		
		// IDs dont exist, try again
		if (!this.scroller || !this.controller) return	
		this.scrollWrap = this.scroller.getElement(this.options.wrapSelector)
		
		this.scrollSlides 	= this.scroller.getElements(this.options.slideSelector)				
							
		// change mode to default if they pass invalid mode
		if (!$A(['fade', 'scroll']).contains(this.options.mode.toLowerCase())) this.options.mode = 'fade'

		this.slideScale = {x: this.scrollSlides[0].getStyle('height').toInt(), y: this.scrollSlides[0].getStyle('width').toInt()}				
		
		// if scroll..
		if (this.options.mode == 'scroll') {
			this.scrollWrap.setStyle('width', (this.slideScale.y * this.scrollSlides.length).toInt() + 'px')			
			this.scrollFx = new Fx.Tween(this.scrollWrap, {property: 'left', duration: this.options.duration}).set((this.startIndex == 0) ? 0 : -(this.slideScale.y * this.startIndex))
		}
		
		// if fade..
		if (this.options.mode == 'fade') {
			this.scrollSlides.each(function(slide, i) {
				slide.setStyles({
					position: 'absolute',
					zIndex: this.scrollSlides.length - i
				})
				slide.set('tween', {property: 'opacity', duration: this.options.duration, link: 'cancel'}).set('opacity', (this.startIndex == i) ? 1 : 0)
			}, this)
									
		}
		
		// inital frame isn't related to show, so exclude it
		if (this.options.welcomeFrame) {
			this.startingSlide = this.scrollSlides[0];
			this.scrollSlides.splice(0,1)				
		}	
		
		this.navs = this.controller.getElements(this.options.navSelector)			
		if ($chk(this.startIndex)) {
			this.navs[this.startIndex].addClass('active')
			this.curr = this.startIndex
		}
		
		this.setNavBinds(true)
		
		// if its automated
		if (this.options.autoRotate) {
			$clear(this.slideInterval)
			
			var enterFunc = function() {
				$clear(this.slideInterval)			
			}.bind(this)
			
			var leaveFunc = function() {
				$clear(this.slideInterval)
				this.slideInterval = this.runShow.periodical(this.options.rotateDuration, this)				
			}.bind(this)
			
			this.slideInterval = this.runShow.periodical(this.options.rotateDuration, this)
			
			this.scroller.addEvent('mouseenter', enterFunc)
			this.scroller.addEvent('mouseleave', leaveFunc)
			this.controller.addEvent('mouseenter', enterFunc)
			this.controller.addEvent('mouseleave', leaveFunc)			
			
		}
		
	},
	
	runShow: function() {
		this.nextSlide();
	},
	
	nextSlide: function() {
		var next = (!$chk(this.curr)) ? 0 : (this.curr + 1 > this.scrollSlides.length - 1) ? 0 : this.curr + 1
		this.gotoSlide(next)
	},
	
	prevSlide: function() {
		var prev = (this.curr - 1 < 0) ? this.scrollSlides.length - 1 : this.curr - 1
		this.gotoSlide(prev)
	},
	
	gotoSlide: function(index) {
		var mode = this.options.mode
				
		if (this.options.welcomeFrame && this.firstTime) {
			this.startingSlide.tween(0)	
		}				

		if (mode == 'scroll') {
			this.scrollFx.start((index == 0) ? 0 : -(this.slideScale.y * index))				
		}
		
		else if (mode == 'fade') {
			if ($chk(this.curr)) this.scrollSlides[this.curr].tween(0)
			this.scrollSlides[index].tween(1)
		}				
		
		if (this.navs.length > 2) {
			if ($chk(this.curr)) this.navs[this.curr].removeClass('active')
			this.navs[index].addClass('active')
		}					
		
		this.curr = index
		this.firstTime = false
		
	},
	
	setNavBinds: function(state) {
		var fn = (state) ? 'addEvent' : 'removeEvent'
		
		// if nav items more than 2, assume clickable nav
		if (this.navs.length > 2) {
			this.navs.each(function(el, i) {
				el[fn]('mouseenter', function() {
					this.gotoSlide(i);
				}.bind(this))
			}, this)
		}
		else {
			this.navs[0][fn]('click', this.prevSlide.bind(this))
			this.navs[1][fn]('click', this.nextSlide.bind(this))
		}
		
	}	

})


var Site = {
	init: function() {
		Site.mainScroller = new MooShow('siteSlides', 'siteNav', { mode: 'fade', duration: 700});
		
	}
	
}


window.addEvent('domready', function() {
	Site.init();
})