var Collection = new Class({
	Implements: [Events, Options],
	options: {
        flip: true,
		previous: null,
		next: null,
		index: 'Themen'
    },
	initialize: function(options) {
		this.setOptions(options)
		
		this.current = null;
		this.element = $('Collection.' + (options.id || ''));
		this.slides = new Element('div', {
			'class': 'slides'
		}).adopt(this.element.getChildren()).inject(this.element);
		this.index = new Element('div', {
			'class': 'index'
		}).inject(this.element);
		
		if (this.slides.childNodes.length>1) { // only when more than one slide
			this.buttons = new Element('div', {
				'class': 'buttons'
			}).adopt(this.btn_previous = new Element('div', {
				'class': 'previous',
				styles: {
					opacity: 0.5
				}
			}).addEvent('click', this.previous.bind(this)).addEvent('mouseover', function(){
				if (! Browser.Engine.trident) this.opacity(0.5, 1);
			}).addEvent('mouseout', function(){
				if (! Browser.Engine.trident) this.opacity(1, 0.5);
			}), this.btn_next = new Element('div', {
				'class': 'next',
				styles: {
					opacity: 0.5
				}
			}).addEvent('click', this.next.bind(this)).addEvent('mouseover', function(){
				if (! Browser.Engine.trident) this.opacity(0.5, 1);
			}).addEvent('mouseout', function(){
				if (! Browser.Engine.trident) this.opacity(1, 0.5);
			})).inject(this.element);
		}
		
		if (this.options.previous) 
			this.btn_previous.grab($type(this.options.previous) == 'string' ? document.createTextNode(this.options.previous) : this.options.previous);
		if (this.options.next) 
			this.btn_next.grab($type(this.options.next) == 'string' ? document.createTextNode(this.options.next) : this.options.next);
		if (this.options.index) 
			this.index.grab($type(this.options.index) == 'string' ? document.createTextNode(this.options.index) : this.options.index);
		
		this.slides.childNodes.length.times(function(i){
			slide = this.slides.childNodes[i];
			slide.disappear();
			slide.toggle = new Element('span', {
				'class': 'pos',
				text: i
			});
			if (this.slides.childNodes.length > 1) { // only when more than one slide
				slide.toggle.inject(this.index).addEvent('click', this.show.bind(this, [i])).store('index', i);
			}
			slide.toggle.slide = slide;
		}, this);
		this.show();
	},
	previous: function(){
		if (this.current) {
			i = this.current.toggle.retrieve('index');
			if (this.options.flip && i === 0) i = this.slides.childNodes.length-1;
			else if (i > 0) i--;
			this.show(i);
		} else this.show();
	},
	next: function(){
		if (this.current) {
			i = this.current.toggle.retrieve('index');
			if (this.options.flip && i === this.slides.childNodes.length-1) i = 0;
			else if (i < this.slides.childNodes.length-1) i++;
			this.show(i);
		} else this.show()
	},
	show: function(i) {
		if (!this.slides.childNodes.length) return;
		if (!$defined(i)) i = 0;
		if (0 <= i && i < this.slides.childNodes.length) slide = this.slides.childNodes[i]
		if (this.current != slide) {
			if (this.current) {
				this.current.toggle.removeClass('selected')
				this.current.disappear();
			}
			this.current = slide;
			this.current.appear();
			this.current.toggle.addClass('selected');
		}
	}
});