var MooGallery = new Class({
	Implements: [Options, Events],
	options: {
		'loader': {
			'src': 'images/loader.gif',
			'target': null
		},
		'navBtns': {
			'nextId':'nextSlide',
			'prevId':'prevSlide'
		},
		'type': 'tween',		
		'fx': {
			'duration': 500,
			'link': 'chain'
		},
		slideSelect: '.slide'
	},
	initialize: function(imgWrap, navWrap, opts) {
		if (!$(imgWrap)) return		
		
		this.imgWrap = $(imgWrap)
		this.navWrap = $(navWrap)
		
		this.setOptions(opts)		
		
		this.preloader = (!$(this.options.loader['target'])) ? this.imgWrap : $(this.options.loader['target'])		
		this.preloader.setStyle('backgroundImage', 'url('+this.options.loader['src']+')')
		
		var type = this.typeOf = this.options.type.toLowerCase()		
		var fxprop = this.fxprop = this.options.fx.property = (type == 'tween') ? 'opacity' : 'marginLeft'					
		
		this.myFx = new Fx.Tween(this.imgWrap, this.options.fx).set(0)
		
		this.imgs = []		
		this.slides = this.imgWrap.getElements(this.options.slideSelect)
		this.slides.each(function(el, i) {
			var img = el.getElement('img')
			var src= img.get('src')
			
			el.store('width', el.getSize().x)
			
			this.imgs.push(img.get('src'))
			if (fxprop == 'opacity') el.setStyle('display', 'none')
			//el.setStyle('backgroundImage', 'url('+src+')')			
			//el.empty()
		}, this)
		
		if (fxprop == 'marginLeft') {
			var mywidth = 0;
			this.slides.each(function(el) {
				mywidth += el.getSize().x
			})
			this.imgWrap.setStyle('width', mywidth)
		}
		
		var myImgs = new Asset.images(this.imgs, {
			onComplete: function() {
				this.preloader.setStyle('backgroundImage', '')
				this.placeEvents();
				this.current = 0;
				this.firstShow()
			}.bind(this)
		})
	},
	placeEvents: function() {
		var btns = this.options.navBtns
		this.nextBtn 	= $(btns.nextId)
		this.prevBtn 	= $(btns.prevId)
	
		$A([this.nextBtn, this.prevBtn]).each(function(el, i) {
			el.setProperties({
				'href':'javascript:void(0);',
				'target':''
			})			
		}, this)
		
		this.nextBtn.addEvent('click', this.nextSlide.bind(this))
		this.prevBtn.addEvent('click', this.prevSlide.bind(this))

	},
	firstShow: function() {
		if (this.fxprop == 'opacity') {
			this.slides[0].setStyle('display', '')
			this.myFx.start(1)
		}
	},
	nextSlide: function(e) {
		if ($type(e) == 'event') e.stop()
		var nxt = (this.current + 1 > this.slides.length - 1) ? 0 : this.current + 1
		
		this.show(nxt)
	},
	prevSlide: function(e) {
		if ($type(e) == 'event') e.stop()
		var prev = (this.current - 1 < 0 ) ? this.slides.length -1 : this.current - 1
		
		this.show(prev)
	},
	
	show: function(i) {
		if (this.fxprop == 'opacity') {			
			this.myFx.start(0).chain(function() {
				this.slides[this.current].setStyle('display', 'none')
				this.slides[i].setStyle('display', '')
				this.myFx.start(1)
				this.current = i
			}.bind(this))
		}
		else if (this.fxprop == 'marginLeft') {
			var x = -(this.slides[i].retrieve('width') * i)
			this.myFx.start(x)
			this.current = i		
		}
		

	}		
})

window.addEvent('domready', function() {
	//new MooGallery('ID OF THUMB WRAPPER <div>', 'ID OF NAV WRAPPER <ul>', {OPTIONS})
	var myGallery = new MooGallery('thumbWrap', 'theNav', {
		'loader': {
			'src': '/images/grc/loader.gif',
			'target': 'theThumbs'
		},
		'type': 'tween',
		'fx': {
			'duration': 500
		},
		slideSelect:'.slide'
	})
})