var photoGallery = new Class({
	Implements:[Options,Events],
	options: {
		slides: [],
		startIndex: 0,
		wrap: true,
		onShow: $empty, //Mootools 1.2: $empty
		imgUrls: [],
		container: false
	},
	initialize: function(options){
		this.setOptions(options)
		this.slides = [];
		this.effects = [];
		this.addSlides(this.options.slides);
		if(this.slides.length) this.showSlide(this.options.startIndex);
		
		this.container = $(this.options.container);
		if(!this.container) return;
		this.options.imgUrls.each(this.addImg.bind(this));
		this.showSlide(this.options.startIndex);
		this.transport = this.makeTransport();
	},
	addSlides: function(slides){
		$$(slides).each(function(slide){
			this.slides.include($(slide));
			slide.addEvent('click', this.cycleForward.bind(this));
			this.effects[this.slides.indexOf(slide)] = new Fx.Tween(slide, {
				property: 'opacity'
			});
		}, this);
	},
	addSlide: function(slide){
		this.addSlides([slide]);
	},
	cycleForward: function(){
		if($chk(this.now) && this.now < this.slides.length-1) this.showSlide(this.now+1);
		else if ((this.now) && this.options.wrap) this.showSlide(0);
		else if(!$defined(this.now)) this.showSlide(this.options.startIndex);
	},
	cycleBack: function(){
		if(this.now > 0) this.showSlide(this.now-1);
		else if(this.options.wrap) this.showSlide(this.slides.length-1);
	},
	showSlide: function(iToShow){
		var now = this.now;		
		var currentSlide = this.slides[now];
		var slide = this.slides[iToShow];
		function fadeIn(s){
			s.setStyles({
				display:'block',
				visibility: 'visible',
				opacity: 0
			});
			s.addClass('currentSlide');
			this.effects[this.slides.indexOf(s)].start(1);
			this.fireEvent('onShow', [slide, iToShow]);
		};
		if(slide) {
			if($chk(now) && now != iToShow){
				this.effects[now].start(0).chain(function(){
					this.slides[now].setStyle('display', 'none');
					fadeIn.apply(this, [slide]);
				}.bind(this));
				this.slides[now].removeClass('currentSlide');
			} else fadeIn.apply(this, [slide]);
			this.now = iToShow;
		}
	},
	addImg: function(url){
		var img = new Element('img', {
				src: url,
				styles: {
					display: 'none'
				},
				events: {
					click: this.cycleForward.bind(this)
				}
			}).inject($(this.options.container),'top')//fix
		this.addSlide(img);
	},
	makeTransport:function(cl){		
		var prevButton = new Element('img',{
			src:'images/galleries/prev.gif',
			events:{
				mouseenter:function(e){
					this.src= 'images/galleries/prev-over.gif'
				},
				mouseleave:function(e){
					this.src= 'images/galleries/prev.gif'
				},
				click:this.cycleBack.bind(this)
			}
		});
		prevButton.addEvent('click',function(e){new Event(e).stop()});
		var prev = new Element('li').grab(new Element('a',{
			id:'prev',
			href:'#',
			events:{
				click:function(e){
					new Event(e).stop();
					prevButton.fireEvent('click');
				}		
			}
		}).grab(prevButton));
			
		var nextButton = new Element('img',{
			src:'images/galleries/next.gif',
			events:{
				mouseenter:function(){
					this.src= 'images/galleries/next-over.gif'
				},
				mouseleave:function(){
					this.src= 'images/galleries/next.gif'
				},
				click: this.cycleForward.bind(this)
			}	
		});		
		nextButton.addEvent('click',function(e){new Event(e).stop()})
		var next = new Element('li').grab(
			new Element('a',{
				id:'next',
				href:'#',
				events:{
					click:function(e){
						e = new Event(e).stop();
						nextButton.fireEvent('click');
						}
					}
				}
			).grab(nextButton)
		);
		var transport = new Element('ul',{
			'class':'transport'
		});
		transport.grab(prev);
		transport.grab(next);		
		this.container.grab(transport);
		return transport;		
	}
});