window.addEvent("domready", function() {
	var details = [];
	$$('.item .details').each(function(d, i) {
		details[i] = new Fx.Slide(d.getProperty('id'));
		details[i].hide();
	});
	
	var szNormal = 122, szSmall  = 112, szFull   = 162;

	var kwicks = $$("#items .item");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
	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]};
				}
			});
			
			details.each(function(d, i) {
				if (d.element.getProperty('id') == (kwick.getProperty('id') + '_details')) {
					d.show();
				} else {
					d.hide();
				}
			});
			
			fx.start(o);
		});
	});

	$("items").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]};
		});
		details.each(function(d, i) {
			d.hide();
		});
		fx.start(o);
	});
});