Bug with image slider
<p>My company had a website created by a design agency. They use a custom CMS, which makes it very difficult to get into the raw code of the site. I've been trying to catch a particular bug with our image slider.</p>

<p><a href="http://informedfamilies.org/" rel="nofollow">http://informedfamilies.org/</a></p>

<p>When you click on the navigation buttons in the slider ("1,2,3,4,5"), the slide switches to the appropriate image, but only the first time. If you click another button a second time, the slider doesn't change. The shadow below the image seems to get darker, so I'm assuming the images are simply not going away, and simply stacking under the main image.</p>

<p>Any help fixing this issue would be greatly appreciated.</p>

<p>Relevant code:</p>

<pre><code>$('#home_features .listeditem').wrapAll('&lt;div id="fade" /&gt;');
$('#fade').css('background', 'transparent');

var featureCt = $('#fade .listeditem').length;
if (featureCt &gt; 1) {
    $('#home_features').each(function() {
        var controlDiv = $('&lt;div /&gt;').attr('id', 'switcher');
        for (var i = 1; i &lt;= featureCt; i++) {
            var control = $('&lt;a href="#" class="selector" id="s' + i + '"&gt;' + i + '&lt;/a&gt;');
            if (i == 1) control.addClass('selected first');
            if (i == featureCt) control.addClass('last');
            controlDiv.append(control);
        }
        $(this).append(controlDiv);
        controlDiv.append('&lt;a href="#" class="selector" id="stop"&gt;||&lt;/a&gt;');
        controlDiv.append('&lt;a href="#" class="selector" id="start" style="display: none;"&gt;&amp;#9654;&lt;/a&gt;');
    });
}
$("#fade").innerfade({
    speed: 2000,
    timeout: 5000,
    containerheight: 440,
    tracker: "switcher",
    trackerclass: "selected",
    repeat: 1
});    
$(".selector").click(function() {
    if (this.id == "stop" || this.id == "start") {
        return;
    }

    if($("#fade").data("timer")) {
        clearTimeout($("#fade").data("timer"));
        $("#fade").removeData("timer");
        $("#stop").hide();
        $("#start").show();
    }

    var id = Number(this.id.substr(1));
    $(".selector").removeClass("selected");
    $(this).addClass("selected");

    $("#fade&gt;div:visible").fadeOut(1);
    $("#fade&gt;div.item" + id).fadeIn(1, function() {
        $('body').removeMatchedClasses({ pattern: /^slide/ });
        $('body').addClass('slide' + (id - 1));
    });

    var num = $("#fade").data("num_elements");
    if (id &lt; num) {
        $("#fade").data("next", id);
    } else {
        $("#fade").data("next", 0);
    }
    return false;
});
$("#stop").click(function() {
    clearTimeout($("#fade").data("timer"));
    $("#fade").removeData("timer");
    $("#stop").hide();
    $("#start").show();
    return false;
});
$("#start").click(function() {
    $("#start").hide();
    $("#stop").show();
    $(".selector").removeClass("selected");
    $("#fade").innerfade({
        speed: 2000,
        timeout: 10000,
        containerheight: 440,
        tracker: "switcher",
        trackerclass: "selected"
    });
    var id = $("#fade").data("next");
    $("#s" + id).addClass("selected");
    return false;
});
</code></pre>
