window.addEvent('domready', function() {
	var content1 = $('content1').setStyle('display','block');
	var content2 = $('content2').setStyle('display','none');
	var content3 = $('content3').setStyle('display','none');
	var content4 = $('content4').setStyle('display','none');
	var content5 = $('content5').setStyle('display','none');
	
	// There are different ways to add a fading opacity effect to an element click
	
	// Short version
	$('menu1').addEvent('click', function(e) {
		// You often will need to stop propagation of the event
		content1.setStyle('display','block');
		content2.setStyle('display','none');
		content3.setStyle('display','none');
		content4.setStyle('display','none');
		content5.setStyle('display','none');
		$('menu1').removeClass('current');
		$('menu2').removeClass('current');
		$('menu3').removeClass('current');
		$('menu4').removeClass('current');
		$('menu5').removeClass('current');
		$('menu1').addClass('current');
		new Fx.Style(content1, 'opacity', {duration:200}).start(1);
		new Fx.Style(content2, 'opacity', {duration:200}).start(0);
		new Fx.Style(content3, 'opacity', {duration:200}).start(0);
		new Fx.Style(content4, 'opacity', {duration:200}).start(0);
		new Fx.Style(content5, 'opacity', {duration:200}).start(0);
//		e.stop();
	});

	$('menu2').addEvent('click', function(e) {
		// You often will need to stop propagation of the event
		content1.setStyle('display','none');
		content2.setStyle('display','block');
		content3.setStyle('display','none');
		content4.setStyle('display','none');
		content5.setStyle('display','none');
		$('menu1').removeClass('current');
		$('menu2').removeClass('current');
		$('menu3').removeClass('current');
		$('menu4').removeClass('current');
		$('menu5').removeClass('current');
		$('menu2').addClass('current');
		new Fx.Style(content1, 'opacity', {duration:200}).start(0);
		new Fx.Style(content2, 'opacity', {duration:200}).start(1);
		new Fx.Style(content3, 'opacity', {duration:200}).start(0);
		new Fx.Style(content4, 'opacity', {duration:200}).start(0);
		new Fx.Style(content5, 'opacity', {duration:200}).start(0);
//		e.stop();
	});

	$('menu3').addEvent('click', function(e) {
		// You often will need to stop propagation of the event
		content1.setStyle('display','none');
		content2.setStyle('display','none');
		content3.setStyle('display','block');
		content4.setStyle('display','none');
		content5.setStyle('display','none');
		new Fx.Style(content1, 'opacity', {duration:200}).start(0);
		new Fx.Style(content2, 'opacity', {duration:200}).start(0);
		new Fx.Style(content3, 'opacity', {duration:200}).start(1);
		new Fx.Style(content4, 'opacity', {duration:200}).start(0);
		new Fx.Style(content5, 'opacity', {duration:200}).start(0);
		$('menu1').removeClass('current');
		$('menu2').removeClass('current');
		$('menu3').removeClass('current');
		$('menu4').removeClass('current');
		$('menu5').removeClass('current');
		$('menu3').addClass('current');
//		e.stop();
	});
	
	$('menu4').addEvent('click', function(e) {
		// You often will need to stop propagation of the event
		content1.setStyle('display','none');
		content2.setStyle('display','none');
		content3.setStyle('display','none');
		content4.setStyle('display','block');
		content5.setStyle('display','none');
		new Fx.Style(content1, 'opacity', {duration:200}).start(0);
		new Fx.Style(content2, 'opacity', {duration:200}).start(0);
		new Fx.Style(content3, 'opacity', {duration:200}).start(0);
		new Fx.Style(content4, 'opacity', {duration:200}).start(1);
		new Fx.Style(content5, 'opacity', {duration:200}).start(0);
		$('menu1').removeClass('current');
		$('menu2').removeClass('current');
		$('menu3').removeClass('current');
		$('menu4').removeClass('current');
		$('menu5').removeClass('current');
		$('menu4').addClass('current');
//		e.stop();
	});
	
	$('menu5').addEvent('click', function(e) {
		// You often will need to stop propagation of the event
		content1.setStyle('display','none');
		content2.setStyle('display','none');
		content3.setStyle('display','none');
		content4.setStyle('display','none');
		content5.setStyle('display','block');
		new Fx.Style(content1, 'opacity', {duration:200}).start(0);
		new Fx.Style(content2, 'opacity', {duration:200}).start(0);
		new Fx.Style(content3, 'opacity', {duration:200}).start(0);
		new Fx.Style(content4, 'opacity', {duration:200}).start(0);
		new Fx.Style(content5, 'opacity', {duration:200}).start(1);
		$('menu1').removeClass('current');
		$('menu2').removeClass('current');
		$('menu3').removeClass('current');
		$('menu4').removeClass('current');
		$('menu5').removeClass('current');
		$('menu5').addClass('current');
//		e.stop();
	});
	
	var szNormal = 195, szSmall  = 165, szFull   = 315;
	var kwicks = $$('#kwick .kwick');
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 200, transition: Fx.Transitions.quadOut});
	kwicks.each(function(kwick, i){
		kwick.addEvent('mouseenter', function(e){
			var obj = {};
			obj[i] = {
				'width': [kwick.getStyle('width').toInt(), szFull]
			};
			kwicks.each(function(other, j){
				if (other != kwick){
					var w = other.getStyle('width').toInt();
					if (w != szSmall) obj[j] = {'width': [w, szSmall]};
				}
			});
			fx.start(obj);
		});
	});
	
	$('kwick').addEvent('mouseleave', function(e){
		var obj = {};
		kwicks.each(function(other, j){
			obj[j] = {'width': [other.getStyle('width').toInt(), szNormal]};
		});
		fx.start(obj);
	});

});