Event.observe(window, "load", function() {
	var $elems = $$("#carousel li");
	var $container = $$(".carousel-content-container-4")[0];
	//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) {
		var $containers = $$(".carousel-content-container-4 > div");
		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];
			var $content = new Element("div", { className: "container-4" }).hide();
			$container.insert(
				$content
			);
			new Ajax.Updater($content, $elem.select("a")[0].href, { method: "get" });
			
			$elem.observe("click", function(evt) {
				switchTo($elem.cc);
				Event.stop(evt);
			}).setStyle({
				cursor: "pointer"
			});
		}
	});
	
	switchTo(0);
});