var Header = Class.create({
	initialize: function(els) {
		this.elements	= els.reverse();
		this.elements[0].observe('mouseover', this.colorBlind.bind(this));
	},
	colorBlind: function() {
		this.elements[0].stopObserving('mouseover');
		this.elements.each((function(element, index) {
			if (index < (this.elements.length - 1))
				new Effect.Opacity(element, {
					duration: Options.animation.duration * 3,
					from: 1, to: 0,
					queue: { scope: 'header', position: 'end' },
					afterFinish: (function() {
						if (index == (this.elements.length - 2))
							this.colorReset();
					}).bind(this)
				});
		}).bind(this));
	},
	colorReset: function(autoplay) {
		this.elements.invoke('setOpacity', 1);
		//this.colorBlind().bind(this);
		this.elements[0].observe('mouseover', this.colorBlind.bind(this));
	}
});

var PhotoShow = Class.create({
	initialize: function(id) {
		this.list		= $(id);
		this.list.imgs	= this.list.select('img').invoke('up', 0);
		this.list.insert({ after: '<img class="image" id="image_' + id + '" src="" alt="" />' });
		this.image		= $('image_' + id);
		this.image.insert({ after: '<div class="title" id="title_' + id + '"></div>' });
		this.title		= $('title_' + id);
		this.showImage(this.list.imgs.first());
	},
	showImage: function(el) {
		this.title.update('wird geladen.');
		this.list.imgs.invoke('down', 0).invoke('removeClassName', 'active');
		el.down(0).addClassName('active');
		
		new Effect.Fade(this.image, {
			duration: Options.animation.duration,
			afterFinish: (function() {
				var imgcache		= new Image();
					imgcache.onload	= (function() {
						this.image.src	= el.href;
						this.image.alt	= el.down(0).alt;
						this.image.src	= el.href;
						this.title.update(this.image.alt.replace(/\n|\r/g, '<br />'));
						new Effect.Appear(this.image, {
							duration: Options.animation.duration * 2
						});
					}).bind(this);
					imgcache.src	= el.href;
			}).bind(this)
		});
	},
	utf8_decode: function(str_data) {
		var tmp_arr = [], i = 0, ac = 0, c1 = 0, c2 = 0, c3 = 0;
		str_data += '';

		while ( i < str_data.length ) {
			c1 = str_data.charCodeAt(i);
			if (c1 < 128) {
				tmp_arr[ac++] = String.fromCharCode(c1);
				i++;
			} else if ((c1 > 191) && (c1 < 224)) {
				c2 = str_data.charCodeAt(i+1);
				tmp_arr[ac++] = String.fromCharCode(((c1 & 31) << 6) | (c2 & 63));
				i += 2;
			} else {
				c2 = str_data.charCodeAt(i+1);
				c3 = str_data.charCodeAt(i+2);
				tmp_arr[ac++] = String.fromCharCode(((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
				i += 3;
			}
		}
		return tmp_arr.join('');
	}
});

var Item = Class.create({
	initialize: function(el) {
		this.element				= el;
		if (this.element.link		= this.element.down('a')) {
			var pathname			= this.element.link.pathname.substr(0,1) == "#"
									? this.element.link.pathname.substr(1)
									: this.element.link.pathname;
			var hash				= this.element.link.hash.substr(0,1) == "#"
									? this.element.link.hash.substr(1)
									: this.element.link.hash;
			this.element.link.rel	= (!hash.empty())
									? hash
									: pathname;
			this.element.link.removeAttribute('href');
			this.element.link.observe('click', this.click);
		}
	},
	activate: function() {
		if (this.element.link)
			this.element.link.addClassName('active');
	},
	deactivate: function() {
		if (this.element.link)
			this.element.link.removeClassName('active');
	}
});

var MenuItem = Class.create(Item, {
	initialize: function($super, el) {
		$super(el);
	},
	click: function() {
		if ($('container').visible())
			new Effect.BlindUp('container', {
				duration: Options.animation.duration * 2,
				afterFinish: (function() {
					if (!this.hasClassName('active'))
						window.location.href	= this.rel;
					else window.location.href	= "/";
				}).bind(this)
			});
	}
});

var ArticleItem = Class.create(Item, {
	initialize: function($super, el) {
		$super(el);
	},
	click: function() {
		this.up(0).siblings().invoke('down', 0).invoke('removeClassName', 'active');
		this.addClassName('active');
		var content		= $(this.rel);
		var container	= $('container');
		if (container.scrollTop != content.offsetTop)
			new Effect.Parallel([
				new Effect.Morph(container, {
					sync: true,
					style: 'height: ' + content.getHeight() + 'px'
				}),
				new Effect.Tween(container, container.scrollTop, content.offsetTop, { sync: true }, "scrollTop")
			], { duration: Options.animation.duration * 2 });
	}
});

var Page = Class.create({
	initialize: function() {
		this.elements						= new Object();
		if (Options.load.header)
			this.elements.header			= new Header($$('.header'));
		if (Options.load.container) {
			this.elements.container				= $('container').removeClassName('hidden');
			this.elements.container.setStyle({
				height: (this.elements.container.down(0) ? this.elements.container.down(0).getHeight() : 500) + 'px'
			});
			this.elements.container.hide();
			this.elements.container.scrollTop	= 0;
			
			this.elements.menuitems				= $$('.menu');
			this.elements.menuitems.push($$('.logo').first());
			this.elements.menuitems.each((function(element, index) {
				if (typeof element == "object")
					this.elements.menuitems[index] = new MenuItem(element);
			}).bind(this));

			this.elements.artitems = $$('.mod_articleList ul li') || 0;
			if (this.elements.artitems.length > 0) {
				this.elements.artitems.each((function(element, index) {
					this.elements.artitems[index]	= new ArticleItem(element);
				}).bind(this));
				this.elements.artitems.first().activate();
			}

			this.elements.gallitems = $$('.mod_photoshow .thumb a.tnlink') || 0;
			if (this.elements.gallitems.length > 0)
				this.elements.gallitems.each(function(element, index) {
					element.title = '';
				});

			new Effect.BlindDown(this.elements.container, {
				duration: Options.animation.duration * 2,
				afterFinish: (function() {
					this.elements.container.scrollTop	= 0;
				}).bind(this)
			});
		}
	}
});

window.addEvent = function(ev, callback) {
	Event.observe(window, 'load', callback.bind(this));
}