var ArtScroll = new Class({
	Implements: [Options, Events],
	
	options: {
		wrapSelector: '.artwork_clip_in',
		slideSelector: '.artwork_slide',
		
		titleSelector: '.artwork_title',
		
		navSelector: '.artNav',
		
		mode: 'fade', // options: fade OR scroll
		
		duration: 500,
		
		startRandom: true,
		autoRotate: true,
		rotateDuration: 6000		
	},
	
	startIndex: 0,
	slideScale: null,
	curr: null,
	slideInterval: null,
	
	initialize: function(scrollId, titleId, navId, opts) {
		if (opts) this.setOptions(opts);
		
		this.scroller 	= $(scrollId)
		this.titler		= $(titleId)
		this.controller = $(navId)
		
		// IDs dont exist, try again
		if (!this.scroller || !this.titler || !this.controller) return	
		this.scrollWrap = this.scroller.getElement(this.options.wrapSelector)
		
		this.scrollSlides 	= this.scroller.getElements(this.options.slideSelector)
		this.titleSlides 	= this.titler.getElements(this.options.titleSelector)				
					
		// start slide
		if (this.options.startRandom) this.startIndex = $random(0, this.scrollSlides.length - 1)
		
		// 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()}
		
		this.titleSlides.each(function(title, i) {
			title.setStyles({
				position: 'absolute',
				zIndex: this.scrollSlides.length - i
			})
			title.set('tween', {property: 'opacity', duration: this.options.duration}).set('opacity', (this.startIndex == i) ? 1 : 0)
		}, this)			
		
		// 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}).set('opacity', (this.startIndex == i) ? 1 : 0)
			}, this)
		}
		
		this.navs = this.controller.getElements(this.options.navSelector)
		
		this.curr = this.startIndex
		
		// if there's more than 2 navs, set active class
		if (this.navs.length > 2) this.navs[this.curr].addClass('active')				
		
		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 = (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 (mode == 'scroll') {
			this.scrollFx.start((index == 0) ? 0 : -(this.slideScale.y * index))				
		}
		
		else if (mode == 'fade') {
			this.scrollSlides[this.curr].tween(0)
			this.scrollSlides[index].tween(1)
		}
		
		this.titleSlides[this.curr].tween(0)
		this.titleSlides[index].tween(1)
	
		if (this.navs.length > 2) {
			this.navs[this.curr].removeClass('active')
			this.navs[index].addClass('active')
		}					
		
		this.curr = index
		
	},
	
	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]('click', 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 ArtScroll('artScroll', 'artTitles', 'artTextControls', { mode: 'scroll', duration: 1200});
		Site.featureScroller = new ArtScroll('featuredScrollContent', 'featuredTitle', 'featureControls', { mode: 'scroll', duration: 700});		
		
		Site.Toggles.init('.exhb_nav a', '.exhb_content_wrapper')
	},
	
	Toggles: {
		startIndex: 0,
		init: function(togSelector, togdSelector) {
			this.togs = $$(togSelector)
			this.togd = $$(togdSelector)
			
			if (this.togs.length == 0 || this.togs.length != this.togd.length) return
			
			this.togd.each(function(el, i) {
				if (i != this.startIndex) el.setStyle('display', 'none')
			}, this)
			
			this.togs[this.startIndex].addClass('on')
			
			this.togs.each(function(el, i) {
				el.set('href', 'javascript:void(0);')
				el.addEvent('click', function() { this.showItem(i)}.bind(this))
			}, this)

			this.curr = this.startIndex						
		},
		
		showItem: function(index) {			
			if (index == this.curr) return
			
			this.togs[this.curr].removeClass('on')
			this.togd[this.curr].setStyle('display', 'none')
			
			this.togs[index].addClass('on')
			this.togd[index].setStyle('display', '')			
			
			this.curr = index
		}
		
		
	}
	
}


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