window.addEvent('domready', function(){
	var szNormal = 100, szSmall  = 100, szFull   = 120;
	var szhNormal = 0, szhSmall  = 0, szhFull   = 50;
	var lastId=99;
	var kwicks = $$("#kwicks .kwick");
	var cat_container = $$("#cat_container .cat");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
	var fx2 = new Fx.Elements(cat_container, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
	cat_container.each(function(other, j) {
					other.setStyle('opacity', 0);
					other.setStyle('display','');
					other.setStyle('width', window.getWidth()-80);
				});
	kwicks.each(function(kwick, i) {
		kwick.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
			kwicks.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					if(w != szSmall) o[j] = {width: [w, szSmall]};
				}
			});
			fx.start(o);
		});
		kwick.addEvent("click", function(event) {
			var o = {};
				if(lastId<99){
					o[lastId] = {opacity: [1,0]}
					fx2.start(o);
				}
				//ttt.style.display=''
				o[i] = {height: [0, szhFull],opacity: [0,1]}
				
				fx2.start(o);
				lastId=i;
		});
	});
	$("kwicks").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
		});
		fx.start(o);
	})
	$$("#kwicks .selectedMenu").fireEvent('click');
	window.addEvent('resize', function(event) {
		cat_container.each(function(other, j) {
			other.setStyle('width', window.getWidth()-80);
		});
	});
	
});