// Einrichten, dass man nicht auf einen "aktivierten" Menüpunkt klicken kann und er neu lädt!
function stop_observing(content) {
	content.stopObserving('click');
}
function start_observing(content) {
		
		var name = content.identify();
		
		var overallWidth = 650; // abhängig vom übergeordneten Container!
		
		var standartWidth = overallWidth / (content.siblings().size()+1);
		var minWidth = overallWidth * 0.25 / content.siblings().size();
		var maxWidth = overallWidth * 0.75;
		
		var standartBackgroundOffset = content.previousSiblings().size() * standartWidth;
		var maxBackgroundOffset = content.previousSiblings().size() * minWidth;
		var maxVisibility = 1.0;
		
		content.observe('click', function(event) {
			
			new Effect.BlindDown($('content_' + name), {
				delay: 0.8,
				duration: 0.4
			});
			
			var numPreviousSiblings = this.previousSiblings().size();
			
			this.siblings().each(function(sibling) {
				var offset;
				if(sibling.previousSiblings().size() < numPreviousSiblings) {
					offset = minWidth * sibling.previousSiblings().size();
				}
				else {
					offset = (sibling.previousSiblings().size()-1) * minWidth + maxWidth;
				}
				if($('content_' + sibling.identify()).visible()) {
					new Effect.BlindUp($('content_' + sibling.identify()) , {
						duration: 0.4
					});
				}	
				new Effect.Fade(sibling.descendants()[1], {
					from: maxVisibility,
					to: 0.0,
					duration: 0.4
				});
				new Effect.Morph(sibling, {
					style: 'width: ' + minWidth + 'px; background-position: -' + offset + 'px top',
					duration: 0.4,
					delay: 0.4
				});
				
			});
			
			new Effect.Morph(this, {
				style: 'width: ' + maxWidth + 'px; background-position: -' + maxBackgroundOffset + 'px top',
				duration: 0.4,
				delay: 0.4
			});
			
			new Effect.Appear(this.descendants()[1], {
				from: 0.0,
				to: maxVisibility,
				delay: 0.8
			});
			
			$$('.content').each(function(content) {stop_observing(content)});
			
			this.siblings().each(function(content) {start_observing(content)})
				
		}); // observe click
	
}

document.observe('dom:loaded', function() {
	
	$$('.content').each(function(content) {start_observing(content)});
	$$('.content').each(function(content) {
		var name = content.identify();
		
		var overallWidth = 650; // abhängig vom übergeordneten Container!
		
		var standartWidth = overallWidth / (content.siblings().size()+1);
		var minWidth = overallWidth * 0.25 / content.siblings().size();
		var maxWidth = overallWidth * 0.75;
		
		var standartBackgroundOffset = content.previousSiblings().size() * standartWidth;
		var maxBackgroundOffset = content.previousSiblings().size() * minWidth;
		
		content.setStyle('width: ' + standartWidth + 'px; background-position: -' + standartBackgroundOffset + 'px top');
	});
	$('flashplayer').setStyle('height: 0;');
	
	$$('#extraContent div').each(function(div) {
		div.hide();
	});
	
	$$('.inner div').each(function(inner) {
		inner.hide();
	});
	
	$('musiclink').observe('click', function(event) {
		if($('player').getHeight() != 0) {
			/* new Effect.Morph('player', {
				style: 'height: 0;'
			}); */
			new Effect.Morph('flashplayer', {
				style: 'height: 0;'
			});
		} else {
			new Effect.Morph('flashplayer', {
				style: 'height: 100px;'
			});
		}
	});
	
}); // document observe