var featureFadeDelay = 8000;
var featureRotateTimeout = null;

function rotateFeatures(nextIndex) {
    clearTimeout(featureRotateTimeout);
    var list_items = $$('#features .feature');
    
    if (list_items.length == 1) {
            list_items[0].setAttribute('style', '');
    } else if (list_items.length < 1) {
            return false;
    } else {
            if (typeof(nextIndex) != 'undefined') {
            nextFeature(nextIndex)
        } else {
            nextFeature();
        }
        featureRotateTimeout = setTimeout(function () { rotateFeatures(); }, featureFadeDelay);
    }
}

function nextFeature(nextIndex) {
    var list_items = $$('#features .feature');
    var currentIndex = null;
    
    // first, determine currentIndex and nextIndex
    for (var i = 0; i < list_items.length; i++) {
        if (list_items[i].className == 'feature selected') {
            currentIndex = i;
        }
    }
    if (typeof(nextIndex) == 'undefined' || nextIndex == null) {
        nextIndex = currentIndex + 1;
        if (nextIndex > (list_items.length-1)) nextIndex = 0;
    }
    
    // stop now if there's nothing to do
    if (currentIndex == nextIndex) return false;
    
    // hide all elements that aren't current, and reset classes
    for (var i = 0; i < list_items.length; i++) {
        if (i != currentIndex) {
            Element.hide(list_items[i]);
        }
        
        list_items[i].className = 'feature';
    }
    
    // do the transition in css first
    list_items[nextIndex].className = 'feature selected';
    
    // then with js effects
    Effect.Appear(list_items[nextIndex], { duration: 0.4 })
    if (currentIndex != null) Effect.Fade(list_items[currentIndex], { duration: 0.4 })
}