$(function() {
    /**
	 *  Can someone please put this in the CSS??
	 */
    $("#featured div[id^=fragment]").css("width", "1000px");
    $("#slider li").click(function() {
        var $dt = $(this).find("dt[class^=slider]"),
        id = $dt.attr("class").replace(/[^0-9]+/, "");
        if ($(this).hasClass("curCol")) {
            return;
        }
        /**
		 * If someone adds a width property to .curCol in the CSS
		 * then you could achieve the same with $(this).addClass("curCol", "normal");
		 */
        $(this).animate({
            width: 263
        }).addClass("curCol");
        $(this).siblings("li").animate({
            width: 135
        }).removeClass("curCol");
        $("#featured div[id^=fragment]").hide().children("div").hide();
        $("#featured #fragment-" + id).show();
        animate_sibling.apply($("#featured #fragment-" + id).children("div").get(0));
    });
    $("#slider li:first").click();
});
function animate_sibling() {
    $(this).slideDown(500,
    function() {
        if ($(this).siblings("div:hidden").length) {
            animate_sibling.apply($(this).siblings("div:hidden").get(0));
        }
    });
}