var featureFadeDelay = 8000;
var featureRotateTimeout = null;

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

function nextFeature(nextIndex) {
    var list_items = $$('#features .feature');
    var nav_items = $$('#features .nav');
    
    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 (currentIndex == null) {
        currentIndex = 0;
    }
    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';
        nav_items[i].className = 'nav';
    }
    
    // do the transition in css first
    list_items[nextIndex].className = 'feature selected';
    nav_items[nextIndex].className = 'nav selected';
    
    // then with js effects
    Effect.Appear(list_items[nextIndex], { duration: 0.4 })
}

function prevFeature(feature_id) {
    var list_items = $$('#features .feature');
    var nav_items = $$('#features .nav');
    
    var currentIndex = null;
    
    if (typeof(feature_id) == 'undefined') {
        nextIndex = feature_id
    } else {
        var nextIndex = 0;

        // map feature ID to nextIndex
        for (var i = 0; i < list_items.length; i++) {
            temp = list_items[i].getAttribute('id').split('_');
            id = temp[temp.length - 1];
            if (id == feature_id) {
                nextIndex = i;
                break;
            }
        }
    }

    // hide all selected
    for (var i = 0; i < list_items.length; i++) {
        if (list_items[i].className == 'feature selected') {
            if (!currentIndex) currentIndex = i;
            if (typeof(nextIndex) == 'undefined' || i != nextIndex) {
                Effect.Fade(list_items[i], { duration: 0.3 });
            }
        }

        list_items[i].className = 'feature';
        nav_items[i].className = 'nav';
    }

    if (currentIndex == null) {
        currentIndex = list_items.length - 1;
    }
    if (typeof(nextIndex) == 'undefined') {
        nextIndex = currentIndex + 1;
        if (nextIndex > (list_items.length-1)) nextIndex = 0;
    }

    list_items[nextIndex].className = 'feature selected';
    nav_items[nextIndex].className = 'nav selected';

    Effect.Appear(list_items[nextIndex], { duration: 0.4 })
}