var clicked = false;
var num = 0;

$(document).ready(function() {
    setTimeout('timedFade()', 11000);
    $('.notSelected').live('click', function() {
        clicked = true;
        if (!$(this).parent().children().is(':animated')) {
            num = this.id.split("-")[1];
            fadeTransitionById();
        }
    });
});

function timedFade() {
    if ($('#FadeContainer').children().length < 3) {
        return;  // want to short circuit fader if only one element.
    }
    
    if (num == $('#FadeContainer').children().length - 2) { // FadeContainer contains fade elements & index.. don't count index
        num = 0;
    } else {
        num = parseInt(num) + 1;
    };
    if (clicked == false) {
        fadeTransition();
        setTimeout('timedFade()', 11000);
    }
}
function fadeTransition() {
    $('.shownImage').fadeOut(2000, function () { });
    $('#FadeContainer').children().eq(num).fadeIn(2000, function () { });
    $('#FadeContainer').children().eq(num).addClass("shownImage");
    $('.selected').removeClass("selected").addClass("notSelected");
    $('#button-holder').children().eq(num).removeClass("notSelected").addClass("selected");
}
function fadeTransitionById() {
    $('.shownImage').fadeOut(2000, function () { });
    $('#HomeCarousel-' + num).fadeIn(2000, function () { });
    $('#HomeCarousel-' + num).addClass("shownImage");
    $('.selected').removeClass("selected").addClass("notSelected");
    $('#button-' + num).removeClass("notSelected").addClass("selected");
}