Event.observe(window, "load", function() {
	var $elems = $$("#carousel li");
	var $containers = $$(".carousel-container-4 .container-4");

	function hideAll($elems) {
		$elems.each(function($elem) {
			$elem.hide();
		})
	}
	
	function clearAll() {
		$elems.each(function($elem) {
			$elem.removeClassName("over");
			$elem.removeClassName("active");
		})
	}
	
	function switchTo(idx) {
		hideAll($containers);
		if ($containers[idx]) {
			$containers[idx].show();
		}
		clearAll($elems);
		$$("#carousel .cc-" + idx)[0].addClassName("active");
	}
	
	$elems.each(function($elem, idx) {
		$elem.observe("mouseover", function() {
			this.addClassName("over");
		}).observe("mouseout", function() {
			this.removeClassName("over");
		});
		if ($elem.className) {
			$elem.cc = $elem.className.split("-")[1];
			$elem.observe("click", function() {
				switchTo($elem.cc);
			}).setStyle({
				cursor: "pointer"
			});
		}
	});
	
	switchTo(0);
});