document.observe('dom:loaded', function() {
	$$('table.recr td.item').invoke('observe', 'mouseover', function(event) {
		var element = event.findElement('td');
		element.addClassName('over');
	}).invoke('observe', 'mouseout', function(event) {
		var element = event.findElement('td');
		element.removeClassName('over');
	}).invoke('observe', 'click', function(event) {
		var element = event.findElement('td');

		if (element.hasClassName('active')) {
			return;
		}

		element.addClassName('active');

		new Effect.Parallel([
			Effect.BlindUp($$('#zoomable div.item.active').first()),
			Effect.BlindDown($('container_' + element.id.replace(/^trigger_/, '')))
		], {
			duration: .666,
			afterFinish: function() {
				$$('#zoomable div.item.active').invoke('removeClassName', 'active');
				$$('table.recr td.item.active').invoke('removeClassName', 'active');

				$('container_' + element.id.replace(/^trigger_/, '')).addClassName('active');
				element.addClassName('active');
			}
		});
	});
});