$(function(){
	// activate a dt
	$("#overview").delegate(".info-col","activateTab",function() {
		if (!$(this).hasClass("curCol")) {

			// make this the current column
			$(this).addClass("curCol");

			// just do it
			//$(this).css("width","363px");
			// animate
			$(this).clearQueue();
			$(this).animate(
				{width: 363},
//				{duration: 300}
				{duration: 500}
	        )

			// shrink the other columns
			var otherWraps = $("#overview .info-col").not(this);
			otherWraps.removeClass("curCol");

			// just do it
			//otherWraps.css("width","200px");
			// animate
			otherWraps.clearQueue();
			otherWraps.animate(
	            {width: 200},
//				{duration: 285}
				{duration: 500}

	        )

			// get this description
			var description = $(this).find("dd");

			// show
			description.clearQueue();
			description.show();
			description.animate(
	            {opacity: "1"},
				{duration: 500}
	        );


			// get other descriptions
			var otherDescriptions = otherWraps.find("dd");

			// hide
			otherDescriptions.clearQueue();
			otherDescriptions.hide();
			otherDescriptions.animate(
				{opacity: "0"},
				{duration: 10}
			);
		}
	});


	// remove javascript class
	$("#overview").removeClass("noJavascript");

	// activate the first <div>
	$('#overview .active:first').trigger("activateTab");


	// bind mouseovers to the div's
	$("#overview .info-col").live("mouseover",function(event) {
		event.stopPropagation();
		$(this).trigger("activateTab");
	});


	// mouseleave op het geheel -> naar actieve tab
	$("#overview").live("mouseleave",function(event) {
		event.stopPropagation();
		$('#overview .active').trigger("activateTab");
	});
});