window.addEvent('domready', function() {
	var myElement = $('main');
	if(myElement != null) {
		$('scrollUp').setStyle('display', 'block');
		$('scrollDown').setStyle('display', 'block');
		var myFx = new Fx.Scroll(myElement);
		var offsetheight = 150;
		var scrollposition = 0;
		var maxscrollO = myElement.getScrollSize();
		if(maxscrollO.y < offsetheight) { var maxscrollN = offsetheight+18; } else { var maxscrollN = maxscrollO.y; }
		var maxscroll = maxscrollN - offsetheight;
		//myFx.start(0, 700);
		$('scrollUp').addEvent('click', function() {
			if(scrollposition > 0){
				myFx.start(0, scrollposition - offsetheight);
				scrollposition = scrollposition - offsetheight;
			}
			if(scrollposition < 0) {
				scrollposition = 0;
			}
		});
		$('scrollDown').addEvent('click', function() {
			if(scrollposition < maxscroll) {
				myFx.start(0, scrollposition + offsetheight);
				scrollposition = scrollposition + offsetheight;
			}
			if(scrollposition > maxscroll) {
				scrollposition = maxscroll+18;
			}
		});
	}
	
	if($('tfgallery')) {
		var slideshow = new TFSlideshow({container: $('tfgallery'), duration: 4000, type: 'a', imageSelectors: $('image_switch').getChildren('li'), selectorWrapper: $('image_switch_wrapper')});
		slideshow.start();
		
		$('image_switch').getChildren('li').addEvents({
			'mouseenter': function() {
				if(!this.hasClass('hover')) {
					this.addClass('hover');
				}
			},
			'mouseleave': function() {
				if(this.hasClass('hover')) {
					this.removeClass('hover');
				}
			},
			'click': function(event) {
				event.stop();
				if(!this.hasClass('last')) {
					var imageId = this.getElement('a').get('href').substring(1) - 1;
					if(typeof(slideshow) != 'undefined') {
						slideshow.setCurrent(imageId);
					}
				}
			}
		});
		
		$('image_switch_last').getFirst().addEvent('click', function(event) {
			event.stop();
			if(typeof(slideshow) != 'undefined') {
				slideshow.nextSelectors();
			}
		});
		
		$('tfgallery').getChildren('a').addEvent('click', function(event) {
			event.stop();
			var divId = this.get('rel');
			
			if(!$('image_overlay_'+divId)) {
				var imgDiv = new Element('div', {
					id: 'image_overlay_'+divId,
					html: '<a href="#close" class="close">Schließen</a><img src="'+this.get('href')+'" alt="" />'
				});
				imgDiv.fade('hide');
				imgDiv.inject($('image_overlay'), 'bottom');
			}
			var divEl = $('image_overlay_'+divId);
			divEl.getElement('a').addEvent('click', function(event) {
				event.stop();
				this.getParent().fade(0);
				(function(){this.getParent().setStyle('display', 'none');$('image_overlay').setStyle('visibility', 'hidden');}).delay(600, this);
				slideshow.start();
			});
			slideshow.stop();
			divEl.setStyle('display', 'block');
			$('image_overlay').setStyle('visibility', 'visible');
			divEl.fade(1);
		});
	}
});

var TFSlideshow = new Class({
	Implements: Options,
	options: {
		duration: 4000,
		elements: [],
		elementcount: 0,
		imageSelectors: [],
		current: 0,
		interval: false,
		selectorCounter: 0,
		selectorScroller: false,
		selectorWrapper: false
	},
	initialize: function(options){
		var elements = $(options.container).getElements(options.type);
		elements.fade('hide');
		elements[this.options.current].fade('show');
		this.setOptions({
			'duration': options.duration,
			'elements': elements,
			'elementcount': elements.length - 1,
			'imageSelectors': options.imageSelectors,
			'selectorWrapper': options.selectorWrapper
		});
	},
	fader: function(force) {
		var oldcurrent = this.options.current;
		if(this.options.current == this.options.elementcount) {
			this.options.current = 0;
			this.nextSelectors();
		} else {
			this.options.current = this.options.current + 1;
		}
		if(force != 'no') {
			this.options.current = force;
		}
		
		//if(this.options.current < 9) {
			//if(this.options.current == 0 && force == 'no') {
				//this.options.imageSelectors[8].removeClass('active');
			//} else {
				this.options.imageSelectors[oldcurrent].removeClass('active');
			//}
			this.options.imageSelectors[this.options.current].addClass('active');
		//}
		if((this.options.current % 8) == 0 || this.options.current == 0 && this.options.selectorCounter != 0) {
			$('image_switch_last').getFirst().addClass('active');
			if(this.options.current == 0 && this.options.selectorCounter != 0) {
				this.options.selectorCounter = 999;
			} else {
				this.options.selectorCounter = ((this.options.current / 8) - 1);
			}
			this.nextSelectors();
		}
		this.options.elements[oldcurrent].fade(0);
		this.options.elements[this.options.current].fade(1);
	},
	start: function() {
		if(!this.options.interval) {
			this.options.interval = this.fader.periodical(this.options.duration, this, 'no');
		}
	},
	stop: function() {
		if(this.options.interval) {
			this.options.interval = $clear(this.options.interval);
		}
	},
	setCurrent: function(current) {
		this.stop();
		this.fader(current);
		this.start.delay(600, this);
	},
	nextSelectors: function() {
		if(this.options.elementcount > ((this.options.selectorCounter + 1) * 8)) {
			this.options.selectorCounter++;
			var scrollToX = this.options.selectorCounter * this.options.selectorWrapper.getSize().x;
			//this.options.selectorWrapper.scrollTo(scrollToX, 0);
			if(!this.options.selectorScroller) {
				this.options.selectorScroller = new Fx.Scroll(this.options.selectorWrapper, {});
			}
			this.options.selectorScroller.start(scrollToX);
			if(this.options.current < ((this.options.selectorCounter + 1) * 8)) {
				$('image_switch_last').getFirst().removeClass('active');
			}
		} else {
			this.options.selectorCounter = 0;
			this.options.selectorScroller.start(0,0);
			if(this.options.current < 8) {
				$('image_switch_last').getFirst().removeClass('active');
			}
		}
	}
});

function ce_slideshow(container, type, length) {
	var length = length ? length : 4000 ;
	var elements = container.getElements(type);
	var elementcount = elements.length - 1;
	var visible = 0;
	elements.fade('hide');
	elements[visible].fade('show');
	
	var fader = (function(){
		var oldvisible = visible;
		if(visible == elementcount) {
			visible = 0;
		} else {
			visible = visible + 1;
		}
		elements[oldvisible].fade(0);
		elements[visible].fade(1);
	}).delay(length);
}